/* Inter, from this origin rather than from Google. The @font-face rules and the
   measurement that moved them live in fonts.css; both this file and
   design-tokens.css pull it in because their page lists are disjoint. */
@import url('/fonts.css');

:root {
  color-scheme: dark;
  /* Premium deep blue-slate "ink" palette (replaces the flat near-black).
     Layered surfaces give depth; a faint blue hue reads richer than pure black. */
  --bg: #0b0e15;
  --panel: #13161f;
  --panel-2: #191d28;
  --line: #2b313e;
  --line-soft: #1f2430;
  --text: #f4f2ed;
  --muted: #979ba4;
  --text-soft: #cbd2da;
  --text-faint: #737985;
  --surface: #14171f;
  --surface-raised: #1b1f2a;
  --surface-inset: #0e1017;

  /* Empty-space texture: a faint 24px diagonal checkerboard, drawn behind
     "nothing here yet" on every surface. Compose over any background
     colour -- it is white at 1.8% alpha, so it reads on any dark ink. */
  --empty-pattern:
    linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%,
      transparent 75%, rgba(255, 255, 255, .018) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%,
      transparent 75%, rgba(255, 255, 255, .018) 75%);
  --empty-pattern-size: 24px 24px;
  --empty-pattern-position: 0 0, 12px 12px;
  --surface-deep: #090b11;
  --control: #171b23;
  --graph-bg: #0e1017;
  --node-ring: #0e1017;
  --scroll-thumb: #3a3f4b;
  --shadow: rgba(0, 0, 0, .38);
  --on-accent: #0f1318;
  --accent: #aeb7c2;
  --accent-dark: #20252c;
  --danger: #ff6b6b;
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  /* Match the app shell's dynamic-viewport height (.shell uses 100dvh). Using
     100vh here made the body taller than the shell on mobile (100vh = address-
     bar-hidden height > 100dvh = visible height), so the extra body height
     showed as a black gap below the bottom tab bar. 100dvh keeps them in sync;
     browsers without dvh fall back to the 100vh line above. */
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 28rem),
    var(--bg);
}

/* 3D model preview: a subtle studio reference grid behind the (transparent)
   model-viewer canvas. The grid lives in the element's background layers (which
   sit *behind* the rendered 3D canvas), and a radial vignette layer fades the
   grid toward the edges without ever touching the model itself. */
.canvas-model {
  background-color: var(--surface-inset);
  background-image:
    radial-gradient(ellipse 82% 82% at 50% 52%, transparent 50%, var(--surface-inset) 100%),
    linear-gradient(color-mix(in srgb, var(--line) 62%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 62%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px, 30px 30px;
  background-position: center center;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.shell {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--drawer-w, 248px) 1fr;
  grid-template-rows: 58px 1fr;
}
.shell.drawer-collapsed { --drawer-w: 60px; }
/* The drawer box, nav rail, and collapse behaviour now live in the shared
   drawer.css (loaded before this file) so the graph app and the satellites can
   never drift apart again. What stays here is app-only: the .shell grid that
   makes room for the drawer, the narrow-screen overlay, and the account block
   that the satellites render differently. `.appdrawer` sits in the grid: */
.appdrawer { grid-row: 1 / 3; grid-column: 1; }
.intro-card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- Account block relocated into the drawer bottom (credits, appearance,
   user menu) so it lives canonically in the left panel, not the top bar. --- */
.appdrawer-account { display: flex; flex-direction: column; gap: 2px; position: relative; margin-bottom: 4px; }
.appdrawer-account .credit-control { display: flex; align-items: center; gap: 6px; width: 100%; }
.appdrawer-account .credit-control .credit-balance-button { flex: 1 1 auto; justify-content: flex-start; padding: 8px 11px; font-size: 12px; }
.appdrawer-account .credit-control a,
.appdrawer-account .credit-control button { border-radius: 9px; }
.appdrawer-account .settings-button {
  width: 100%; height: auto; display: flex; align-items: center; gap: 10px; justify-content: flex-start;
  padding: 8px 11px; border-radius: 9px; border-color: transparent; background: transparent;
  color: var(--text); font-size: 13.5px; font-weight: 600;
}
.appdrawer-account .settings-button:hover { border-color: var(--line); background: var(--surface-raised); color: var(--text); }
.appdrawer-account .settings-button svg { width: 18px; height: 18px; color: var(--accent); }
.appdrawer-account .settings-button .settings-button-label { display: inline; }
.appdrawer-account .login-button { width: 100%; justify-content: flex-start; gap: 10px; padding: 8px 11px; border-radius: 9px; }
.appdrawer-account .user-control { width: 100%; }
.appdrawer-account .user-button { width: 100%; border-radius: 9px; justify-content: flex-start; padding: 7px 11px; border-color: transparent; background: transparent; }
.appdrawer-account .user-button:hover { border-color: var(--line); background: var(--surface-raised); }
.appdrawer-account .user-button-name { max-width: none; }
.appdrawer-account .user-menu { top: auto; bottom: calc(100% + 8px); right: 0; left: 0; width: auto; }
.shell.drawer-collapsed .appdrawer-account .credit-control,
.shell.drawer-collapsed .appdrawer-account .settings-button .settings-button-label,
.shell.drawer-collapsed .appdrawer-account .user-button-name,
.shell.drawer-collapsed .appdrawer-account .login-button span { display: none; }
/* Collapsed icon rail: these buttons aren't .dnav, so the shared centering in
   drawer.css doesn't reach them. Centre them so the avatar / settings icon line
   up with the nav icons instead of hugging the left edge. */
.shell.drawer-collapsed:not(.drawer-overlay) .appdrawer-account .settings-button,
.shell.drawer-collapsed:not(.drawer-overlay) .appdrawer-account .user-button,
.shell.drawer-collapsed:not(.drawer-overlay) .appdrawer-account .login-button {
  justify-content: center; padding-left: 4px; padding-right: 4px;
}
.drawer-toggle {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
}
.drawer-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.drawer-toggle:hover { border-color: var(--line); color: var(--text); }
.nav-open-btn { display: none; }
.appdrawer-backdrop { display: none; }
.shell.drawer-overlay { grid-template-columns: 1fr; }
.shell.drawer-overlay .appdrawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 60;
  transition: transform .2s ease;
}
.shell.drawer-overlay.drawer-collapsed .appdrawer { transform: translateX(-100%); }
.shell.drawer-overlay:not(.drawer-collapsed) .appdrawer { transform: translateX(0); }
.shell.drawer-overlay.drawer-collapsed .appdrawer-brand-name,
.shell.drawer-overlay.drawer-collapsed .dnav-tx,
.shell.drawer-overlay.drawer-collapsed .dnav-group,
.shell.drawer-overlay.drawer-collapsed .appdrawer-social,
.shell.drawer-overlay.drawer-collapsed .appdrawer-legal { display: revert; }
.shell.drawer-overlay.drawer-collapsed .dnav { justify-content: flex-start; padding: 8px 11px; }
.shell.drawer-overlay.drawer-collapsed .appdrawer-expand { display: none; }
.shell.drawer-overlay:not(.drawer-collapsed) .appdrawer-backdrop {
  display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55);
}
.shell.drawer-overlay .nav-open-btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
}
.shell.drawer-overlay .nav-open-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shell:not(.drawer-collapsed) .topbar .brand { display: none; }
.topbar .history-button, .topbar .more-control { display: none; }
/* ...except the two the drawer no longer carries. /app, /chat and /creator all
   show the same pair at the top right -- secondary History, then the primary
   New session -- so none of the three has to be learned separately. The rest of
   the row stays hidden: those are proxies the drawer clicks. */
.topbar .history-button.topbar-pair { display: inline-flex; }

.topbar-pair svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Scoped through .topbar because the .history-button base rule is declared
   further down this file and would otherwise win on source order. */
.topbar .history-button.topbar-pair-primary {
  background: var(--accent);
  border-color: var(--accent);
  /* --on-accent, not --bg: in light theme the accent fill darkens and --bg
     goes near-white, which painted this label white-on-light — invisible.
     --on-accent flips with the theme (see applyAppearance in app.js). */
  color: var(--on-accent);
}

.topbar .history-button.topbar-pair-primary:hover {
  border-color: var(--accent);
  filter: brightness(1.08);
}
.topbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 10px;
}

.settings-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--panel-2);
  cursor: pointer;
}

.settings-button:hover,
.settings-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.settings-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.session-title-control {
  flex: 1 1000 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
}

.session-title-control .eyebrow {
  margin-bottom: 2px;
  font-size: 8px;
}

.session-title-row {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.session-title-row h1 {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-title-edit {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.session-title-edit:hover,
.session-title-edit:focus-visible {
  border-color: var(--line);
  color: var(--accent);
  background: #15181d;
  outline: none;
}

.session-title-edit[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.session-title-edit[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }

.session-title-edit svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.session-title-input {
  width: min(42vw, 520px);
  padding: 6px 9px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  background: #111419;
  text-align: center;
  outline: none;
}

.credit-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.credit-control strong { color: var(--accent); }

.credit-control button,
.credit-control a {
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.credit-control .credit-balance-button {
  border-color: var(--line);
  color: var(--muted);
  background: #13161a;
  font-weight: 600;
}

.upgrade-promo {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 50;
  width: min(320px, calc(100vw - 36px));
  display: flex;
  gap: 12px;
  padding: 16px 16px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface-raised);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: promo-in .35s ease;
}
/* The rail owns the first 248px of the viewport (60px collapsed) and this card
   is pinned to the viewport, so at left:18px it landed ON the rail: covering
   its own links in the pushed layout, and hidden UNDERNEATH it wherever the
   rail becomes a positioned layer — the narrow-screen overlay (z-index 60) and
   the read-only guard a locked page wears (main._LOCK_GUARD_STYLE, z-index
   8100). Park it beside the rail instead, which needs no z-index at all.
   Sibling selectors because the collapse state lives on .shell and this card is
   its sibling on <body>; the widths mirror --drawer-w, which .shell declares on
   itself and therefore does not pass to its siblings. Below 561px the card goes
   full width (see the media query further down) and owns the row on its own. */
@media (min-width: 561px) {
  .upgrade-promo { left: 266px; }
  .shell.drawer-collapsed ~ .upgrade-promo { left: 78px; }
}
@keyframes promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.upgrade-promo-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.upgrade-promo-close:hover { color: var(--text); }
.upgrade-promo-spark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.upgrade-promo-spark::before { content: "\2726"; color: var(--accent); font-size: 15px; }
.upgrade-promo-body { min-width: 0; }
.upgrade-promo-body strong { display: block; font-size: 14px; letter-spacing: -.01em; }
.upgrade-promo-body p { margin: 4px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.upgrade-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.upgrade-promo-cta:hover { text-decoration: underline; }
@media (max-width: 560px) { .upgrade-promo { left: 12px; right: 12px; bottom: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .upgrade-promo { animation: none; } }

/* The panel holds three views of the same list -- yours, the ones you shared
   out, and the ones shared with you -- so the button that opens it is named for
   the whole thing ("Sessions") and the tabs name the parts. */
.history-tabs {
  display: flex;
  /* The drawer is a flex column, so without these the strip grows to fill it
     and each tab becomes a full-height slab. */
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.history-tab {
  flex: 1 1 auto;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-tab:hover { color: var(--text); }

.history-tab.is-on {
  background: var(--surface-raised, #1b1f2a);
  border-color: var(--line);
  color: var(--text);
}

.history-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: #13161a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.history-button:hover { border-color: #4b515b; }

.more-control {
  position: relative;
  flex: 0 0 auto;
}

.more-button { white-space: nowrap; }

.more-button[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 60px var(--shadow);
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.more-menu-item:hover,
.more-menu-item:focus-visible {
  border-color: var(--line);
  background: var(--surface-raised);
  outline: none;
}

.more-menu-link {
  text-decoration: none;
}

.more-menu-accent { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.plans-menu-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
}

.admin-icon {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 22%, 100% 60%, 50% 100%, 0 60%, 0 22%);
}

.history-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.history-icon::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 3px;
  left: 5px;
  top: 2px;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.assets-icon {
  position: relative;
  width: 13px;
  height: 13px;
}

.assets-icon::before,
.assets-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
}

.assets-icon::before { left: 0; top: 2px; }
.assets-icon::after { left: 4px; top: 0; }

.export-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.export-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid var(--accent);
}
.export-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  border: 1.5px solid var(--accent);
  border-top: none;
  border-radius: 0 0 2px 2px;
}

.api-keys-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.api-keys-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.api-keys-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4.75px;
  width: 7px;
  height: 1.5px;
  background: var(--accent);
  box-shadow: -1px 4px 0 -0.25px var(--accent);
}

.webhooks-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.webhooks-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.webhooks-icon::after {
  content: "";
  position: absolute;
  left: 5.75px;
  top: 5.75px;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 -4px 0 var(--accent), 3px 2.5px 0 var(--accent), -3px 2.5px 0 var(--accent);
}

.presets-icon {
  width: 13px;
  height: 13px;
  background: var(--accent);
  clip-path: polygon(58% 0, 0 60%, 40% 60%, 36% 100%, 100% 40%, 58% 40%);
}

.timeline-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
}
.timeline-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 5px solid var(--accent);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}

.collab-icon {
  position: relative;
  width: 13px;
  height: 12px;
  border: 1.5px solid var(--accent);
  border-radius: 4px 4px 4px 0;
}
.collab-icon::before {
  content: "";
  position: absolute;
  left: -1.5px;
  bottom: -4px;
  width: 0;
  height: 0;
  border-left: 4px solid var(--accent);
  border-bottom: 4px solid transparent;
}
.collab-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 7px;
  border-top: 1.5px solid var(--accent);
  box-shadow: 0 3px 0 -0.25px var(--accent);
}

.more-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.more-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 5px 0 0 var(--accent), 10px 0 0 var(--accent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.brand-mark, .message-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-weight: 900;
}

.brand-mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  color: transparent;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, #62c8ff 20%, transparent) 0 28%, transparent 58%),
    linear-gradient(145deg, #222831, #10151c 56%, #0b0d10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 30px rgba(0, 0, 0, .28);
  font-size: 0;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  background: url("/icons/graph-galaxy-symbol.svg") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .42));
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 9px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, #62c8ff 12%, transparent) 0 18%, transparent 19%);
  opacity: .64;
}

.message-symbol {
  color: var(--on-accent);
  background: var(--accent);
}

.brand > span:last-child { min-width: 0; }
.brand strong, .brand small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand strong { letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.backend-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.status-dot, .mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #777;
}

.backend-status.ready .status-dot {
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 52%, transparent);
}

.backend-status.warning .status-dot {
  background: #f2b84b;
  box-shadow: 0 0 10px rgba(242, 184, 75, .45);
}

.backend-status.error .status-dot { background: var(--danger); }

.workspace {
  --conversation-width: 420px;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 8px minmax(300px, var(--conversation-width));
  gap: 2px;
  padding: 8px 10px 10px;
}

.workspace-splitter {
  position: relative;
  z-index: 8;
  min-height: 0;
  cursor: col-resize;
  touch-action: none;
}

.workspace-splitter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 4px;
  height: 64px;
  border-radius: 999px;
  background: #30353d;
  transform: translateY(-50%);
  transition: background .15s, height .15s;
}

.workspace-splitter:hover::after,
.workspace-splitter:focus-visible::after,
.workspace-splitter.dragging::after {
  height: 88px;
  background: var(--accent);
  outline: none;
}

.canvas-panel, .conversation-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.canvas-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
/* Pin children to explicit rows so the drop-zone always owns the flexible
   middle row and the footer stays on its own auto row. Without this, hiding
   the (display:none) timeline-panel shifts grid auto-placement and the footer
   inherits the 1fr row, ballooning the canvas past the viewport. */
.canvas-panel > .timeline-panel { grid-row: 1; }
.canvas-panel > .drop-zone { grid-row: 2; }
.canvas-panel > .canvas-footer { grid-row: 3; }

/* Mobile-studio fold controls — collapse the graph or the preview so the other
   fills the panel. Hidden on desktop; positioned + shown in the mobile block. */
.studio-fold { display: none; }
/* The fold container spans across the drag grip — let pointer events fall
   through to the resizer; only the arrows themselves are interactive. */
.studio-fold { pointer-events: none; }
.studio-fold-btn { pointer-events: auto; }
.studio-fold-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 80%, #000 20%);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.studio-fold-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s;
}
.studio-fold-btn.active { color: var(--accent); border-color: var(--accent); }
.studio-fold-btn.active svg { transform: rotate(180deg); }

/* Desktop: show the fold pair on the right edge of the canvas panel whenever a
   graph exists, and collapse the graph or the preview so the other fills the
   panel. The two are mutually exclusive (setStudioFold), so at least one panel
   is always open. Mobile keeps its own rules under body.mv-studio. */
/* Desktop: bare arrows grouped around the divider's central grip — up-arrow
   to its left, down-arrow to its right (same design as the vertical splitter's
   handle). Vertical position comes from syncStudioFoldPosition. */
body:not(.mv-studio) .canvas-panel:has(.timeline-panel:not(.hidden)) .studio-fold {
  display: flex;
  flex-direction: row;
  gap: 72px; /* leaves the 48px grip (64px on hover) visible in the middle */
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 20;
}
/* Graph folded: its resizer grip is collapsed away, so close the gap. */
body:not(.mv-studio) .canvas-panel.fold-graph:has(.timeline-panel:not(.hidden)) .studio-fold {
  gap: 8px;
}
/* A folded section must disappear completely: grid items default to
   min-height:auto, which lets a 0-height row's content poke through — and the
   panel's own padding/border would still paint as a sliver. */
.canvas-panel.fold-graph .timeline-panel {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border-top: 0;
}
/* When one section fills the panel, only the arrow that restores the other
   remains (mirrors the document splitter's behavior). */
.canvas-panel.fold-graph #studioFoldPreview { display: none; }
.canvas-panel.fold-preview #studioFoldGraph { display: none; }
/* …and the lone arrow slims down so its glyph rides the very edge. */
body:not(.mv-studio) .canvas-panel.fold-graph:has(.timeline-panel:not(.hidden)) .studio-fold-btn,
body:not(.mv-studio) .canvas-panel.fold-preview:has(.timeline-panel:not(.hidden)) .studio-fold-btn {
  height: 12px;
  width: 22px;
}
body:not(.mv-studio) .canvas-panel.fold-graph:has(.timeline-panel:not(.hidden)) .studio-fold-btn svg,
body:not(.mv-studio) .canvas-panel.fold-preview:has(.timeline-panel:not(.hidden)) .studio-fold-btn svg {
  width: 11px;
  height: 11px;
}
/* A folded layout can't be drag-resized, so the grip line goes away in both
   folded states — just the lone restore arrow remains. */
.canvas-panel.fold-graph .timeline-resizer,
.canvas-panel.fold-preview .timeline-resizer { display: none; }
body:not(.mv-studio) .canvas-panel:has(.timeline-panel:not(.hidden)) .studio-fold-btn {
  width: 20px;
  height: 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
body:not(.mv-studio) .canvas-panel:has(.timeline-panel:not(.hidden)) .studio-fold-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
body:not(.mv-studio) .canvas-panel:has(.timeline-panel:not(.hidden)) .studio-fold-btn svg {
  width: 13px;
  height: 13px;
}
body:not(.mv-studio) .canvas-panel.fold-graph { grid-template-rows: 0 minmax(0, 1fr) auto; }
body:not(.mv-studio) .canvas-panel.fold-preview { grid-template-rows: minmax(0, 1fr) 0 auto; }
body:not(.mv-studio) .canvas-panel.fold-preview .timeline-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body:not(.mv-studio) .canvas-panel.fold-preview .timeline-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.canvas-toolbar, .conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.04em; }
h2 { font-size: 19px; letter-spacing: -.025em; }

.toolbar-actions { display: flex; align-items: center; gap: 8px; }

.drop-zone {
  min-height: 0;
  margin: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #343942;
  border-radius: 16px;
  background-color: #0c0e11;
  background-image: var(--empty-pattern);
  background-size: var(--empty-pattern-size);
  background-position: var(--empty-pattern-position);
  transition: border-color .2s, background-color .2s, transform .2s;
}

.drop-zone.dragging {
  border-color: var(--accent);
  background-color: var(--accent-dark);
  transform: scale(.995);
}

.empty-state {
  max-width: 430px;
  padding: 60px 30px;
  text-align: center;
}

.empty-state h2 { margin-top: 20px; font-size: 24px; }
.empty-state p { margin: 10px 0 22px; color: var(--muted); line-height: 1.6; }
.empty-state small { display: block; margin-top: 13px; color: #6f747d; }

.intro-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 24px;
}

.intro-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s, transform .18s, background-color .18s;
}
.intro-card-icon { flex: none; }
.intro-card strong + small { flex: 1 1 100%; }

.intro-card:hover,
.intro-card:focus-visible {
  border-color: var(--accent);
  background: var(--surface-raised);
  transform: translateY(-2px);
  outline: none;
}

.intro-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-dark);
  font-size: 22px;
}

.intro-card strong { font-size: 15px; }
.intro-card small { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }

.intro-back {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 0;
  border: none;
  color: var(--muted);
  background: none;
  cursor: pointer;
  font-size: 12px;
}

.intro-back:hover { color: var(--text); }

.intro-name-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px auto 18px;
  max-width: 320px;
  text-align: left;
}

.intro-name-field span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.intro-name-field input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: #12151a;
  font-size: 13px;
}

.intro-name-field input:focus {
  border-color: var(--accent);
  outline: none;
}

.intro-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.upload-icon {
  position: relative;
  width: 66px;
  height: 66px;
  margin: auto;
  border: 1px solid #3b4049;
  border-radius: 19px;
  background: #171a1f;
}

.upload-icon::before {
  content: "↑";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 28px;
  font-weight: 300;
}

.image-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 1px;
  background: var(--line-soft);
}

.image-stage.comparing {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c0e11;
}

.image-frame img,
.image-frame video {
  /* Absolutely positioned + margin:auto so the media is centered and scaled to
     fit the WHOLE frame. This is deliberate: as a normal/grid child a percentage
     max-height does not resolve, so a tall image overflowed and showed only its
     top. Anchored to the frame's real box, max-height:100% resolves, so the
     entire image fits (contain) and small media stays crisp at natural size.
     (PDF page images keep their own higher-specificity .document-page-image
     rule, and overlays like the "Current" label sit above via z-index.) */
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity .2s;
  background: #090b0e;
}

.canvas-text {
  /* Anchored to the frame like the media above so max-height:100% resolves:
     as a plain grid child the card only capped itself against the viewport,
     so with the graph open a long text answer overflowed the frame's
     overflow:hidden and its own scrollbar never engaged — the bottom was
     unreachable. Absolutely positioned, the card is capped by the visible
     frame and scrolls internally (text can't scale-to-fit like image/video). */
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(760px, 88%);
  /* Always leave room for the corner controls (copy-source at right:12) so
     they never sit on the card's scrollbar in narrow frames. */
  max-width: calc(100% - 96px);
  max-height: min(calc(100% - 24px), calc(100vh - 270px));
  padding: 28px;
  overflow: auto;
  border: 1px solid #323842;
  border-radius: 14px;
  color: #e8ebef;
  background: #12151a;
  font: 14px/1.7 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: normal;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 14px; }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin: 18px 0 8px;
  color: var(--text);
  line-height: 1.25;
}
.markdown-body h1 { font-size: 22px; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 15px; }
.markdown-body strong { color: #fff; font-weight: 800; }
.markdown-body em { color: #cbd2da; }
.markdown-body ul,
.markdown-body ol { margin: 8px 0 16px; padding-left: 24px; }
.markdown-body li { margin: 5px 0; }
.markdown-body code {
  padding: 2px 5px;
  border: 1px solid #343b45;
  border-radius: 5px;
  color: var(--accent);
  background: #0b0d10;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.markdown-body pre {
  margin: 12px 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid #343b45;
  border-radius: 9px;
  background: #090b0e;
}
.markdown-body pre code { padding: 0; border: 0; color: #e8ebef; }
.markdown-body a { color: #79d6ff; }

.current-frame.document-source-view {
  --document-summary-width: 42%;
  grid-template-columns:
    minmax(240px, var(--document-summary-width))
    7px
    minmax(320px, 1fr);
  /* Cap the single row at the frame's visible height: the reader's default
     min-height could stretch it past the fold, pushing the splitter's
     mid-height handle out of view. */
  grid-template-rows: minmax(0, 100%);
  align-items: stretch;
  gap: 0;
}
.current-frame.document-source-view .document-reader {
  min-height: 0;
  height: 100%;
}
/* Pin the three split participants to their columns: with auto-placement,
   folding (display:none) the summary would slide the splitter into column 1
   and the reader into the 7px splitter column — vanishing it. */
.current-frame.document-source-view .canvas-text { grid-area: 1 / 1; }
.current-frame.document-source-view .document-splitter { grid-area: 1 / 2; }
.current-frame.document-source-view .document-reader { grid-area: 1 / 3; }
.current-frame.document-reader-only {
  display: block;
  overflow: hidden;
}
.current-frame.document-reader-only .document-reader { height: 100%; }

.current-frame.document-source-view .canvas-text {
  /* Back to a normal grid child: this view lays the summary out as a column
     beside the splitter and PDF reader, so the absolute anchoring above must
     not apply here. Height caps at the frame's row (not the viewport) so the
     splitter — and its mid-height fold handle — always fits the visible box. */
  position: static;
  height: auto;
  width: auto;
  max-width: none;
  max-height: min(calc(100% - 36px), calc(100vh - 230px));
  margin: 18px;
}
/* In the split document view the summary column is on the left, so anchor its
   copy-source button over that column instead of the frame's top-right corner
   (where it floated over the PDF reader toolbar's own controls). The min()
   mirrors the grid's own clamp: once the reader hits its 320px minimum (+7px
   splitter) the summary column stops growing, and so must the button — else a
   further drag walks it into the reader pane. */
.current-frame.document-source-view .canvas-text-copy {
  right: auto;
  left: clamp(
    8px,
    calc(min(max(240px, var(--document-summary-width, 42%)), 100% - 327px) - 60px),
    calc(100% - 44px)
  );
}

/* Splitter fold handle: the two collapse chevrons and the drag grip form one
   mid-height group — arrow above, grip line between, arrow below. */
.document-splitter .doc-fold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px; /* leaves the 42px grip (::after, centered at 50%) in the middle */
  z-index: 7;
  /* Let drags over the grip reach the splitter; only the arrows catch clicks. */
  pointer-events: none;
}
.doc-fold-btn { pointer-events: auto; }
.doc-fold-btn {
  width: 16px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.doc-fold-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.doc-fold-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s;
}
/* Summary collapsed: reader fills; the remaining chevron flips to "expand". */
.current-frame.document-source-view.doc-fold-summary {
  grid-template-columns: 0 7px minmax(0, 1fr);
}
.current-frame.doc-fold-summary .canvas-text,
.current-frame.doc-fold-summary .canvas-text-copy { display: none; }
.current-frame.doc-fold-summary #docFoldSummary svg { transform: rotate(180deg); }
.current-frame.doc-fold-summary #docFoldReader { display: none; }
/* Reader collapsed: the summary fills. */
.current-frame.document-source-view.doc-fold-reader {
  grid-template-columns: minmax(0, 1fr) 7px 0;
}
.current-frame.doc-fold-reader .document-reader { display: none; }
.current-frame.doc-fold-reader #docFoldReader svg { transform: rotate(180deg); }
.current-frame.doc-fold-reader #docFoldSummary { display: none; }
/* …and the summary renders like a plain text node: a centered card with the
   copy button pinned to the frame's top-right (not the stale splitter spot). */
.current-frame.document-source-view.doc-fold-reader .canvas-text {
  width: min(760px, 88%);
  max-width: calc(100% - 96px);
  height: fit-content;
  max-height: calc(100% - 24px);
  margin: 0;
  justify-self: center;
  align-self: center;
}
.current-frame.document-source-view.doc-fold-reader .canvas-text-copy {
  left: auto;
  right: 12px;
}
/* Folded: only one arrow remains — perch it just above the grip line so the
   pair still reads as one grouped handle. */
.current-frame.doc-fold-summary .doc-fold,
.current-frame.doc-fold-reader .doc-fold {
  transform: translate(-50%, calc(-50% - 34px));
}

.document-splitter {
  position: relative;
  z-index: 6;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  background: #181c22;
  touch-action: none;
}
.document-splitter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: #59616d;
  transform: translateY(-50%);
}
.document-splitter:hover::after,
.document-splitter.dragging::after { background: var(--accent); }

.document-reader {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: auto;
  background: #080a0c;
  user-select: none;
}

.document-reader > header {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: rgba(8,9,11,.94);
  backdrop-filter: blur(10px);
  font-size: 10px;
}

.document-reader-title {
  flex: 0 1 auto;
  min-width: 54px;
  max-width: 46%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}

.document-reader-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
}
.reader-inline { display: flex; align-items: center; gap: 6px; }
.reader-pages { display: flex; align-items: center; gap: 6px; }
.document-reader-controls button,
.document-reader-controls select {
  height: 26px;
  border: 1px solid #343a43;
  border-radius: 6px;
  color: var(--text);
  background: #15191f;
  font-size: 9px;
}
.document-reader-controls button { width: 28px; padding: 0; cursor: pointer; }
.document-reader-controls button:disabled { opacity: .35; cursor: default; }
.document-reader-controls label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.document-reader-controls select { padding: 0 6px; }
.reader-pages > span,
.document-reader-controls > span { min-width: 48px; text-align: center; }
.document-zoom { display: flex; align-items: center; gap: 4px; }
.document-zoom span { min-width: 36px; text-align: center; }
.document-reader-controls .document-zoom-fit { width: auto; padding: 0 8px; }
.reader-hand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text);
}
.reader-hand-icon { display: block; width: 15px; height: 15px; }
.reader-mlabel { display: none; }
.reader-hand[aria-pressed="true"],
.reader-more-button[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.reader-more { position: relative; display: flex; }
.reader-more-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 156px;
  padding: 8px;
  border: 1px solid #343a43;
  border-radius: 10px;
  background: var(--panel, #14171c);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.reader-more-menu.hidden { display: none; }
.document-reader-controls .reader-more-menu .reader-view,
.document-reader-controls .reader-more-menu .notes-toggle,
.document-reader-controls .reader-more-menu .reader-hand,
.document-reader-controls .reader-more-menu .document-zoom {
  width: 100%;
  height: 30px;
  justify-content: flex-start;
}
.document-reader-controls .reader-more-menu .document-zoom { justify-content: space-between; }
.document-reader-controls .reader-more-menu .reader-view select { flex: 1; }
.reader-more-menu .reader-mlabel { display: inline; }
.document-reader.pan-mode,
.document-reader.pan-mode .document-page,
.document-reader.pan-mode .pdf-text-block { cursor: grab; }
.document-reader.panning,
.document-reader.panning .document-page,
.document-reader.panning .pdf-text-block { cursor: grabbing; }
.document-reader.pan-mode .document-pages { touch-action: none; }

/* .document-pages / .document-page / .document-page-image /
   .document-page-number now live in pdf-pages.js, which builds the stack for
   this reader and for the Files Editor's PDF preview alike. It injects them at
   the front of <head>, so everything below still overrides them. */
.document-pages.single-page .document-page { display: none; }
.document-pages.single-page .document-page.page-visible { display: block; }

.image-frame .document-page-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: fill;
  background: transparent;
  transition: none;
  user-select: none;
  pointer-events: none;
}

.pdf-text-block {
  position: absolute;
  z-index: 2;
  padding: 0;
  color: transparent;
  font-family: Arial, sans-serif;
  font-size: clamp(4px, .55vw, 9px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.pdf-text-block.selection-active {
  outline: 1px solid rgba(55,145,255,.42);
  background: rgba(91,170,255,.28);
}

.pdf-node-region {
  position: absolute;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  pointer-events: none;
}
.pdf-node-region.node-focus {
  outline: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.pdf-node-region.node-related { background: rgba(98,200,255,.12); }

.pdf-annotation {
  position: absolute;
  z-index: 1;
  border-radius: 2px;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: box-shadow .15s ease;
}
.pdf-annotation.has-note {
  border-bottom: 2px solid rgba(40,40,40,.55);
}
.pdf-annotation.active {
  box-shadow: 0 0 0 2px rgba(40,40,40,.65);
}
.pdf-annotation.flash {
  animation: pdfAnnotationFlash 1.1s ease;
}
@keyframes pdfAnnotationFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  20% { box-shadow: 0 0 0 3px rgba(40,40,40,.8); }
  60% { box-shadow: 0 0 0 3px rgba(40,40,40,.4); }
}

.pdf-selection-popover {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #2b323c;
  border-radius: 11px;
  background: rgba(14,16,20,.97);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.pdf-selection-popover.hidden { display: none; }

/* Floating read-aloud bubble over a text selection (text nodes, chat and the
   PDF reader's Listen action). Theme variables keep it correct in light and
   dark mode. */
.tts-bubble {
  position: fixed;
  z-index: 62;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 7px;
  border: 1px solid var(--line, #2b323c);
  border-radius: 999px;
  background: var(--surface-raised, rgba(14, 16, 20, .97));
  box-shadow: 0 12px 30px var(--shadow, rgba(0, 0, 0, .5));
  backdrop-filter: blur(8px);
}
.tts-bubble.hidden { display: none; }
.tts-bubble button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft, #c8ccd2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tts-bubble button:hover {
  background: var(--surface-inset, #1d2229);
  color: var(--text, #fff);
}
.tts-bubble button svg { width: 14px; height: 14px; }
.tts-bubble .tts-bubble-play {
  width: 32px;
  height: 32px;
  background: var(--surface-deep, #232a33);
  color: var(--text, #fff);
}
.tts-bubble .tts-bubble-play:hover {
  background: var(--accent);
  color: var(--on-accent, #0b0d10);
}
.tts-bubble .tts-bubble-play svg { width: 16px; height: 16px; }
.tts-bubble .tts-bubble-rate {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}
.tts-bubble .tts-bubble-close { font-size: 16px; line-height: 1; color: var(--muted, #8b939e); }
.pdf-popover-colors {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 8px;
  border-right: 1px solid #2b323c;
}
.pdf-color-swatch {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pdf-color-swatch:hover { transform: scale(1.12); }
.pdf-color-swatch.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.pdf-popover-buttons { display: flex; gap: 5px; }
.pdf-popover-buttons button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid #343a43;
  border-radius: 7px;
  color: var(--text);
  background: #1b2027;
  font-size: 10px;
  cursor: pointer;
  transition: background .12s ease;
}
.pdf-popover-buttons button:hover { background: #232a33; }
.pdf-popover-buttons button[data-action="highlight"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}

.pdf-toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  padding: 9px 15px;
  border: 1px solid #2b323c;
  border-radius: 999px;
  color: var(--text);
  background: rgba(14,16,20,.97);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  font-size: 11px;
  opacity: 1;
  transition: opacity .25s ease;
}
.pdf-toast.hidden { opacity: 0; pointer-events: none; }

.document-notes-panel {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 82%);
  border-left: 1px solid var(--line);
  background: rgba(10,12,15,.98);
  box-shadow: -14px 0 34px rgba(0,0,0,.42);
}
.document-notes-panel.hidden { display: none; }
.document-notes-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
}
.document-notes-actions { display: flex; align-items: center; gap: 6px; }
.document-notes-actions button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid #343a43;
  border-radius: 7px;
  color: var(--text);
  background: #15191f;
  font-size: 10px;
  cursor: pointer;
}
.document-notes-actions button:hover { background: #1d232b; }
#documentNotesClose { width: 26px; padding: 0; font-size: 14px; line-height: 1; }

.document-notes-list {
  flex: 1;
  overflow: auto;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.document-notes-empty {
  margin: 18px 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.document-note {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #12151a;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.document-note:hover { background: #161a20; }
.document-note.active { border-color: var(--accent); }
.document-note-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.document-note-color {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  cursor: pointer;
  flex: none;
}
.document-note-page {
  padding: 2px 7px;
  border: 1px solid #343a43;
  border-radius: 6px;
  color: var(--accent);
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}
.document-note-spacer { flex: 1; }
.document-note-action {
  padding: 2px 7px;
  border: 1px solid #343a43;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}
.document-note-action:hover { color: var(--text); background: #1b2027; }
.document-note-action.danger:hover {
  color: #ff8f6b;
  border-color: rgba(255,143,107,.5);
}
.document-note-quote {
  margin: 0 0 7px;
  padding: 5px 9px;
  border-left: 2px solid var(--accent);
  color: #cbd2da;
  background: rgba(255,255,255,.03);
  font-size: 10px;
  line-height: 1.5;
  max-height: 74px;
  overflow: hidden;
}
.document-note-input {
  width: 100%;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid #343a43;
  border-radius: 8px;
  color: var(--text);
  background: #0b0d10;
  font: 11px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
  resize: vertical;
}
.document-note-input:focus {
  outline: none;
  border-color: var(--accent);
}

.notes-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
.document-reader-controls .notes-toggle {
  width: auto;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.notes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 8px;
  font-weight: 700;
}
.notes-toggle:not(.active) .notes-count { background: #343a43; color: var(--text); }

.selection-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 10px;
  margin: 10px 10px 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.selection-context strong,
.selection-context small { display: block; }
.selection-context strong { color: var(--accent); font-size: 10px; }
.selection-context small {
  max-height: 34px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.selection-context button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: #1b2027;
  cursor: pointer;
}

/* System warning: a non-chat, dismissible notice surfaced in the composer
   (e.g. the picked model can't produce the auto-detected output type). */
.system-warning {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 26px;
  align-items: start;
  gap: 9px;
  margin: 10px 10px 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, #ffb454 46%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #ffb454 10%, transparent);
  color: #ffcf8a;
  font-size: 11px;
  line-height: 1.45;
}
.system-warning.hidden { display: none; }
.system-warning-icon { font-size: 13px; line-height: 1.35; }
.system-warning-text { min-width: 0; }
.system-warning-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: inherit;
  background: color-mix(in srgb, #ffb454 16%, transparent);
  cursor: pointer;
}

.canvas-audio {
  width: min(560px, 82%);
  padding: 18px;
  border: 1px solid #323842;
  border-radius: 14px;
  background: #15191f;
}

/* --- Canvas annotations -------------------------------------------------- */
.canvas-anno-layer {
  position: absolute;
  z-index: 7;
  /* left/top/width/height set in JS to match the displayed media box */
}
.canvas-anno-layer.hidden { display: none; }

.canvas-anno-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.canvas-anno-layer.tool-select .canvas-anno-surface { cursor: default; }

.canvas-anno-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.canvas-anno-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0c0e11;
  border-radius: 999px;
  color: #0c0e11;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: transform .12s ease;
}
.canvas-anno-marker:hover,
.canvas-anno-marker.active { transform: translate(-50%, -50%) scale(1.18); }
.canvas-anno-marker.has-note::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #0c0e11;
}
/* While a drawing tool is active the markers must not steal the pointer. */
.canvas-anno-layer:not(.tool-select) .canvas-anno-marker { pointer-events: none; }

.canvas-anno-toolbar {
  position: absolute;
  z-index: 9;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 7px 9px;
  border: 1px solid #313741;
  border-radius: 14px;
  background: rgba(14, 17, 21, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  flex-wrap: wrap;
  justify-content: center;
}
.canvas-anno-toolbar.hidden { display: none; }

.canvas-anno-tools { display: inline-flex; gap: 3px; }
.canvas-anno-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c2c9d2;
  background: transparent;
  font: 700 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.canvas-anno-tool span { font-size: 14px; line-height: 1; }
.canvas-anno-tool:hover { color: var(--text); background: #1b2027; }
.canvas-anno-tool.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.canvas-anno-divider { width: 1px; height: 22px; background: #2c323b; }

.canvas-anno-colors { display: inline-flex; gap: 4px; }
.canvas-anno-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.canvas-anno-swatch.active { border-color: #fff; }

.canvas-anno-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.canvas-anno-size.hidden { display: none; }
.canvas-anno-size input { width: 92px; accent-color: var(--accent); }

.canvas-anno-mini,
.canvas-anno-done {
  height: 30px;
  padding: 0 11px;
  border: 1px solid #313741;
  border-radius: 9px;
  color: #c2c9d2;
  background: #15191f;
  font: 800 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.canvas-anno-mini.hidden { display: none; }
.canvas-anno-mini:hover,
.canvas-anno-done:hover { color: var(--text); border-color: var(--accent); }
.canvas-anno-mini.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.canvas-anno-count { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Keyboard focus rings for the annotation toolbar (roving-tabindex controls). */
.canvas-anno-tool:focus-visible,
.canvas-anno-swatch:focus-visible,
.canvas-anno-mini:focus-visible,
.canvas-anno-done:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.canvas-notes-panel {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--canvas-notes-w, min(300px, 45%));
  display: flex;
  flex-direction: column;
  border-left: 1px solid #232830;
  background: rgba(12, 14, 17, .92);
  backdrop-filter: blur(12px);
}
.canvas-notes-panel.hidden { display: none; }
/* While the comments panel is open we reserve its width so the media (and the
   drawing surface over it) shifts clear of the panel instead of hiding under
   it. The toolbar re-centers over the remaining media area. */
.current-frame.canvas-annotating {
  --canvas-notes-w: min(300px, 45%);
  padding-right: var(--canvas-notes-w);
}
.current-frame.canvas-annotating .canvas-anno-toolbar {
  left: calc((100% - var(--canvas-notes-w)) / 2);
}
.canvas-notes-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #232830;
}
.canvas-notes-panel > header strong { font-size: 13px; }
.canvas-notes-panel > header button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}
.canvas-notes-panel > header button:hover { color: var(--text); background: #1b2027; }

.canvas-notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.canvas-notes-empty {
  margin: 18px 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.canvas-note {
  padding: 10px;
  border: 1px solid #262c34;
  border-radius: 11px;
  background: #12151a;
  cursor: pointer;
}
.canvas-note.active { border-color: var(--accent); }
.canvas-note-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.canvas-note-color {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.canvas-note-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.canvas-note-spacer { flex: 1; }
.canvas-note-action {
  padding: 3px 7px;
  border: 1px solid #2c333d;
  border-radius: 7px;
  color: #c2c9d2;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.canvas-note-action:hover { color: var(--text); border-color: var(--accent); }
.canvas-note-action.danger { color: #ff9b9b; }
.canvas-note-action.danger:hover { border-color: #ff9b9b; }
.canvas-note-input {
  width: 100%;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid #2a313b;
  border-radius: 8px;
  color: var(--text);
  background: #0d1014;
  font: 12px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
  resize: vertical;
}
.canvas-note-input:focus { outline: none; border-color: var(--accent); }

.canvas-inpaint {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-top: 1px solid #232830;
  background: rgba(8, 10, 13, .55);
}
.canvas-inpaint.hidden { display: none; }
.canvas-inpaint-go {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: filter .12s ease, opacity .12s ease;
}
.canvas-inpaint-go:hover:not(:disabled) { filter: brightness(1.06); }
.canvas-inpaint-go:disabled { opacity: .45; cursor: not-allowed; }
.canvas-inpaint-go.ghost {
  width: auto;
  flex-shrink: 0;
  color: #c2c9d2;
  background: transparent;
  border-color: #2c333d;
}
.canvas-inpaint-go.ghost:hover:not(:disabled) {
  filter: none;
  color: var(--text);
  border-color: var(--accent);
}
.canvas-inpaint-out {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.canvas-inpaint-dir {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.canvas-inpaint-dir > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.canvas-inpaint-dir select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #2a313b;
  border-radius: 8px;
  color: var(--text);
  background: #0d1014;
  font: 11px Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.canvas-inpaint-dir select:focus { outline: none; border-color: var(--accent); }
.canvas-inpaint-out input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.canvas-inpaint-hint {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

:root[data-theme="light"] .canvas-anno-toolbar {
  border-color: #d3d8e0;
  background: rgba(255, 255, 255, .95);
}
:root[data-theme="light"] .canvas-anno-tool { color: #3a4250; }
:root[data-theme="light"] .canvas-anno-tool:hover { background: #eef1f5; }
:root[data-theme="light"] .canvas-anno-mini,
:root[data-theme="light"] .canvas-anno-done {
  color: #3a4250;
  background: #f2f4f7;
  border-color: #d3d8e0;
}
:root[data-theme="light"] .canvas-anno-divider { background: #d8dde4; }
:root[data-theme="light"] .canvas-notes-panel {
  border-color: #e2e6ec;
  background: rgba(248, 250, 252, .95);
}
:root[data-theme="light"] .canvas-notes-panel > header { border-color: #e2e6ec; }
:root[data-theme="light"] .canvas-note { border-color: #e2e6ec; background: #fff; }
:root[data-theme="light"] .canvas-note-input {
  color: #1a1f27;
  background: #fff;
  border-color: #d8dde4;
}
:root[data-theme="light"] .canvas-inpaint {
  border-color: #e2e6ec;
  background: rgba(255, 255, 255, .6);
}
:root[data-theme="light"] .canvas-inpaint-go.ghost {
  color: #3a4250;
  background: #f2f4f7;
  border-color: #d3d8e0;
}
:root[data-theme="light"] .canvas-inpaint-dir select {
  color: #1a1f27;
  background: #fff;
  border-color: #d8dde4;
}
:root[data-theme="light"] .canvas-anno-marker { border-color: #fff; color: #0c0e11; }

.image-frame-label {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--text);
  background: rgba(8, 9, 11, .78);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 750;
}

/* Mobile-only swap button for the two-image compare. On phones the frames
   overlap in one cell and this pill flips between them (side-by-side/stacked
   buried the lower image). Hidden on desktop, where both frames sit side by side. */
.compare-swap {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 14, 18, .86);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.compare-swap svg { width: 16px; height: 16px; }

/* Full-screen media viewer (tap the preview to open) -------------------
   Sits above modals that can launch it (asset picker 1300, crawl 1300,
   crawl-graph 1310) so the preview never opens behind them. */
.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  background: rgba(6, 7, 9, .96);
  touch-action: none;
  overscroll-behavior: contain;
}
.media-viewer.hidden { display: none; }
.media-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.media-viewer-bar button {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  color: #fff;
  background: rgba(20, 23, 28, .9);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.media-viewer-bar button:hover { border-color: var(--accent); }
.media-viewer-bar #mediaViewerZoom {
  min-width: 52px;
  text-align: center;
  color: #cdd3db;
  font-size: 12px;
  font-weight: 700;
}
.media-viewer-close { font-size: 24px; }
.media-viewer-stage {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  will-change: transform;
}
.media-viewer-stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.media-viewer-stage audio {
  width: min(90vw, 520px);
}
.media-viewer-toobig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  color: var(--text);
}
.media-viewer-toobig p {
  margin: 0;
  max-width: 360px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
body.media-viewer-open { overflow: hidden; }

.working-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(8, 9, 11, .72);
  backdrop-filter: blur(8px);
}

.image-stage.merge-preview .working-overlay {
  background: rgba(8, 9, 11, .46);
  backdrop-filter: blur(3px);
}

/* Reading a source while the answer is still generating: the user explicitly
   opened this document, so the full-cover blur would hide the very thing they
   asked to see. The overlay shrinks to a corner chip — progress stays visible
   there and on the graph's pending node, and the answer keeps streaming into
   the conversation panel. */
.image-stage.reader-preview .working-overlay {
  inset: auto 14px 14px auto;
  z-index: 6;
  width: auto;
  max-width: min(280px, 60%);
  padding: 8px 14px;
  gap: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(8, 9, 11, .92);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.image-stage.reader-preview .working-overlay .working-network,
.image-stage.reader-preview .working-overlay .working-stream,
.image-stage.reader-preview .working-overlay .working-thinking,
.image-stage.reader-preview .working-overlay #workingRemaining {
  display: none;
}

.image-stage.reader-preview .working-overlay #workingTitle {
  font-size: 12px;
  color: var(--muted);
}

.image-stage.reader-preview .working-overlay .generation-progress {
  width: 100%;
}

.working-overlay span { color: var(--muted); font-size: 13px; }
.working-overlay small { color: #777e88; font-size: 10px; }

/* Text jobs stream their answer like a chat, so the working overlay drops the
   modality chrome (neural-signal network, elapsed %, progress bar, remaining
   line) and shows a clean "Thinking…" that gives way to the streaming words —
   the ChatGPT-style experience, not the image/video loading state. */
.working-overlay--text {
  justify-content: flex-start;
  padding-top: 10vh;
}
.working-overlay--text .working-network,
.working-overlay--text #workingTime,
.working-overlay--text .generation-progress,
.working-overlay--text #workingRemaining {
  display: none;
}
.working-overlay--text #workingTitle {
  font-size: 14px;
  color: var(--muted);
}
.working-overlay--text .working-stream {
  max-height: 66%;
}

.working-stream {
  width: min(620px, 86%);
  max-height: 42%;
  margin-top: 6px;
  padding: 12px 16px;
  overflow-y: auto;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(18, 20, 24, .72);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.working-stream::after {
  content: "▍";
  margin-left: 1px;
  color: var(--accent, #aeb7c2);
  animation: stream-caret 1s steps(1) infinite;
}

@keyframes stream-caret {
  50% { opacity: 0; }
}

/* Live "thinking" panel in the working overlay: shows the model's reasoning as
   it streams, then folds to a one-line "Thought for Ns" once the answer starts
   (mirrors the ChatGPT/Copilot pattern). */
.working-thinking {
  width: min(620px, 86%);
  margin-top: 6px;
  text-align: left;
  color: var(--muted);
  background: rgba(18, 20, 24, .55);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.working-thinking > summary {
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.working-thinking > summary::-webkit-details-marker { display: none; }

.working-thinking > summary::before {
  content: "\25B8";
  font-size: 11px;
  transition: transform .15s ease;
}

.working-thinking[open] > summary::before { transform: rotate(90deg); }

.working-thinking-body {
  max-height: 30vh;
  overflow-y: auto;
  padding: 0 14px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Persisted "Thought for Ns" panel on a saved answer card (folded by default). */
.reasoning-panel {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(127, 127, 127, .05);
  overflow: hidden;
}

.reasoning-summary {
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.reasoning-summary::-webkit-details-marker { display: none; }

.reasoning-summary::before {
  content: "\25B8";
  font-size: 11px;
  transition: transform .15s ease;
}

.reasoning-panel[open] .reasoning-summary::before { transform: rotate(90deg); }

.reasoning-body {
  max-height: 30vh;
  overflow-y: auto;
  padding: 0 12px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.generation-progress {
  width: min(280px, 58%);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #30353d;
}

.generation-progress span {
  width: 2%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 68%, #606975), var(--accent));
  transition: width 1s linear;
}

.generation-progress.indeterminate span {
  transition: none;
  animation: generation-indeterminate 1.25s ease-in-out infinite;
}

@keyframes generation-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(285%); }
}

.empty-state .generation-progress {
  margin: 16px auto 0;
}

.file-signal {
  --signal-color: var(--signal-color-dark, var(--accent));
  --signal-secondary: var(--signal-secondary-dark, #62c8ff);
  width: min(390px, 78vw);
  margin: 0 auto 4px;
  color: var(--signal-color);
}

.file-signal svg {
  width: 100%;
  height: 92px;
  display: block;
  overflow: visible;
}

.nn-edge-base {
  stroke: color-mix(in srgb, var(--signal-color) 16%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.nn-edge-pulse {
  fill: none;
  stroke: var(--signal-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  opacity: .92;
  animation: nn-pulse-travel linear infinite;
}

.nn-node {
  fill: var(--signal-color);
  animation: nn-node-fire ease-in-out infinite;
}

.nn-node.out {
  fill: var(--signal-secondary);
}

.file-signal > span {
  display: block;
  margin-top: -7px;
  color: var(--signal-color);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
}

.file-signal.compact {
  width: 150px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.file-signal.compact svg {
  width: 88px;
  height: 30px;
}

.file-signal.compact > span {
  margin: 0;
  font-size: 8px;
  letter-spacing: .08em;
}

.canvas-footer.file-signal-active {
  min-height: clamp(280px, 43vh, 520px);
  justify-content: center;
  padding: 24px 5%;
}

.canvas-footer.file-signal-active #imageMeta {
  width: 100%;
  display: grid;
  place-items: center;
}

.file-signal.canvas-signal {
  width: min(1100px, 92%);
  margin: 0;
}

.file-signal.canvas-signal svg {
  height: clamp(180px, 28vh, 330px);
}

.file-signal.canvas-signal > span {
  margin-top: -18px;
  font-size: 11px;
  letter-spacing: .24em;
}

.file-signal.ingest-signal {
  width: min(360px, 78%);
  margin: 0 auto 18px;
}

.file-signal.ingest-signal svg {
  height: clamp(96px, 16vh, 150px);
}

.file-signal.working-signal {
  width: min(320px, 74%);
  margin: 2px auto 6px;
}

.file-signal.working-signal svg {
  height: clamp(88px, 14vh, 130px);
}

.ingest-network,
.working-network {
  display: grid;
  place-items: center;
  width: 100%;
}

@keyframes nn-pulse-travel {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: -100; }
}

@keyframes nn-node-fire {
  0%, 100% { opacity: .5; }
  45% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-edge-pulse,
  .nn-node {
    animation: none;
  }
  .nn-edge-pulse { opacity: .6; }
  .nn-node { opacity: .9; }
}

.node-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #12151a;
}

.node-detail-title {
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--text);
}

.node-detail-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.node-detail-label {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.node-detail-block p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.node-detail-block .markdown-body {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.concept-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.concept-list dt {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.concept-list dd {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.node-detail-label.whatif-label { color: #ff9393; }

/* Findings derived from the document's shape: themes, the sections most of it
   rests on, and the questions that shape raises. Teal throughout, matching the
   bridge marker on the canvas, so structural findings read as one family and
   stay distinct from the accent the rest of the card uses. */
.finding-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finding-chip {
  padding: 4px 10px;
  border: 1px solid rgba(94,234,212,.34);
  border-radius: 999px;
  color: #9ef0e0;
  background: rgba(94,234,212,.08);
  font-size: 12px;
  line-height: 1.3;
}

/* A theme whose sections are only loosely connected — flagged rather than
   hidden, because "this grouping may be more than one idea" is information. */
.finding-chip.is-loose {
  border-style: dashed;
  color: var(--muted);
  background: transparent;
}

.finding-link-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finding-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  background: rgba(94,234,212,.06);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.finding-link:hover,
.finding-link:focus-visible {
  border-color: rgba(94,234,212,.45);
  background: rgba(94,234,212,.13);
  outline: none;
}

.finding-link-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-link-count {
  color: #5eead4;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.concept-map {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(94,234,212,.16);
  border-radius: 10px;
  background: rgba(94,234,212,.04);
}

.concept-map-edge {
  stroke: rgba(94,234,212,.4);
}

.concept-map-node circle {
  fill: #5eead4;
  stroke: #5eead4;
  stroke-width: 1;
}

/* Hollow marks a concept the analysis inferred rather than one the document
   states outright — the same EXTRACTED/INFERRED distinction the panel uses. */
.concept-map-node.is-inferred circle {
  fill: transparent;
}

.concept-map-label {
  fill: var(--text);
  font-size: 8px;
  paint-order: stroke;
  stroke: var(--bg, #0d0f12);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.concept-map-caption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.finding-question-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finding-question-text {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.finding-question-why {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.exclusion-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exclusion-chip {
  padding: 4px 10px;
  border: 1px solid rgba(255,107,107,.4);
  border-radius: 999px;
  color: #ffb3b3;
  background: rgba(255,107,107,.08);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.exclusion-chip:hover,
.exclusion-chip:focus-visible {
  border-color: rgba(255,107,107,.7);
  background: rgba(255,107,107,.16);
  color: #ffd0d0;
  outline: none;
}

.node-detail-empty {
  color: #6f747d;
  font-size: 13px;
}
.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  border: 3px solid #333840;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.timeline-panel {
  min-width: 0;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line-soft);
  background: #0d0f12;
}

.timeline-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.timeline-heading > div:first-child {
  min-width: 0;
}

.timeline-heading strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-heading-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: 12px;
}

.timeline-heading-tools > span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-zoom-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #343a43;
  border-radius: 8px;
  background: #15181d;
}

.timeline-zoom-controls button {
  min-width: 28px;
  height: 27px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid #343a43;
  color: #d7dbe1;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.timeline-zoom-controls button:hover:not(:disabled),
.timeline-zoom-controls button:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  outline: none;
}

.timeline-zoom-controls button:disabled {
  color: #5e646d;
  cursor: default;
}

.timeline-zoom-controls span {
  min-width: 45px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.timeline-zoom-controls .timeline-fit-button {
  min-width: 38px;
  border-right: 0;
  border-left: 1px solid #343a43;
  font-size: 9px;
  font-weight: 750;
}

/* Semantic graph layout controls: mode switch + cluster toggle. */
.graph-layout-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.graph-mode-toggle {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #343a43;
  border-radius: 8px;
  background: #15181d;
}

.graph-mode-toggle button {
  height: 27px;
  padding: 0 10px;
  border: 0;
  color: #aab2bd;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.graph-mode-toggle button + button {
  border-left: 1px solid #343a43;
}

.graph-mode-toggle button:hover {
  color: #e4e8ee;
}

.graph-mode-toggle button.active {
  color: var(--on-accent);
  background: var(--accent);
}

.graph-tool-button {
  height: 27px;
  padding: 0 11px;
  border: 1px solid #343a43;
  border-radius: 8px;
  color: #aab2bd;
  background: #15181d;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.graph-tool-button:hover {
  color: #e4e8ee;
  border-color: #475061;
}

.graph-tool-button.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Translucent halos drawn behind clusters of related nodes. */
.graph-cluster-layer .cluster-hull {
  fill: var(--cluster-color);
  fill-opacity: .07;
  stroke: var(--cluster-color);
  stroke-opacity: .42;
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  pointer-events: none;
}

.graph-cluster-layer .cluster-hull-label {
  fill: var(--cluster-color);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .82;
  pointer-events: none;
}

/* Per-node collapse / expand control for branches. */
.timeline-collapse-button {
  z-index: 3;
  position: absolute;
  top: 11px;
  right: 2px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #4a535f;
  border-radius: 50%;
  color: #dce3eb;
  background: #161b21;
  box-shadow: 0 0 0 2px #0d0f12;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.timeline-collapse-button:hover,
.timeline-collapse-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.timeline-collapse-button.collapsed {
  min-width: 16px;
  width: auto;
  padding: 0 3px;
  border-radius: 8px;
  border-color: var(--accent);
  color: var(--accent);
  background: #1a2108;
}

/* Minimap overview pinned to the corner of the graph viewport. */
.graph-minimap {
  z-index: 5;
  position: absolute;
  right: 26px;
  bottom: 30px;
  width: 168px;
  height: 108px;
  padding: 0;
  border: 1px solid #343a43;
  border-radius: 8px;
  background: rgba(13, 15, 18, .82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
  backdrop-filter: blur(4px);
}

.graph-minimap.hidden {
  display: none;
}

.graph-minimap-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.graph-minimap-edge {
  stroke: #454c57;
  stroke-width: 1;
}

.graph-minimap-node {
  fill: #6b7280;
}

.graph-minimap-node.active {
  fill: var(--accent);
}

.graph-minimap-viewport {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--accent);
  stroke-width: 1.2;
  rx: 2;
}

.timeline-resizer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12px;
  margin: 4px -18px -10px;
  cursor: ns-resize;
  touch-action: none;
}

.timeline-resizer::before {
  content: "";
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: #2c3038;
  transition: background .15s, width .15s;
}

.timeline-resizer:hover::before,
.timeline-resizer:focus-visible::before,
.timeline-resizer.dragging::before {
  background: var(--accent);
  width: 64px;
  outline: none;
}

.timeline-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 360px;
  overflow: auto;
  padding: 2px 5px 6px;
  cursor: grab;
  scrollbar-color: #353942 transparent;
  touch-action: none;
  user-select: none;
  /* Vertically centre the graph in the available height. `safe center` keeps
     the track centred while it fits, and automatically falls back to top
     alignment (so scrolling/panning still reaches the top) once the graph is
     taller than the viewport. */
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

.timeline-scroll.panning {
  cursor: grabbing;
}

.timeline-scroll.panning * {
  cursor: grabbing !important;
}

.timeline-scroll button {
  cursor: pointer;
}

.timeline-track {
  position: relative;
  min-width: 100%;
  padding: 0 4px;
  /* Keep the track's JS-set height in the centring flex column; never let the
     flex parent squeeze a tall graph (it must overflow and scroll instead). */
  flex-shrink: 0;
}

.timeline-graph {
  position: relative;
  min-height: 82px;
  transform-origin: top left;
}

.timeline-connectors {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.timeline-connectors path {
  fill: none;
  stroke: #454c57;
  stroke-width: 2;
}

.timeline-connectors path.merge-edge {
  stroke: var(--accent);
  stroke-dasharray: 5 4;
  opacity: .78;
}

.timeline-connectors path.reference-edge {
  stroke: #62c8ff;
  stroke-dasharray: 3 4;
  opacity: .68;
}

.timeline-connectors path.lineage-edge {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 38%, transparent));
}

/* Secondary "also discusses" relations found in the post-processing pass. */
.timeline-connectors path.cross-ref-edge {
  stroke: #c89bff;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  opacity: .72;
  filter: drop-shadow(0 0 3px rgba(185, 140, 255, .45));
  pointer-events: stroke;
}

.timeline-connectors path.cross-ref-edge:hover {
  opacity: 1;
}

.timeline-connectors path.lineage-muted {
  opacity: .34;
}

.timeline-connectors .document-edge-label {
  fill: #82909f;
  font-size: 7px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #0d1115;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.timeline-connectors .document-edge-label.lineage-edge {
  fill: var(--accent);
}

.timeline-connectors .document-edge-label.lineage-muted {
  opacity: .42;
}

.timeline-node {
  z-index: 1;
  position: absolute;
  width: 78px;
  color: var(--muted);
  text-align: center;
}

.timeline-node.lineage-muted {
  opacity: .62;
  filter: saturate(.7);
}

.timeline-node.lineage .timeline-node-dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px #0d0f12, 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
}

.timeline-regenerate-button {
  z-index: 4;
  position: absolute;
  top: -4px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #4a535f;
  border-radius: 50%;
  color: #dce3eb;
  background: #161b21;
  box-shadow: 0 0 0 2px #0d0f12;
  cursor: pointer;
}

.timeline-regenerate-button:hover,
.timeline-regenerate-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.timeline-regenerate-button svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.timeline-redo-button {
  top: -6px;
  left: 6px;
  right: auto;
  width: 22px;
  height: 22px;
  border-color: var(--accent);
  color: var(--accent);
  background: #1a2108;
}

.timeline-node-dot.category-dot {
  border-color: var(--category-color);
  background: #15181d;
  box-shadow: 0 0 0 5px #0d0f12, 0 0 12px color-mix(in srgb, var(--category-color) 45%, transparent);
}

/* 3D (GLB) node: the server thumbnail (headless Blender) sits on top when it is
   available; if it 503s the "3D" badge underneath shows through, so a model
   node is never a blank/black circle. */
.timeline-node-dot.model-dot {
  border-color: #8f7bff;
  box-shadow: 0 0 0 5px #0d0f12, 0 0 12px color-mix(in srgb, #8f7bff 42%, transparent);
}

.model-glyph {
  color: #c6bcff;
  font-size: 18px;
}

/* Bottom toast for background-job notifications (resumed jobs finishing/failing
   after a reload). Purely additive; anchored bottom-centre above the canvas. */
.app-toast-host {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 12px 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: auto;
  box-shadow: 0 12px 34px var(--shadow);
  animation: app-toast-in .18s ease-out;
}

.app-toast.leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}

.app-toast-error {
  border-color: #7a2b2b;
  background: #241316;
}

.app-toast-error .app-toast-text {
  color: #ffc4c4;
}

.app-toast-text {
  flex: 1 1 auto;
  word-break: break-word;
}

.app-toast-close {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.app-toast-close:hover {
  color: var(--text);
  background: var(--control);
}

@keyframes app-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.category-glyph {
  font-size: 17px;
  line-height: 1;
}

.timeline-node.current .timeline-node-dot.category-dot {
  border-color: var(--accent);
}

.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 4px 2px;
}

.graph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

/* A filtered-out node keeps its place so the graph never reflows under the
   reader; it only steps back out of the way. */
.timeline-node.is-filtered {
  opacity: .17;
  filter: saturate(.25);
}

.timeline-node.is-filtered:hover,
.timeline-node.is-filtered:focus-within {
  opacity: .55;
}

.graph-legend-item {
  padding: 2px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.graph-legend-item:hover,
.graph-legend-item:focus-visible {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  outline: none;
}

.graph-legend-item.is-hidden {
  opacity: .42;
  text-decoration: line-through;
}

.graph-legend-count {
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.graph-legend-swatch {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--category-color);
  border-radius: 50%;
  background: color-mix(in srgb, var(--category-color) 14%, #15181d);
  font-size: 12px;
  line-height: 1;
}

.timeline-node-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.timeline-node-actions .timeline-branch-button {
  grid-column: 1 / -1;
}

.timeline-node-main {
  position: relative;
  width: 78px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.timeline-modality-badge,
.timeline-exclusion-record,
.timeline-version-record,
.timeline-batch-record,
.timeline-bridge-record,
.timeline-milestone-record {
  z-index: 2;
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid #49515c;
  color: #edf2f6;
  background: #15191f;
  box-shadow: 0 0 0 2px #0d0f12;
}

.timeline-version-record {
  right: 14px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-color: rgba(183,153,255,.62);
  border-radius: 4px;
  color: #cfbaff;
  font-size: 7px;
  font-weight: 900;
}

.timeline-milestone-record {
  right: 31px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
}

.timeline-modality-badge {
  left: 15px;
  top: 27px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

/* The only free corner: the other four carry version, milestone, exclusion
   and batch. Teal rather than the accent so a bridge reads as a property of
   the document's structure, not as something the user did to the node. */
.timeline-bridge-record {
  left: 15px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-color: rgba(94,234,212,.6);
  border-radius: 4px;
  color: #5eead4;
  font-size: 8px;
  font-weight: 900;
}

.timeline-modality-badge svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.timeline-exclusion-record {
  right: 14px;
  top: 27px;
  width: 14px;
  height: 14px;
  border-color: rgba(255,107,107,.55);
  border-radius: 50%;
  color: #ff8b8b;
  font-size: 10px;
  font-weight: 900;
}

.timeline-batch-record {
  right: 31px;
  top: 27px;
  width: 14px;
  height: 14px;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
}

.timeline-comment-record {
  z-index: 3;
  position: absolute;
  left: 7px;
  top: 8px;
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(120,180,255,.6);
  border-radius: 8px;
  color: #bcd6ff;
  background: #15191f;
  box-shadow: 0 0 0 2px #0d0f12;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.timeline-comment-record:hover { border-color: var(--accent); color: var(--accent); }

.timeline-feedback-record {
  z-index: 3;
  position: absolute;
  right: 7px;
  top: 8px;
  height: 16px;
  min-width: 16px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #15191f;
  box-shadow: 0 0 0 2px #0d0f12;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.timeline-feedback-record.positive { border-color: rgba(120, 210, 140, .65); }
.timeline-feedback-record.negative { border-color: rgba(255, 140, 120, .65); }
.timeline-feedback-record:hover { border-color: var(--accent); }

.timeline-node-dot {
  width: 38px;
  height: 38px;
  margin: 0 auto 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #424852;
  border-radius: 50%;
  background: #15181d;
  box-shadow: 0 0 0 5px #0d0f12;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.timeline-node-dot img,
.timeline-node-dot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-node-label {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-node-main:hover .timeline-node-dot,
.timeline-node-main:focus-visible .timeline-node-dot {
  border-color: #8d96a3;
  transform: translateY(-2px);
}

/* A strong, clearly visible focus ring as the keyboard moves across the graph. */
.timeline-node-main:focus-visible { outline: none; }
.timeline-node-main:focus-visible .timeline-node-dot {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent);
}

.timeline-node.current .timeline-node-dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px #0d0f12, 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);
}

.timeline-node.current {
  color: var(--accent);
}

.timeline-node.selected .timeline-node-dot {
  border-color: #fff;
  box-shadow: 0 0 0 5px #0d0f12, 0 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}

.timeline-node.merge-selected .timeline-node-dot {
  border-color: #62c8ff;
  box-shadow: 0 0 0 5px #0d0f12, 0 0 0 7px rgba(98,200,255,.55);
}

.timeline-node.fuse-selected .timeline-node-dot {
  border-color: #c7a3ff;
  box-shadow: 0 0 0 5px #0d0f12, 0 0 0 7px rgba(199,163,255,.55);
}

.timeline-node.context-excluded .timeline-node-dot {
  border-color: var(--danger);
  opacity: .58;
  filter: grayscale(.55);
}

.timeline-node.reference .timeline-node-dot {
  border-color: #62c8ff;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #0d0f12, 0 0 14px rgba(98,200,255,.2);
}

.timeline-node.reference .timeline-node-label {
  color: #9ddfff;
}

.timeline-node.pending {
  opacity: .9;
}

.timeline-node.pending .timeline-node-main {
  cursor: pointer;
}

.timeline-node.pending .timeline-node-dot {
  position: relative;
  border-color: var(--accent);
}

/* Keep a faint hint of the parent frame behind the in-process indicator. */
.timeline-node.pending .timeline-node-dot img,
.timeline-node.pending .timeline-node-dot video {
  opacity: .3;
}

/* Rotating arc so a pending node visibly "thinks" while the job runs. */
.timeline-node.pending .timeline-node-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  animation: timeline-node-spin .85s linear infinite;
  pointer-events: none;
}

@keyframes timeline-node-spin {
  to { transform: rotate(360deg); }
}

/* Determinate conic progress ring just inside the spinning arc. */
.timeline-node-progress {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) var(--progress),
    rgba(255, 255, 255, .16) var(--progress)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  color: transparent;
  font-size: 0;
  pointer-events: none;
}

.timeline-node.pending.current .timeline-node-dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px #0d0f12, 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);
}

.timeline-branch-button,
.timeline-merge-button,
.timeline-exclude-button {
  width: 100%;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid #343a43;
  border-radius: 6px;
  color: #c5cad1;
  background: #171a1f;
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-branch-button:hover:not(:disabled),
.timeline-merge-button:hover:not(:disabled),
.timeline-exclude-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.timeline-branch-button:disabled,
.timeline-merge-button:disabled,
.timeline-exclude-button:disabled {
  color: #727882;
  cursor: default;
  opacity: .75;
}

.timeline-merge-button {
  color: #9ddfff;
}

.timeline-exclude-button {
  color: #ff9a9a;
}

.timeline-node.context-excluded .timeline-exclude-button {
  border-color: rgba(255,107,107,.55);
  color: #ffb0b0;
  background: rgba(255,107,107,.08);
}

.timeline-node.merge-selected .timeline-merge-button {
  border-color: rgba(98,200,255,.55);
  color: #bceaff;
  background: rgba(98,200,255,.08);
}

.timeline-node.current .timeline-branch-button {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

@keyframes timelinePulse {
  50% { opacity: .25; transform: scale(.72); }
}

.timeline-balloon {
  position: fixed;
  z-index: 60;
  width: 232px;
  overflow: hidden;
  border: 1px solid #414751;
  border-radius: 13px;
  background: #15181d;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  /* Interactive: the pointer can enter the balloon to use its actions. */
  pointer-events: auto;
}

.timeline-balloon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.timeline-balloon-actions button,
.timeline-balloon-actions .button {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid #343a43;
  border-radius: 7px;
  color: #cdd2d9;
  background: #181c21;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.timeline-balloon-actions button:hover:not(:disabled),
.timeline-balloon-actions .button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.timeline-balloon-actions button:disabled {
  opacity: .38;
  cursor: default;
}

.timeline-balloon-actions .hidden {
  display: none;
}

.timeline-balloon > img,
.timeline-balloon > video {
  width: 100%;
  height: 148px;
  display: block;
  object-fit: contain;
  background: #090b0e;
}

.timeline-balloon-text {
  width: 100%;
  height: 126px;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  color: #dfe4ea;
  background: #0d1014;
  font: 9px/1.5 ui-monospace, monospace;
  white-space: pre-wrap;
}

.timeline-balloon > div {
  padding: 10px 11px 11px;
}

.timeline-balloon strong,
.timeline-balloon span {
  display: block;
}

.timeline-balloon strong {
  font-size: 12px;
}

.timeline-balloon span {
  margin-top: 3px;
  color: var(--accent);
  font-size: 9px;
}

.timeline-balloon p {
  margin-top: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-footer {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.conversation-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
}

.messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  scrollbar-color: #353942 transparent;
}

.welcome-message {
  display: flex;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #12151a;
}

.message-symbol {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
}

.welcome-message p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.message {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message.user { align-items: flex-end; }
.message.assistant { align-items: flex-start; }

.bubble {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.5;
}

.bubble > span {
  display: block;
}

.message-attachment {
  width: min(240px, 100%);
  max-height: 220px;
  display: block;
  margin: -5px -7px 9px;
  border-radius: 9px;
  object-fit: cover;
  background: #0a0c0f;
}

.user .bubble {
  color: var(--on-accent);
  background: var(--accent);
  border-bottom-right-radius: 4px;
}

.assistant .bubble {
  background: #1a1e24;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.message-time { color: #6f747d; font-size: 10px; }

.conversation-origin,
.conversation-reference {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding: 9px;
  border: 1px solid #303741;
  border-radius: 12px;
  background: #11151a;
}

.conversation-origin {
  border-left: 3px solid var(--accent);
}

.conversation-reference {
  border-left: 3px solid #62c8ff;
  background: linear-gradient(145deg, rgba(98,200,255,.08), #11151a 55%);
}

.conversation-origin img,
.conversation-reference img {
  width: 58px;
  height: 58px;
  border-radius: 9px;
  object-fit: cover;
  background: #090b0e;
}

.conversation-document-link {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(98,200,255,.45);
  border-radius: 9px;
  color: #aee5ff;
  background: rgba(98,200,255,.08);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
}

.conversation-origin span,
.conversation-origin strong,
.conversation-origin small,
.conversation-reference strong,
.conversation-reference small {
  display: block;
}

.conversation-origin span {
  color: var(--accent);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.conversation-origin strong {
  margin-top: 3px;
  font-size: 12px;
}

.conversation-origin small,
.conversation-reference small {
  margin-top: 4px;
  color: #737b86;
  font-size: 8px;
}

.conversation-reference > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.conversation-reference strong {
  font-size: 11px;
}

.conversation-reference > div > div span {
  padding: 3px 6px;
  border: 1px solid rgba(98,200,255,.4);
  border-radius: 999px;
  color: #aee5ff;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .07em;
}

.conversation-reference p {
  margin-top: 6px;
  overflow: hidden;
  color: #b8c0ca;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-message {
  width: 100%;
  align-items: stretch;
}

.result-card {
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid #323944;
  border-left: 3px solid var(--accent);
  border-radius: 13px;
  color: var(--text);
  background: linear-gradient(145deg, #171b21, #111419);
}

.result-card.video { border-left-color: #b799ff; }
.result-card.text { border-left-color: #62c8ff; }
.result-card.audio { border-left-color: #ffb85c; }

/* Assistant result cards read as left-aligned "received" chat bubbles (capped
   below the full column width), mirroring the right-aligned user prompt bubble
   so the thread feels like send/receive. Branch (compact) cards keep filling
   their own narrow column. */
.result-message .result-card:not(.compact) { max-width: 86%; }

/* ChatGPT-like: cap the whole thread to a readable column and centre it, so a
   wide or stacked layout never stretches messages edge-to-edge (narrow panes
   still fill). Send/receive alignment happens inside this centred column. */
.messages .message,
.messages .conversation-step-actions,
.messages .conversation-origin,
.messages .conversation-reference,
.messages .welcome-message {
  max-width: 768px;
  margin-inline: auto;
}

.result-card-preview {
  min-width: 0;
  min-height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid #2b313a;
  background: #090b0e;
}

.result-card-preview img,
.result-card-preview video {
  width: 100%;
  height: auto;
  max-height: min(60vh, 460px);
  display: block;
  object-fit: contain;
}

.result-card-preview audio {
  width: calc(100% - 18px);
  min-width: 96px;
}

/* Poster + play-button overlay used in place of a tiny inline video player. */
.result-card-preview .media-thumb-button {
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: 112px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.media-thumb-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(8, 10, 13, .55);
  border: 2px solid rgba(255, 255, 255, .9);
  pointer-events: none;
}
.media-thumb-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(2px);
}
.media-thumb-button:hover .media-thumb-play { background: rgba(8, 10, 13, .8); }

.result-card.audio .result-card-preview {
  align-content: center;
  gap: 10px;
  padding: 15px 4px;
}

.result-card-symbol {
  color: #ffcf8b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}

.result-card-text {
  width: 100%;
  margin: 0;
  padding: 14px 15px;
  overflow: auto;
  color: #dfeeff;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.result-card-body {
  min-width: 0;
  padding: 12px;
}

.result-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.result-card-heading strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card-kind {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid #46505c;
  border-radius: 999px;
  color: #bdc5cf;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
}

.result-card-instruction {
  margin-top: 8px;
  overflow: hidden;
  color: #aeb6c1;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
}

.result-card-metadata div {
  min-width: 0;
}

.result-card-metadata dt {
  color: #686f79;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.result-card-metadata dd {
  max-width: 100px;
  margin: 2px 0 0;
  overflow: hidden;
  color: #d4dae2;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card.compact {
  grid-template-columns: 1fr;
  border-left-width: 2px;
  border-radius: 9px;
}

.result-card.compact .result-card-preview {
  min-height: 74px;
  border-right: 0;
  border-bottom: 1px solid #2b313a;
}

.result-card.compact .result-card-preview img,
.result-card.compact .result-card-preview video {
  min-height: 74px;
  max-height: 104px;
}

.result-card.compact .result-card-body {
  padding: 8px;
}

.result-card.compact .result-card-instruction,
.result-card.compact .result-card-metadata {
  margin-top: 6px;
}

.result-card.compact .result-card-text {
  max-height: 104px;
  padding: 9px;
  font-size: 9px;
}

/* Branch/merge history stays a small thumbnail even though the default card
   now shows media large. */
.result-card.compact .result-card-preview img,
.result-card.compact .result-card-preview video {
  max-height: 150px;
}

/* Chat placeholder shown while a node is still generating. */
.result-card.pending { opacity: .97; }
.pending-preview {
  display: grid;
  place-items: center;
  min-height: 96px;
  background: #0c0e11;
}
/* Text jobs stream reasoning + answer into the card, so the preview drops the
   centered spinner box and grows from the top like the final saved card. */
.result-card-preview.pending-preview-text {
  display: block;
  place-items: initial;
  min-height: 0;
  text-align: left;
}
.pending-preview-text .pending-reasoning { margin: 12px 12px 0; }
.pending-preview-text .pending-answer { padding-top: 6px; }
.pending-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .16);
  border-top-color: var(--accent);
  animation: pending-spin .8s linear infinite;
}
@keyframes pending-spin { to { transform: rotate(360deg); } }
.pending-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
/* Live progress bar on a pending chat card. Hidden on desktop (the studio panel
   already shows the NN + percentage beside the chat) and shown on mobile, where
   the studio is a separate tab — so image/video/audio jobs, which have no
   streamed thoughts, still signal active progress right in the chat. */
.pending-progress { display: none; margin-top: 10px; }
.pending-progress .pending-progress-track { width: 100%; }
.pending-progress-label {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .pending-progress { display: block; }
}

.version-diff {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.version-diff-prompts {
  display: grid;
  gap: 10px;
}

.version-diff-prompts > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-inset);
}

.version-diff-prompts strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
}

.version-diff-prompts p,
.prompt-diff-line {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.prompt-diff-line {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-inset);
}

.prompt-diff-add,
.prompt-diff-remove {
  padding: 1px 3px;
  border-radius: 4px;
}

.prompt-diff-add {
  color: #dfffb1;
  background: rgba(116, 185, 72, .22);
}

.prompt-diff-remove {
  color: #ffb9b9;
  background: rgba(255, 107, 107, .18);
  text-decoration: line-through;
}

.conversation-step {
  display: contents;
}

.conversation-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 14px 2px;
}

/* User-prompt actions align to the right to sit under the right-aligned bubble. */
.conversation-step-actions.user-actions {
  justify-content: flex-end;
  margin-bottom: 4px;
}

/* On pointer devices (desktop/mouse), hide action buttons until the parent
   conversation step is hovered — keeps the chat cleaner. Touch devices always
   show buttons since hover isn't available. */
@media (hover: hover) and (pointer: fine) {
  .conversation-step > .conversation-step-actions {
    opacity: 0;
    transition: opacity .15s;
  }
  .conversation-step:hover > .conversation-step-actions {
    opacity: 1;
  }
}

.conversation-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 999px;
  color: var(--text-soft, #c8ccd2);
  background: var(--surface-raised, #15181d);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.conversation-action:hover { border-color: var(--accent); color: var(--text, #f4f2ed); }
.conversation-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.conversation-action.feedback-up.active { color: #36b06a; border-color: #36b06a; }
.conversation-action.feedback-down.active { color: var(--danger, #ff6b6b); border-color: var(--danger, #ff6b6b); }
.conversation-action.copied { color: var(--accent); border-color: var(--accent); }
/* A finished download holds its check mark (and ignores clicks) for the
   5-minute cooldown — see DOWNLOAD_COOLDOWN_MS in download-format.js. */
.conversation-action.downloaded { color: var(--accent); border-color: var(--accent); cursor: default; }
.conversation-action.speak-aloud.speaking { color: var(--accent); border-color: var(--accent); animation: speak-pulse 1s ease-in-out infinite; }
@keyframes speak-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.conversation-action.follow-up { color: var(--accent); }

/* Square, icon-only variant used by the per-response controls (copy, speak,
   rate, follow-up, save, download, info) so the row is crisp vector icons. */
.conversation-action.icon-only {
  width: 28px;
  padding: 0;
  justify-content: center;
}
.conversation-action svg { display: block; flex: 0 0 auto; }
.conversation-action.save-asset.saved { color: var(--accent); border-color: var(--accent); }

/* Per-response details popover + "try another model" regenerate control. */
.conversation-model-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.conversation-action.info-toggle {
  width: 24px;
  padding: 0;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.conversation-action.info-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.conversation-info-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  min-width: 230px;
  max-width: 320px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 12px;
  background: var(--surface-raised, #15181d);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.conversation-info-menu.hidden { display: none; }
.conversation-info-list { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.conversation-info-list > div { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.conversation-info-list dt { color: var(--muted, #9aa3ad); font-size: 11px; flex: 0 0 auto; }
.conversation-info-list dd {
  margin: 0;
  color: var(--text, #f4f2ed);
  font-size: 12px;
  text-align: right;
  word-break: break-word;
  max-width: 70%;
}
.conversation-action.try-model { gap: 5px; }
.conversation-action.try-model-caret,
.conversation-action.copy-format-caret,
.conversation-action.download-format-caret {
  padding: 0 7px;
  font-size: 10px;
}
.conversation-action.try-model-caret[aria-expanded="true"],
.conversation-action.copy-format-caret[aria-expanded="true"],
.conversation-action.download-format-caret[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.conversation-model-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 12px;
  background: var(--surface-raised, #15181d);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conversation-model-menu.hidden { display: none; }
/* The copy and download split-buttons sit at the LEFT end of the actions row,
   so their format menus grow rightward instead of off the card's left edge. */
.conversation-model-menu.copy-format-menu,
.conversation-model-menu.download-format-menu { right: auto; left: 0; }
.conversation-model-option {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft, #c8ccd2);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.conversation-model-option:hover { background: var(--surface, #0f1217); color: var(--text, #f4f2ed); }
.conversation-model-option.current { color: var(--accent); font-weight: 600; }

/* A preview image whose src failed to load must never leave the browser's
   broken-image box in the pane (it renders at the frame's top-left because a
   broken img has no intrinsic size); app.js adds/removes this class. */
.img-load-failed { visibility: hidden; }

/* Copy-source control floating over the node text preview. */
.canvas-text-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 8px;
  background: var(--surface-raised, #15181d);
  color: var(--text-soft, #c8ccd2);
  cursor: pointer;
  opacity: 0.82;
  transition: border-color .15s, color .15s, opacity .15s, background .15s;
}
.canvas-text-copy:hover { opacity: 1; border-color: var(--accent); color: var(--text, #f4f2ed); }
.canvas-text-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.canvas-text-copy::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.canvas-text-copy.copied {
  border-color: var(--accent);
  color: var(--accent);
}
.canvas-text-copy.copied::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Creation-actions panel (Midjourney-style) over the image/video preview */
.preview-actions-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 9px;
  background: rgba(18, 21, 26, 0.86);
  color: var(--text-soft, #c8ccd2);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color .15s, color .15s, background .15s;
}
.preview-actions-toggle:hover { border-color: var(--accent); color: var(--text, #f4f2ed); }
.preview-actions-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.preview-actions-toggle.hidden { display: none; }

.preview-actions-panel {
  position: absolute;
  top: 56px;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  width: 248px;
  max-width: calc(100% - 24px);
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 14px;
  background: rgba(15, 18, 23, 0.94);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
.preview-actions-panel.hidden { display: none; }
.preview-actions-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.preview-actions-head strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.preview-actions-close { border: 0; background: transparent; color: var(--muted, #9aa3ad); font-size: 18px; line-height: 1; cursor: pointer; }
.preview-actions-close:hover { color: var(--text, #f4f2ed); }
.preview-actions-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.preview-actions-rowlabel { flex: 0 0 58px; font-size: 11px; color: var(--muted, #9aa3ad); }
.preview-actions-btns { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.preview-action-btn {
  flex: 1;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 8px;
  background: var(--surface-raised, #15181d);
  color: var(--text-soft, #c8ccd2);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.preview-action-btn:hover { border-color: var(--accent); color: var(--text, #f4f2ed); background: var(--surface, #0f1217); }
.upscaler-picker { position: relative; display: inline-flex; align-items: center; }
.upscaler-caret {
  border: 1px solid var(--line, #2a2f37);
  background: var(--surface-raised, #15181d);
  color: var(--muted, #9aa3ad);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
}
.upscaler-caret:hover { color: var(--text, #f4f2ed); border-color: var(--accent); }
.upscaler-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 8;
  min-width: 172px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 10px;
  background: rgba(15, 18, 23, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upscaler-menu.hidden { display: none; }
.upscaler-option {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-soft, #c8ccd2);
  cursor: pointer;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 7px;
  white-space: nowrap;
}
.upscaler-option:hover { background: var(--surface, #0f1217); color: var(--text, #f4f2ed); }
.upscaler-option.is-active { color: var(--accent); }

/* Animation preset picker (Rig -> "Animate"): a modal over Meshy's 600+ library */
.anim-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 7, 12, 0.62);
  backdrop-filter: blur(4px);
}
.anim-picker-backdrop.hidden { display: none; }
.anim-picker {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(76vh, 620px);
  padding: 16px 18px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 16px;
  background: rgba(15, 18, 23, 0.98);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.anim-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.anim-picker-head strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.anim-picker-close { border: 0; background: transparent; color: var(--muted, #9aa3ad); font-size: 22px; line-height: 1; cursor: pointer; }
.anim-picker-close:hover { color: var(--text, #f4f2ed); }
.anim-picker-hint {
  margin: -4px 0 11px;
  color: var(--muted, #9aa3ad);
  font-size: 11.5px;
  line-height: 1.4;
}
.anim-picker-search {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 10px;
  background: var(--surface-raised, #15181d);
  color: var(--text, #f4f2ed);
  font-size: 13px;
}
.anim-picker-search:focus { outline: none; border-color: var(--accent); }
.anim-picker-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.anim-picker-cat {
  padding: 5px 11px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 999px;
  background: var(--surface-raised, #15181d);
  color: var(--text-soft, #c8ccd2);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.anim-picker-cat:hover { border-color: var(--accent); color: var(--text, #f4f2ed); }
.anim-picker-cat.is-active { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.anim-picker-featured { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.anim-picker-featured-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #9aa3ad); margin-right: 2px; }
.anim-picker-chip {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.anim-picker-chip:hover { background: var(--accent); color: var(--on-accent); }
.anim-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}
.anim-picker-item {
  display: flex;
  align-items: center;
  min-height: 42px;
  text-align: left;
  padding: 7px 11px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 9px;
  background: var(--surface-raised, #15181d);
  color: var(--text-soft, #c8ccd2);
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  /* Motion names vary a lot in length ("Idle" vs "Sit to Stand Transition F"):
     wrap to a second line and centre vertically so every label is fully
     readable instead of clipped onto one line. Grid stretch keeps a row's
     cells the same height. */
  overflow-wrap: anywhere;
}
.anim-picker-item:hover { border-color: var(--accent); color: var(--text, #f4f2ed); background: var(--surface, #0f1217); }
.anim-picker-loading, .anim-picker-empty, .anim-picker-more {
  grid-column: 1 / -1;
  padding: 16px 4px;
  color: var(--muted, #9aa3ad);
  font-size: 12px;
  text-align: center;
}
.anim-picker-empty.hidden { display: none; }

.conversation-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 13px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.conversation-section-heading small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.conversation-branches {
  min-width: 310px;
  display: grid;
  grid-template-columns: repeat(2, minmax(145px, 1fr));
  gap: 9px;
  margin: 5px 0 14px;
}

.conversation-branch {
  min-width: 0;
  align-self: start;
  padding: 9px;
  border: 1px solid #303640;
  border-radius: 13px;
  background: #111419;
}

.conversation-branch.first {
  border-top-color: #62c8ff;
}

.conversation-branch.second {
  border-top-color: var(--accent);
}

.branch-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.branch-heading strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-branch.first .branch-heading strong { color: #8ed8ff; }
.conversation-branch.second .branch-heading strong { color: var(--accent); }

.branch-heading span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 8px;
}

.branch-step + .branch-step {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed #2b3038;
}

.branch-history-reveal {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 3px;
  margin: 11px 0;
  padding: 9px 6px;
  border: 1px dashed #3a424d;
  border-radius: 9px;
  color: #aeb5bf;
  background: #171b21;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.branch-history-reveal:hover,
.branch-history-reveal:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  outline: none;
}

.branch-history-reveal + .branch-step {
  margin-top: 0;
  padding-top: 11px;
  border-top: 1px dashed #2b3038;
}

.branch-history-dots {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .18em;
  line-height: .7;
}

.branch-history-reveal strong {
  font-size: 9px;
  font-weight: 700;
}

.branch-history-reveal small {
  color: var(--muted);
  font-size: 8px;
}

.branch-step .message {
  margin-bottom: 7px;
  gap: 4px;
}

.branch-step .message:last-child {
  margin-bottom: 0;
}

.branch-step .bubble {
  width: 100%;
  max-width: 100%;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.4;
}

.branch-step .message-time {
  font-size: 8px;
}

.branch-empty {
  padding: 13px 4px;
  color: #747a84;
  font-size: 9px;
  text-align: center;
}

.conversation-merge-join {
  position: relative;
  display: grid;
  place-items: center;
  margin: 3px 0 17px;
}

.conversation-merge-join::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4a525e 20%, #4a525e 80%, transparent);
}

.conversation-merge-join span {
  position: relative;
  z-index: 1;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  color: var(--accent);
  background: #111419;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.suggestions {
  display: flex;
  gap: 7px;
  padding: 0 20px 12px;
  overflow-x: auto;
}

.suggestions button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}

.suggestions button:hover { color: var(--text); border-color: #4a505b; }

.merge-bar {
  margin: 0 18px 10px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(98,200,255,.35);
  border-radius: 12px;
  background: rgba(98,200,255,.06);
}

.fuse-bar {
  margin: 0 18px 10px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(199,163,255,.35);
  border-radius: 12px;
  background: rgba(199,163,255,.07);
}

.fuse-bar > div { min-width: 0; }
.fuse-bar .eyebrow { color: #c7a3ff; }
.fuse-bar strong,
.fuse-bar small { display: block; }
.fuse-bar strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fuse-bar small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.fuse-strategy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fuse-strategy span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fuse-strategy select {
  padding: 6px 8px;
  border: 1px solid rgba(199,163,255,.4);
  border-radius: 9px;
  color: var(--text);
  background: #15191f;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}
.fuse-strategy select:focus {
  outline: none;
  border-color: #c7a3ff;
}
#runFuseButton {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 10px;
}
#runFuseButton:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.exclusion-bar {
  margin: 0 18px 10px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255,107,107,.35);
  border-radius: 12px;
  background: rgba(255,107,107,.06);
}

.exclusion-bar .eyebrow { color: #ff9393; }
.exclusion-bar strong,
.exclusion-bar small { display: block; }
.exclusion-bar strong { font-size: 11px; }
.exclusion-bar small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.request-cost {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 14px 10px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.request-cost #requestCost {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cost-help-button {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #39404a;
  border-radius: 50%;
  color: var(--muted);
  background: #15191f;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.cost-help-button:hover,
.cost-help-button[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.cost-help-popover {
  position: fixed;
  z-index: 60;
  left: 10px;
  right: auto;
  bottom: auto;
  top: auto;
  width: min(300px, calc(100vw - 24px));
  padding: 11px 12px;
  border: 1px solid #39404a;
  border-radius: 10px;
  color: var(--text);
  background: #15191f;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
  white-space: normal;
}

.cost-help-popover strong {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
}

.cost-help-popover p {
  margin: 4px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.cost-help-popover p:last-child {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.merge-bar strong,
.merge-bar small {
  display: block;
}

.merge-bar strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-bar small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.composer {
  margin: 0 12px 10px;
  border: 1px solid #343943;
  border-radius: 15px;
  background: #0c0e12;
  overflow: hidden;
  position: relative;
  z-index: 4;
  align-self: end;
  transition: border-color .2s;
}

.composer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid #252a32;
  color: var(--muted);
  background: #111419;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.composer-toggle span:last-child {
  color: var(--accent);
  transition: transform .15s;
}

.composer.collapsed .composer-toggle {
  border-bottom: 0;
}

.composer.collapsed .composer-toggle span:last-child {
  transform: rotate(180deg);
}

.composer.collapsed .composer-body {
  display: none;
}

.composer:focus-within { border-color: #646b77; }

.composer.attachment-dragging {
  border-color: #62c8ff;
  background: rgba(98,200,255,.06);
}

.composer-attachments {
  display: grid;
  gap: 8px;
}

.composer-attachment {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px;
  margin: 10px 10px 0;
  padding: 8px;
  border: 1px solid rgba(98,200,255,.3);
  border-radius: 11px;
  background: rgba(98,200,255,.06);
}

.composer-attachment img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #090b0e;
}

.composer-attachment video {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #090b0e;
}

.composer-attachment img.generic {
  border: 1px dashed #4a5360;
  background:
    linear-gradient(135deg, rgba(98,200,255,.14), color-mix(in srgb, var(--accent) 8%, transparent)),
    #11151a;
}

.composer-attachment div {
  min-width: 0;
}

.composer-attachment strong,
.composer-attachment small {
  display: block;
}

.composer-attachment strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.composer-attachment button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: #1b2027;
  cursor: pointer;
}

.composer-attachment button:hover {
  color: var(--text);
  background: #252b34;
}

.composer textarea {
  width: 100%;
  min-height: 58px;
  padding: 12px 16px 6px;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  line-height: 1.45;
}

.composer textarea::placeholder { color: #666b74; }

.modality-field {
  position: relative;
  flex-shrink: 0;
  display: flex;
}

.modality-glyph { color: var(--accent); font-size: 13px; line-height: 1; }
.chip-caret { margin-left: 1px; color: var(--muted); font-size: 9px; line-height: 1; }

.modality-popover {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 3px;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  border: 1px solid #39404a;
  border-radius: 12px;
  background: #15191f;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .36);
}

.modality-popover.hidden { display: none; }

.modality-popover legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.modality-popover label { cursor: pointer; }

.modality-popover input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modality-popover span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.modality-popover span b {
  width: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.modality-popover label:hover span { background: #1f242c; }

.modality-popover input:checked + span {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.modality-popover input:checked + span b { color: var(--accent); }

.modality-popover input:focus-visible + span {
  outline: 2px solid #8ed8ff;
  outline-offset: 1px;
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 9px 9px 14px;
}

.composer-tools {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 5px;
}

.attach-image-button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid #313741;
  border-radius: 8px;
  color: #b9c0c9;
  background: #15191f;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.attach-image-button span {
  color: #8ed8ff;
  font-size: 14px;
  line-height: .7;
}

.attach-image-button:hover:not(:disabled) {
  border-color: #62c8ff;
  color: #dff4ff;
}

.attach-image-button:disabled {
  cursor: wait;
  opacity: .45;
}

.composer-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid #313741;
  border-radius: 9px;
  color: #c2c9d2;
  background: #15191f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.composer-chip > span[aria-hidden="true"]:first-child {
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
}

.composer-chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}

.composer-chip:disabled { cursor: wait; opacity: .45; }

.icon-chip {
  width: 30px;
  padding: 0;
  justify-content: center;
}

.composer-chip.icon-chip > span[aria-hidden="true"] { font-size: 15px; }

/* "More tools" (...) collapses the secondary composer tools (Prompt Studio,
   Plugins, Batch, Auto-pilot) so the toolbar stays a few icon buttons. */
.composer-overflow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 5px;
}
.composer-overflow.hidden { display: none; }
.composer-more-button[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.mode-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-shrink: 1;
  margin-left: 2px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.mode-pill #modeText {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mode-pill .mode-dot { flex-shrink: 0; background: #5b8aff; }
.mode-pill.edit .mode-dot { background: var(--accent); }

.send-button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 10px;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}

.send-button b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(0,0,0,.13);
  font-size: 14px;
}

.send-button:disabled { cursor: wait; opacity: .55; }
.send-button, .send-button span, .send-button b { color: var(--on-accent); }

/* Stop state: the same button, reading as an interruption rather than an
   action you are about to take. Muted rather than accent so it never looks
   like the thing to press by default. */
.send-button.is-stop {
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.send-button.is-stop,
.send-button.is-stop span,
.send-button.is-stop b { color: var(--text); }
.send-button.is-stop b {
  background: none;
  /* The glyph is U+25A0; shrink it to a tidy square rather than a huge one. */
  font-size: 11px;
}
.send-button.is-stop:hover { background: var(--border); }
/* Disabled here means the cancel is already away, so "wait" is honest. */
.send-button.is-stop:disabled { cursor: wait; }

.settings {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 11px;
}

.settings summary { cursor: pointer; user-select: none; }
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.settings label { display: grid; gap: 5px; }
.settings .seed-field { grid-column: 1 / -1; }
.settings .adherence-field { grid-column: 1 / -1; }
/* A knob the currently-selected model does not support (#7 capability reveal). */
.cap-hidden { display: none !important; }
.settings .model-field { grid-column: 1 / -1; }

/* Advanced per-model input knobs, read from the selected model's schema and
   shown right below the model picker. */
.settings .model-knobs {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.model-knobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.model-knobs-reset {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-faint);
  font-size: 10px;
  cursor: pointer;
}
.model-knobs-reset:hover { color: var(--accent); border-color: var(--accent); }
.model-knobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.model-knob-field { display: grid; gap: 4px; min-width: 0; }
.model-knob-caption {
  overflow: hidden;
  font-size: 10px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-knob-field input,
.model-knob-field select { width: 100%; }
.model-knob-field.model-knob-boolean {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.model-knob-field.model-knob-boolean input { width: auto; margin: 0; }
.model-knobs-hint {
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.35;
}
.settings .model-field small {
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.35;
}
.settings .safety-sensitivity-field { grid-column: 1 / -1; gap: 4px; }
.settings .safety-sensitivity-field > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.settings .safety-sensitivity-field input[type="checkbox"] { width: auto; margin: 0; }
.settings .safety-sensitivity-field small {
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.35;
}

.video-settings,
.audio-settings {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(98,200,255,.22);
  border-radius: 10px;
  background: rgba(98,200,255,.04);
}

.video-settings .range-field,
.audio-settings .range-field {
  grid-column: 1 / -1;
}

.audio-settings-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-faint);
  font-size: 9px;
}

.video-estimate {
  grid-column: 1 / -1;
  padding: 7px 8px;
  border-radius: 7px;
  color: #aeb5bf;
  background: rgba(0,0,0,.18);
  font-size: 9px;
  line-height: 1.4;
}

.range-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.range-field output {
  min-width: 28px;
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 9px;
  text-align: center;
}

.range-field small {
  color: #737985;
  font-size: 9px;
  line-height: 1.35;
}

.settings input, .settings select {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0d0f13;
  outline: 0;
}

.settings input[type="range"] {
  height: 18px;
  padding: 0;
  border: 0;
  accent-color: var(--accent);
  background: transparent;
}

.settings-field {
  position: relative;
  flex-shrink: 0;
  display: flex;
}

.settings-gear { color: var(--accent); font-size: 13px; line-height: 1; }

.settings-popover {
  position: fixed;
  z-index: 60;
  left: 16px;
  bottom: 16px;
  width: min(340px, calc(100vw - 28px));
  max-height: min(62vh, 460px);
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid #39404a;
  border-radius: 14px;
  background: #14181e;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .46);
}

.settings-popover.hidden { display: none; }

.settings-popover-head { margin-bottom: 12px; }

.settings-popover-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.settings-popover .settings-grid { margin-top: 0; }

.button, .icon-button, .text-button {
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
}

.button.secondary, .icon-button {
  border: 1px solid var(--line);
  background: #171a1f;
}

.icon-button {
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 11px;
}

.text-button { padding: 0; color: var(--muted); font-size: 11px; }
.text-button:hover { color: var(--text); }
.hidden { display: none !important; }

.history-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(3px);
}

.history-drawer {
  position: fixed;
  z-index: 31;
  top: 58px;
  right: 0;
  width: min(430px, 94vw);
  height: calc(100dvh - 58px);
  display: grid;
  /* header, tab strip, the scrolling list, then the footer actions. The list
     is the only row that flexes; adding a child without extending this hands
     the 1fr to the wrong row and the tab strip becomes a slab. */
  grid-template-rows: auto auto 1fr auto;
  border-left: 1px solid var(--line);
  background: #0d0f12;
  box-shadow: -20px 0 60px rgba(0,0,0,.4);
  transform: translateX(102%);
  transition: transform .24s ease;
}

.history-drawer.open { transform: translateX(0); }

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 22px;
  border-bottom: 1px solid var(--line-soft);
}

.drawer-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: #15181d;
  cursor: pointer;
  font-size: 20px;
}

.history-list.grafy-session-list {
  overflow-y: auto;
  padding: 12px;
  --grafy-session-row-height: 88px;
  --grafy-session-row-gap: 9px;
  --grafy-session-row-bg: #12151a;
  --grafy-session-row-hover-bg: #171a20;
  --grafy-session-row-border: var(--line-soft);
  --grafy-session-row-hover-border: #444a54;
}

.history-loading, .history-empty {
  padding: 60px 20px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

/* "Show more" pager at the bottom of a long session list (windowed render). */
.history-show-more {
  width: 100%;
  margin: 4px 0 10px;
  padding: 10px;
  border: 1px dashed var(--line-soft);
  border-radius: 13px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.history-show-more:hover { color: var(--text); border-color: var(--accent); }

/* Glowing placeholder cards shown the instant the Sessions panel opens, while
   the real list loads in the background — the open never waits on the fetch. */
.history-skeleton-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
}
.history-skeleton-card .hs-lines { display: grid; gap: 9px; }
.history-skeleton-card .hs-thumb { height: 54px; border-radius: 10px; }
.history-skeleton-card .hs-line { height: 11px; border-radius: 6px; }
.history-skeleton-card .hs-line.short { width: 55%; }
.history-skeleton-card .hs-thumb,
.history-skeleton-card .hs-line {
  background: linear-gradient(90deg, #171a1f 25%, #23272e 37%, #171a1f 63%);
  background-size: 400% 100%;
  animation: history-shimmer 1.3s ease-in-out infinite;
}
@keyframes history-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.history-card {
  width: 100%;
  padding: 9px;
  border-color: var(--line-soft);
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
}

.history-card:hover, .history-card.active {
  border-color: #444a54;
  background: #171a20;
}

.history-card.active { box-shadow: inset 3px 0 var(--accent); }

.history-card:hover,
.history-card:focus-within {
  box-shadow: 0 14px 28px rgba(0,0,0,.34);
}

.history-card.active:hover,
.history-card.active:focus-within {
  box-shadow: inset 3px 0 var(--accent), 0 14px 28px rgba(0,0,0,.34);
}

.history-card-open {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.history-thumb {
  position: relative;
  width: 86px;
  height: 68px;
  overflow: hidden;
  border-radius: 9px;
  background: #090b0e;
}

.history-thumb img,
.history-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-thumb.audio::after {
  content: "\266A";
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 10, 14, .72);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}

.history-thumb.empty {
  display: grid;
  place-items: center;
  color: #555b64;
  font-size: 20px;
}

.history-details { min-width: 0; }
.history-details strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}

.history-details span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.history-details span.pending {
  color: var(--accent);
}

.history-delete:disabled {
  cursor: wait;
  opacity: .55;
}

.history-actions [data-shared="1"] { color: var(--accent); }

.history-footer {
  display: grid;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.history-new {
  color: var(--on-accent);
  background: var(--accent);
}

.history-footer small { color: #686e77; font-size: 10px; }

.history-compare-open {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--text-soft, #c7ccd4);
}

.history-compare {
  display: grid;
  gap: 10px;
  padding: 14px 20px 4px;
  border-top: 1px solid var(--line-soft);
}

.history-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-compare-head strong { font-size: 13px; }

.history-compare-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #8b919b;
}

.history-compare-label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: #9aa0aa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.history-compare select,
.history-compare-note {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #e7e9ee);
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}

.history-compare-status {
  font-size: 12px;
  color: #c8a24a;
}

.library-drawer {
  position: fixed;
  z-index: 31;
  top: 58px;
  right: 0;
  width: min(560px, 96vw);
  height: calc(100dvh - 58px);
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  border-left: 1px solid var(--line);
  background: #0d0f12;
  box-shadow: -20px 0 60px rgba(0,0,0,.4);
  transform: translateX(102%);
  transition: transform .24s ease;
}

.library-drawer.open { transform: translateX(0); }

/* --- Collaboration drawer ------------------------------------------------ */
.collab-drawer {
  position: fixed;
  z-index: 31;
  top: 58px;
  right: 0;
  width: min(440px, 95vw);
  height: calc(100dvh - 58px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  border-left: 1px solid var(--line);
  background: #0d0f12;
  box-shadow: -20px 0 60px rgba(0,0,0,.4);
  transform: translateX(102%);
  transition: transform .24s ease;
}
.collab-drawer.open { transform: translateX(0); }

.collab-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 18px 0;
}
.collab-tab {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--muted);
  background: #12151a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.collab-tab:hover { border-color: #4b515b; }
.collab-tab.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.collab-body {
  min-height: 0;
  overflow: hidden;
  display: grid;
}
.collab-panel {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.collab-panel[hidden] { display: none; }

.collab-comments-context {
  padding: 12px 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line-soft);
}
.collab-comments-context strong { color: var(--text); }

.collab-comment-list,
.collab-activity-list,
.collab-people-list {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collab-empty {
  padding: 44px 16px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.collab-comment {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
}
.collab-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}
.collab-avatar img { width: 100%; height: 100%; object-fit: cover; }

.collab-comment-main { min-width: 0; }
.collab-comment-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.collab-comment-author { color: var(--text); font-size: 12px; font-weight: 700; }
.collab-comment-time { color: var(--muted); font-size: 10px; }
.collab-comment-body {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.collab-mention { color: var(--accent); font-weight: 700; }
.collab-comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}
.collab-comment-actions button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  padding: 0;
}
.collab-comment-actions button:hover { color: var(--text); }
.collab-comment-actions button.danger:hover { color: var(--danger); }

.collab-composer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line-soft);
}
.collab-composer-field { position: relative; min-width: 0; }
.collab-composer textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--text);
  background: #12151a;
  font: inherit;
  font-size: 12px;
}
.collab-composer textarea:disabled { opacity: .5; cursor: not-allowed; }

.collab-mention-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: 100%;
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #14181d;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.collab-mention-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
}
.collab-mention-option:hover,
.collab-mention-option.active { background: #1d222a; }

.collab-activity-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
}
.collab-activity-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1b1f26;
  font-size: 12px;
}
.collab-activity-text { font-size: 12px; color: var(--text-soft); line-height: 1.45; }
.collab-activity-text strong { color: var(--text); font-weight: 700; }
.collab-activity-time { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.collab-person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: #12151a;
}
.collab-person-main { min-width: 0; flex: 1; }
.collab-person-name { color: var(--text); font-size: 12px; font-weight: 700; }
.collab-person-meta { color: var(--muted); font-size: 10px; }
.collab-role-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #1d222a;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.collab-presence-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4b515b;
}
.collab-presence-dot.online { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.collab-people-hint {
  margin: 0;
  padding: 4px 18px 16px;
  color: var(--muted);
  font-size: 10px;
}

/* Live presence cursors layered inside the timeline graph */
.collab-cursor-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}
.collab-cursor {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  pointer-events: none;
  will-change: transform;
  transition: transform .12s linear;
}
.collab-cursor svg {
  display: block;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.collab-cursor-label {
  position: absolute;
  left: 13px;
  top: 14px;
  padding: 2px 7px;
  border-radius: 7px;
  color: #0b0c10;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.library-toolbar {
  display: flex;
  gap: 10px;
  padding: 14px 20px 0;
}

.library-upload {
  color: var(--on-accent);
  background: var(--accent);
}

.library-upload.busy { opacity: .6; pointer-events: none; }

.library-search-row { padding: 10px 20px 0; }
.library-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text, #f4f2ed);
  background: #14171c;
  font: inherit;
  font-size: 13px;
}
.library-search:focus { outline: none; border-color: var(--accent); }

/* Attach-context menu (paperclip → upload / asset library) */
.attach-menu {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  min-width: 196px;
  padding: 5px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 12px;
  background: var(--surface-raised, #15181d);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.attach-menu.hidden { display: none; }
.attach-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft, #c8ccd2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.attach-menu-item:hover { background: var(--surface, #0f1217); color: var(--text, #f4f2ed); }
.attach-menu-ic { width: 18px; text-align: center; color: var(--accent); }

/* Asset picker modal (attach a saved asset as chat context) */
.asset-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}
.asset-picker-overlay.hidden { display: none; }
.asset-picker {
  width: min(720px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 16px;
  background: var(--surface-raised, #15181d);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.asset-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.asset-picker-head strong { font-size: 15px; }
.asset-picker-close {
  border: 0; background: transparent; color: var(--muted, #9aa3ad);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.asset-picker-close:hover { color: var(--text, #f4f2ed); }
.asset-picker-search {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 9px;
  color: var(--text, #f4f2ed);
  background: var(--surface, #0f1217);
  font: inherit;
  font-size: 13px;
}
.asset-picker-search:focus { outline: none; border-color: var(--accent); }
.asset-picker-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.asset-picker-empty { grid-column: 1 / -1; padding: 48px 10px; text-align: center; color: var(--muted, #9aa3ad); font-size: 13px; }
.asset-picker-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 12px;
  background: var(--surface, #0f1217);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .1s;
}
.asset-picker-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.asset-picker-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.asset-picker-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0c0e11;
  font-size: 26px;
  color: var(--muted, #9aa3ad);
}
.asset-picker-thumb img, .asset-picker-thumb video { width: 100%; height: 100%; object-fit: cover; }
/* Overlaid "preview" control -- opens the viewer without selecting. */
.asset-picker-preview {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(8, 10, 13, .62);
  color: #fff;
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s, background .15s, transform .1s;
}
.asset-picker-preview:hover { opacity: 1; background: rgba(8, 10, 13, .88); transform: scale(1.06); }
.asset-picker-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.asset-picker-preview svg { width: 15px; height: 15px; display: block; }
.asset-picker-title {
  font-size: 12px;
  color: var(--text-soft, #c8ccd2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Save-to-assets action + saved state */
.conversation-action.save-asset.saved { color: var(--accent); border-color: var(--accent); }

/* Model hint warning (chat won't fit the chosen model's context window) */
.model-hint-warn { color: #ffb454 !important; }

/* Web-crawler "add from a link" dialog */
.crawl-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}
.crawl-overlay.hidden { display: none; }
.crawl-dialog {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 16px;
  background: var(--surface-raised, #15181d);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.crawl-head { display: flex; align-items: center; justify-content: space-between; }
.crawl-head strong { font-size: 15px; }
.crawl-close { border: 0; background: transparent; color: var(--muted, #9aa3ad); font-size: 22px; line-height: 1; cursor: pointer; }
.crawl-close:hover { color: var(--text, #f4f2ed); }
.crawl-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted, #9aa3ad); }
.crawl-label.hidden { display: none; }
.crawl-label input, .crawl-label textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 9px;
  color: var(--text, #f4f2ed);
  background: var(--surface, #0f1217);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.crawl-label input:focus, .crawl-label textarea:focus { outline: none; border-color: var(--accent); }
.crawl-hint { font-size: 11px; color: var(--muted, #9aa3ad); margin: 0; line-height: 1.5; }
.crawl-status { font-size: 12px; margin: 0; color: var(--muted, #9aa3ad); }
.crawl-status.error { color: var(--danger, #ff6b6b); }
.crawl-status.hidden { display: none; }
.crawl-actions { display: flex; justify-content: flex-end; gap: 10px; }
.library-url { margin-left: 8px; }
.crawl-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft, #c8ccd2); cursor: pointer; }
.crawl-check.hidden { display: none; }
.crawl-check input { width: auto; }

/* Crawl-graph modal (recursive crawl visualised as a page graph) */
.crawlgraph-overlay {
  position: fixed;
  inset: 0;
  z-index: 1310;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
}
.crawlgraph-overlay.hidden { display: none; }
.crawlgraph {
  width: min(1080px, 100%);
  height: min(760px, 90vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 16px;
  background: var(--surface-raised, #15181d);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.crawlgraph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line, #2a2f37);
}
.crawlgraph-head strong { font-size: 15px; }
.crawlgraph-sub { font-size: 12px; color: var(--muted, #9aa3ad); margin-top: 3px; max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crawlgraph-head-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.crawlgraph-body { flex: 1; display: flex; min-height: 0; }
.crawlgraph-canvas { flex: 1; overflow: auto; padding: 16px; background: var(--surface, #0f1217); }
.crawlgraph-svg { display: block; }
.crawlgraph-edge { fill: none; stroke: var(--line, #3a414b); stroke-width: 1.6; }
.crawlgraph-node { cursor: pointer; }
.crawlgraph-node rect { fill: var(--surface-raised, #15181d); stroke: var(--line, #2a2f37); stroke-width: 1.5; transition: stroke .15s; }
.crawlgraph-node:hover rect { stroke: var(--accent); }
.crawlgraph-node.depth-0 rect { stroke: var(--accent); stroke-width: 2; }
.crawlgraph-node-title { fill: var(--text, #f4f2ed); font-size: 13px; font-weight: 600; }
.crawlgraph-node-sub { fill: var(--muted, #9aa3ad); font-size: 11px; }
.crawlgraph-detail {
  flex: 0 0 300px;
  border-left: 1px solid var(--line, #2a2f37);
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crawlgraph-detail strong { font-size: 14px; }
.crawlgraph-link { font-size: 12px; word-break: break-all; color: var(--accent); }
.crawlgraph-meta { font-size: 12px; color: var(--muted, #9aa3ad); }
.crawlgraph-snippet { font-size: 13px; color: var(--text-soft, #c8ccd2); line-height: 1.5; margin: 0; }
@media (max-width: 720px) { .crawlgraph-detail { display: none; } }

.library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px 4px;
}

.library-filter {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #14171c;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.library-filter:hover { border-color: #4b515b; }

.library-filter.active {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}

.library-list {
  overflow-y: auto;
  padding: 14px 16px;
}

.library-loading, .library-empty {
  padding: 60px 22px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.library-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #15181d;
  overflow: hidden;
}

.library-card:hover { border-color: #3a414b; }

.library-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0d10;
  overflow: hidden;
}

.library-thumb img,
.library-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-thumb-glyph {
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
  opacity: .85;
}

.library-kind-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(8, 10, 13, .78);
  color: var(--text);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.library-card.kind-image .library-kind-badge { color: var(--accent); }
.library-card.kind-video .library-kind-badge { color: #62c8ff; }
.library-card.kind-audio .library-kind-badge,
.library-card.kind-audio .library-thumb-glyph { color: #c7a3ff; }
.library-card.kind-document .library-kind-badge,
.library-card.kind-document .library-thumb-glyph { color: #ffd27c; }
.library-card.kind-file .library-kind-badge,
.library-card.kind-file .library-thumb-glyph { color: #9aa3b2; }

.library-card-body {
  display: grid;
  gap: 3px;
  padding: 9px 11px 6px;
}

.library-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-card-meta {
  color: var(--muted);
  font-size: 10.5px;
}

.library-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 11px 11px;
  margin-top: auto;
}

.library-action {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: #1b1f25;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.5;
}

.library-action:hover { border-color: #4b515b; }

.library-action.primary {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}

.library-action.danger { color: #ff9b9b; }
.library-action.danger:hover { border-color: rgba(255, 107, 107, .5); }

.settings-backdrop {
  position: fixed;
  z-index: 110;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(5px);
}

.appearance-dialog {
  position: fixed;
  z-index: 111;
  top: 76px;
  right: 24px;
  width: min(390px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.share-dialog {
  position: fixed;
  z-index: 111;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
}

.appearance-dialog > header,
.share-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.appearance-dialog h2,
.share-dialog h2 { margin: 3px 0 0; font-size: 20px; }

.appearance-section {
  display: grid;
  gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.appearance-section:last-child { border-bottom: 0; }
.appearance-section > strong,
.appearance-section strong { font-size: 12px; }
.appearance-section small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.share-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px auto;
  gap: 10px;
  align-items: end;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.share-link-panel {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.share-link-panel strong,
.share-link-panel small {
  display: block;
}

.share-link-panel strong { font-size: 12px; }
.share-link-panel small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.share-link-controls,
.share-link-result {
  display: grid;
  grid-template-columns: 130px auto;
  gap: 10px;
  align-items: center;
}

.share-link-result {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.share-link-list {
  display: grid;
  gap: 8px;
}

.share-link-role {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
}

.share-link-panel input,
.share-link-panel select {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.share-link-panel input:focus,
.share-link-panel select:focus { border-color: var(--accent); }

.share-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.share-form input,
.share-form select {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.share-form input:focus,
.share-form select:focus { border-color: var(--accent); }

.share-upgrade-hint {
  margin: -2px 0 2px;
  font-size: 11px;
  color: #c8a24a;
}

.share-form select option:disabled,
.share-link-panel select option:disabled {
  color: #6b7280;
}

.share-list {
  display: grid;
  gap: 8px;
  padding: 16px 20px 20px;
}

.share-empty {
  color: var(--muted);
  font-size: 12px;
}

.share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.share-row strong,
.share-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-row strong { font-size: 13px; }
.share-row small { color: var(--muted); font-size: 11px; }

.share-role-badge {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 10px;
  text-transform: capitalize;
}

.share-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-raised);
  cursor: pointer;
}

.share-remove:hover,
.share-remove:focus-visible {
  border-color: var(--danger);
  color: var(--danger);
  outline: none;
}

/* --- Prompt Studio ------------------------------------------------------ */
.studio-button span { color: var(--accent); }
.studio-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}

.settings-button .settings-button-label { display: none; }

/* --- Batch generation --------------------------------------------------- */
.batch-field {
  position: relative;
  flex-shrink: 0;
  display: flex;
}
.batch-field.hidden { display: none; }

#batchButtonLabel:empty { display: none; }
.batch-button span:first-child { color: var(--accent); }
.batch-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}
.batch-button.active {
  width: auto;
  padding: 0 9px;
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.batch-button.active span:first-child { color: var(--on-accent); }

/* --- Auto-pilot --------------------------------------------------------- */
.autopilot-button .autopilot-glyph { color: var(--accent); font-size: 14px; }
.autopilot-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}
.autopilot-button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.autopilot-button[aria-pressed="true"] .autopilot-glyph { color: var(--on-accent); }

.autopilot-panel {
  margin: 0 0 10px;
  padding: 12px 13px;
  border: 1px solid #39404a;
  border-radius: 12px;
  background: #14181e;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.autopilot-panel.hidden { display: none; }
.autopilot-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.autopilot-panel-head strong { font-size: 12px; }
.autopilot-plan-source {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid #39404a;
}
.autopilot-plan-source.is-llm { color: var(--accent); border-color: var(--accent); }
.autopilot-plan-source.is-fallback { color: #f0b866; border-color: #6a5326; }
.autopilot-plan-source:empty { display: none; }
.autopilot-panel-close {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.autopilot-panel-close:hover { color: var(--text); background: #1f242c; }
.autopilot-panel-lead {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.autopilot-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.autopilot-step {
  padding: 8px 10px;
  border: 1px solid #2b313a;
  border-radius: 9px;
  background: #0f1318;
}
.autopilot-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.autopilot-step-glyph { color: var(--accent); font-size: 13px; line-height: 1; }
.autopilot-step-label { font-size: 11px; font-weight: 700; color: var(--text); }
.autopilot-step-why {
  margin: 4px 0 0 21px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.autopilot-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}
.autopilot-plan-cost { color: var(--muted); font-size: 10px; font-weight: 700; }
.autopilot-panel-actions { display: flex; gap: 8px; }
.autopilot-panel-actions .ghost-button,
.autopilot-panel-actions .primary-button {
  height: 30px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.autopilot-panel-actions .ghost-button {
  border: 1px solid #39404a;
  color: var(--text);
  background: transparent;
}
.autopilot-panel-actions .ghost-button:hover { border-color: var(--accent); }
.autopilot-panel-actions .primary-button {
  border: 1px solid var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.autopilot-panel-actions .primary-button:disabled { opacity: .5; cursor: not-allowed; }

.batch-popover {
  position: fixed;
  z-index: 60;
  width: min(264px, calc(100vw - 44px));
  padding: 12px 13px;
  border: 1px solid #39404a;
  border-radius: 12px;
  color: var(--text);
  background: #15191f;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .36);
  white-space: normal;
}
.batch-popover.hidden { display: none; }
.batch-popover strong {
  display: block;
  font-size: 11px;
}

/* Deep-research popover (reuses the .batch-popover box + JS positioning). */
/* Research / Podcast / Explainer chips carry a text label alongside the icon,
   so they must size to their content instead of the icon-only 30px square that
   ``.icon-chip`` forces (three fixed-width labelled chips would overlap). */
.composer-chip.icon-chip.research-button {
  width: auto;
  padding: 0 9px;
  gap: 4px;
  justify-content: center;
}
.research-field { position: relative; display: inline-flex; }
.research-popover { display: flex; flex-direction: column; gap: 8px; }
.research-input-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}
.research-input-field input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #39404a;
  border-radius: 8px;
  background: #10141a;
  color: var(--text);
  font-size: 12px;
  box-sizing: border-box;
}
.research-input-field input:focus { outline: none; border-color: var(--accent); }
.research-input-field select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #39404a;
  border-radius: 8px;
  background: #10141a;
  color: var(--text);
  font-size: 12px;
  box-sizing: border-box;
}
.research-input-field select:focus { outline: none; border-color: var(--accent); }
.podcast-host-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.research-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
}
.research-run {
  margin-top: 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.research-run:hover { filter: brightness(1.06); }
.batch-popover-lead {
  margin: 5px 0 10px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.batch-count-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.batch-count-field select {
  width: 84px;
  padding: 6px 8px;
  border: 1px solid #39404a;
  border-radius: 8px;
  color: var(--text);
  background: #0f1318;
  font-size: 11px;
  font-weight: 700;
}
.batch-mode {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.batch-mode-option {
  padding: 8px 9px;
  border: 1px solid #313741;
  border-radius: 9px;
  color: #b9c0c9;
  background: #0f1318;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
}
.batch-mode-option:hover { border-color: var(--accent); }
.batch-mode-option.active {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.batch-hint {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.batch-compare {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 8, 11, .72);
  backdrop-filter: blur(4px);
}
.batch-compare.hidden { display: none; }
.batch-compare-panel {
  width: min(1080px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #2c333d;
  border-radius: 16px;
  background: #11151b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.batch-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #232a33;
}
.batch-compare-head strong { font-size: 13px; }
.batch-compare-close {
  width: 30px;
  height: 30px;
  border: 1px solid #39404a;
  border-radius: 8px;
  color: var(--muted);
  background: #15191f;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.batch-compare-close:hover {
  border-color: var(--accent);
  color: var(--text);
}
.batch-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
  overflow: auto;
}
.batch-compare-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #2a313b;
  border-radius: 12px;
  background: #0f1318;
  overflow: hidden;
}
.batch-compare-tile.current { border-color: var(--accent); }
.batch-compare-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0a0d11;
}
.batch-compare-media.clickable { cursor: pointer; }
.batch-compare-media.audio,
.batch-compare-media.text {
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  min-height: 120px;
}
.batch-compare-text {
  max-height: 180px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.batch-compare-tile figcaption {
  padding: 10px 11px;
  border-top: 1px solid #232a33;
}
.batch-compare-tile figcaption strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-compare-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.batch-compare-pick {
  width: 100%;
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}
.batch-compare-pick:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.batch-compare-pick:disabled {
  border-color: #39404a;
  color: var(--muted);
  background: transparent;
  cursor: default;
}
.batch-compare-tile.origin { border-color: color-mix(in srgb, var(--accent) 45%, #2a313b); }
.batch-compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.regen-chip {
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Regeneration controls dialog */
.regen-dialog {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 8, 11, .72);
  backdrop-filter: blur(4px);
}
.regen-dialog.hidden { display: none; }
.regen-card {
  width: min(540px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #2c333d;
  border-radius: 16px;
  background: #11151b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.regen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #232a33;
}
.regen-source { display: flex; align-items: center; gap: 11px; min-width: 0; }
.regen-source-preview {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #2a313b;
  border-radius: 10px;
  background: #0a0d11;
  overflow: hidden;
}
.regen-source-preview img { width: 100%; height: 100%; object-fit: cover; }
.regen-source-glyph { color: var(--muted); font-size: 18px; }
.regen-source-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regen-source-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.regen-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid #39404a;
  border-radius: 8px;
  color: var(--muted);
  background: #15191f;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.regen-close:hover { border-color: var(--accent); color: var(--text); }
.regen-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow: auto;
}
.regen-row { display: flex; flex-direction: column; gap: 7px; }
.regen-row-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}
.regen-row-hint { color: var(--muted); font-size: 9px; line-height: 1.45; }
.regen-row select,
#regenLockCustom {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #2c333d;
  border-radius: 9px;
  color: var(--text);
  background: #0f1318;
  font-size: 12px;
}
.regen-row select:focus,
#regenLockCustom:focus { outline: none; border-color: var(--accent); }
.regen-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #2a313b;
  border-radius: 11px;
  background: #0f1318;
  cursor: pointer;
}
.regen-toggle input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent); }
.regen-row-copy { display: flex; flex-direction: column; gap: 3px; }
.regen-locks { display: flex; flex-wrap: wrap; gap: 7px; }
.regen-lock-chip {
  padding: 6px 11px;
  border: 1px solid #39404a;
  border-radius: 999px;
  color: var(--muted);
  background: #12161c;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.regen-lock-chip:hover { border-color: var(--accent); color: var(--text); }
.regen-lock-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.regen-versions { display: flex; gap: 7px; }
.regen-version-option {
  width: 46px;
  padding: 8px 0;
  border: 1px solid #39404a;
  border-radius: 9px;
  color: var(--muted);
  background: #12161c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.regen-version-option:hover { border-color: var(--accent); color: var(--text); }
.regen-version-option.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.regen-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid #232a33;
  background: #0f1318;
}
.regen-summary { flex: 1; min-width: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.regen-foot-buttons { display: flex; gap: 9px; flex-shrink: 0; }
.regen-foot-buttons .button { font-size: 11px; padding: 8px 14px; }

.negative-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 10px;
  margin: 10px 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 120, 120, .38);
  border-radius: 11px;
  background: rgba(255, 120, 120, .08);
}
.negative-chip strong,
.negative-chip small { display: block; }
.negative-chip strong { color: #ff9a9a; font-size: 10px; }
.negative-chip small {
  max-height: 34px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.negative-chip button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: #1b2027;
  cursor: pointer;
}
.negative-chip button:hover { color: var(--text); }

.studio-dialog {
  position: fixed;
  z-index: 111;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
}

.studio-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.studio-dialog h2 { margin: 3px 0 0; font-size: 20px; }

.export-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px;
  overflow-y: auto;
}
.export-block { display: flex; flex-direction: column; gap: 10px; }
.export-block h3 { margin: 0; font-size: 14px; font-weight: 800; }
.export-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.export-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.export-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.export-card:disabled { opacity: .55; cursor: progress; transform: none; }
.export-card-title { font-size: 13px; font-weight: 800; }
.export-card-sub { font-size: 11px; color: var(--muted); }

.export-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.export-import-name {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.export-dialog .button { cursor: pointer; }
.export-import-start {
  align-self: flex-start;
  border: 1px solid var(--accent);
  background: var(--accent-dark);
  color: var(--text);
}
.export-import-start:disabled { opacity: .5; cursor: not-allowed; }

.export-status { margin: 0; min-height: 16px; font-size: 12px; color: var(--muted); }
.export-status.ok { color: var(--accent); }
.export-status.error { color: #ff6b6b; }

.api-keys-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}
.api-keys-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.api-keys-hint code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.api-keys-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.api-keys-form > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.api-keys-form > label small { color: var(--muted); font-weight: 500; }
.api-keys-form input[type="text"],
.api-keys-form input[type="number"] {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}
.api-keys-form input:focus { outline: none; border-color: var(--accent); }
.api-keys-scope {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}
.api-keys-scope input { width: 14px; height: 14px; accent-color: var(--accent); }
.api-keys-form .button {
  align-self: flex-start;
  border: 1px solid var(--accent);
  background: var(--accent-dark);
  color: var(--text);
  cursor: pointer;
}
.api-key-reveal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-dark);
}
.api-key-reveal strong { font-size: 13px; }
.api-key-reveal small { color: var(--muted); font-size: 11px; }
.api-key-reveal-row { display: flex; gap: 8px; margin-top: 6px; }
.api-key-reveal-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.api-key-reveal-row .button { cursor: pointer; }
.api-keys-list { display: flex; flex-direction: column; gap: 8px; }
.api-keys-empty { margin: 0; color: var(--muted); font-size: 12px; }
.api-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.api-key-row.revoked { opacity: .6; }
.api-key-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.api-key-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.api-key-name { font-size: 13px; font-weight: 800; }
.api-key-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.api-key-meta { font-size: 11px; color: var(--muted); }
.api-key-actions { flex-shrink: 0; }
.text-button.danger { color: #ff6b6b; }
.text-button.danger:hover { color: #ff9090; }

/* Outbound webhooks (reuses the .api-keys-* dialog chrome) */
.webhooks-events {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.webhooks-events legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.webhooks-events label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.webhooks-events input { width: 14px; height: 14px; accent-color: var(--accent); }
.webhook-row { flex-wrap: wrap; }
.webhook-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
}
.webhook-row.disabled { opacity: .6; }
.webhook-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.webhook-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* Completion notifications (More menu icon + settings dialog) */
.notify-icon {
  position: relative;
  width: 13px;
  height: 11px;
  background: var(--accent);
  clip-path: polygon(50% 0, 64% 7%, 80% 26%, 82% 70%, 100% 88%, 0 88%, 18% 70%, 20% 26%, 36% 7%);
}
.notify-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
.notifications-dialog { width: min(460px, calc(100vw - 32px)); }
.notifications-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
}
.notifications-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.notifications-hint span { color: var(--text); font-weight: 700; }
.notify-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.notify-option input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.notify-option-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notify-option-text strong { font-size: 13px; font-weight: 750; }
.notify-option-text small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.notify-option.disabled { opacity: .55; cursor: not-allowed; }
.notify-option.disabled input { cursor: not-allowed; }
.notifications-status { margin: 0; min-height: 16px; font-size: 12px; color: var(--accent); }

/* Model marketplace (More menu icon + dialog) */
.marketplace-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--accent);
  border-radius: 3px;
}
.marketplace-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 5px;
  height: 5px;
  margin-left: -3px;
  transform: rotate(45deg);
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
}
.marketplace-dialog { width: min(680px, calc(100vw - 32px)); }
.marketplace-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px 0;
}
.marketplace-filter {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.marketplace-filter:hover { color: var(--text); }
.marketplace-filter.active {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.marketplace-body {
  padding: 16px 20px;
  overflow-y: auto;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.marketplace-empty { margin: 8px 0; color: var(--muted); font-size: 13px; text-align: center; }
.marketplace-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.marketplace-card[data-status="installed"] {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.marketplace-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}
.marketplace-card-head .marketplace-status-badge { margin-left: auto; }
.marketplace-card-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  padding: 3px;
}
.marketplace-card-logo.fallback {
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--surface-raised);
  border-color: var(--line);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
}
.marketplace-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 2px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.marketplace-group-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.marketplace-group-logo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--line-soft);
  padding: 2px;
}
.marketplace-group-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.marketplace-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marketplace-card-title h3 { margin: 0; font-size: 15px; font-weight: 800; }
.marketplace-card-family { font-size: 11.5px; color: var(--muted); }
.marketplace-card-meta { font-size: 12px; color: var(--muted); }
.marketplace-card-notes { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.marketplace-card-rating { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.marketplace-card-error { margin: 0; font-size: 12px; color: var(--danger); line-height: 1.4; }
.marketplace-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.marketplace-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
}
.marketplace-status-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
}
.marketplace-status-badge[data-status="installed"] {
  color: #ffffff;
  border-color: #2f9e57;
  background: #2f9e57;
}
.marketplace-status-badge[data-status="downloading"] {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}
.marketplace-status-badge[data-status="builtin"] {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface-raised);
}
.marketplace-status-badge[data-status="error"] {
  color: #ffffff;
  border-color: var(--danger);
  background: var(--danger);
}
.marketplace-card-actions { display: flex; align-items: center; gap: 10px; }
.marketplace-action {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}
.marketplace-action:hover { filter: brightness(1.08); }
.marketplace-action:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.marketplace-action.remove {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
.marketplace-action.remove:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  filter: none;
}
.marketplace-action.remove.armed {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
}
.marketplace-action-note { font-size: 11.5px; color: var(--muted); }
.marketplace-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}
.marketplace-cache { font-size: 12px; color: var(--muted); }
.marketplace-status { font-size: 12px; color: var(--accent); min-height: 16px; text-align: right; }
.marketplace-status[data-tone="error"] { color: var(--danger); }

/* Semantic search & RAG (More menu icon + dialog) */
.search-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
}
.search-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 6px;
  height: 1.6px;
  background: var(--accent);
  transform: rotate(45deg);
  transform-origin: left center;
}
.search-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
}
.search-modes {
  display: inline-flex;
  gap: 4px;
  margin: 14px 20px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  align-self: flex-start;
}
.search-mode-option {
  padding: 6px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}
.search-mode-option:hover { color: var(--text); }
.search-mode-option.active {
  color: var(--on-accent);
  background: var(--accent);
}
.search-query {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
}
.search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px 0;
}
.search-filter {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.search-filter:hover { color: var(--text); }
.search-filter.active {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}
.search-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.search-answer {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 13px;
  background: var(--surface);
}
.search-answer-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}
.search-answer-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.search-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  max-width: 100%;
}
.search-source-chip:hover { border-color: var(--accent); color: var(--text); }
.search-source-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-source-index {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--accent);
}
.search-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.search-result-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.search-result-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.search-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.search-result-title { margin: 0; font-size: 14px; font-weight: 800; min-width: 0; }
.search-result-type {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.search-result-snippet { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.search-result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
.search-result-score { font-weight: 700; }
.search-empty { margin: 10px 0; color: var(--muted); font-size: 13px; text-align: center; }
.search-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--line-soft);
}
.search-footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}
.search-provider { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.search-index-info { font-size: 11px; color: var(--muted); }
.search-footer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-model-label { font-size: 11.5px; color: var(--muted); }
.search-model-select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  max-width: 220px;
}
.search-status { width: 100%; font-size: 12px; color: var(--accent); min-height: 16px; }
.search-status[data-tone="error"] { color: var(--danger); }

/* Project / session memory */
.memory-icon {
  position: relative;
  width: 11px;
  height: 13px;
  border: 1.6px solid var(--accent);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}
.memory-icon::after {
  content: "";
  position: absolute;
  left: -1.6px;
  right: -1.6px;
  bottom: -1px;
  height: 6px;
  border: 1.6px solid var(--accent);
  border-top: none;
  clip-path: polygon(0 0, 100% 0, 50% 70%);
}
.memory-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(82vh, 780px);
}
.memory-intro {
  margin: 12px 20px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.memory-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 0;
}
.memory-form-row { display: flex; gap: 8px; }
.memory-kind-select {
  flex-shrink: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.memory-title-input,
.memory-body-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
}
.memory-body-input { width: 100%; resize: vertical; line-height: 1.5; }
.memory-title-input:focus,
.memory-body-input:focus,
.memory-kind-select:focus { outline: none; border-color: var(--accent); }
.memory-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.memory-pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-soft);
  margin-right: auto;
}
.memory-body-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.memory-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.memory-card.pinned {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.memory-card-head { display: flex; align-items: center; gap: 9px; }
.memory-card-kind {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.memory-card-title { margin: 0; font-size: 14px; font-weight: 800; min-width: 0; flex: 1; }
.memory-card-auto {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 750;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.memory-card-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
  white-space: pre-wrap;
}
.memory-card-actions { display: flex; gap: 8px; }
.memory-card-action {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.memory-card-action:hover { border-color: var(--accent); color: var(--text); }
.memory-card-action.danger:hover { border-color: var(--danger); color: var(--danger); }
.memory-empty { margin: 10px 20px; color: var(--muted); font-size: 13px; text-align: center; }
.memory-footer {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-top: 1px solid var(--line-soft);
}
.memory-status { font-size: 12px; color: var(--accent); min-height: 16px; }
.memory-status[data-tone="error"] { color: var(--danger); }

.studio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px 0;
}
.studio-tab {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.studio-tab:hover { color: var(--text); }
.studio-tab.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-dark);
}

.studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}
.studio-kind-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.studio-toolbar .button {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  white-space: nowrap;
  text-transform: capitalize;
}
.studio-toolbar .button:hover { border-color: var(--accent); }

.studio-editor {
  display: grid;
  gap: 10px;
  margin: 0 20px 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.studio-editor input,
.studio-editor textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  outline: none;
  resize: vertical;
}
.studio-editor input:focus,
.studio-editor textarea:focus { border-color: var(--accent); }
.studio-editor-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.studio-editor-hint {
  flex: 1;
  color: var(--muted);
  font-size: 10px;
  text-transform: capitalize;
}
.studio-editor .button {
  color: var(--on-accent);
  background: var(--accent);
}

.studio-body {
  overflow-y: auto;
  padding: 4px 20px 20px;
}
.studio-section { display: grid; gap: 8px; margin-top: 14px; }
.studio-group-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studio-list { display: grid; gap: 8px; }
.studio-empty { margin: 0; color: var(--muted); font-size: 12px; }

.studio-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}
.studio-entry-text { min-width: 0; }
.studio-entry-text strong { display: block; font-size: 13px; }
.studio-entry-text small {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.studio-entry-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.studio-entry-actions .button {
  padding: 7px 11px;
  color: var(--on-accent);
  background: var(--accent);
}
.studio-entry-actions .button:hover { filter: brightness(1.06); }
.studio-delete:hover { color: var(--danger); }

@media (max-width: 620px) {
  .studio-entry { grid-template-columns: minmax(0, 1fr); }
  .studio-entry-actions { justify-content: flex-end; }
}

/* Magic prompt - LLM-assisted expand / negatives / critique inside the studio */
.studio-magic {
  display: grid;
  gap: 12px;
  padding: 4px 20px 20px;
  overflow-y: auto;
}
.studio-magic textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  outline: none;
  resize: vertical;
  font: inherit;
}
.studio-magic textarea:focus { border-color: var(--accent); }
.studio-magic-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.studio-magic-target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.studio-magic-target select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
}
.studio-magic-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-magic-status {
  margin: 0;
  min-height: 16px;
  color: var(--accent);
  font-size: 12px;
}
.studio-magic-status[data-tone="error"] { color: var(--danger); }
.studio-magic-result {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.studio-magic-note {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.studio-magic-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.studio-magic-result-actions .button {
  color: var(--on-accent);
  background: var(--accent);
}
.studio-magic-result-actions .button:hover { filter: brightness(1.06); }

/* Quality feedback dialog (reuses .studio-dialog chrome) */
.feedback-dialog { width: min(480px, calc(100vw - 32px)); }
.feedback-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}
.feedback-target {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}
.feedback-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feedback-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.feedback-choice:hover { transform: translateY(-1px); border-color: var(--muted); }
.feedback-choice-glyph { font-size: 26px; line-height: 1; }
.feedback-choice[data-choice="up"].active {
  border-color: #2f9e57;
  background: #2f9e57;
  color: #ffffff;
}
.feedback-choice[data-choice="down"].active {
  border-color: var(--danger);
  background: var(--danger);
  color: #ffffff;
}
.feedback-reasons { display: flex; flex-direction: column; gap: 10px; }
.feedback-section-label,
.feedback-note-label {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  color: var(--text-soft);
}
.feedback-reason-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-reason-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.feedback-reason-chip:hover { border-color: var(--muted); color: var(--text); }
.feedback-reason-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.feedback-note {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.feedback-note:focus { outline: none; border-color: var(--accent); }
.feedback-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-soft);
}
.feedback-footer .feedback-status { margin-right: auto; font-size: 12px; color: var(--muted); }
.feedback-footer .text-button.danger { margin-right: auto; }
.feedback-footer .text-button.danger + .feedback-status { margin-right: 0; }

/* Safety & privacy dialog (reuses .studio-dialog chrome) */
.privacy-icon {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 22%, 100% 60%, 50% 100%, 0 60%, 0 22%);
}
.privacy-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 3px;
  height: 4px;
  margin-left: -1.5px;
  margin-top: -2px;
  border-radius: 1px;
  background: var(--on-accent);
}
.privacy-dialog { width: min(520px, calc(100vw - 32px)); }
.privacy-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
}
.privacy-intro { margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.45; }
.privacy-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  cursor: pointer;
}
.privacy-toggle-text { display: flex; flex-direction: column; gap: 3px; }
.privacy-toggle-title { font-size: 13px; font-weight: 750; color: var(--text); }
.privacy-toggle-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.privacy-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.privacy-switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transform: translateY(-50%);
  transition: transform .16s ease, background .16s ease;
}
.privacy-switch:checked { background: var(--accent); border-color: var(--accent); }
.privacy-switch:checked::before { background: var(--on-accent); transform: translate(18px, -50%); }
.privacy-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.privacy-switch:disabled { opacity: .5; cursor: not-allowed; }
.privacy-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.4;
}
.privacy-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.privacy-danger-text { display: flex; flex-direction: column; gap: 3px; }
.button.danger {
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  cursor: pointer;
}
.button.danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.button.danger.armed { background: var(--danger); border-color: var(--danger); color: #2a0606; }
.button.danger[disabled] { opacity: .5; cursor: not-allowed; }
.privacy-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-soft);
}
.privacy-footer .privacy-status { margin-right: auto; font-size: 12px; color: var(--muted); }
.privacy-footer .privacy-status.error { color: var(--danger); }
.privacy-footer .button:not(.secondary) { color: var(--on-accent); background: var(--accent); }
.privacy-footer .button:disabled { opacity: .5; cursor: not-allowed; }

/* Workflow Presets dialog (reuses .studio-dialog chrome) */
.presets-hint {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.preset-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}
.preset-entry.is-disabled { opacity: .55; }
.preset-glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-dark);
  font-size: 17px;
  line-height: 1;
}
.presets-enhance {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.presets-enhance-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.presets-enhance-head strong { font-size: 14px; }
.presets-enhance-source { color: var(--muted); font-size: 11px; }
.presets-enhance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.presets-enhance-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.presets-enhance-grid input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  outline: none;
}
.presets-enhance-grid input:focus { border-color: var(--accent); }
.presets-enhance-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.presets-enhance-check input { width: auto; }
.presets-enhance-out { margin: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.presets-enhance-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.presets-enhance-cost { flex: 1; color: var(--muted); font-size: 11px; }
.presets-enhance .button { color: var(--on-accent); background: var(--accent); }
.presets-enhance .button[disabled] { opacity: .5; cursor: not-allowed; }
.presets-enhance > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.presets-enhance select {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  outline: none;
}
.presets-enhance select:focus { border-color: var(--accent); }
.presets-enhance select option[disabled] { color: var(--muted); }
.presets-enhance-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.presets-enhance-note.is-warn { color: var(--warn, #d98324); }

.reference-extra { display: grid; gap: 6px; }
.reference-extra-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.reference-extra-list { display: grid; gap: 4px; max-height: 132px; overflow-y: auto; }
.reference-extra-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
}
.reference-extra-item input { width: auto; }
.reference-extra-item small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-extra-empty { color: var(--muted); font-size: 11px; }

@media (max-width: 620px) {
  .preset-entry { grid-template-columns: auto minmax(0, 1fr); }
  .preset-entry .studio-entry-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Video Timeline Editor dialog (reuses .studio-dialog chrome) */
.video-tool-empty {
  margin: 4px 0 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  background: var(--surface);
}
.video-tool-empty strong { color: var(--text); }
.video-tool {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}
.video-tool-field,
.video-tool-grid label,
.video-tool-grid-single {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.video-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.video-tool-grid-single { max-width: 180px; }
.video-tool select,
.video-tool input[type="text"],
.video-tool input[type="number"],
.video-tool textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel);
  outline: none;
  font: inherit;
  resize: vertical;
}
.video-tool select:focus,
.video-tool input:focus,
.video-tool textarea:focus { border-color: var(--accent); }
.video-tool .range-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.video-tool .range-field > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-tool .range-field output { color: var(--accent); font-weight: 800; }
.video-tool .range-field small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}
.video-tool input[type="range"] { width: 100%; accent-color: var(--accent); }
.video-tool-label { margin: 0; color: var(--muted); font-size: 12px; }
.video-clip-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.video-clip-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
}
.video-clip-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.video-clip-option input { accent-color: var(--accent); }
.video-clip-order {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 11px;
  font-weight: 800;
  visibility: hidden;
}
.video-clip-option.is-picked .video-clip-order { visibility: visible; }
.video-clip-text { min-width: 0; }
.video-clip-text strong { display: block; font-size: 12px; color: var(--text); }
.video-clip-text small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.video-tool-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.video-tool-cost { flex: 1; color: var(--muted); font-size: 11px; }
.video-tool .button { color: var(--on-accent); background: var(--accent); }
.video-tool .button[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 620px) {
  .video-tool-grid { grid-template-columns: 1fr; }
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel-2);
  cursor: pointer;
  font-size: 11px;
}

.theme-options label:has(input:checked) {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.theme-options input { accent-color: var(--accent); }

.accent-picker,
.language-picker,
.credit-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.language-picker span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.language-picker select {
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.language-picker select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.accent-picker input {
  width: 48px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  cursor: pointer;
}

.accent-presets { display: flex; gap: 9px; }
.accent-presets button {
  width: 26px;
  height: 26px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.accent-presets button:hover { transform: scale(1.1); }
.credit-settings { grid-template-columns: 1fr auto; }
.credit-settings b { color: var(--accent); }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f7;
  --panel: #ffffff;
  --panel-2: #f5f7fa;
  --line: #c8ced8;
  --line-soft: #e1e5eb;
  --text: #151922;
  --muted: #596273;
  --text-soft: #354052;
  --text-faint: #758094;
  --surface: #f7f8fa;
  --surface-raised: #ffffff;
  --surface-inset: #eef1f5;
  --surface-deep: #e5e9ef;
  --control: #f7f8fa;
  --graph-bg: #f7f8fa;
  --node-ring: #f7f8fa;
  --scroll-thumb: #aeb6c2;
  --shadow: rgba(31, 41, 55, .14);
  --on-accent: #182006;
  --danger: #c83f4b;
  --accent-dark: color-mix(in srgb, var(--accent) 20%, #ffffff);
}

:root[data-theme="light"] .file-signal {
  --signal-color: var(--signal-color-light);
  --signal-secondary: var(--signal-secondary-light);
}

:root[data-theme="light"] .canvas-panel,
:root[data-theme="light"] .conversation-panel,
:root[data-theme="light"] .timeline-panel,
:root[data-theme="light"] .history-drawer,
:root[data-theme="light"] .timeline-balloon,
:root[data-theme="light"] .composer,
:root[data-theme="light"] .messages,
:root[data-theme="light"] .document-summary,
:root[data-theme="light"] .settings {
  color: var(--text);
  background-color: var(--panel);
}

:root[data-theme="light"] .drop-zone,
:root[data-theme="light"] .image-frame,
:root[data-theme="light"] .timeline-scroll,
:root[data-theme="light"] .document-reader,
:root[data-theme="light"] .canvas-text {
  background-color: var(--surface);
}

:root[data-theme="light"] button,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  color: var(--text);
}

/* The primary pair ("New session") keeps its accent fill: flattening it to
   --panel-2 here painted a white pill with white --on-accent text on it. */
:root[data-theme="light"] .history-button:not(.topbar-pair-primary),
:root[data-theme="light"] .credit-control .credit-balance-button,
:root[data-theme="light"] .session-title-input,
:root[data-theme="light"] .timeline-zoom-controls,
:root[data-theme="light"] .settings input,
:root[data-theme="light"] .settings select {
  background: var(--panel-2);
}

:root[data-theme="light"] .topbar {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

:root[data-theme="light"] .canvas-panel,
:root[data-theme="light"] .conversation-panel {
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(31, 41, 55, .045);
}

:root[data-theme="light"] .canvas-text {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--surface-raised);
  scrollbar-color: var(--scroll-thumb) transparent;
}

:root[data-theme="light"] .markdown-body,
:root[data-theme="light"] .markdown-body p,
:root[data-theme="light"] .markdown-body li {
  color: var(--text-soft);
}

:root[data-theme="light"] .markdown-body strong {
  color: var(--text);
}

:root[data-theme="light"] .markdown-body em {
  color: var(--muted);
}

:root[data-theme="light"] .markdown-body code {
  border-color: var(--line);
  color: #536f0e;
  background: #edf3dd;
}

:root[data-theme="light"] .markdown-body pre {
  border-color: var(--line);
  background: #f1f3f6;
}

:root[data-theme="light"] .markdown-body pre code {
  color: var(--text-soft);
  background: transparent;
}

:root[data-theme="light"] .markdown-body a {
  color: #176b9d;
}

:root[data-theme="light"] .document-splitter {
  background: var(--surface-deep);
}

:root[data-theme="light"] .document-splitter::after,
:root[data-theme="light"] .workspace-splitter::after,
:root[data-theme="light"] .timeline-resizer::before {
  background: #aab2bf;
}

:root[data-theme="light"] .document-reader {
  background: #e9edf2;
  scrollbar-color: var(--scroll-thumb) transparent;
}

:root[data-theme="light"] .document-reader > header {
  border-bottom-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 8px rgba(31, 41, 55, .08);
}

:root[data-theme="light"] .document-reader-controls button,
:root[data-theme="light"] .document-reader-controls select {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}

:root[data-theme="light"] .document-page {
  border-color: #b9c0ca;
  box-shadow: 0 14px 34px var(--shadow);
}

:root[data-theme="light"] .node-detail {
  border-color: var(--line);
  background: var(--surface-raised);
}

:root[data-theme="light"] .node-detail-block p,
:root[data-theme="light"] .node-detail-block .markdown-body,
:root[data-theme="light"] .concept-list dd {
  color: var(--text-soft);
}

:root[data-theme="light"] .node-detail-empty {
  color: var(--text-faint);
}

:root[data-theme="light"] .node-detail-label.whatif-label { color: #c0392b; }

:root[data-theme="light"] .exclusion-chip {
  border-color: rgba(214,69,69,.4);
  color: #b23b3b;
  background: rgba(214,69,69,.08);
}

:root[data-theme="light"] .exclusion-chip:hover,
:root[data-theme="light"] .exclusion-chip:focus-visible {
  border-color: rgba(214,69,69,.65);
  background: rgba(214,69,69,.16);
  color: #962f2f;
}

/* The dark teal is near-invisible on white; darkened to hold the same meaning
   and the same contrast against the light card. */
:root[data-theme="light"] .finding-chip {
  border-color: rgba(13,148,136,.38);
  color: #0b6b60;
  background: rgba(13,148,136,.08);
}

:root[data-theme="light"] .finding-chip.is-loose {
  color: var(--text-soft);
  background: transparent;
}

:root[data-theme="light"] .finding-link {
  background: rgba(13,148,136,.07);
}

:root[data-theme="light"] .finding-link:hover,
:root[data-theme="light"] .finding-link:focus-visible {
  border-color: rgba(13,148,136,.45);
  background: rgba(13,148,136,.14);
}

:root[data-theme="light"] .finding-link-count { color: #0d9488; }

:root[data-theme="light"] .finding-question-why { color: var(--text-soft); }

:root[data-theme="light"] .concept-map {
  border-color: rgba(13,148,136,.2);
  background: rgba(13,148,136,.04);
}

:root[data-theme="light"] .concept-map-edge { stroke: rgba(13,148,136,.42); }

:root[data-theme="light"] .concept-map-node circle {
  fill: #0d9488;
  stroke: #0d9488;
}

:root[data-theme="light"] .concept-map-node.is-inferred circle { fill: transparent; }

/* The label's halo has to match the panel it sits on, or the outline reads as
   a dark smudge on a light card. */
:root[data-theme="light"] .concept-map-label { stroke: var(--surface-raised, #fff); }

:root[data-theme="light"] .timeline-panel {
  border-color: var(--line-soft);
  background: var(--graph-bg);
}

:root[data-theme="light"] .timeline-scroll {
  scrollbar-color: var(--scroll-thumb) transparent;
}

:root[data-theme="light"] .timeline-zoom-controls {
  border-color: var(--line);
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(31, 41, 55, .06);
}

:root[data-theme="light"] .timeline-zoom-controls button {
  border-color: var(--line);
  color: var(--text-soft);
}

:root[data-theme="light"] .graph-mode-toggle,
:root[data-theme="light"] .graph-tool-button {
  border-color: var(--line);
  background: var(--surface-raised);
}

:root[data-theme="light"] .graph-mode-toggle button {
  color: var(--text-soft);
}

:root[data-theme="light"] .graph-mode-toggle button + button {
  border-left-color: var(--line);
}

:root[data-theme="light"] .graph-mode-toggle button.active {
  color: #2b3508;
}

:root[data-theme="light"] .graph-tool-button {
  color: var(--text-soft);
}

:root[data-theme="light"] .graph-minimap {
  border-color: var(--line);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 6px 18px rgba(31, 41, 55, .14);
}

:root[data-theme="light"] .graph-minimap-edge {
  stroke: #c2c9d4;
}

:root[data-theme="light"] .graph-minimap-node {
  fill: #94a0b0;
}

:root[data-theme="light"] .timeline-collapse-button {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--surface-raised);
  box-shadow: 0 0 0 2px var(--graph-bg);
}

:root[data-theme="light"] .timeline-connectors path {
  stroke: #99a3b1;
}

:root[data-theme="light"] .timeline-connectors .document-edge-label {
  fill: #657184;
  stroke: var(--graph-bg);
}

:root[data-theme="light"] .timeline-node {
  color: #5f6979;
}

:root[data-theme="light"] .timeline-node.lineage-muted {
  opacity: .72;
}

:root[data-theme="light"] .timeline-node-dot,
:root[data-theme="light"] .timeline-node-dot.category-dot {
  border-color: #7f8998;
  background: var(--surface-raised);
  box-shadow: 0 0 0 5px var(--node-ring);
}

:root[data-theme="light"] .timeline-node-dot.category-dot {
  border-color: var(--category-color-light, var(--category-color));
}

:root[data-theme="light"] .timeline-node.lineage .timeline-node-dot,
:root[data-theme="light"] .timeline-node.current .timeline-node-dot,
:root[data-theme="light"] .timeline-node.pending.current .timeline-node-dot {
  box-shadow:
    0 0 0 5px var(--node-ring),
    0 0 14px color-mix(in srgb, var(--accent) 36%, transparent);
}

:root[data-theme="light"] .timeline-node.selected .timeline-node-dot,
:root[data-theme="light"] .timeline-node.merge-selected .timeline-node-dot,
:root[data-theme="light"] .timeline-node.reference .timeline-node-dot {
  box-shadow: 0 0 0 5px var(--node-ring), 0 0 0 7px rgba(98, 200, 255, .34);
}

:root[data-theme="light"] .timeline-node.fuse-selected .timeline-node-dot {
  border-color: #9a6ff0;
  box-shadow: 0 0 0 5px var(--node-ring), 0 0 0 7px rgba(154, 111, 240, .34);
}

:root[data-theme="light"] .graph-legend-swatch {
  color: var(--text);
  border-color: var(--category-color-light, var(--category-color));
  background: color-mix(
    in srgb,
    var(--category-color-light, var(--category-color)) 14%,
    white
  );
}

:root[data-theme="light"] .timeline-modality-badge,
:root[data-theme="light"] .timeline-exclusion-record,
:root[data-theme="light"] .timeline-version-record,
:root[data-theme="light"] .timeline-batch-record,
:root[data-theme="light"] .timeline-bridge-record,
:root[data-theme="light"] .timeline-milestone-record,
:root[data-theme="light"] .timeline-regenerate-button {
  border-color: #9aa4b2;
  color: var(--text-soft);
  background: var(--surface-raised);
  box-shadow: 0 0 0 2px var(--node-ring);
}

:root[data-theme="light"] .timeline-batch-record {
  border-color: rgba(126,160,16,.55);
  color: #5f7d0c;
}

/* The dark teal reads as grey on white; darkened to hold the same meaning. */
:root[data-theme="light"] .timeline-bridge-record {
  border-color: rgba(13,148,136,.55);
  color: #0d9488;
}

:root[data-theme="light"] .timeline-branch-button,
:root[data-theme="light"] .timeline-merge-button,
:root[data-theme="light"] .timeline-exclude-button {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--surface-raised);
}

:root[data-theme="light"] .timeline-balloon {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: 0 18px 55px rgba(31, 41, 55, .2);
}

:root[data-theme="light"] .timeline-balloon-text {
  color: var(--text-soft);
  background: var(--surface);
}

:root[data-theme="light"] .timeline-balloon-actions button,
:root[data-theme="light"] .timeline-balloon-actions .button {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}

:root[data-theme="light"] .messages {
  color: var(--text);
  background: var(--panel);
  scrollbar-color: var(--scroll-thumb) transparent;
}

:root[data-theme="light"] .welcome-message,
:root[data-theme="light"] .assistant .bubble,
:root[data-theme="light"] .conversation-origin,
:root[data-theme="light"] .conversation-reference,
:root[data-theme="light"] .conversation-branch,
:root[data-theme="light"] .branch-history-reveal,
:root[data-theme="light"] .history-card {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface);
}

:root[data-theme="light"] .conversation-reference {
  background: linear-gradient(145deg, rgba(30, 136, 191, .08), var(--surface) 58%);
}

:root[data-theme="light"] .message-time,
:root[data-theme="light"] .conversation-origin small,
:root[data-theme="light"] .conversation-reference small,
:root[data-theme="light"] .result-card-instruction,
:root[data-theme="light"] .result-card-kind,
:root[data-theme="light"] .result-card-metadata dt,
:root[data-theme="light"] .request-cost small {
  color: var(--text-faint);
}

:root[data-theme="light"] .conversation-reference p,
:root[data-theme="light"] .result-card-metadata dd {
  color: var(--text-soft);
}

:root[data-theme="light"] .result-card {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
}

:root[data-theme="light"] .result-card-preview {
  border-color: var(--line);
  background: var(--surface-inset);
}

:root[data-theme="light"] .result-card-text {
  color: var(--text-soft);
  background: var(--surface);
}

:root[data-theme="light"] .conversation-merge-join span {
  background: var(--panel);
}

:root[data-theme="light"] .suggestions button {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-raised);
}

:root[data-theme="light"] .composer {
  border-color: #b8c0cb;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: 0 2px 8px rgba(31, 41, 55, .06);
}

:root[data-theme="light"] .composer-toggle,
:root[data-theme="light"] .cost-help-button,
:root[data-theme="light"] .cost-help-popover {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface-raised);
}

:root[data-theme="light"] .batch-popover,
:root[data-theme="light"] .batch-compare-panel {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-raised);
}
:root[data-theme="light"] .batch-count-field select,
:root[data-theme="light"] .batch-mode-option {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}
:root[data-theme="light"] .batch-mode-option.active {
  border-color: rgba(126,160,16,.55);
  color: #5f7d0c;
  background: rgba(126,160,16,.12);
}
:root[data-theme="light"] .composer-chip {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}
:root[data-theme="light"] .modality-popover,
:root[data-theme="light"] .settings-popover {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
}
:root[data-theme="light"] .modality-popover label:hover span { background: var(--control); }
:root[data-theme="light"] .batch-compare-head,
:root[data-theme="light"] .batch-compare-tile figcaption {
  border-color: var(--line);
}
:root[data-theme="light"] .batch-compare-tile {
  border-color: var(--line);
  background: var(--surface);
}
:root[data-theme="light"] .batch-compare-close {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}

:root[data-theme="light"] .regen-card {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-raised);
}
:root[data-theme="light"] .regen-head,
:root[data-theme="light"] .regen-foot {
  border-color: var(--line);
}
:root[data-theme="light"] .regen-foot { background: var(--surface); }
:root[data-theme="light"] .regen-source-preview,
:root[data-theme="light"] .regen-toggle,
:root[data-theme="light"] .regen-row select,
:root[data-theme="light"] #regenLockCustom,
:root[data-theme="light"] .regen-lock-chip,
:root[data-theme="light"] .regen-version-option,
:root[data-theme="light"] .regen-close {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}
:root[data-theme="light"] .regen-lock-chip.active,
:root[data-theme="light"] .regen-version-option.active {
  border-color: rgba(126,160,16,.55);
  color: #5f7d0c;
  background: rgba(126,160,16,.12);
}

:root[data-theme="light"] .composer:focus-within {
  border-color: #788495;
  box-shadow: 0 0 0 3px rgba(98, 200, 255, .12);
}

:root[data-theme="light"] .composer textarea::placeholder {
  color: #7b8594;
}

/* --- Light mode: holistic dark-surface fixes --------------------------- */
/* Components below hardcode dark hex (the app is dark-first); these light
   overrides recolour them to the light surface variables. */
:root[data-theme="light"] .composer { background: var(--panel); }
:root[data-theme="light"] .composer-toggle {
  background: var(--panel-2);
  border-bottom-color: var(--line-soft);
}

/* Account button (username was dark text on a hardcoded dark pill = invisible). */
:root[data-theme="light"] .user-button {
  background: var(--panel-2);
  color: var(--text);
}
:root[data-theme="light"] .user-button:hover { border-color: var(--accent); }

/* PDF selection toolbar + its action buttons. */
:root[data-theme="light"] .pdf-selection-popover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  box-shadow: 0 12px 30px rgba(31, 41, 55, .18);
}
:root[data-theme="light"] .pdf-popover-colors { border-right-color: var(--line); }
:root[data-theme="light"] .pdf-popover-buttons button {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--text);
}
:root[data-theme="light"] .pdf-popover-buttons button:hover { background: var(--surface-inset); }

/* All text inputs / textareas (prompt box, note fields, search, forms). */
:root[data-theme="light"] textarea,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="url"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input:not([type]) {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--line);
}
/* The composer textarea sits on the (now white) composer, so keep it clear. */
:root[data-theme="light"] .composer textarea { background: transparent; }


:root[data-theme="light"] .output-type {
  border-color: var(--line);
  background: var(--surface-inset);
}

:root[data-theme="light"] .attach-image-button,
:root[data-theme="light"] .composer-attachment button,
:root[data-theme="light"] .button.secondary,
:root[data-theme="light"] .icon-button,
:root[data-theme="light"] .drawer-close {
  border-color: var(--line);
  color: var(--text-soft);
  background: var(--control);
}

:root[data-theme="light"] .settings {
  border-color: var(--line-soft);
  background: var(--panel);
}

:root[data-theme="light"] .settings input,
:root[data-theme="light"] .settings select {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
}

:root[data-theme="light"] .video-estimate {
  color: var(--text-soft);
  background: var(--surface-inset);
}

:root[data-theme="light"] .range-field small {
  color: var(--text-faint);
}

:root[data-theme="light"] .history-drawer {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: -20px 0 60px rgba(31, 41, 55, .16);
}

:root[data-theme="light"] .library-drawer {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: -20px 0 60px rgba(31, 41, 55, .16);
}

:root[data-theme="light"] .collab-drawer {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: -20px 0 60px rgba(31, 41, 55, .16);
}
:root[data-theme="light"] .collab-tab,
:root[data-theme="light"] .collab-person,
:root[data-theme="light"] .collab-composer textarea {
  background: var(--panel-2);
}

/* --- Model arena (A/B duels & ELO leaderboard) --------------------------- */
.arena-icon {
  position: relative;
  width: 14px;
  height: 14px;
}
.arena-icon::before,
.arena-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 0;
  border-top: 1.6px solid var(--accent);
}
.arena-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.arena-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.arena-dialog { width: min(720px, calc(100vw - 32px)); }
.arena-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
}
.arena-tab {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
}
.arena-tab.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.arena-panel { padding: 16px 20px 0; }
.arena-intro {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.arena-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.arena-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
}
.arena-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.arena-card-media img,
.arena-card-media video {
  max-width: 100%;
  max-height: 240px;
  border-radius: 10px;
}
.arena-card-media audio { width: 100%; }
.arena-card-model {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}
.arena-versus {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.arena-verdicts {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-top: 16px;
}
.arena-verdict {
  padding: 11px 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.arena-verdict:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.arena-verdict.tie {
  border-color: var(--line);
  color: var(--text-soft);
}
.arena-verdict.tie:hover {
  background: var(--surface-raised);
  color: var(--text);
}
.arena-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.arena-progress { font-size: 12px; color: var(--text-soft); }
.arena-empty {
  margin: 18px 0 4px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
}
.arena-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arena-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}
.arena-rank {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  min-width: 32px;
}
.arena-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.arena-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arena-record { font-size: 12px; color: var(--text-soft); }
.arena-elo {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.arena-footer {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-top: 1px solid var(--line-soft);
}
.arena-status { font-size: 12px; color: var(--accent); min-height: 16px; }
.arena-status[data-tone="error"] { color: var(--danger); }
@media (max-width: 640px) {
  .arena-stage { grid-template-columns: 1fr; }
  .arena-versus { display: none; }
}

:root[data-theme="light"] .collab-mention-menu {
  background: var(--surface-raised);
}
:root[data-theme="light"] .collab-mention-option:hover,
:root[data-theme="light"] .collab-mention-option.active {
  background: var(--panel-2);
}
:root[data-theme="light"] .collab-activity-icon,
:root[data-theme="light"] .collab-role-badge {
  background: var(--panel-2);
}
:root[data-theme="light"] .timeline-comment-record {
  color: #2563a8;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--panel);
}

:root[data-theme="light"] .library-filter,
:root[data-theme="light"] .library-card,
:root[data-theme="light"] .library-action {
  background: var(--panel-2);
}

:root[data-theme="light"] .library-thumb { background: #eef2f6; }
:root[data-theme="light"] .library-card:hover { border-color: #aeb6c2; }

:root[data-theme="light"] .history-card:hover,
:root[data-theme="light"] .history-card.active {
  border-color: #aeb6c2;
  background: #eef2f6;
}

@media (max-width: 1260px) {
  /* Collapse the engine status to its dot when the action row gets tight. */
  .backend-status span:last-child { display: none; }
}

@media (max-width: 1180px) {
  /* Tuck away the credits pill and brand subtitle so the action row never
     collides with the brand. Balance stays available in the account menu. */
  .credit-control { display: none; }
  .brand small { display: none; }
}

.mobile-tabbar { display: none; }

@media (max-width: 900px) {
  /* Tabbed mobile layout: one full-height panel at a time plus a bottom
     switcher, so a long chat never buries the graph/preview — the user taps to
     switch views instead of scrolling the whole page. */
  .shell { grid-template-rows: 62px 1fr auto; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 18px;
  }
  .brand small { display: none; }
  .session-title-row h1 { max-width: 100%; }
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 8px 8px 8px;
    min-height: 0;
    overflow: hidden;
  }
  .workspace-splitter { display: none; }
  .canvas-panel,
  .conversation-panel {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    max-height: none;
    height: 100%;
  }
  /* Show one view at a time; default (before JS sets a class) is Chat. */
  body.mv-studio .conversation-panel { display: none; }
  body:not(.mv-studio) .canvas-panel { display: none; }
  .current-frame.document-source-view { grid-template-columns: 1fr; overflow: auto; }
  .document-splitter { display: none !important; }
  .document-reader { min-height: 360px; }

  /* Give the preview real height in the studio: cap the graph so the image
     isn't squeezed to half. The media itself always fits its frame via the
     base object-fit: contain + max-height: 100% rule. */
  body.mv-studio .timeline-scroll { max-height: 38vh !important; }

  /* Comparing on phones/tablets: overlap the two frames in one cell and flip
     between them with the swap pill, so both images are reachable at full size
     instead of one being buried below the fold. */
  .image-stage.comparing {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .image-stage.comparing .image-frame {
    grid-column: 1;
    grid-row: 1;
  }
  .image-stage.comparing .compare-frame { display: none; }
  .image-stage.comparing.show-compare .current-frame { display: none; }
  .image-stage.comparing.show-compare .compare-frame { display: grid; }
  .image-stage.comparing .compare-swap { display: inline-flex; }

  /* Fold controls: a vertical pair on the right edge of the studio panel. Top
     chevron hides the graph (preview fills); bottom chevron hides the preview
     (graph fills). The active button's chevron flips to an expand arrow. */
  body.mv-studio .canvas-panel { position: relative; }
  body.mv-studio .studio-fold {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    z-index: 14;
  }
  body.mv-studio .canvas-panel.fold-graph { grid-template-rows: 0 minmax(0, 1fr) auto; }
  body.mv-studio .canvas-panel.fold-preview { grid-template-rows: minmax(0, 1fr) 0 auto; }
  body.mv-studio .canvas-panel.fold-preview .timeline-scroll { max-height: none !important; }
  body.mv-studio .canvas-panel.fold-preview .drop-zone { margin: 0; }

  .mobile-tabbar {
    display: flex;
    /* In-flow 3rd row of the shell grid (not position:fixed) so the switcher
       always sits flush below the panel — this removes the dynamic-viewport
       gap that could open between the composer and the bar on mobile. */
    margin: 4px 16px calc(6px + env(safe-area-inset-bottom));
    height: 33px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 92%, #000 8%);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
  }
  .mobile-tabbar button {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }
  .mobile-tabbar button.active { color: var(--accent); }
  .mobile-tabbar svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (max-width: 560px) {
  /* Phones: keep the whole studio inside the viewport (no horizontal page
     scroll), compact the top bar so every control fits, and give the stacked
     panels comfortable spacing. */
  .shell { overflow-x: hidden; }
  .topbar { padding: 0 12px; gap: 8px; }
  .backend-status { display: none; }
  .brand > span:last-child { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .credit-control { display: none; }
  .session-title-row h1 { font-size: 12px; }
  .session-title-control .eyebrow { display: none; }
  .topbar-actions { gap: 5px; }
  .history-button { padding: 7px; font-size: 0; }
  /* Icon-only: font-size:0 collapses the label but leaves the flex gap behind,
     which pushed the glyph off-centre and made the button a wide rectangle.
     Zero the gap and give it a fixed square so the icon sits dead centre. */
  .topbar .history-button {
    width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center;
  }
  .settings-button { padding: 7px; }
  .history-icon { margin: 0 1px; }
  /* Account / sign-in collapse to icon-only so the action row never overflows. */
  .login-button { padding: 8px; gap: 0; }
  .login-button span { display: none; }
  .user-button { padding: 6px; gap: 0; }
  .user-button-name { display: none; }
  .canvas-toolbar, .conversation-header { padding: 18px; }
  .conversation-header { padding-bottom: 12px; }
  .canvas-toolbar { align-items: flex-start; }
  .toolbar-actions { flex-direction: column; align-items: flex-end; }
  .drop-zone { margin: 10px; }
  .canvas-footer { padding: 0 16px; }
  .empty-state { padding: 18px 14px; }
  .empty-state h2 { margin-top: 8px; font-size: 18px; }
  .intro-actions { gap: 8px; margin-top: 12px; }
  .intro-card { padding: 12px 8px; gap: 5px; }
  .intro-card-icon { width: 34px; height: 34px; font-size: 16px; }
  .intro-card strong { font-size: 12px; }
  /* Drop the wrapping descriptions on phones — the labels are self-explanatory
     and the shorter cards keep the prompt box near the top. */
  .intro-card small { display: none; }
  /* Let scrollable / wrapping rows shrink instead of widening the page. */
  .messages,
  .suggestions,
  .composer,
  .composer-body { min-width: 0; max-width: 100%; }
  .suggestions { padding: 0 14px 6px; gap: 6px; }
  .suggestions button { padding: 5px 8px; font-size: 10px; }
  .composer { margin: 0 8px 3px; }
  .request-cost { padding-bottom: 4px; }
  .composer-toggle { padding: 6px 10px; }
  .composer textarea {
    height: 62px;
    min-height: 52px;
    padding: 8px 10px 3px;
    line-height: 1.35;
  }
  .composer-footer {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
  }
  .composer-tools {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .composer-chip {
    height: 28px;
    padding-inline: 7px;
    font-size: 10px;
  }
  .icon-chip { width: 28px; }
  .modality-button { max-width: 78px; }
  .modality-button #modalityButtonLabel {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .send-button {
    min-height: 30px;
    gap: 4px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: 11px;
  }
  .send-button b { width: 17px; height: 17px; border-radius: 5px; }
  .request-cost {
    justify-content: flex-start;
    gap: 7px;
    padding: 0 10px 6px;
    font-size: 9px;
  }
  .request-cost .mode-pill {
    flex: 0 1 auto;
    margin-left: 0;
    font-size: 9px;
    gap: 5px;
    max-width: 112px;
  }
  .request-cost .mode-pill #modeText {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cost-help-button { width: 15px; height: 15px; font-size: 9px; }
  .timeline-heading-tools > span { display: none; }
  .timeline-heading { align-items: center; }
  .share-form { grid-template-columns: 1fr; }
  .share-link-controls,
  .share-link-result { grid-template-columns: 1fr; }
  .share-form .button { width: 100%; }
}

@media (max-width: 470px) {
  /* True phones: the editable session title (still reachable from the session
     drawer) gives way to the action row, and the icons tighten up, so the whole
     top bar fits on one line with comfortable, tappable controls. */
  .session-title-control { display: none; }
  .topbar { gap: 8px; }
  .topbar-actions { margin-left: auto; gap: 4px; }
  .history-button { padding: 6px; }
  .topbar .history-button { width: 34px; height: 34px; padding: 0; }
  .login-button { padding: 7px; }
}

/* --- Authentication pages (login / register) --------------------------- */
.auth-body {
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.auth-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 30px 80px var(--shadow);
}

.auth-brand {
  align-self: flex-start;
  gap: 12px;
}

.auth-intro h1 {
  margin-top: 4px;
  font-size: 24px;
  letter-spacing: -.03em;
}

.auth-subtitle {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.auth-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.auth-benefits li {
  position: relative;
  padding-left: 26px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.4;
}

.auth-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    linear-gradient(transparent, transparent),
    var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 8 2.5 2.5L12 5'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 8 2.5 2.5L12 5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.auth-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-raised);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, transform .05s, box-shadow .15s;
}

/* --- Workflow plugins ----------------------------------------------------- */
.plugins-button .plugins-glyph { color: var(--accent); font-size: 14px; line-height: 1; }
.composer-chip.plugins-button.active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(126, 160, 16, .14);
}

.active-plugin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 6px 0 9px;
  border: 1px solid rgba(126, 160, 16, .55);
  border-radius: 999px;
  color: var(--text);
  background: rgba(126, 160, 16, .14);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.active-plugin-pill .active-plugin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(126, 160, 16, .8);
}
.active-plugin-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.active-plugin-clear:hover { background: rgba(255, 255, 255, .12); }

.plugins-dialog .studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.plugins-dialog .studio-kind-hint code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-inset);
  font-size: 11px;
}

.plugin-editor,
.plugin-use {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plugin-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 10px;
}
.plugin-editor input,
.plugin-editor select,
.plugin-editor textarea,
.plugin-use input {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 13px;
}
.plugin-editor textarea {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  resize: vertical;
}
.plugin-inspect-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.plugin-inspect-status { font-size: 12px; color: var(--muted); }
.plugin-inspect-status[data-tone="error"] { color: var(--danger); }

.plugin-inspect-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-inset);
}
.plugin-output-node {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.plugin-output-node input { flex: 1; }

.plugin-params { display: flex; flex-direction: column; gap: 8px; }
.plugin-param-empty { font-size: 12px; color: var(--muted); margin: 0; }
.plugin-param-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.plugin-param-token {
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plugin-param-req {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.plugin-use-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.plugin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .plugin-field-row { grid-template-columns: minmax(0, 1fr); }
  .plugin-param-row { grid-template-columns: minmax(0, 1fr); }
}

:root[data-theme="light"] .plugin-editor input,
:root[data-theme="light"] .plugin-editor select,
:root[data-theme="light"] .plugin-editor textarea,
:root[data-theme="light"] .plugin-use input {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
}
:root[data-theme="light"] .plugin-inspect-detail {
  border-color: var(--line);
  background: var(--surface);
}


.google-button:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.google-button:active { transform: translateY(1px); }

.discord-button:hover {
  border-color: #5865F2;
  box-shadow: 0 0 0 3px color-mix(in srgb, #5865F2 22%, transparent);
}

.google-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.auth-error {
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: 11px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 13px;
}

.auth-config-note {
  margin: -8px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.5;
}

.auth-footer {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.auth-footer a,
.auth-legal a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.auth-footer a:hover,
.auth-legal a:hover { text-decoration: underline; }

.auth-legal {
  margin: 0;
  color: var(--text-faint);
  font-size: 11px;
  text-align: center;
}

/* --- Standard site footer (public pages) ------------------------------- */
.site-footer {
  width: 100%;
  padding: 20px clamp(16px, 4vw, 48px);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}
.site-footer p { margin: 0; }
.site-footer a {
  color: var(--text-soft);
  text-decoration: none;
}
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer--bordered {
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.settings-legal {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
  font-size: 11px;
  text-align: center;
}

/* --- Signed-in user menu (topbar) -------------------------------------- */
.login-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 9px;
  color: var(--on-accent);
  background: var(--accent);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.login-button:hover { filter: brightness(1.06); }

.login-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-control {
  position: relative;
  flex: 0 0 auto;
}

.user-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: #13161a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.user-button:hover { border-color: #4b515b; }

.user-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-button-name {
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 60px var(--shadow);
}

.user-menu-name {
  font-size: 13px;
  font-weight: 750;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-email {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-divider {
  height: 1px;
  margin: 4px -14px 8px;
  background: var(--line-soft);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}
.user-menu-item:hover { border-color: var(--line); background: var(--surface-raised); }

.user-menu-social {
  display: flex;
  gap: 6px;
  padding: 4px 0;
}
.user-menu-social a {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-soft, #9aa3ad);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}
.user-menu-social a:hover { border-color: var(--accent); color: var(--text); }
.user-menu-social a svg { width: 16px; height: 16px; fill: currentColor; }

.user-menu-signout {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.user-menu-signout:hover {
  border-color: var(--danger);
  color: var(--danger);
}

@media (max-width: 560px) {
  .user-button-name { display: none; }
}

/* --- Admin console -------------------------------------------------------- */

.admin-body {
  min-height: 100vh;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(14px);
}

.admin-brand {
  text-decoration: none;
}

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-whoami {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-auto {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.admin-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px 64px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.admin-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.admin-card-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-card-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.admin-card-hint {
  color: var(--text-faint);
  font-size: 11px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}

.admin-tab {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.admin-tab:hover {
  border-color: #4b515b;
  color: var(--text);
}

.admin-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--accent);
}

.admin-panel {
  min-height: 240px;
}

.admin-loading,
.admin-empty,
.admin-error {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.admin-error {
  border-style: solid;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
}

.admin-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.admin-table th {
  position: sticky;
  top: 0;
  padding: 11px 14px;
  text-align: left;
  background: var(--surface-inset);
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.admin-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: var(--surface-raised);
}

.admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-soft); }
.amount-pos { color: var(--accent); }
.amount-neg { color: var(--danger); }

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-dark);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.admin-avatar img { width: 100%; height: 100%; object-fit: cover; }

.admin-user-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-user-name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.admin-user-email { color: var(--text-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}

.admin-badge.provider-google { background: rgba(66, 133, 244, .16); color: #8ab4f8; }
.admin-badge.provider-discord { background: rgba(88, 101, 242, .18); color: #a4adf6; }
.admin-badge.provider-local { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.admin-badge.status-success { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.admin-badge.status-succeeded { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.admin-badge.status-error,
.admin-badge.status-failed { background: rgba(255, 107, 107, .16); color: var(--danger); }
.admin-badge.status-pending,
.admin-badge.status-queued,
.admin-badge.status-cancelled,
.admin-badge.status-connecting { background: rgba(151, 155, 164, .16); color: var(--text-soft); }
.admin-badge.status-interrupted { background: rgba(245, 179, 90, .18); color: #f5b35a; }
.admin-badge.status-running { background: rgba(96, 165, 250, .18); color: #93c5fd; }
.admin-badge.status-info { background: rgba(96, 165, 250, .16); color: #93c5fd; }
.admin-badge.kind-admin { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.admin-badge.kind-generation { background: rgba(255, 107, 107, .12); color: #ff9d9d; }
.admin-badge.kind-purchase { background: rgba(96, 165, 250, .16); color: #93c5fd; }
.admin-badge.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.admin-hint {
  margin: 12px 2px 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.admin-hint code,
.admin-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--surface-raised);
  padding: 1px 5px;
  border-radius: 5px;
}

.admin-actions-cell { white-space: nowrap; }

.admin-role-select {
  appearance: auto;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.admin-role-select:hover { border-color: var(--accent); }

.admin-link-btn {
  margin-right: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-link-btn:last-child { margin-right: 0; }
.admin-link-btn:hover { text-decoration: underline; }
.admin-link-btn.danger { color: var(--danger); }
.admin-link-btn:disabled { color: var(--text-soft); cursor: default; text-decoration: none; opacity: .6; }

.admin-error-msg {
  max-width: 520px;
  color: #ff9d9d;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-progress {
  width: 120px;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-inset);
  overflow: hidden;
}

.admin-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .3s ease;
}

.admin-progress-fill.status-failed,
.admin-progress-fill.status-error { background: var(--danger); }

.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.admin-stat span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.admin-stat strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-logs {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-inset);
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.admin-logline {
  display: grid;
  grid-template-columns: 168px 56px 150px 1fr;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.admin-logline:last-child { border-bottom: none; }
.admin-log-time { color: var(--text-faint); }
.admin-log-level { font-weight: 800; }
.admin-log-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.admin-log-msg { color: var(--text-soft); white-space: pre-wrap; word-break: break-word; }

.admin-logline.level-WARNING .admin-log-level { color: #fbbf24; }
.admin-logline.level-ERROR .admin-log-level,
.admin-logline.level-CRITICAL .admin-log-level { color: var(--danger); }
.admin-logline.level-INFO .admin-log-level { color: #93c5fd; }
.admin-logline.level-DEBUG .admin-log-level { color: var(--text-faint); }

.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 480px;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 24px 60px var(--shadow);
}

.admin-toast.error { border-color: var(--danger); color: var(--danger); }

/* --- Session viewer modal ------------------------------------------------ */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.admin-modal.hidden { display: none; }
body.admin-modal-open { overflow: hidden; }

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, .62);
}

.admin-modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 30px 80px var(--shadow);
  overflow: hidden;
}

.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.admin-modal-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-modal-head h2 {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-modal-back {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.admin-modal-back:hover { border-color: var(--accent); color: var(--text); }
.admin-modal-back.hidden { display: none; }

.admin-modal-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.admin-modal-close:hover { color: var(--text); }

.admin-modal-body { padding: 16px 18px; overflow-y: auto; }

.admin-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.admin-session-card {
  display: flex;
  gap: 12px;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.admin-session-card:hover { border-color: var(--accent); transform: translateY(-1px); }

.admin-session-thumb,
.admin-node-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-inset);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-session-media,
.admin-node-media { width: 100%; height: 100%; object-fit: cover; }
.admin-session-glyph,
.admin-node-glyph { font-size: 18px; font-weight: 800; color: var(--muted); }

.admin-session-info,
.admin-node-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-session-title,
.admin-node-title {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.admin-session-sub,
.admin-node-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11.5px;
}
.admin-session-time { color: var(--text-faint); font-size: 11px; }

.admin-badge.admin-kind {
  text-transform: capitalize;
  background: var(--surface-inset);
  color: var(--text-soft);
}

.admin-session-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}

.admin-node-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-node {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
}

/* --- Usage tab ----------------------------------------------------------- */
.admin-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.admin-usage-panel { min-width: 0; }
.admin-usage-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.admin-usage-bar-cell { width: 30%; }
.admin-usage-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-inset);
  overflow: hidden;
}
.admin-usage-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* --- Rich read-only session detail (nodes) ------------------------------- */
.admin-node-cards { display: flex; flex-direction: column; gap: 14px; }
.admin-node-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}
.admin-node-frame-wrap { min-width: 0; }
.admin-node-frame {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-inset);
}
.admin-node-frame img { width: 100%; height: auto; max-height: 220px; display: block; object-fit: contain; }
video.admin-node-frame { width: 100%; max-height: 220px; }
.admin-node-player { width: 100%; }
.admin-node-text {
  max-height: 240px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-inset);
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-node-card-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-node-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}
.admin-node-num { font-weight: 800; color: var(--text-soft); }
.admin-node-time { color: var(--text-faint); }
.admin-node-dl {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-inset);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.admin-node-dl:hover { border-color: var(--accent); }
.admin-node-message {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-node-concepts {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.admin-node-concepts strong { color: var(--text-soft); }

@media (max-width: 720px) {
  .admin-topbar { padding: 12px 16px; }
  .admin-main { padding: 18px 14px 56px; }
  .admin-whoami { display: none; }
  .admin-logline { grid-template-columns: 1fr; gap: 2px; white-space: normal; }
  .admin-modal { padding: 0; }
  .admin-modal-card { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .admin-session-grid { grid-template-columns: 1fr; }
  .admin-usage-grid { grid-template-columns: 1fr; }
  .admin-node-card { grid-template-columns: 1fr; }
}

/* --- Smart suggestions (related nodes / next step) ----------------------- */
.suggest-icon {
  position: relative;
  width: 14px;
  height: 14px;
}
.suggest-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 50%;
  border: 1.6px solid var(--accent);
  transform: translateX(-50%);
}
.suggest-icon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5px;
  height: 3px;
  border: 1.6px solid var(--accent);
  border-top: none;
  transform: translateX(-50%);
}
.suggest-dialog { width: min(640px, calc(100vw - 32px)); }
.suggest-intro {
  margin: 0;
  padding: 12px 20px 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.suggest-context {
  margin: 8px 20px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.suggest-section { padding: 16px 20px 0; }
.suggest-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.suggest-next-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suggest-next-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-raised);
}
.suggest-next-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.suggest-next-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.suggest-kind {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--accent);
  border: 1px solid var(--line);
  background: var(--surface);
}
.suggest-next-instruction {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.suggest-next-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.suggest-support { font-size: 12px; color: var(--muted); }
.suggest-apply {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--on-accent);
  background: var(--accent);
}
.suggest-apply:hover { filter: brightness(1.05); }
.suggest-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suggest-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-raised);
  cursor: pointer;
}
.suggest-related-card:hover { border-color: var(--accent); }
.suggest-related-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.suggest-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suggest-related-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.suggest-related-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-related-session {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-related-badge {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line);
}
.suggest-related-score {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.suggest-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.suggest-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 20px;
  border-top: 1px solid var(--line-soft);
}
.suggest-status { font-size: 12px; color: var(--accent); min-height: 16px; }
.suggest-status[data-tone="error"] { color: var(--danger); }
.suggest-footer .text-button { margin-left: auto; }

/* Saved pipelines & scheduling (More menu icon + dialog) */
.pipelines-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.pipelines-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow: 7px 7px 0 -1px var(--accent);
}
.pipelines-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-bottom: 1.5px solid var(--accent);
  border-left: 1.5px solid var(--accent);
}

.pipelines-dialog .pipelines-body { gap: 12px; }
.pipeline-row { flex-wrap: wrap; }
.pipeline-row.disabled { opacity: .6; }
.pipeline-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pipeline-error { color: var(--danger); word-break: break-word; }

.pipeline-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pipeline-editor > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pipeline-editor > label small { color: var(--muted); font-weight: 500; }
.pipeline-editor input[type="text"],
.pipeline-editor input[type="url"],
.pipeline-editor input[type="number"],
.pipeline-editor select,
.pipeline-editor textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
}
.pipeline-editor textarea { resize: vertical; min-height: 44px; }

.pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pipeline-steps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pipeline-steps-head strong { font-size: 12px; color: var(--text); }

.pipeline-step-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.pipeline-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pipeline-step-index {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.pipeline-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pipeline-step-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.pipeline-step-grid label.hidden { display: none; }

.pipeline-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  margin: 0;
}
.pipeline-schedule legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  padding: 0 4px;
}
.pipeline-schedule label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pipeline-inline {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}
.pipeline-inline input { width: 15px; height: 15px; accent-color: var(--accent); }
.pipeline-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .pipeline-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

:root[data-theme="light"] .pipeline-editor input,
:root[data-theme="light"] .pipeline-editor select,
:root[data-theme="light"] .pipeline-editor textarea,
:root[data-theme="light"] .pipeline-step-row {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
}

/* Teams / workspaces (More menu icon + dialog) */
.workspaces-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.workspaces-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 9px 0 0 0 var(--accent), 4.5px -2px 0 0 var(--accent);
}
.workspaces-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 13px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  border: 1.5px solid var(--accent);
  border-bottom: none;
}

.workspaces-dialog .workspaces-body { gap: 12px; }
.workspace-create-form,
.workspace-member-form,
.workspace-library-form,
.workspace-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.workspace-member-form,
.workspace-library-form { align-items: center; }
.workspace-row { width: 100%; text-align: left; cursor: pointer; }
.workspace-row:hover { border-color: var(--accent); }

.workspace-detail { display: flex; flex-direction: column; gap: 12px; }
.workspace-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.workspace-detail-head h3 { margin: 0; font-size: 16px; }
.workspace-quota {
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.workspace-section-title {
  margin: 6px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.workspace-actions-row { display: flex; gap: 12px; align-items: center; }
.workspace-member-row .api-key-actions,
.workspace-library-row .api-key-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.workspace-library-form textarea {
  flex: 1 1 100%;
  resize: vertical;
  min-height: 40px;
}
.workspace-library-row .api-key-meta {
  white-space: pre-wrap;
  word-break: break-word;
}

:root[data-theme="light"] .workspace-quota,
:root[data-theme="light"] .workspace-create-form input,
:root[data-theme="light"] .workspace-settings input,
:root[data-theme="light"] .workspace-member-form input,
:root[data-theme="light"] .workspace-member-form select,
:root[data-theme="light"] .workspace-library-form input,
:root[data-theme="light"] .workspace-library-form select,
:root[data-theme="light"] .workspace-library-form textarea {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
}

/* --- PWA: install affordance, standalone, mobile & touch --------------- */

/* "Install app" more-menu glyph: a down arrow dropping into a tray. */
.install-icon {
  position: relative;
  width: 13px;
  height: 13px;
}
.install-icon::before {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0;
  width: 6px;
  height: 8px;
  background: var(--accent);
  clip-path: polygon(40% 0, 60% 0, 60% 45%, 100% 45%, 50% 100%, 0 45%, 40% 45%);
}
.install-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 13px;
  height: 4px;
  border: 1.5px solid var(--accent);
  border-top: none;
  border-radius: 0 0 3px 3px;
}

/* When launched as an installed app, respect the device safe areas (notches)
   and never offer to install again. */
@media (display-mode: standalone) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  .composer {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  #installAppButton { display: none !important; }
}

/* Coarse (touch) pointers: enlarge the small drawing/graph hit targets. */
@media (pointer: coarse) {
  .canvas-anno-marker { min-width: 30px; height: 30px; }
  .canvas-anno-tool,
  .timeline-heading-tools button,
  .composer-tools button { min-height: 40px; }
  .more-menu-item { padding-top: 12px; padding-bottom: 12px; }
  .timeline-node { touch-action: none; }
}

/* Phones: turn modal dialogs into full-screen sheets and keep form fields at
   16px so iOS doesn't auto-zoom the viewport on focus. */
@media (max-width: 640px) {
  .shell { height: 100dvh; min-height: 100dvh; }
  .composer-tools button,
  .composer-chip { min-height: 28px; }
  .studio-dialog,
  .appearance-dialog {
    top: 0;
    left: 0;
    right: auto;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .studio-dialog > header,
  .appearance-dialog > header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    padding-top: max(16px, env(safe-area-inset-top));
  }
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select {
    font-size: 16px;
  }
}

/* Narrow phones: give the graph more height and let the composer breathe. */
@media (max-width: 480px) {
  .timeline-scroll { max-height: 46vh; }
  .more-menu {
    width: min(280px, calc(100vw - 24px));
    /* Keep the long menu inside the viewport (scroll internally) and above the
       pinned composer so its buttons never paint over the open menu. */
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 60;
  }
}

/* --- Usage & cost analytics dashboard --------------------------------- */
.usage-icon {
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 3px 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 5px 100% / 3px 11px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 10px 100% / 3px 8px no-repeat;
}

.usage-dialog .usage-body { gap: 14px; }

.usage-range {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  align-self: flex-start;
}
.usage-range-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.usage-range-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

.usage-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.usage-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.usage-card strong { font-size: 22px; color: var(--text); }
.usage-card-label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.usage-card small { font-size: 11px; color: var(--muted); }

.usage-section-title {
  margin: 4px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.usage-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usage-chart-svg {
  width: 100%;
  height: 110px;
  display: block;
}
.usage-chart-bar { fill: var(--accent); }
.usage-chart-bar.empty { fill: var(--line); }
.usage-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
}

.usage-breakdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.usage-bars { display: flex; flex-direction: column; gap: 7px; }
.usage-bar-row {
  display: grid;
  grid-template-columns: minmax(60px, 84px) 1fr auto;
  align-items: center;
  gap: 8px;
}
.usage-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-bar-track {
  height: 8px;
  border-radius: 5px;
  background: var(--surface-raised);
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--accent);
}
.usage-bar-value {
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .usage-cards { grid-template-columns: 1fr; }
  .usage-breakdowns { grid-template-columns: 1fr; }
}

:root[data-theme="light"] .usage-card,
:root[data-theme="light"] .usage-range {
  border-color: var(--line);
  background: var(--surface-raised);
}
:root[data-theme="light"] .usage-bar-track {
  background: var(--surface);
}

/* --- Admin support tickets + promo codes --- */
.admin-section { padding: 4px 0; }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-badge.status-warn { color: #e2c97e; border-color: #4d4023; background: #241f10; }
.admin-badge.status-danger { color: #f0a0a5; border-color: #4d2326; background: #2a1416; }
.admin-badge.status-muted { color: var(--muted); }
.admin-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; }
.admin-btn:hover { border-color: var(--accent); }
.admin-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.admin-btn.danger { color: #f0a0a5; border-color: #4d2326; }
.admin-mini { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12px; }
.admin-form { display: flex; flex-direction: column; gap: 8px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.admin-form input, .admin-form select, .admin-form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.admin-form-row { display: flex; gap: 12px; } .admin-form-row label { flex: 1; }
.admin-form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.admin-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.admin-ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.admin-thread { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; padding: 12px 0; }
.admin-msg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.admin-msg.staff { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.admin-msg.internal { background: #241f10; border-color: #4d4023; }
.admin-msg-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.admin-msg-time { margin-left: auto; }
.admin-reply { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-reply textarea { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit; }
.admin-reply-actions { display: flex; align-items: center; justify-content: space-between; }
.admin-role-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.admin-user-link { font-weight: 600; }
.admin-limit { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.admin-userhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.admin-avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.admin-userhead-name { font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.admin-user-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.admin-kvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin-bottom: 16px; }
.admin-kv { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.admin-kv span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .admin-kvs { grid-template-columns: 1fr 1fr; } }

/* The confirm dialog's styles moved to /confirm-dialog.css, which ships with
   the shared component. It is written in these same tokens, so it picks up the
   light theme below without knowing this surface exists. */

/* Destructive actions read as destructive, in the dialog and in the node dock. */
.button.danger, .timeline-balloon-actions button.danger {
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}
.button.danger:hover, .timeline-balloon-actions button.danger:hover:not(:disabled) {
  background: #d0432f;
}

/* Free-models-only mode: a model that would spend is dimmed in the picker but
   stays selectable, because choosing one is what raises the confirmation. */
option.model-paid {
  color: var(--muted);
}