/* The "Watch it work" window: a DOM copy of the real app (Phosphor theme, Retro style).
   Every size, font and colour below was measured on the running app (2026-10-19, 1920×1040,
   via CDP computed styles): mono UI at 11–13px (the app's "SF Mono" stack → Consolas on
   Windows), Inter prose at 14px in the transcript, 2px radii, the active chat framed in its own
   accent. Driven by demo.js. */

/* ── section ─────────────────────────────────────────────────────────────── */
.demo-section { position: relative; max-width: none; padding: 64px 0 48px; overflow: hidden; }
.demo-head { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto 28px; padding: 0 32px; }

/* ── window ──────────────────────────────────────────────────────────────── */
.demo {
  /* column widths: the app's left dock, chat rail and right dock at 1920 */
  --c-ex: 219px; --c-rail: 241px; --c-dock: 400px;
  /* surfaces measured on the app: shell, top/bottom bars + rail, left/right dock panels,
     explorer tab bar + action bar, chat body, strips/pills, strong dividers */
  --shell: var(--ui-workbench-bg); --bar: var(--ui-chrome-bg); --dock-bg: var(--ui-panel-bg); --ex-bar: color-mix(in srgb, var(--vscode-sideBar-background) 94%, #000 6%); --chat-bg: var(--ui-workspace-bg); --strip: color-mix(in srgb, var(--vscode-sideBar-background) 82%, #000 18%);
  --div-strong: var(--ui-divider-strong); --surface: var(--ui-surface-bg); --surface-line: var(--ui-surface-border);
  --bg: var(--vscode-editor-background); --line: var(--vscode-panel-border); --line-soft: var(--ui-divider); --panel-2: var(--vscode-input-background);
  --text: var(--vscode-foreground); --muted: var(--vscode-descriptionForeground); --accent: var(--vscode-focusBorder); --accent-ink: var(--vscode-button-foreground); --link: var(--vscode-textLink-foreground);
  --mono: var(--vscode-editor-font-family); --radius: var(--ui-radius);
  --prose: color-mix(in srgb, var(--vscode-foreground) 80%, var(--vscode-sideBar-background)); --active: var(--c-teal);
  /* status colours from queue.css */
  --st-question: #4c9eff; --st-action: #d4a017; --st-done: #4ec9b0; --st-failed: #f87171;
  position: relative; z-index: 1; width: min(1560px, calc(100% - 48px)); margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--shell);
  font-family: var(--ui-font); font-size: var(--vscode-font-size); line-height: normal; color: var(--text); overflow: hidden;
  /* Fit short laptop screens, never below 600px. */
  display: grid; grid-template-rows: 40px 34px minmax(0, 1fr) 30px; height: clamp(600px, calc(100vh - 150px), 780px);
}
.demo svg.ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo svg.ic.claude { color: #d97757; }
.demo svg.ic.md { color: #42a5f5; }
.demo svg.ic.fill { fill: currentColor; stroke: none; }
.demo .swap { animation: demoSwap 360ms ease-out; }
@keyframes demoSwap { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* top bar (workspace-topbar): Settings | [search] modes, centred | help, Connected | window controls */
.demo-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-left: 12px; background: var(--bar); border-bottom: 1px solid var(--ui-divider); min-width: 0; }
.dt-settings { color: var(--muted); font-size: 12px; padding: 0 8px; height: 22px; display: inline-flex; align-items: center; justify-self: start; }
.dt-center { position: relative; justify-self: center; }
.dt-search { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px; width: clamp(120px, calc(50vw - 460px), 260px); height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--vscode-panel-border) 80%, transparent); border-radius: var(--radius); color: var(--muted); background: var(--strip); font-size: 12px; white-space: nowrap; }
.dt-search > span { flex: 1; }
.dt-kbd { font-size: 9px; color: rgba(143, 163, 191, 0.52); font-family: inherit; }
.dt-modes { display: inline-flex; align-items: center; gap: 2px; padding: 2px; height: 30px; border: 1px solid rgba(36, 54, 79, 0.7); border-radius: var(--radius); background: var(--strip); }
.dt-mode { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; color: var(--muted); border-radius: var(--radius); font-size: 11px; font-weight: 600; white-space: nowrap; transition: background 160ms, color 160ms; }
.dt-mode-beta { display: inline-block; margin-left: 5px; padding: 0 3px; border: 1px solid currentColor; border-radius: var(--radius); font-family: var(--mono); font-size: 8px; font-weight: 600; line-height: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.dt-mode.active { background: var(--accent); color: var(--accent-ink); }
.dt-mode.hover:not(.active) { background: #2a313b; color: var(--text); }
.dt-mode-add { padding: 0 6px; }
.dt-end { justify-self: end; display: flex; align-items: center; height: 100%; }
.dt-right { display: inline-flex; gap: 6px; align-items: center; padding-right: 8px; color: var(--muted); }
.dt-help { width: 24px; height: 22px; display: grid; place-items: center; }
.dt-help .ic { width: 15px; height: 15px; }
.dt-conn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 11px; font-weight: 600; white-space: nowrap; }
.dt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.dt-conn .ic { width: 12px; height: 12px; }
.dt-win { display: flex; height: 100%; color: var(--muted); }
.dt-win span { width: 46px; height: 40px; display: grid; place-items: center; }
.dt-win svg { display: block; }
.dt-win .ic { width: 11px; height: 11px; stroke-width: 1.6; }

/* second row: explorer tool tabs | project tabs | dock tabs — three strips, each with its own bottom */
.demo-tabsrow { display: grid; grid-template-columns: var(--c-ex) minmax(0, 1fr) var(--c-dock); min-width: 0; }
.dt-tools { display: flex; background: var(--ex-bar); border-bottom: 1px solid var(--line); color: var(--muted); }
.dt-tool { flex: 1 1 0; display: grid; place-items: center; }
.dt-tool-pin { flex: 0 0 34px; }
.dt-tool.on { color: var(--accent); }
.dt-tool-pin.on .ic { fill: currentColor; }
/* project tabs (folder-tabs): 2px accent line along the bottom; tabs are muted, the active one is
   bright + bold, open at the bottom; projects with chats open ("combined") carry a full bracket */
.dt-projects { display: flex; align-items: stretch; min-width: 0; overflow: hidden; background: var(--bar); border-bottom: 2px solid var(--accent); padding-right: 4px; }
.dt-tab { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; color: var(--muted); font-size: 13px; white-space: nowrap; transition: box-shadow 250ms, color 250ms, background 250ms; }
.dt-tab .ic { width: 14px; height: 14px; }
.dt-tab.combined { color: var(--text); box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent), inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.dt-tab.active { color: var(--text); font-weight: 600; background: var(--bar); box-shadow: inset 0 2px 0 var(--accent), inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.dt-collapse { margin-left: auto; align-self: center; width: 30px; height: 24px; display: grid; place-items: center; color: var(--muted); flex: none; }
.dt-collapse .ic { width: 15px; height: 15px; }
/* dock strip (dockview): a 2px accent seam along the bottom; the active tab is bracketed on three sides and open into its pane */
.dt-dock { display: flex; align-items: stretch; min-width: 0; overflow: hidden; background: var(--dock-bg); box-shadow: inset 0 -2px 0 var(--accent); }
.dt-dock .dt-tab { font-size: 12px; padding: 0 22px; gap: 8px; color: var(--muted); font-weight: 400; background: var(--dock-bg); box-shadow: inset 0 -2px 0 var(--accent), inset 1px 0 0 var(--line); }
.dt-dock .dt-tab:first-child { box-shadow: inset 0 -2px 0 var(--accent); }
.dt-dock .dt-tab .ic { width: 13px; height: 13px; }
/* the mock's dock is narrower than a 1920 desktop's, so only the open pane's tab keeps its label */
.dt-dock .dt-tab:not(.active) span { display: none; }
.dt-dock .dt-tab.active { color: var(--text); font-weight: 400; background: var(--chat-bg); box-shadow: inset 0 2px 0 var(--accent), inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.dt-dock .dt-tab.hover { color: var(--text); }
.dt-dock .dt-add { color: var(--muted); display: grid; place-items: center; width: 30px; flex: none; }
.dt-dock .dt-add .ic { width: 15px; height: 15px; }

/* body */
.demo-body { display: grid; grid-template-columns: var(--c-ex) var(--c-rail) minmax(0, 1fr) var(--c-dock); min-height: 0; min-width: 0; }
/* explicit columns, so hiding a pane on narrow screens can't shift the others */
.dt-tools { grid-column: 1; } .dt-projects { grid-column: 2; } .dt-dock { grid-column: 3; }
.demo-explorer { grid-column: 1; } .demo-rail { grid-column: 2; } .demo-main { grid-column: 3; } .demo-dock { grid-column: 4; }

/* ── explorer (file-browser): header, tree, then the project action bar ──── */
.demo-explorer { background: var(--dock-bg); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.dx-tree { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 0 8px; }
.dx-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 8px 8px 6px 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dx-head-icons { display: flex; gap: 1px; }
.dx-head-icons span { width: 22px; height: 22px; display: grid; place-items: center; }
.dx-head-icons .ic { width: 14px; height: 14px; }
.dx-row { display: flex; align-items: center; height: 22px; padding-right: 8px; font-size: 13px; color: var(--text); white-space: nowrap; animation: rise 250ms ease-out backwards; }
.dx-twisty { width: 16px; height: 12px; display: grid; place-items: center; color: var(--muted); flex: none; }
.dx-twisty .ic { width: 12px; height: 12px; }
.dx-ficon { width: 18px; height: 22px; display: grid; place-items: center; flex: none; }
.dx-ficon .ic { width: 15px; height: 15px; stroke-width: 1.75; color: var(--muted); }
.dx-ficon .ic.fold { color: var(--accent); }
.dx-ficon svg.ft { width: 16px; height: 16px; display: block; }
.dx-row.dim { color: var(--muted); }
.dx-row .dx-mark { margin-left: auto; font-size: 10.5px; font-weight: 700; }
.dx-row.m, .dx-row.m .dx-mark { color: #d29922; }
.dx-row.a, .dx-row.a .dx-mark { color: #4ade80; }
/* project-actionbar: pins, git quick bar, run buttons */
.dx-foot { flex: none; display: flex; flex-direction: column; gap: 7px; padding: 8px; background: var(--ex-bar); }
.dx-pins { display: flex; flex-direction: column; gap: 3px; }
.dx-pins-head { display: flex; align-items: center; justify-content: space-between; height: 22px; color: var(--muted); }
.dx-pins-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dx-pins-toggle .ic { width: 13px; height: 13px; }
.dx-pins-toggle .ic + .ic { width: 11px; height: 11px; }
.dx-count { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.dx-gear { width: 22px; height: 22px; display: grid; place-items: center; }
.dx-gear .ic { width: 13px; height: 13px; }
.dx-pin { display: flex; align-items: center; gap: 7px; padding: 4px 6px; font-size: 12px; border-radius: 2px; transition: background 150ms; }
.dx-pin svg.ft { width: 15px; height: 15px; }
.dx-pin.hover, .dx-pin.on { background: #22272f; }
.dx-pin.on { box-shadow: inset 2px 0 0 var(--accent); }
.dx-git { display: flex; flex-direction: column; gap: 5px; padding: 3px 0; }
.dx-branch { display: flex; align-items: center; justify-content: center; gap: 5px; height: 24px; color: var(--muted); font-size: 11px; }
.dx-branch b { font-weight: 600; }
.dx-branch .ic { width: 12px; height: 12px; }
.dx-git-btns { display: flex; gap: 5px; }
.dx-git-btns span { flex: 1 1 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; background: #101317; color: var(--text); }
.dx-git-btns .ic { width: 13px; height: 13px; }
.dx-runs { display: flex; gap: 5px; }
/* run buttons (project-app-action): launch = green, task = blue; they share the row, icon-only until hovered, then the label grows in */
.dx-run { flex: 1 1 0; min-width: 0; height: 25px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 7px; border: 1px solid; border-radius: 2px; background: var(--strip); overflow: hidden; white-space: nowrap; transition: flex-grow 310ms ease, background 200ms; }
.dx-run .ic { width: 13px; height: 13px; }
.dx-run.run { color: var(--ok); border-color: rgba(34, 197, 94, 0.35); }
.dx-run.build { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.dx-run-label { max-width: 0; opacity: 0; font-size: 11px; font-weight: 600; transition: max-width 310ms ease, opacity 200ms; }
.dx-run.hover, .dx-run.open { flex-grow: 3.4; background: color-mix(in srgb, currentColor 12%, var(--strip)); }
.dx-run.hover .dx-run-label, .dx-run.open .dx-run-label { max-width: 120px; opacity: 1; }

/* ── chat rail (pill-row.rail) ───────────────────────────────────────────── */
/* Clip vertically only: the active pill must still paint sideways over the rail's own
   right seam (overflow: hidden would clip it to the padding box). The seam is the active
   chat's accent; the active pill opens through it into the chat. */
.demo-rail { position: relative; background: var(--bar); padding: 8px 0 0; overflow-x: visible; overflow-y: clip;
  border-right: 2px solid var(--active); transition: border-color 350ms ease; }
.demo-group { padding: 4px 0; }
.demo-group-name { position: relative; display: flex; align-items: center; justify-content: center; height: 13px; margin: 10px 0 3px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.demo-group-name .ic { position: absolute; left: 8px; width: 12px; height: 12px; opacity: 0; } /* the drag grip only shows on hover */
.demo-pill { position: relative; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 8px 4px 9px; border: 1px solid transparent; border-right: 0; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.3;
  transition: background 300ms, box-shadow 300ms; }
.demo-pill .demo-pill-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-pill .demo-pill-title.two { font-size: 12px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.demo-ava { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
/* The active pill opens into the chat like a folder tab: it covers the rail's seam
   and carries the accent on its other three sides. */
.demo-pill.active { z-index: 1; margin-right: -2px; background: var(--bar);
  box-shadow: inset 0 2px 0 var(--active), inset 0 -2px 0 var(--active), inset 2px 0 0 var(--active); }
.demo-group-foot { display: flex; gap: 8px; padding: 4px 0; color: var(--muted); }
.demo-group-foot span { flex: 1 1 0; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: 6px; }
.demo-group-foot span:last-child { opacity: 0.55; }
.demo-group-foot b { font-size: 9.5px; font-weight: 700; }
.demo-group-foot .ic { width: 14px; height: 14px; }
.demo-group-foot .ic.plus { width: 13px; height: 13px; }
.demo-rail-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 6px; height: 35px; padding: 4px 6px; background: var(--ui-chrome-bg); border-top: 1px solid color-mix(in srgb, var(--vscode-panel-border) 80%, transparent); }
.demo-rail-foot span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--ui-radius); color: var(--muted); font-size: 11px; }
.demo-rail-foot span:first-child { font-weight: 700; }
.demo-rail-foot .ic { width: 14px; height: 14px; }
.demo-rail-foot span:first-child .ic { width: 12px; height: 12px; }
/* the switch highlight: a line runs once around the pill's border */
.demo-trace { position: absolute; left: -2px; top: -2px; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 4px currentColor); }
.demo-trace rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: demoTrace 1300ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes demoTrace { 0% { stroke-dashoffset: 100; opacity: 1; } 40% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ── chat column: the chat body fills it; the composer floats at its foot ── */
.demo-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; background: var(--chat-bg); border-right: 1px solid var(--line); }
/* reads from the top like the app's chat body; once it overflows, demo.js keeps it scrolled to the latest */
.demo-transcript { overflow: hidden; min-width: 0; padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 12px; font-family: var(--font); font-size: 13px; color: var(--prose); overflow-wrap: anywhere; }
.demo-transcript > :first-child { margin-top: auto; margin-top: 0; }
/* your message: a "you · time" meta line, then a full-width accent-tinted bubble */
.t-user { display: flex; flex-direction: column; gap: 3px; animation: rise 300ms ease-out; }
.t-meta { align-self: flex-end; display: flex; align-items: center; font-size: 11px; color: var(--muted); line-height: 11px; }
.t-meta span { font-size: 10px; margin-left: 8px; }
.t-bubble { background: color-mix(in srgb, var(--vscode-textLink-foreground) 16%, var(--vscode-input-background)); border: 1px solid color-mix(in srgb, var(--vscode-textLink-foreground) 38%, transparent); padding: 7px 10px; border-radius: var(--ui-radius-lg); color: var(--text); font-size: 14px; line-height: 1.6; }
/* tool lines (tool-track): green, 22px rows — a 16px glyph, a bold verb, the mono argument */
.t-track { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; margin: 4px 0; }
.t-line { display: flex; align-items: center; gap: 6px; height: 22px; padding: 2px 0; color: var(--ok); font-size: 12px; line-height: 18px; animation: rise 300ms ease-out; }
.t-ico { width: 16px; height: 16px; display: grid; place-items: center; flex: none; }
.t-ico .ic { width: 12px; height: 12px; }
.t-ico.cmd { border: 1px solid rgba(34, 197, 94, 0.58); border-radius: 1px; }
.t-ico.cmd .ic { width: 11px; height: 11px; }
.t-verb { font-weight: 600; flex: none; }
.t-arg { font-family: var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-line .t-chev { margin-left: auto; width: 12px; height: 12px; }
/* an edit (exec-diff): a plate whose border is green for added lines and red for removed, in proportion */
.t-diff { --g: 100%; display: flex; align-items: center; gap: 7px; margin: 7px 0 7px 12px; padding: 7px 11px; border: 1px solid transparent; border-radius: 2px; font-size: 12px; line-height: 18px; color: var(--text); animation: rise 300ms ease-out;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, var(--ok) 0%, var(--ok) calc(var(--g) - 2%), var(--c-red) calc(var(--g) + 2%), var(--c-red) 100%) border-box; }
.t-diff .t-chev { width: 13px; height: 13px; opacity: 0.6; }
.t-diff .ic { width: 13px; height: 13px; }
.t-diff .t-arg { font-weight: 500; color: var(--text); }
.t-badges { margin-left: auto; display: flex; gap: 5px; }
.t-badges b { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 2px; line-height: 12px; }
.t-badges .add { color: #4ade80; background: rgba(34, 197, 94, 0.06); }
.t-badges .del { color: #f87171; background: rgba(244, 63, 94, 0.06); }
.t-text { color: var(--prose); font-size: 14px; line-height: 1.6; padding: 4px 0 4px 12px; animation: rise 300ms ease-out; }
.t-text b { color: var(--text); font-weight: 650; }
.t-text code { font-family: var(--mono); font-size: 11.9px; letter-spacing: -0.01em; color: var(--text); background: rgba(215, 227, 244, 0.14); border: 1px solid rgba(215, 227, 244, 0.14); padding: 1px 5px; border-radius: 2px; }
.t-verify { display: flex; gap: 8px; align-items: center; padding-left: 12px; color: var(--text); font-size: 13px; animation: rise 300ms ease-out; }
.t-verify-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 11px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); }
/* the turn's closing Life strip (done-life), with Branch / Copy sitting in the middle of it */
.t-done { position: relative; height: 18px; margin: 4px 0; flex: none; }
.t-done canvas { display: block; }
.t-done-actions { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 18px; display: flex; gap: 2px; background: var(--chat-bg); padding: 0 8px; }
.t-done-actions span { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); border-radius: 2px; white-space: nowrap; }
.t-done-actions .ic { width: 12px; height: 12px; }
/* the live turn-activity row (msg-phase.executing.live): a pulsing purple mark, EXECUTING…, elapsed */
.t-phase { display: flex; align-items: center; gap: 6px; height: 22px; padding: 4px 0 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.t-phase i { width: 6px; height: 6px; background: #b392f0; flex: none; animation: phasePulse 1.2s ease-in-out infinite; }
.t-phase b { color: var(--text); font-size: 11px; font-weight: 700; }
.t-phase span { margin-left: 8px; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.7; }
@keyframes phasePulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: none; } }
/* ComposerQuestion: choices live inside the composer; the input is the custom answer. */
.demo-question-slot:empty { display: none; }
.t-question { display: flex; flex-direction: column; gap: 5px; padding: 2px 2px 7px 0; margin-bottom: 4px; border-bottom: 1px solid rgba(215, 227, 244, 0.09); max-height: 44vh; overflow-y: auto; animation: rise 300ms ease-out; }
.t-q-title { display: flex; align-items: flex-start; gap: 6px; padding: 0 2px; font-weight: 600; color: var(--text); font-size: 12.5px; line-height: 1.4; }
.t-q-title > span:first-child { flex: 1; }
.t-q-toggle .ic { width: 21px; height: 21px; }
.t-q-cancel .ic { width: 18px; height: 18px; }
.t-q-options { display: flex; flex-direction: column; gap: 2px; }
.t-q-opt { display: flex; align-items: flex-start; gap: 9px; padding: 5px 8px 5px 1px; border: 1px solid transparent; font-size: 13px; line-height: 1.4; color: var(--text); transition: background 100ms, border-color 100ms; }
.t-q-marker { width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid rgba(215, 227, 244, 0.38); border-radius: var(--radius); flex: none; }
.t-q-opt.hover { background: #2a313b; }
.t-q-opt.chosen { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.t-q-opt.chosen .t-q-marker { border-color: var(--accent); background: var(--accent); }
.demo-add .g-pencil, .demo-composer.has-question .demo-add .g-add, .demo-composer.has-question .demo-mic { display: none; }
.demo-composer.has-question .demo-add .g-pencil { display: block; }
.t-q-recap { display: flex; align-items: center; gap: 7px; padding: 6px 12px; color: var(--muted); font-size: 12px; }
.t-q-recap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-q-recap .ic { width: 13px; height: 13px; }
.t-q-recap .ic:last-child { color: var(--ok); }

/* composer-float: the dock is 90% wide (max 700), centred; approval card, bookmarks, the box, then the belt */
.demo-composer-float { padding: 8px 0 16px; }
.demo-composer-dock { width: min(90%, 700px); margin: 0 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* approval card (approval-card.compact): one bar — chevron, glyph, command over its gate reason, the three decisions */
.t-approval { display: flex; align-items: center; gap: 8px; padding: 4px 5px 4px 9px; margin-bottom: 0; border: 1px solid var(--surface-line); border-radius: 3px; background: var(--surface); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); animation: rise 300ms ease-out; }
.t-a-chev { width: 10px; text-align: center; font-size: 8px; opacity: 0.55; flex: none; }
.t-a-glyph { color: var(--muted); display: grid; flex: none; }
.t-a-glyph .ic { width: 13px; height: 13px; }
.t-a-text { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.t-a-cmd { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-a-why { font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-a-btns { margin-left: auto; display: flex; gap: 4px; flex: none; }
.t-a-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.t-a-btn .ic { width: 12px; height: 12px; stroke-width: 2.5; }
.t-a-btn.reject { color: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 55%, transparent); }
.t-a-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.t-a-btn.pressed { box-shadow: inset 2px 2px 0 rgba(0,0,0,0.35); transform: translate(1px, 1px); }
.demo-composer-stack { display: flex; flex-direction: column; gap: 6px; }
.demo-approval-slot:empty { display: none; }
.demo-actions { display: flex; gap: 4px; margin: 0 0 -6px 16px; }
.demo-composer-stack.has-approval .demo-actions { display: none; }
.demo-act { width: 30px; height: 22px; display: grid; place-items: center; border-radius: 2px 2px 0 0; }
.demo-act .ic { width: 13px; height: 13px; }
.demo-act.bug { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.demo-act.eye { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.demo-act.rocket { background: rgba(234, 179, 8, 0.14); color: #eab308; }
.demo-composer { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px solid rgba(36, 54, 79, 0.9); border-radius: 3px; background: var(--panel-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05); container-type: inline-size; }
.demo-composer-row { display: flex; align-items: center; gap: 8px; height: 30px; font-size: 13px; }
.demo-add { width: 24px; height: 24px; margin-left: -4px; display: grid; place-items: center; color: var(--muted); flex: none; }
.demo-add .ic { width: 14px; height: 14px; }
.demo-input { flex: 1; min-width: 0; color: var(--text); line-height: 18.2px; white-space: nowrap; overflow: hidden; text-overflow: clip; direction: ltr; }
.demo-input:empty::before { content: attr(data-ph); color: var(--muted); }
.demo-input.typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--text); animation: demoCaret 1s steps(1) infinite; }
.demo-input.typing:empty::before { content: none; }
@keyframes demoCaret { 50% { opacity: 0; } }
.demo-mic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ui-radius); color: var(--muted); flex: none; }
.demo-mic .ic { width: 15px; height: 15px; }
/* ONE toolbar row (box-toolbar): anchor (model + ring), divider, quick switch, account, voice,
   then the right zone; permissions + send pinned at the far right. */
.demo-composer-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--vscode-panel-border) 70%, transparent); min-width: 0; }
.demo-anchor { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; flex: none; }
.demo-model { display: inline-flex; align-items: center; gap: 4px; border-radius: 2px; white-space: nowrap; transition: background 200ms; }
.demo-model-main { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; }
.demo-model .ic { width: 15px; height: 15px; }
.demo-model-name { font-size: 12px; font-weight: 700; line-height: 12px; }
.demo-model.hover { background: #2a313b; }
.demo-model.flash .demo-model-name { animation: demoFlash 700ms ease-out; }
@keyframes demoFlash { 0% { color: var(--accent); } 100% { color: var(--text); } }
/* thinking-strength grid (think-life): 5 × 3 cells of 3px; at rest one full column per effort stop,
   in the app's "orange" tone for High; while the chat works it's a window onto a tiny Life field */
.demo-effort, .pk-think { display: inline-grid; grid-template-columns: repeat(5, 3px); grid-auto-rows: 3px; gap: 1px; padding: 2px 3px; border-radius: 6px; color: #ff9e64; }
.demo-effort i, .pk-think i { width: 3px; height: 3px; background: currentColor; opacity: 0.065; }
.demo-effort i.alive, .pk-think i.alive { opacity: 1; }
.demo-effort.evolving i.alive { filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 22%, transparent)); }
/* context ring (context-meter): 20px button, 16px ring, 2.5 stroke, fills from the top */
.demo-ctx { display: grid; width: 20px; height: 20px; padding: 2px; border-radius: 2px; flex: none; }
.demo-ctx svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.demo-ctx circle, .cp-head circle { fill: none; stroke-width: 2.5; }
.demo-ctx .trk, .cp-head .trk { stroke: color-mix(in srgb, var(--muted) 30%, transparent); }
.demo-ctx .fill, .cp-head .fill { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 41 100; }
.demo-ctx.hover, .demo-gauge.hover, .demo-account.hover { background: #2a313b; }
.demo-sep { width: 1px; height: 20px; border-radius: 1px; background: rgba(215, 227, 244, 0.22); flex: none; }
/* quick switch (model-switch): one-tap pinned models; the current one is bright */
.demo-quick { display: inline-flex; gap: 1px; padding: 1px; border-radius: 9px; flex: none; }
.demo-quick-seg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 2px; color: var(--muted); font-size: 12px; font-weight: 700; transition: color 250ms; }
.demo-quick-seg .ic { width: 13px; height: 13px; opacity: 0.55; }
.demo-quick-seg.on { color: var(--text); }
.demo-quick-seg.on .ic { opacity: 1; }
.demo-account { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 2px; font-size: 12px; font-weight: 600; line-height: 12px; flex: none; }
.demo-account .ic { width: 13px; height: 13px; }
.demo-sq { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--ui-radius); color: var(--muted); flex: none; }
.demo-sq .ic { width: 14px; height: 14px; }
.demo-voice { border-radius: var(--ui-radius); opacity: 0.4; }
.demo-voice .ic { width: 15px; height: 15px; }
.demo-grow { flex: 1 1 auto; min-width: 4px; }
.demo-gauge { color: var(--ok); }
.demo-gauge .ic { width: 16px; height: 16px; }
.demo-zap { color: var(--c-red); }
.demo-send { width: 30px; height: 30px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); flex: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: transform 120ms; }
.demo-send .ic { width: 17px; height: 17px; stroke-width: 2.5; }
/* while this chat works the send button is the red Stop square (send-btn.stop) */
.demo-send svg.g-stop { display: none; width: 11px; height: 11px; fill: #fff; stroke: #fff; }
.demo-send.stop { background: #f43f5e; color: #fff; }
.demo-send.stop svg.g-up { display: none; }
.demo-send.stop svg.g-stop { display: block; }
.demo-send.pressed { animation: demoPress 300ms ease-out; }
@keyframes demoPress { 30% { transform: scale(0.88); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); } }
/* Only when the composer is genuinely narrow does the app wrap: the anchor (model + ring)
   and the pinned zap + send keep row 1; the quick switch, account and voice drop to row 2. */
@container (max-width: 588px) {
  .demo-composer-bar { flex-wrap: wrap; row-gap: 8px; }
  .demo-composer-bar::after { content: ""; order: 1; flex-basis: 100%; height: 0; } /* the forced line break */
  .demo-quick, .demo-account, .demo-voice { order: 2; }
  .demo-sep-quick { display: none; }
}

/* belt (queue-bar): a 28px band under the box; the ▶ cap at left 5, a hairline, then 22px chat squares from 36 */
.demo-belt { position: relative; height: 28px; }
.demo-belt-cap { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 3; }
.demo-play { position: relative; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: 2px; color: var(--muted); opacity: 0.8; transition: border-color 200ms, color 200ms, opacity 200ms; }
.demo-play .ic { width: 13px; height: 13px; }
.demo-play .g-play { display: none; }
.demo-play .g-pause, .demo-play .g-play { line-height: 0; }
.demo-play.on { opacity: 1; color: var(--text); border-color: rgba(62, 226, 106, 0.45); }
.demo-play.on .g-pause { display: none; }
.demo-play.on .g-play { display: block; }
/* countdown ring: overhangs the cap by 2px and fills clockwise until the switch */
.demo-ring { position: absolute; left: -3px; top: -3px; pointer-events: none; overflow: visible; }
.demo-ring rect { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
@keyframes demoRing { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.demo-belt-tick { width: 1px; height: 16px; margin-left: 4px; border-radius: 1px; background: rgba(215, 227, 244, 0.22); flex: none; }
.demo-belt-slots { position: absolute; left: 36px; right: 8px; top: 3px; height: 22px; }
.demo-belt-slot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--chat) 42%, var(--line)); background: color-mix(in srgb, var(--chat) 16%, var(--chat-bg)); opacity: 0;
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease-out, scale 260ms ease-in, background 200ms; }
.demo-belt-slot canvas { width: 16px !important; height: 16px !important; }
.demo-belt-slot.in { opacity: 1; }
.demo-belt-slot.out { opacity: 0; scale: 0.2; }
.demo-belt-slot.approval { box-shadow: 0 0 0 1.5px var(--st-action); }
.demo-belt-slot.question { box-shadow: 0 0 0 1.5px var(--st-question); }
.demo-belt-slot.done { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--st-done) 75%, transparent); }
/* the chat being switched to: filled with its accent, one expanding ring (queueArrive) */
.demo-belt-slot.current { background: var(--chat); border-color: var(--chat); }
.demo-belt-slot.current::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--chat); border-radius: 2px; opacity: 0; animation: demoArrive 480ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
@keyframes demoArrive { 0% { opacity: 0.9; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.55); } }

/* ── right dock ──────────────────────────────────────────────────────────── */
.demo-dock { background: var(--ui-panel-bg); overflow: hidden; display: grid; min-height: 0; }
.demo-pane { grid-area: 1 / 1; display: none; min-height: 0; overflow: hidden; }
.demo-pane.on { display: grid; }
/* Activity (ActivityPanel, Retro style): the History row, the Changes toolbar, then one card per file.
   Both bars are boxed in the strong divider on the chrome colour; their controls are square 20px keys. */
.demo-changes { grid-template-rows: auto auto minmax(0, 1fr); align-content: start; }
.demo-hist { display: flex; align-items: center; gap: 6px; margin: 8px 8px 0; padding: 0 6px 0 8px; height: 34px; border: 1px solid var(--div-strong); border-radius: 2px; background: var(--bar); font-size: 12px; white-space: nowrap; }
.demo-hist .ic { width: 14px; height: 14px; }
.demo-hist b { font-weight: 700; }
.demo-hist-meta { margin-left: auto; margin-right: 4px; font-size: 10px; color: var(--muted); }
.demo-ch-head { display: flex; align-items: center; gap: 8px; margin: 8px; padding: 0 6px 0 8px; height: 34px; border: 1px solid var(--div-strong); border-radius: 2px; background: var(--bar); font-size: 10px; white-space: nowrap; overflow: hidden; }
.demo-ch-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-ch-files { font-size: 9.5px; color: var(--muted); }
.demo-ch-chips { display: flex; gap: 3px; }
.demo-ch-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; background: var(--strip); color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0.025em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(215, 227, 244, 0.07), 1px 1px 0 rgba(0, 0, 0, 0.55); }
.demo-ch-pill .ic { width: 14px; height: 14px; stroke-width: 2.25; }
.demo-ch-pill.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.demo-ch-pill.add { color: #81b88b; } .demo-ch-pill.mod { color: #e2c08d; } .demo-ch-pill.del { color: #c74e39; }
.demo-ch-pill.off { opacity: 0.4; }
.demo-ch-pill.right { margin-left: auto; gap: 3px; padding: 0 4px 0 6px; } .demo-ch-pill.right + .demo-ch-pill.right { margin-left: 0; }
.demo-ch-pill.right .ic { width: 12px; height: 12px; stroke-width: 2; }
.demo-ch-badge { min-width: 13px; height: 13px; padding: 0 3px; background: #fff; color: var(--accent); font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; }
.demo-ch-body { overflow: hidden; padding: 0 8px 8px; display: grid; align-content: start; gap: 8px; }
.demo-ch-empty { color: var(--muted); text-align: center; padding: 60px 0; font-size: 12px; }
/* one changed file (file-change): a head with the type glyph, the name, its status and ±, then the lines */
.demo-file { border: 1px solid var(--line); border-radius: 2px; background: var(--bg); overflow: hidden; animation: rise 300ms ease-out; }
.demo-file-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: var(--chat-bg); font-size: 11px; }
.demo-file-ft { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.demo-file-ft svg { width: 16px; height: 16px; }
.demo-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.demo-file-status { font-size: 10px; font-weight: 600; text-transform: lowercase; color: #4ade80; }
.demo-file-status.modified { color: #ddb15a; }
.demo-file-stat { font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.demo-file-stat .add { color: #4eb277; } .demo-file-stat .del { color: #d16969; }
.demo-lines { padding: 2px 0; }
.demo-line { display: grid; grid-template-columns: 34px 1fr; height: 16.5px; padding: 0 8px 0 4px; font-size: 11px; line-height: 16.5px; opacity: 0; animation: rise 250ms ease-out forwards; }
.demo-ln { color: var(--muted); opacity: 0.45; text-align: right; padding-right: 10px; user-select: none; }
.demo-code { white-space: pre; color: var(--text); overflow: hidden; }
.demo-line.add { background: rgba(74, 222, 128, 0.13); }
.demo-line.add .demo-ln { color: var(--c-green); opacity: 1; }
.demo-line.del { background: rgba(248, 113, 113, 0.13); }
.demo-line.del .demo-ln { color: var(--c-red); opacity: 1; }

/* Preview (PreviewPanel.tsx): browser tabs, a toolbar with the address, then the app */
.demo-preview { grid-template-rows: auto auto minmax(0, 1fr); background: var(--bg); }
.pv-tabs { display: flex; align-items: center; gap: 6px; padding: 7px 9px 6px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.pv-tab { display: inline-flex; align-items: center; gap: 8px; height: 27px; padding: 0 6px 0 11px; border: 1px solid var(--line); border-radius: 2px; font-size: 11.5px; }
.pv-tab.on { border-color: var(--accent); color: var(--text); }
.pv-tab .ic { width: 12px; height: 12px; }
.pv-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); color: #c9d1dc; }
.pv-bar .ic { width: 15px; height: 15px; }
.pv-url { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; padding: 0 8px; border: 1px solid #3c3c3c; background: #1b1f25; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; }
.pv-stop { color: #f48771; display: grid; }
.pv-stop .ic { width: 13px; height: 13px; }
.pv-view { position: relative; overflow: hidden; }
.pv-starting { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #8f98a6; font-size: 12.5px; }
.pv-life { width: 200px; height: 24px; overflow: hidden; color: var(--accent); }
.sf { position: absolute; inset: 0; display: none; }
.demo-preview[data-state="live"] .pv-starting { display: none; }
.demo-preview[data-state="live"] .sf { display: flex; }

/* Storefront's cart (a fictional shop), in the shop's own light theme.
   Spacing is sized so the whole page, footer included, fits the shortest window (600px tall). */
.sf { flex-direction: column; align-items: center; padding: 12px 18px 0; background: #f7f4ee; font-family: var(--font); color: #1f1c18; }
.sf > * { width: 100%; max-width: 330px; }
.sf-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid #e4ded3; }
.sf-top b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.sf-cart { position: relative; display: grid; margin-right: 6px; }
.sf-cart svg.ic { width: 19px; height: 19px; }
.sf-cart i { position: absolute; right: -8px; top: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #d9542b; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.sf-title { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.sf-sub { font-size: 12px; color: #857d70; }
.sf-items { display: grid; gap: 8px; margin-top: 12px; }
.sf-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border: 1px solid #e4ded3; border-radius: 10px; background: #fff; }
.sf-thumb { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; background: hsl(var(--h) 38% 86%); color: hsl(var(--h) 32% 36%); }
.sf-thumb svg.ic { width: 21px; height: 21px; }
.sf-item b { display: block; font-size: 13px; font-weight: 600; }
.sf-item b + span { font-size: 11.5px; color: #857d70; }
.sf-item em { font-style: normal; font-size: 13px; font-weight: 600; color: #1f1c18; }
.sf-ship { margin-top: 10px; padding: 11px 12px 12px; border: 1px solid #f1d3c4; border-radius: 10px; background: #fdf1ea; }
.sf-ship-k { font-size: 12.5px; }
.sf-ship-k b { color: #c0461f; }
.sf-ship-bar { height: 7px; margin-top: 8px; border-radius: 999px; background: #f0dcd0; overflow: hidden; }
.sf-ship-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: #d9542b; }
.sf-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; font-size: 13px; color: #5d564b; }
.sf-total b { font-size: 15px; color: #1f1c18; }
.sf-btn { margin-top: 10px; padding: 11px; text-align: center; border-radius: 999px; background: #1f1c18; color: #fff; font-weight: 700; font-size: 13.5px; }
.sf-foot { margin-top: auto; padding: 8px 0 10px; text-align: center; font-size: 11px; color: #9a9184; }
/* the new work: the mugs join the cart, the counts and totals switch from their before to their
   after value (.sf-was / .sf-now), and the free-shipping bar eases up from 40% (tote alone) to 87% */
.sf-new, .sf-now, .sf.land .sf-was { display: none; }
.sf.land .sf-now { display: inline; }
.sf.land .sf-new { display: grid; animation: sfIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.sf.land .sf-ship-bar i { width: 87%; animation: sfFill 1600ms 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sfIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes sfFill { from { width: 40%; } }

/* Editor: a pinned plan open in the reading pane */
.demo-plan { grid-template-rows: auto minmax(0, 1fr); background: var(--bg); }
.pl-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.pl-bar svg.ft { width: 15px; height: 15px; }
.pl-bar em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); border: 1px solid var(--line); padding: 1px 6px; }
.pl-body { padding: 16px 20px; font-family: var(--font); font-size: 13.5px; color: var(--prose); overflow: hidden; }
.pl-body h4 { margin: 0 0 6px; font-size: 20px; color: var(--text); letter-spacing: -0.01em; }
.pl-body h5 { margin: 16px 0 6px; font-size: 12px; font-family: var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pl-body b { color: var(--text); }
.pl-item { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.pl-item i { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--line); border-radius: 2px; display: grid; place-items: center; transition: background 200ms, border-color 200ms; }
.pl-item.done { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.pl-item.done i { background: var(--accent); border-color: var(--accent); }
.pl-item.done i::after { content: "✓"; color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 1; }

/* ── popovers (drop-up, like the composer's menus) ───────────────────────── */
.demo-pops { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.demo-pop { position: absolute; background: #0e131c; border: 1px solid #2a3441; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease; }
.demo-pop.in { opacity: 1; transform: none; }
/* model picker (BotPicker.tsx): search, provider filters, one flat list nearest the composer */
.demo-picker { width: 340px; display: flex; flex-direction: column; }
.pk-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 30px; color: var(--muted); border-bottom: 1px solid var(--vscode-panel-border); font-size: 12px; }
.pk-search span { flex: 1; }
.pk-filters { display: flex; gap: 4px; padding: 7px 8px; }
.pk-f { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 27px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 2px; color: var(--muted); font-size: 11px; }
.pk-f .ic { width: 16px; height: 16px; }
.pk-f b { position: absolute; right: 1px; bottom: 0; font-size: 6.5px; font-weight: 700; color: var(--muted); }
.pk-f.on { border-color: var(--accent); background: #22272f; color: var(--text); }
.pk-list { border-top: 1px solid var(--vscode-panel-border); padding: 4px; }
.pk-row { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 2px; font-family: var(--font); font-size: 13px; font-weight: 500; transition: background 150ms, border-color 150ms; }
.pk-row .ic { width: 15px; height: 15px; opacity: 0.8; }
.pk-row .pk-think { margin-left: auto; }
.pk-row.hover { background: var(--ui-menu-hover); }
.pk-row.on { border-color: var(--accent); background: #22272f; }
/* context popover (.context-pop) */
.demo-ctxpop { width: 252px; padding: 11px; border-radius: 10px; font-size: 12px; }
.cp-head { position: relative; display: flex; align-items: center; gap: 11px; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--vscode-panel-border); }
.cp-head svg { width: 38px; height: 38px; transform: rotate(-90deg); flex: none; }
.cp-head circle { stroke-width: 4; }
.cp-pct { position: absolute; left: 0; width: 38px; text-align: center; font-size: 9.5px; font-weight: 600; }
.cp-num { font-family: var(--font); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-sub { font-size: 11px; color: var(--muted); }
.cp-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 12px; }
.cp-row .ic { color: var(--muted); }
.cp-row em { margin-left: auto; font-style: normal; color: var(--link); font-size: 11px; }
.cp-row.danger, .cp-row.danger .ic { color: #f14c4c; }
/* plan usage popover (.composer-usage-pop) */
.demo-usepop { width: 260px; padding: 12px 14px; border-radius: 10px; }
.up-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
.up-head span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.up-head .ic { width: 11px; height: 11px; }
.up-win + .up-win { margin-top: 10px; }
.up-top { display: flex; justify-content: space-between; font-size: 12px; }
.up-top b { color: #4ec46e; font-variant-numeric: tabular-nums; }
.up-top b.warn { color: #e0b23c; }
.up-bar { height: 6px; margin: 5px 0 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #4ec46e; animation: upFill 900ms 150ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.up-bar i.warn { background: #e0b23c; }
@keyframes upFill { to { width: var(--w); } }
.up-reset { font-size: 10.5px; opacity: 0.55; }

/* ── Source Control mode (GitHubTab.tsx / github-tab.css) ────────────────── */
.demo-sc { grid-row: 2 / 4; display: none; flex-direction: column; min-height: 0; padding: 0 22px 14px; background: var(--bg); font-size: 13px; overflow: hidden; }
.demo.mode-sc .demo-tabsrow, .demo.mode-sc .demo-body { display: none; }
.demo.mode-sc .demo-sc { display: flex; }
.sc-label .ic { width: 16px; height: 16px; }
.sc-ava { font-size: 13px; }
.sc-ava.big { width: 40px; height: 40px; flex: none; }
.sc-badge .ic { width: 10px; height: 10px; }
.sc-caption em { font-style: normal; }
.sc-detail { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sc-detail.off { display: none; }
.sc-dhead { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.sc-back { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.sc-repo { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.sc-repo .ic { width: 16px; height: 16px; color: var(--link); }
.sc-dhead a { color: var(--link); }
.sc-right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #353c46; border-radius: 2px; font-size: 11px; font-weight: 500; }
.sc-chip .ic, .sc-ab .ic { width: 12px; height: 12px; }
.sc-ab { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; }
.sc-ab b { font-weight: 600; margin-right: 6px; }
.sc-unc { color: #eab308; font-size: 11px; }
.sc-cols { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(240px, 1fr) minmax(260px, 1.2fr); gap: 12px; padding-top: 12px; min-height: 0; flex: 1; }
.sc-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sc-card { border: 1px solid var(--ghd-edge); border-radius: var(--ui-radius); background: var(--ghd-band); box-shadow: var(--ui-surface-shadow); min-height: 0; overflow: hidden; }
.sc-sync { padding: 12px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, #22272f 40%, transparent); }
.sc-sync-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; margin-bottom: 9px; }
.sc-sync-label .ic { width: 13px; height: 13px; }
.sc-shield { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 500; font-size: 10.5px; }
.sc-shield .ic { width: 12px; height: 12px; }
.sc-sync-btns, .sc-btns { display: flex; gap: 8px; }
.sc-btn { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 9px; border: 1px solid var(--ui-divider); border-radius: var(--ui-radius); background: var(--ui-panel-bg); color: var(--text); font-size: 12px; font-weight: 400; white-space: nowrap; box-shadow: var(--ui-control-shadow), 1px 1px 0 color-mix(in srgb, #000 55%, transparent); transition: background 150ms, opacity 200ms; }
.sc-sync-btns .sc-btn { height: 40px; }
.sc-btn .ic { width: 13px; height: 13px; }
.sc-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sc-btn.primary.hover { background: var(--accent-hover); }
.sc-btn.ai { color: var(--link); border-color: color-mix(in srgb, var(--link) 50%, transparent); background: color-mix(in srgb, var(--link) 10%, transparent); }
.sc-btn.disabled { opacity: 0.5; }
.sc-btn.sm { flex: none; height: 26px; font-size: 11px; font-weight: 500; }
.sc-btn.ghost { background: transparent; color: var(--muted); }
.sc-count { position: absolute; top: 4px; right: 4px; height: 15px; min-width: 15px; padding: 0 4px; border-radius: 2px; font-size: 10px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 22%, transparent); }
.sc-btn.spin .sc-ico { animation: scSpin 900ms linear infinite; display: grid; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-sync-msg:not(:empty) { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ok); font-size: 11px; animation: rise 300ms ease-out; }
.sc-sync-msg .ic { width: 14px; height: 14px; }
.sc-l em { font-style: normal; font-size: 9px; text-transform: uppercase; padding: 0 4px; color: var(--link); background: color-mix(in srgb, var(--link) 13%, transparent); }
.sc-l em.opt { color: var(--muted); background: color-mix(in srgb, var(--muted) 13%, transparent); }
.sc-ph { color: var(--muted); }
.sc-textarea { display: block; }
.demo .sc-subject, .demo .sc-textarea, .demo .sc-suggest { border-radius: var(--ui-radius); }
.sc-desc { color: var(--prose); font-family: var(--font); font-size: 12px; animation: rise 300ms ease-out; display: block; padding-right: 24px; }
.sc-suggest .ic { width: 12px; height: 12px; }
.sc-suggest.busy .ic { animation: scSpin 900ms linear infinite; }
.sc-hint { padding: 6px 14px 8px; font-size: 11px; color: var(--muted); }
.sc-btns { padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.sc-result:not(:empty) { padding: 9px 12px; border-top: 1px solid var(--line); font-size: 11.5px; background: color-mix(in srgb, currentColor 4%, transparent); animation: rise 300ms ease-out; }
.sc-result.ok { color: var(--ok); }
.sc-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sc-card-h span { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.sc-group { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 12px; font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.sc-group a { margin-left: auto; color: var(--link); font-weight: 500; }
.sc-n { font-size: 10px; font-weight: 600; padding: 0 5px; background: #353c46; border-radius: 2px; }
.sc-file { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 11px; border-bottom: 1px solid var(--line-soft); }
.sc-file .ic { width: 12px; height: 12px; color: var(--muted); }
.sc-file .chev { width: 10px; height: 10px; }
.sc-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-file em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 2px; }
.sc-file em.m { color: #d29922; background: color-mix(in srgb, #d29922 12%, transparent); }
.sc-file em.a { color: #4ade80; background: color-mix(in srgb, #4ade80 12%, transparent); }
.sc-clean { display: flex; align-items: center; gap: 8px; padding: 18px 12px; color: var(--ok); font-size: 12px; animation: rise 300ms ease-out; }
.sc-commits { padding: 10px 12px; display: grid; gap: 8px; }
.sc-cm { display: grid; grid-template-columns: 14px 1fr; gap: 8px; position: relative; }
.sc-cm > i { width: 9px; height: 9px; margin: 12px 0 0 2px; border-radius: 50%; background: var(--accent); }
.sc-cm::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: -14px; width: 2px; background: var(--line); }
.sc-cm:last-child::before { display: none; }
.sc-cm > div { border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; background: var(--bg); }
.sc-cm.fresh > div { border-color: var(--accent); animation: rise 400ms ease-out; }
.sc-cm-s { font-size: 12.5px; font-family: var(--ui-font); color: var(--text); }
.sc-cm-m { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.sc-cm-m code { font-size: 10px; padding: 0 4px; background: #22272f; }
.sc-tag { margin-left: 6px; font-size: 10px; padding: 0 5px; color: var(--link); background: color-mix(in srgb, var(--link) 14%, transparent); }
/* account repo list */
.sc-list { display: none; padding-top: 14px; }
.sc-list.on { display: block; }
.sc-acct-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); background: #22272f; border-radius: 2px; }
.sc-acct-card b { font-size: 14px; }
.sc-m { color: var(--muted); font-size: 11.5px; }
.sc-m .ic { width: 11px; height: 11px; vertical-align: -1px; }
.sc-acct-btns { margin-left: auto; display: flex; gap: 8px; }
.sc-presence { display: flex; align-items: center; gap: 7px; margin: 16px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.sc-presence .sc-n { margin-left: auto; }
.sc-repo-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--line-soft); }
.sc-repo-row.remote { opacity: 0.88; }
.sc-rn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.sc-rn .ic { width: 12px; height: 12px; color: var(--muted); }
.sc-where { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 2px; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.sc-where.current-project { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sc-where.not-cloned { color: var(--muted); background: #353c46; }
.sc-row-btns { margin-left: auto; display: flex; gap: 6px; }

/* status bar (workspace-bottombar): a Log button at left, the time-saved strip at right */
.demo-status { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-top: 1px solid var(--div-strong); background: var(--bar); color: var(--muted); }
.demo-log { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 11px; font-weight: 600; }
.demo-log .ic { width: 13px; height: 13px; }
.demo-saved { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--vscode-panel-border) 70%, transparent); border-radius: var(--radius); background: var(--strip); font-size: 10px; }
.demo-saved b { color: var(--text); font-weight: 600; }
.demo-saved .ic { width: 12px; height: 12px; }

/* ── the pointer ─────────────────────────────────────────────────────────── */
.demo-cursor { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; opacity: 0; transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1), opacity 300ms; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.demo-cursor svg { display: block; margin: -1px 0 0 -1px; }
.demo-cursor.on { opacity: 1; }
.demo-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.demo-cursor.click::after { animation: demoClick 420ms ease-out; }
@keyframes demoClick { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  .demo-belt-slot, .demo .swap, .demo-trace rect, .demo-belt-slot.current::after, .dx-row, .demo-cursor, .sf.land .sf-new, .sf.land .sf-ship-bar i, .up-bar i { transition: none; animation: none; }
  .up-bar i { width: var(--w); }
}

/* ── short screens (laptops): compact the commit card so its result line stays visible ── */
@media (max-height: 860px) {
  .sc-sync { padding: 9px 12px; }
  .sc-sync-btns .sc-btn { height: 32px; }
  .sc-sync-msg:not(:empty) { margin-top: 6px; padding-top: 6px; }
  .sc-h { padding-top: 6px; }
  .sc-l { padding-top: 5px; }
  .sc-textarea { height: 50px; }
  .sc-hint { padding-bottom: 4px; }
  .sc-btns { padding: 8px 12px 9px; }
  .sc-btns .sc-btn { height: 30px; }
}

/* ── narrower screens: tighten, then drop the explorer, then the rail and dock ── */
@media (max-width: 1480px) {
  .demo { --c-dock: 360px; }
  .dt-dock .dt-tab { padding: 0 14px; }
  .demo-ch-pill.right + .demo-ch-pill.right { display: none; }
}
@media (max-width: 1240px) {
  .demo { --c-ex: 0px; --c-dock: 340px; }
  .demo-explorer, .dt-tools, .dt-search { display: none; }
  .demo-quick-seg .ic { display: none; }
  .sc-cols { grid-template-columns: minmax(260px, 1fr) minmax(240px, 1fr); }
  .demo .sc-time { display: none; }
}
@media (max-width: 960px) {
  .demo { height: 640px; --c-dock: 0px; --c-rail: 0px; }
  .demo .demo-rail, .demo .demo-dock, .demo .dt-dock, .demo .dt-modes, .demo .demo-quick, .demo .demo-account, .demo .demo-voice, .demo .dt-collapse { display: none; }
  .demo-main { border-right: 0; }
  .sc-cols { grid-template-columns: 1fr; }
  .demo .sc-left-column { display: none; }
  .demo .sc-stage-column { overflow-y: auto; }
}
@media (max-width: 640px) {
  .demo { width: calc(100% - 36px); }
  .demo-head { padding: 0 18px; }
  .demo-actions, .dt-win, .dt-conn { display: none; }
  .sc-acct-btns, .sc-dhead a, .sc-right .sc-ab, .sc-unc { display: none; }
}