/*
 * VideoGen editor styling.
 *
 * A chat-first shell in frosted glass: a sidebar and a main card float over a
 * soft mesh gradient, and every surface is translucent so the gradient reads
 * through. The accent is still the branding blue from models.Branding
 * (#0F6CBD), paired with violet for the gradient marks.
 *
 * The composer's internals -- tables, inspector fields, dialogs -- stay dense on
 * purpose. They pick up the glass tokens but keep their short rows and small
 * type, because that is where an operator spends hours.
 *
 * Anything that scrolls under something else (sticky headers, menus, dialogs)
 * uses the near-opaque --sticky/--solid tokens, not the glass ones, or the
 * content behind it bleeds through and becomes unreadable.
 */

:root {
  --accent: #0f6cbd;
  --accent-2: #7c5cff;
  --accent-soft: rgba(96, 140, 255, 0.16);
  --accent-line: rgba(110, 150, 255, 0.45);
  --accent-text: #8ab8ff;
  --accent-grad: linear-gradient(135deg, #3fa0ff 0%, #4f7bff 45%, #8b5cf6 100%);

  --ground: #07080f;
  --glass: rgba(20, 23, 40, 0.46);
  --glass-strong: rgba(24, 27, 46, 0.78);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-3: rgba(255, 255, 255, 0.08);
  --raised: rgba(255, 255, 255, 0.13);
  --field: rgba(0, 0, 0, 0.28);
  --sticky: rgba(24, 27, 44, 0.94);
  --solid: #161a2c;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --text: #f2f4fb;
  --muted: #b7bdd3;
  --dim: #7d84a0;

  --good: #3fb27f;
  --warn: #e0a33c;
  --bad: #e5644f;
  --bad-soft: rgba(229, 100, 79, 0.16);

  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --gap: 10px;

  --sidebar-width: 272px;
  --rail-width: 256px;
  --inspector-width: 380px;
  --pane-strip: 36px;
  --read-width: 780px;

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;

  --blur: blur(28px) saturate(160%);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);

  --boot-glow: #1a1c3a;
  --stage-well: #05060c;
  --canvas:
    radial-gradient(1100px 760px at -6% -10%, rgba(79, 91, 255, 0.34) 0%, transparent 58%),
    radial-gradient(900px 680px at 104% 4%, rgba(168, 85, 247, 0.28) 0%, transparent 58%),
    radial-gradient(1000px 760px at 62% 112%, rgba(14, 165, 233, 0.22) 0%, transparent 60%),
    var(--ground);

  color-scheme: dark;
}

/*
 * Light theme: the same glass over a pastel mesh. Toggled by app.js setting
 * `data-theme` on <html>, read before first paint by the inline script in
 * index.html so there is no flash.
 */
:root[data-theme="light"] {
  --accent-soft: rgba(79, 110, 255, 0.1);
  --accent-line: rgba(79, 110, 255, 0.35);
  --accent-text: #3b5bdb;

  --ground: #eef0fa;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --surface: rgba(255, 255, 255, 0.4);
  --surface-2: rgba(30, 41, 90, 0.035);
  --surface-3: rgba(30, 41, 90, 0.065);
  --raised: rgba(30, 41, 90, 0.1);
  --field: rgba(255, 255, 255, 0.78);
  --sticky: rgba(250, 251, 255, 0.95);
  --solid: #ffffff;

  --line: rgba(30, 41, 90, 0.09);
  --line-strong: rgba(30, 41, 90, 0.16);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --text: #141a33;
  --muted: #4a5272;
  --dim: #80879f;

  --bad-soft: rgba(229, 100, 79, 0.12);

  --shadow: 0 18px 48px rgba(40, 50, 110, 0.14);
  --shadow-sm: 0 6px 16px rgba(40, 50, 110, 0.1);

  --boot-glow: #dfe3ff;
  --stage-well: #0b1020;
  --canvas:
    radial-gradient(1100px 760px at -6% -10%, rgba(120, 140, 255, 0.35) 0%, transparent 58%),
    radial-gradient(900px 680px at 104% 4%, rgba(210, 160, 255, 0.34) 0%, transparent 58%),
    radial-gradient(1000px 760px at 62% 112%, rgba(120, 210, 255, 0.3) 0%, transparent 60%),
    var(--ground);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--canvas);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(184, 196, 217, 0.18);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(184, 196, 217, 0.3); background-clip: padding-box; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- boot ---- */

.boot, .login {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(1200px 700px at 50% 12%, var(--boot-glow) 0%, transparent 62%), var(--canvas);
  z-index: 90;
}

.boot-mark, .login-mark, .brand {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #7fc4ff 0%, var(--accent) 46%, #7a5cff 100%);
  box-shadow: 0 4px 14px rgba(15, 108, 189, 0.35);
  position: relative;
  flex: none;
}
.boot-mark { width: 56px; height: 56px; box-shadow: 0 8px 28px rgba(15, 108, 189, 0.4); }

.boot-mark::after, .login-mark::after, .brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center / 60% 60%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5l8 15 8-15' fill='none' stroke='white' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.92;
}

.boot-text { color: var(--muted); margin: 0; font-size: 13px; }
.boot.is-error .boot-text { color: var(--bad); max-width: 520px; text-align: center; }

.login-card {
  width: 340px;
  padding: 26px 24px 24px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.login-card .login-mark { align-self: center; }
.login-title { margin: 0; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: 0.2px; }
.login-sub { margin: -6px 0 6px; text-align: center; color: var(--dim); font-size: 12px; }
.login-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--bad-soft);
  color: #ffb7ab;
  font-size: 12px;
}

/* --------------------------------------------------------------- shell ---- */

/* Frosted glass: translucent fill, blur of whatever is behind, a hairline
   border and a one-pixel top highlight. Used by the sidebar, the main card and
   anything else that floats directly on the canvas. */
.glass, .sidebar, .main {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--highlight);
}

.app {
  height: 100%;
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
}

.icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.icon-btn:hover:not(:disabled) { background-color: var(--surface-3); color: var(--text); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn svg, .nav-item svg, .nav-new svg, .compose-send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon-btn-sm { width: 26px; height: 26px; border-radius: 8px; }
.icon-btn-sm svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------- sidebar ---- */

.sidebar {
  width: var(--sidebar-width);
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: margin-left 200ms ease, opacity 160ms ease;
}
.app.is-sidebar-collapsed .sidebar {
  margin-left: calc(-1 * var(--sidebar-width) - var(--gap));
  opacity: 0;
  pointer-events: none;
}

.sidebar-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 10px 16px;
}
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.1px; flex: 1; }

.nav-new {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 12px 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  box-shadow: var(--highlight);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.nav-new svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 7px;
  background: var(--accent-grad);
  stroke: #fff;
  stroke-width: 2.4;
}
.nav-new:hover { background: var(--raised); border-color: var(--accent-line); }
.nav-new:active { transform: scale(0.985); }

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.side-section { padding: 2px 0 4px; }
.side-section-row { display: flex; align-items: center; gap: 4px; padding-right: 4px; }
.side-section-row .side-section-head { flex: 1; }
.side-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 6px;
  border: none;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}
.side-section-head:hover { color: var(--text); }
.side-section-head .caret, .section-head .caret {
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 140ms ease;
  flex: none;
  opacity: 0.8;
}
.side-section-head[aria-expanded="true"] .caret { transform: rotate(90deg); }

.side-list { display: flex; flex-direction: column; gap: 1px; }
#chat-history { max-height: 36vh; overflow-y: auto; }
.side-empty { padding: 4px 10px 8px; color: var(--dim); font-size: 12px; }

.side-row, .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 6px 0 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background 110ms ease, color 110ms ease;
}
.side-row:hover, .nav-item:hover { background: var(--surface-3); color: var(--text); }
.side-row.is-active, .nav-item.is-active {
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--highlight);
}
.side-row-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-row-more {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.side-row:hover .side-row-more, .side-row.is-active .side-row-more,
.side-row-more:focus-visible, .side-row-more[aria-expanded="true"] { opacity: 1; }
.side-row-more:hover { background: var(--raised); color: var(--text); }
.side-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--dim);
  opacity: 0.6;
}
.side-row.is-active .side-dot { background: var(--accent-grad); opacity: 1; }
.side-pin {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-text);
  margin-left: -2px;
}

.side-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 6px 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.nav-item svg { color: var(--dim); }
.nav-item:hover svg, .nav-item.is-active svg { color: var(--accent-text); }
.nav-badge {
  margin-left: auto;
  margin-right: 4px;
  font-size: 11px;
  color: var(--dim);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 0 7px;
  line-height: 18px;
}
.nav-badge:empty { display: none; }
.nav-badge.is-live { background: var(--accent-soft); color: var(--accent-text); }

.sidebar-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line);
}
.sidebar-status { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.sidebar-status:has(.save-indicator:is(.is-idle, :empty)):has(.job-indicator[hidden]) { display: none; }
.sidebar-tools { display: flex; gap: 2px; }

.account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account:hover, .account[aria-expanded="true"] { background: var(--surface-3); border-color: var(--line); }
.avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 650;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(79, 110, 255, 0.35);
}
.account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.account-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-sub { font-size: 11px; color: var(--dim); }
.account .chevron { transform: rotate(180deg); }

/* ---------------------------------------------------------------- main ---- */

.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

.topbar {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}
.topbar .spacer { flex: 1; }

.brand { width: 30px; height: 30px; }

.project-switch {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 380px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.project-switch:hover { background: var(--surface-3); border-color: var(--line); }
.project-switch[aria-expanded="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.project-switch-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-switch-meta { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.chevron {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--muted);
  margin-left: auto;
  align-self: center;
}

.view-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.view-tab {
  height: 28px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.view-tab:hover { color: var(--text); }
.view-tab[aria-selected="true"] {
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-sm), var(--highlight);
}

.save-indicator, .job-indicator {
  font-size: 11.5px;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.save-indicator::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
}
.save-indicator.is-idle, .save-indicator:empty { display: none; }
.save-indicator.is-pending::before { background: var(--warn); }
.save-indicator.is-saving::before { background: var(--accent-text); animation: pulse 1s ease-in-out infinite; }
.save-indicator.is-saved::before { background: var(--good); }
.save-indicator.is-error { color: #ffb7ab; cursor: pointer; }
.save-indicator.is-error::before { background: var(--bad); }

.job-indicator {
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  overflow: hidden;
}
.job-indicator .bar {
  width: 50px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  flex: none;
}
.job-indicator .bar > i { display: block; height: 100%; background: var(--accent-grad); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --------------------------------------------------------------- views ---- */

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------------ composer layout ---- */

.layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  gap: var(--gap);
  padding: var(--gap);
}

.col { min-height: 0; display: flex; flex-direction: column; }

.rail, .stage, .pane {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rail { width: var(--rail-width); flex: none; }
.stage { flex: 1; min-width: 0; }

/* The width lives on the pane, not on the column inside it: the resizer writes
   an inline width and the collapsed strip overrides it, and both have to act on
   the same box or the strip ends up 380px wide. */
.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.pane > .col { flex: 1; min-height: 0; }
.pane-inspector {
  flex: 0 0 auto;
  width: var(--inspector-width);
}

.inspector {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Last, so a collapsed pane looks collapsed whatever else claims its width. */
.pane.is-collapsed {
  flex: 0 0 var(--pane-strip);
  width: var(--pane-strip);
  min-width: var(--pane-strip);
}
.pane.is-collapsed > .col { display: none; }

.pane-strip {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line);
}
.pane-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.pane-toggle {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.pane-toggle:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.pane-toggle:disabled { opacity: 0.4; cursor: default; }

/* Collapsed, the strip is the whole pane: the control on top and the label
   turned to read up the edge. */
.pane.is-collapsed .pane-strip {
  flex: 1;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 0;
  gap: 10px;
  border-bottom: none;
}
.pane.is-collapsed .pane-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
}

.resizer {
  flex: none;
  width: 5px;
  margin: 0 -7px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
}
.resizer::after {
  content: "";
  position: absolute;
  inset: 12px 1px;
  border-radius: var(--radius-pill);
  background: transparent;
}
.resizer:hover::after, .resizer.is-active::after { background: var(--accent-line); }
body.is-resizing { cursor: col-resize; user-select: none; }

/* -------------------------------------------------------------- panels ---- */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--line);
}
.panel-scenes { flex: 1; border-bottom: none; }

.panel-head {
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.panel-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.panel-count {
  font-size: 10.5px;
  color: var(--dim);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 1px 6px;
}
.panel-head .spacer { flex: 1; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; }
.panel-foot {
  flex: none;
  padding: 6px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 6px;
}

.empty {
  padding: 16px 12px;
  color: var(--dim);
  font-size: 12px;
  text-align: center;
}
.empty strong { display: block; color: var(--muted); font-weight: 600; margin-bottom: 3px; }

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 90ms ease, border-color 90ms ease, transform 90ms ease;
}
.btn:hover:not(:disabled) { background: var(--raised); border-color: var(--accent-line); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(15, 108, 189, 0.35);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 8px 20px rgba(15, 108, 189, 0.42); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.btn-ghost[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); }
.btn-sm { height: 24px; padding: 0 10px; font-size: 11px; }
.btn-icon { width: 28px; padding: 0; border-radius: 50%; }

#btn-theme {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9z' fill='none' stroke='%23b8c4d9' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] #btn-theme {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%2347536b' stroke-width='1.8'/%3E%3Cpath d='M12 2v2.4M12 19.6V22M22 12h-2.4M4.4 12H2M19.1 4.9l-1.7 1.7M6.6 17.4l-1.7 1.7M19.1 19.1l-1.7-1.7M6.6 6.6 4.9 4.9' stroke='%2347536b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.btn-block { width: 100%; }
.btn-danger { color: #ffb7ab; border-color: rgba(229, 100, 79, 0.4); }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); }

/* A two-step destructive control. window.confirm() is suppressed by managed
   browsers and returns false without showing anything, so the armed state has
   to live in the button itself -- and it has to name what is about to be
   destroyed, or the second click is just as blind as the first. */
.btn.is-armed {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
  font-weight: 600;
  animation: armed 1.1s ease-in-out infinite;
}
@keyframes armed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 100, 79, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(229, 100, 79, 0); }
}

/* --------------------------------------------------------------- lists ---- */

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(184, 196, 217, 0.07);
  cursor: pointer;
  min-width: 0;
}
.row:hover { background: var(--surface-2); }
.row.is-active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.row-main { flex: 1; min-width: 0; }
.row-title {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-sub {
  font-size: 10.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-actions { display: flex; gap: 3px; opacity: 0; flex: none; }
.row:hover .row-actions, .row.is-active .row-actions, .row-actions:focus-within { opacity: 1; }

/* --------------------------------------------------------- scene rows ---- */

.scene-row { padding: 5px 8px 5px 6px; align-items: stretch; }
.scene-grip {
  flex: none;
  width: 12px;
  align-self: stretch;
  cursor: grab;
  background: radial-gradient(circle at 50% 50%, var(--dim) 1px, transparent 1.2px) 0 0 / 4px 4px;
  opacity: 0.35;
  border-radius: 3px;
}
.scene-row:hover .scene-grip { opacity: 0.7; }
.scene-row.is-dragging { opacity: 0.4; }
.scene-row.is-drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.scene-row.is-drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.scene-index {
  flex: none;
  width: 20px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  padding-top: 2px;
}
.scene-thumb {
  flex: none;
  width: 54px;
  height: 30px;
  border-radius: 3px;
  background: var(--surface-3) center / cover no-repeat;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.scene-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip-kind-title { background: rgba(111, 180, 242, 0.16); color: #9fd0ff; }
.chip-kind-screenshot { background: rgba(63, 178, 127, 0.14); color: #79d5ac; }
.chip-kind-video { background: rgba(224, 163, 60, 0.14); color: #edc27a; }
.chip-kind-motion { background: rgba(168, 121, 232, 0.16); color: #c3a2f5; }
.chip-kind-avatar { background: rgba(232, 121, 178, 0.16); color: #f2a8cf; }
.chip-kind-outro { background: rgba(184, 196, 217, 0.14); color: var(--muted); }
.chip-warn { background: rgba(224, 163, 60, 0.18); color: #edc27a; }
.chip-bad { background: var(--bad-soft); color: #ffb7ab; }
.chip-good { background: rgba(63, 178, 127, 0.16); color: #79d5ac; }
.chip-mute { background: transparent; border: 1px solid var(--line); color: var(--dim); }

/* --------------------------------------------------------------- stage ---- */

/*
 * Top-aligned, and only as tall as the frame it is showing.
 *
 * The preview block is sized by layoutPreviewStage(): the frame is pinned to
 * the image's own height so the transport bar sits directly under the picture
 * instead of at the bottom of a greedy box, and everything the still does not
 * need goes to the dock below. The height cannot come from CSS -- the stage is
 * measured in pixels in JS, so a content-sized frame would be measuring itself.
 */
.stage-preview {
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 6px;
  gap: 8px;
}

.preview-frame {
  flex: none;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

/* No image to pin a height to, so the empty state states its own. It stays
   top-aligned like everything else in this column. */
.preview-frame.is-empty { min-height: 120px; }

.preview-stage {
  position: relative;
  background: var(--stage-well);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  max-height: 100%;
}
.preview-stage img.preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.preview-stage.is-stale img.preview-image { opacity: 0.55; }

.preview-overlay { position: absolute; inset: 0; }
.preview-media-box {
  position: absolute;
  border: 1px dashed rgba(184, 196, 217, 0.28);
  pointer-events: none;
  border-radius: 2px;
}

.callout-box {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: rgba(15, 108, 189, 0.1);
  cursor: move;
}
.callout-box.is-selected {
  border-color: #7fc4ff;
  background: rgba(127, 196, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(15, 108, 189, 0.6);
}
.callout-box.is-inactive { opacity: 0.35; border-style: dashed; }
.callout-tag {
  position: absolute;
  left: -2px;
  bottom: 100%;
  margin-bottom: 3px;
  padding: 1px 5px;
  font-size: 10px;
  border-radius: 3px 3px 3px 0;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.callout-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 2px;
}
.callout-handle[data-handle="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.callout-handle[data-handle="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.callout-handle[data-handle="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.callout-handle[data-handle="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }

.preview-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 11.5px;
}
.preview-bar .scrub { flex: 1; min-width: 80px; }
.preview-bar .time { font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }
.preview-note { color: var(--dim); font-size: 11px; }

/* ---------------------------------------------------------------- dock ---- */

/* Absorbs whatever the preview leaves. The floor is what a table with a header
   row and three renders needs to be worth looking at. */
.stage-dock {
  flex: 1;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.tabs {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  height: 30px;
}
.tab {
  border: none;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 11.5px;
  padding: 0 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.tab .badge {
  font-size: 9.5px;
  background: var(--surface-3);
  border-radius: 999px;
  padding: 0 5px;
  color: var(--muted);
}
.tabs .spacer { flex: 1; }
.tabs .tab-actions { display: flex; align-items: center; gap: 6px; }

.dock-body { flex: 1; min-height: 0; overflow-y: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th {
  position: sticky;
  top: 0;
  background: var(--sticky);
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
.table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(184, 196, 217, 0.07);
  vertical-align: middle;
  color: var(--muted);
}
.table tr:hover td { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-size: 11px; }
.table td.actions { text-align: right; white-space: nowrap; }
.table td .btn { margin-left: 4px; }
.table .name { color: var(--text); font-family: var(--mono); font-size: 11.5px; }

.progress {
  width: 90px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.progress > i { display: block; height: 100%; background: var(--accent); }
.progress.is-done > i { background: var(--good); }
.progress.is-error > i { background: var(--bad); }

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--dim);
  vertical-align: middle;
}
.status-queued { background: var(--dim); }
.status-running { background: var(--accent-text); animation: pulse 1s ease-in-out infinite; }
.status-done { background: var(--good); }
.status-error { background: var(--bad); }
.status-cancelled { background: var(--warn); }


/* ----------------------------------------------------------- inspector ---- */

.inspector-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--sticky);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inspector-head .row-main { min-width: 0; }
.inspector-title { font-weight: 600; font-size: 13px; }
.inspector-sub { font-size: 10.5px; color: var(--dim); font-family: var(--mono); }

.section { border-bottom: 1px solid var(--line); }
.section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.section-head:hover { background: var(--surface-2); color: var(--text); }
.section-head .caret {
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--dim);
  transition: transform 120ms ease;
  flex: none;
}
.section.is-open .section-head .caret { transform: rotate(90deg); }
.section-head .spacer { flex: 1; }
.section-body { padding: 2px 10px 12px; display: none; }
.section.is-open .section-body { display: block; }

.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; min-width: 0; }
.field-label {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-help { font-size: 10.5px; color: var(--dim); line-height: 1.35; }
.field-row { display: flex; gap: 8px; }
.field-row > .field { flex: 1; }

input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 5px 7px;
  min-width: 0;
}
textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b8c4d9' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 9px;
  padding-right: 22px;
}
input[type="color"] {
  width: 34px;
  height: 26px;
  padding: 1px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field);
  cursor: pointer;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid #0a4d8a;
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-3); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 1px solid #0a4d8a; }

.check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 9px;
}
.check input { width: 14px; height: 14px; accent-color: var(--accent); flex: none; }

.slider-field { display: flex; align-items: center; gap: 8px; }
.slider-field input[type="range"] { flex: 1; }
.slider-field .value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  width: 44px;
  text-align: right;
  flex: none;
}

.seg {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.seg button {
  flex: 1;
  border: none;
  background: var(--field);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  cursor: pointer;
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--surface-2); color: var(--text); }
.seg button.is-active { background: var(--accent); color: #fff; font-weight: 600; }

.inline-note {
  font-size: 11px;
  color: var(--dim);
  padding: 6px 8px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border-left: 2px solid var(--line-strong);
  margin-bottom: 9px;
}
.inline-note.is-warn { border-left-color: var(--warn); color: #edc27a; background: rgba(224, 163, 60, 0.08); }
.inline-note.is-bad { border-left-color: var(--bad); color: #ffb7ab; background: var(--bad-soft); }
.inline-note.is-good { border-left-color: var(--good); color: #79d5ac; background: rgba(63, 178, 127, 0.08); }

.button-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }

.list-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 8px;
  margin-bottom: 7px;
  background: var(--surface-2);
}
.list-item.is-selected { border-color: var(--accent-line); background: var(--accent-soft); }
.list-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.list-item-head .grip {
  cursor: grab;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: -1px;
  user-select: none;
}
.list-item-head .label { flex: 1; font-size: 11.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- chat ---- */

/* One reading column, centred, like the chat apps people already know: the
   transcript and the composer share its width so the eye never moves sideways
   between what was said and what is being typed. */

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
}
.chat-head .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* No smooth scrolling: renderChat rebuilds the log and restores its
   * position, and a smooth restore animates visibly on every repaint. */
}
.chat.is-empty .chat-log {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.chat-thread {
  max-width: var(--read-width);
  margin: 0 auto;
  padding: 8px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg { max-width: 100%; animation: msg-in 180ms ease-out; }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.msg-user {
  align-self: flex-end;
  max-width: 78%;
  padding: 10px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: var(--highlight);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg-assistant {
  align-self: stretch;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.msg-avatar, .welcome-orb, .boot-mark, .login-mark, .brand {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.65) 0%, transparent 34%),
    radial-gradient(circle at 70% 80%, #8b5cf6 0%, transparent 60%),
    linear-gradient(135deg, #3fa0ff 0%, #4f7bff 50%, #8b5cf6 100%);
  box-shadow: 0 6px 18px rgba(79, 110, 255, 0.4);
  position: relative;
  flex: none;
}
.msg-avatar { width: 28px; height: 28px; margin-top: 1px; }
.msg-body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-top: 3px;
}
.msg-body a { color: var(--accent-text); text-underline-offset: 2px; }

.msg-tool {
  align-self: flex-start;
  margin: -10px 0 -6px 42px;
  max-width: calc(100% - 42px);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.msg-tool:hover { color: var(--muted); border-color: var(--accent-line); }
.msg-tool.is-error { border-color: rgba(229, 100, 79, 0.45); color: #ffb7ab; }
.msg-tool .tool-name { color: var(--accent-text); }
.msg-tool .tool-detail {
  display: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 5px;
  color: var(--dim);
}
.msg-tool.is-open .tool-detail { display: block; }

.msg-pending {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
  font-size: 13px;
}
.msg-pending .msg-avatar { animation: orb-breathe 1.6s ease-in-out infinite; }
.msg-pending .dots { display: inline-flex; gap: 4px; }
.msg-pending .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-text);
  animation: pulse 1.1s ease-in-out infinite;
}
.msg-pending .dots i:nth-child(2) { animation-delay: 0.15s; }
.msg-pending .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }

/* Empty thread: a greeting and a handful of starting points. */
.chat-welcome {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: msg-in 260ms ease-out;
}
.welcome-orb {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  box-shadow: 0 0 0 10px rgba(99, 120, 255, 0.08), 0 16px 48px rgba(99, 102, 241, 0.55);
  animation: orb-breathe 4s ease-in-out infinite;
}
.welcome-title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.6px;
  line-height: 1.2;
  background: linear-gradient(120deg, var(--text) 30%, var(--accent-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome-sub { margin: 0 0 26px; color: var(--muted); font-size: 14px; max-width: 52ch; }

.suggestions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.suggestion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--highlight);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.suggestion:hover { background: var(--surface-3); border-color: var(--accent-line); transform: translateY(-1px); }
.suggestion-title { font-size: 13.5px; font-weight: 600; }
.suggestion-text {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The composer: a floating glass box pinned under the transcript. */
.chat-compose {
  flex: none;
  width: 100%;
  max-width: calc(var(--read-width) + 48px);
  margin: 0 auto;
  padding: 4px 24px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.compose-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px 10px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow), var(--highlight);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.compose-box:focus-within {
  border-color: var(--accent-line);
  box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft), var(--highlight);
}
.compose-box textarea {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 6px 2px 0;
  min-height: 26px;
  max-height: 240px;
  resize: none;
  font-size: 14.5px;
  line-height: 1.55;
  overflow-y: auto;
}
.compose-box textarea:focus { box-shadow: none; }
.chat-compose-row { display: flex; align-items: center; gap: 6px; }
.chat-compose-row .spacer { flex: 1; }
.compose-attach { margin-left: -6px; }
.model-pill {
  font-size: 11px;
  color: var(--dim);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chat / Plan switch in the composer row. */
.mode-toggle {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.mode-opt {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 11px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.mode-opt:hover:not(:disabled):not(.is-on) { color: var(--text); }
.mode-opt.is-on { background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-sm); }
.mode-opt:disabled { cursor: default; opacity: 0.6; }

/* "Ad" marker on Planner threads, in the sidebar and the thread header. */
.side-tag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.chip-kind-ad { background: var(--accent-soft); color: var(--accent-text); }

/* Plan mode: finalize bar and the storyboard card. */
.plan-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--accent-line);
  background: var(--accent-soft);
}
.plan-bar-text { flex: 1; font-size: 13px; color: var(--muted); }

.storyboard-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--glass-strong);
  box-shadow: var(--shadow-sm), var(--highlight);
}
.storyboard-card.is-approved { border-color: rgba(63, 178, 127, 0.45); }
.sb-head, .sb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-head .spacer, .sb-actions .spacer { flex: 1; }
.sb-title { font-weight: 700; font-size: 14px; }
.sb-stats, .sb-note { font-size: 12px; color: var(--dim); }
.sb-cast { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-person {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--muted);
}
.sb-scenes { display: flex; flex-direction: column; gap: 12px; }
.sb-scene { display: flex; flex-direction: column; gap: 6px; }
.sb-scene-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.sb-scene-num { flex: none; font-weight: 700; color: var(--accent-text); }
.sb-scene-setting { color: var(--muted); }
.sb-shots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-shot {
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-shot-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.sb-shot-lines { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
/* Seed image: an uploaded still that conditions the shot in place of a frame
   of an earlier one. */
.sb-shot-seed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.sb-shot-seed .spacer { flex: 1; }
.sb-seed-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.sb-seed-label { font-size: 11px; color: var(--dim); }
/* Generation: controls, progress, per-shot states, the finished video. */
.sb-job {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sb-generate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-job > .sb-generate { padding-top: 2px; }
.storyboard-card > .sb-generate { padding-top: 12px; border-top: 1px solid var(--line); }
.sb-generate .spacer { flex: 1; }
.sb-quality { width: auto; padding: 5px 8px; font-size: 12.5px; }
.sb-job-bar { display: flex; align-items: center; gap: 10px; }
.sb-progress { flex: 1; width: auto; height: 6px; }
.sb-job-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 60px; text-align: right; }
.sb-job-error {
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--bad-soft);
  color: var(--bad);
  overflow-wrap: anywhere;
}
.sb-shot-states { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-shot-state {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--dim);
}
.sb-shot-state.is-generating { background: var(--accent-soft); color: var(--accent-text); }
.sb-shot-state.is-done, .sb-shot-state.is-reused { background: rgba(63, 178, 127, 0.16); color: var(--good); }
.sb-shot-state.is-failed { background: var(--bad-soft); color: var(--bad); }
.sb-result { display: flex; flex-direction: column; gap: 8px; }
/* Space reserved up front (Wan renders ~16:9) so the card does not grow when
 * the video's metadata arrives. */
.sb-video { width: 100%; aspect-ratio: 16 / 9; max-height: 420px; border-radius: var(--radius); background: #000; }
.sb-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .plan-bar { flex-direction: column; align-items: stretch; }
}
.compose-send {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(79, 110, 255, 0.4);
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}
.compose-send svg { stroke-width: 2.4; }
.compose-send:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.compose-send:disabled { opacity: 0.6; cursor: default; }
.compose-send .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.chat-hint { font-size: 11px; color: var(--dim); text-align: center; }

.upload-list { display: flex; flex-wrap: wrap; gap: 6px; }
.upload-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 5px 3px 10px;
  color: var(--muted);
}

.drop-target {
  position: absolute;
  inset: 0;
  background: rgba(15, 108, 189, 0.16);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 13px;
  z-index: 10;
  pointer-events: none;
}

/* ------------------------------------------------------------- overlays ---- */

.overlay-root { position: relative; z-index: 40; }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 16px;
  z-index: 40;
}

.menu {
  position: fixed;
  background: var(--sticky);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
  min-width: 210px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 50;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.menu-item:hover { background: var(--surface-3); }
.menu-item.is-active { background: var(--accent-soft); color: var(--accent-text); }
.menu-item .meta { margin-left: auto; font-size: 10.5px; color: var(--dim); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.menu-label {
  padding: 6px 8px 3px;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}

.dialog {
  width: 100%;
  max-width: 460px;
  background: var(--solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.dialog-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dialog-title { font-size: 14px; font-weight: 600; flex: 1; }
.dialog-body { padding: 14px; overflow-y: auto; }
.dialog-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* The player sizes to the video rather than the other way round: a render is
   watched at whatever the window will give it, which is the whole reason it
   stopped living in the dock. */
.player-dialog {
  width: auto;
  max-width: 90vw;
}
.player-dialog .dialog-title { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.player-dialog .dialog-body { padding: 0; overflow: hidden; background: #000; }
.player-dialog video {
  display: block;
  background: #000;
  max-width: 90vw;
  max-height: min(80vh, calc(100vh - 150px));
}

.settings-dialog { max-width: 860px; height: min(660px, calc(100vh - 80px)); }
.settings-body { display: flex; flex: 1; min-height: 0; padding: 0; }
.settings-nav {
  flex: none;
  width: 190px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  padding: 8px 6px;
  overflow-y: auto;
}
.settings-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 2px;
}
.settings-nav button:hover { background: var(--surface-3); color: var(--text); }
.settings-nav button.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.settings-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px; }
.settings-pane h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.settings-pane .lede { margin: 0 0 14px; color: var(--dim); font-size: 12px; max-width: 60ch; }
.settings-pane h3 {
  margin: 18px 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 12px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; color: var(--text); font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- models ---- */

.model-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.model-card {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--highlight);
  min-width: 0;
}
.model-card-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.model-card-title { font-size: 13.5px; font-weight: 650; margin-bottom: 2px; }
.model-card .field-label .chip { margin-left: auto; text-transform: none; letter-spacing: 0; }
.model-card .button-row { margin: 2px 0 6px; }
.model-result { font-size: 11.5px; color: var(--dim); min-height: 16px; overflow-wrap: anywhere; }
.model-result.is-good { color: #79d5ac; }
.model-result.is-bad { color: #ffb7ab; }
:root[data-theme="light"] .model-result.is-good { color: #1f8a5b; }
:root[data-theme="light"] .model-result.is-bad { color: #c2412d; }
@media (max-width: 900px) { .model-cards { grid-template-columns: minmax(0, 1fr); } }

.shortcut-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12px; align-items: baseline; }

/* ------------------------------------------------------------ accounts ---- */

/* The account table is wider than the settings pane the moment a destructive
   button arms -- an armed label is a sentence. It scrolls sideways in its own
   box rather than widening the dialog under the operator. */
.table-scroll { overflow-x: auto; margin-bottom: 10px; }
.accounts-table { min-width: 520px; }
.accounts-table td.name .chip { margin-left: 6px; }
.accounts-table tr.is-self td,
.accounts-table tr.is-self:hover td { background: var(--accent-soft); }
.accounts-table tr.account-form td,
.accounts-table tr.account-form:hover td { background: var(--surface-2); }
.accounts-table tr.account-form .field-row { align-items: flex-end; gap: 10px; }
.accounts-table tr.account-form .button-row { margin-bottom: 9px; flex: none; }

.account-form-block { display: block; margin-bottom: 4px; max-width: 46ch; }
.settings-pane .table-scroll + .inline-note { margin-bottom: 14px; }

/* The one panel in the app that is showing something the server can never show
   again. It is loud on purpose, it never closes itself, and the value stays put
   whatever the clipboard does. */
.secret-panel {
  border: 1px solid var(--warn);
  border-left-width: 3px;
  background: rgba(224, 163, 60, 0.08);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.secret-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #edc27a; }
.secret-head strong { font-weight: 600; }
.secret-note { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.secret-value {
  display: block;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.secret-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.secret-status { font-size: 11px; color: var(--dim); }
kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
  white-space: nowrap;
}

/* --------------------------------------------------------------- toasts ---- */

.toasts {
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  max-width: 380px;
}
.toast {
  background: var(--sticky);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: toast-in 140ms ease-out;
}
.toast.is-error { border-left-color: var(--bad); }
.toast.is-warn { border-left-color: var(--warn); }
.toast.is-good { border-left-color: var(--good); }
.toast.is-info { border-left-color: var(--accent); }
.toast .toast-text { flex: 1; overflow-wrap: anywhere; }
.toast .toast-close {
  border: none;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent-text);
  animation: spin 700ms linear infinite;
  display: inline-block;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mono { font-family: var(--mono); font-size: 11.5px; }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }

/* Narrow windows: the composer's columns give way first, then the sidebar
   floats over the main card instead of taking width from it. */
@media (max-width: 1180px) {
  :root { --sidebar-width: 240px; }
  .rail { width: 216px; }
  .project-switch-meta { display: none; }
}
@media (max-width: 900px) {
  .rail { display: none; }
  .suggestions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { padding: 0; gap: 0; }
  .main { border-radius: 0; border: none; }
  .sidebar {
    position: fixed;
    top: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 35;
  }
  .app.is-sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-width) - 16px); }
  .pane-inspector { display: none; }
  #inspector-resizer { display: none; }
  .welcome-title { font-size: 24px; }
  .chat-thread { padding: 8px 16px 24px; }
  .chat-compose { padding: 4px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}