/* The generation dock (public/media-dock.js): a frame per generation at the bottom right, over every
   surface, minimising to a pill like StudioLab's render. Dark by default, paper in light mode. */
#sary-media-dock, #sary-media-pill, #sary-media-view {
  --smd-bg: rgba(12, 12, 18, .92); --smd-raised: rgba(255, 255, 255, .06); --smd-line: rgba(255, 255, 255, .14);
  --smd-text: #f4f4f7; --smd-muted: #a1a1b5; --smd-accent: var(--theme-primary, #a78bfa); --smd-danger: #fb7185;
  font: 500 13px/1.35 Inter, system-ui, sans-serif; color: var(--smd-text); box-sizing: border-box;
}
html.light-mode :is(#sary-media-dock, #sary-media-pill, #sary-media-view) {
  --smd-bg: rgba(255, 255, 255, .95); --smd-raised: rgba(15, 23, 42, .05); --smd-line: rgba(15, 23, 42, .14);
  --smd-text: #0b0b12; --smd-muted: #5b5f6b; --smd-danger: #be123c;
}
html[data-glass] :is(#sary-media-dock, #sary-media-pill) { --smd-bg: var(--lg-modal, rgba(12, 12, 18, .92)); --smd-line: var(--lg-line, rgba(255, 255, 255, .14)); --smd-text: var(--lg-text, #f4f4f7); --smd-muted: var(--lg-muted, #a1a1b5); --smd-accent: var(--lg-accent, #a78bfa); }
#sary-media-dock *, #sary-media-pill *, #sary-media-view * { box-sizing: border-box; }
#sary-media-dock[hidden], #sary-media-pill[hidden] { display: none !important; }

#sary-media-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; width: min(340px, calc(100vw - 32px));
  max-height: min(74vh, 760px); display: flex; flex-direction: column; border: 1px solid var(--smd-line);
  border-radius: 18px; background: var(--smd-bg); box-shadow: 0 22px 60px rgba(0, 0, 0, .42); overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: smd-in .28s ease-out;
}
@keyframes smd-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
#sary-media-dock .smd-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--smd-line); }
#sary-media-dock .smd-head b { font-weight: 800; letter-spacing: .01em; }
#sary-media-dock .smd-count { color: var(--smd-muted); font-size: 12px; flex: 1; }
#sary-media-dock .smd-min { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--smd-line); background: var(--smd-raised); color: inherit; cursor: pointer; display: grid; place-items: center; }
#sary-media-dock .smd-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; min-height: 0; }

#sary-media-dock .smd-card { flex: none; border: 1px solid var(--smd-line); border-radius: 14px; background: var(--smd-raised); overflow: hidden; }
#sary-media-dock .smd-frame { position: relative; width: 100%; max-height: 240px; background: #07070b; overflow: hidden; cursor: default; }
#sary-media-dock .smd-card[data-status="done"] .smd-frame { cursor: zoom-in; }
#sary-media-dock .smd-frame > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
#sary-media-dock .smd-card:is([data-status="failed"], [data-status="stopped"]) .smd-frame { display: none; }
#sary-media-dock .smd-meta { padding: 9px 11px 10px; display: grid; gap: 6px; }
#sary-media-dock .smd-line { display: flex; align-items: center; gap: 7px; font-weight: 700; }
#sary-media-dock .smd-line i { color: var(--smd-accent); }
#sary-media-dock .smd-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sary-media-dock .smd-pct { font-variant-numeric: tabular-nums; color: var(--smd-accent); }
#sary-media-dock .smd-bar { height: 4px; border-radius: 99px; background: var(--smd-line); overflow: hidden; }
#sary-media-dock .smd-bar > i { display: block; height: 100%; width: 0; background: var(--smd-accent); transition: width .5s linear; }
#sary-media-dock .smd-card:not([data-status="running"]) .smd-bar { display: none; }
#sary-media-dock .smd-prompt { margin: 0; color: var(--smd-muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#sary-media-dock .smd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#sary-media-dock .smd-err { margin: 0; flex: 1 1 100%; color: var(--smd-danger); font-size: 12px; }
:is(#sary-media-dock, #sary-media-view) .smd-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--smd-line); background: var(--smd-raised); color: var(--smd-text); font: 700 12px/1 inherit; cursor: pointer;
}
:is(#sary-media-dock, #sary-media-view) .smd-btn.is-main { background: var(--smd-accent); border-color: transparent; color: #fff; }
#sary-media-dock .smd-x { margin-left: auto; width: 32px; padding: 0; justify-content: center; font-size: 17px; }
#sary-media-dock .smd-sq { width: 8px; height: 8px; border-radius: 2px; background: currentColor; display: inline-block; }

#sary-media-pill {
  position: fixed; right: 22px; bottom: 22px; z-index: 2147483000; display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 999px; border: 1px solid var(--smd-line);
  background: var(--smd-bg); color: var(--smd-text); font-weight: 700; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); cursor: pointer;
}
#sary-media-pill .smd-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#sary-media-pill .smd-pill-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
#sary-media-pill.is-running .smd-pill-dot { background: var(--smd-accent); animation: smd-pulse 1.2s ease-in-out infinite; }
@keyframes smd-pulse { 50% { opacity: .35; } }

#sary-media-view { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; padding: 16px; }
#sary-media-view .smv-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
#sary-media-view figure { position: relative; margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: grid; gap: 10px; }
#sary-media-view :is(img, video) { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 14px; object-fit: contain; background: #000; justify-self: center; }
#sary-media-view figcaption { display: flex; align-items: center; gap: 8px; color: #e5e7eb; }
#sary-media-view figcaption span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

@media (max-width: 560px) {
  #sary-media-dock { right: 16px; left: 16px; bottom: 16px; width: auto; max-height: 66vh; }
  #sary-media-pill { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { #sary-media-dock { animation: none; } #sary-media-pill.is-running .smd-pill-dot { animation: none; } }