/* ─── /terminal.html — 3-panel command bridge ───────────────────────── */

/* Default terminal appearance follows the active website theme. Terminal-only
   colors are applied by stored user settings or the optional black-grey skin;
   do not stamp a page-level --accent here, because it masks site themes. */
/* Background pattern overlay — driven by the Terminal settings popover.
   Painted via ::before so it sits between the page background and content
   without affecting layout. Color comes from currentColor (which the
   patterns reference) so it tints with the ink color naturally. */
body:has(.terminal-page) .terminal-page {
  position: relative;
}
body:has(.terminal-page) .terminal-page::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--terminal-pattern, none);
  background-size: var(--terminal-pattern-size, auto);
  background-repeat: repeat;
  color: var(--terminal-pattern-color, rgba(255, 255, 255, 0.06));
  opacity: var(--terminal-pattern-opacity, 1);
  mix-blend-mode: var(--terminal-pattern-blend, normal);
  z-index: 0;
}
body:has(.terminal-page) .terminal-page > * { position: relative; z-index: 1; }
/* ─── Accent picker swatches ─────────────────────────────────────── */
.accent-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.accent-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch-color);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  padding: 0;
  outline: none;
}
.accent-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.accent-swatch:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.accent-swatch--active {
  border-color: var(--ink, #e8eaee);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.accent-picker__custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.accent-picker__custom-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--ink-2);
}
.accent-picker__input {
  width: 24px;
  height: 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.accent-picker__input::-webkit-color-swatch-wrapper { padding: 2px; }
.accent-picker__input::-webkit-color-swatch { border: none; border-radius: 4px; }
.accent-picker__custom-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--rule);
}
.accent-picker__reset {
  margin-left: auto;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 150ms ease, background 150ms ease;
}
.accent-picker__reset:hover:not(:disabled) {
  color: var(--ink-2);
  background: rgba(255,255,255,0.06);
}
.accent-picker__reset:disabled {
  opacity: 0.35;
  cursor: default;
}

:root {
  --terminal-left: 300px;
  --terminal-right: 300px;
  /* Tree band: 220px was too tall when the controller-tree is the empty
     placeholder ("Live tree loads as soon as the stream connects.") —
     ate viewport height that the 3-panel grid below needs. 96px is
     enough for the header + a single row of chat-node chips when live;
     the warp-run band beneath expands the tree on demand. */
  --terminal-tree-height: 96px;
  --terminal-handle: 6px;
  --terminal-compose-height: 110px;
  /* Single source of truth for the gap between top-level blocks inside
     a panel (status cards / group sections). All three panels (left
     chat list, center scrollback, right control deck) reference this
     so the visual rhythm is identical end-to-end. Per previous polish pass
     terminal-page Round 1 Slot α — closes A2 (each panel had its own
     gap value before the token landed). */
  --terminal-panel-block-gap: 16px;
}

/* ─── Hub-section padding override ────────────────────────────────── */
/* `body.hub section { padding: clamp(40px,6vw,64px) 0 }` from cards.py
   injects 40-64px above + below every <section> on hub pages. Right for
   marketing pages, wrong for the terminal — where the 3-panel grid needs
   the full viewport. The terminal page has 3 affected <section>s
   (#terminal-tree, #terminal-header-context, #terminal-center) plus the
   .terminal-grid wrapper.

   Using `!important` here because lightningcss aggressively coalesces
   selector prefixes during minify (`body.hub main.terminal-page section`
   collapses to `.terminal-page section`), which loses the specificity
   battle against `body.hub section`. !important sidesteps that. */
.terminal-page section,
.terminal-page .terminal-panel,
.terminal-page .terminal-grid {
  padding: 0 !important;
}
.terminal-page section.terminal-tree {
  padding: var(--space-3, 12px) var(--space-4, 16px) !important;
}

/* ─── Terminal layout: body-flex-column geometry ─────────────────────
   Reset (2026-05-04, iteration N): the previous approach used
   `body:has(main.terminal-page)` + `position: fixed top: --topnav-h
   bottom: 0` on main. That depended on (a) the browser supporting
   :has(), (b) the cached CSS picking up the rule, (c) the magic
   --topnav-h matching the topnav's actual rendered height. All three
   went wrong at least once — Kevin reported persistent vertical bands.

   New strategy: __main__.py adds the class `terminal-page-host` to
   <body> on /terminal.html. We then:
     1. Make body a flex column. Topnav, then main, then nothing.
       The footer + smoke + cookie banners are display:none here.
     2. main gets flex:1 1 auto so it takes EXACTLY the remaining space
        after topnav, regardless of topnav's natural height. No magic
        number, no fragile arithmetic.
     3. Inside main, the terminal-grid takes all remaining space inside
        main.

   This is geometric — no measurements, no JS. Works in every browser
   that supports flexbox (i.e. all of them). */

.terminal-page {
  --mono: var(--terminal-mono, ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace);
  width: 100%;
  background:
    var(--terminal-page-gradient, none),
    var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
  color: var(--term-ink, var(--ink, #e8eaee));
  font-family: var(--mono);
  box-sizing: border-box;
  /* Inside main, layout is a column too — header-context (when hydrated)
     above, grid below. */
  display: flex;
  flex-direction: column;
  /* min-height:0 lets the .terminal-grid child shrink to fill available
     space inside the flex column without pushing past it. */
  min-height: 0;
}

body.terminal-page-host {
  /* The whole page is exactly one viewport — no document scroll. Inner
     scrolling lives inside the panels (scrollback, chat list). */
  height: 100vh;
  /* Modern dynamic viewport unit so iOS Safari's URL bar doesn't break
     the layout when it appears/disappears. Falls through to 100vh on
     browsers that don't recognize dvh. */
  height: 100dvh;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  /* Geometric layout: body is a flex column. Topnav stretches to its
     natural height; main fills the rest. Cookie/smoke/footer are all
     display:none below, so they take zero rows. */
  display: flex;
  flex-direction: column;
}

/* Hide everything that would otherwise compete for vertical space. */
body.terminal-page-host > footer.site-footer { display: none !important; }
body.terminal-page-host > #smoke-banner { display: none !important; }
body.terminal-page-host > .cookie-banner[hidden] { display: none !important; }

/* The topnav is a normal flex item — takes its natural height. */
body.terminal-page-host > nav.topnav {
  flex: 0 0 auto;
}

/* Main is the elastic item. flex:1 1 auto + min-height:0 makes it take
   ALL remaining vertical space after the topnav, no matter how tall the
   topnav happens to be. */
body.terminal-page-host > main.terminal-page {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  /* Override any leftover hub-page rules that might inject padding here. */
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Empty siblings that should never reserve any vertical space. */
body.terminal-page-host main.terminal-page > .terminal-drawer-backdrop[hidden],
body.terminal-page-host main.terminal-page > #terminal-header-context:not([data-thc-hydrated="true"]),
body.terminal-page-host main.terminal-page > #terminal-tree-handle {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The grid takes all remaining vertical space inside main. */
body.terminal-page-host main.terminal-page > .terminal-grid {
  flex: 1 1 auto;
  min-height: 0;
}

/* ─── Controller-tree band (slot ε fills content; grows with content) ── */
/* height: auto + min-height so the project-chip row is never clipped.
   The resize handle still works — it sets --terminal-tree-height on root
   which flows to min-height here. overflow:visible lets the tabs strip
   breathe when the controller band is taller than the minimum. */
.terminal-tree {
  min-height: var(--terminal-tree-height);
  height: auto;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  padding: var(--space-3, 12px) var(--space-4, 16px);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.terminal-tree__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(232, 234, 238, 0.6));
}

.terminal-tree__placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted, rgba(232, 234, 238, 0.5));
  font-size: 13px;
}


/* ─── Tree-band height resize handle ───────────────────────────────── */
.terminal-handle--tree {
  cursor: row-resize;
  height: 8px;
  background: transparent;
  position: relative;
  user-select: none;
  touch-action: none;
  z-index: 1;
}

.terminal-handle--tree::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
  transform: translateY(-50%);
  transition: background 120ms ease, height 120ms ease;
}

.terminal-handle--tree:hover::before,
.terminal-handle--tree:focus-visible::before,
.terminal-handle--tree.is-dragging::before {
  background: var(--terminal-primary, var(--accent, #6ea8ff));
  height: 2px;
}

.terminal-handle--tree:focus-visible {
  outline: 2px solid var(--terminal-primary, var(--accent, #6ea8ff));
  outline-offset: -2px;
}

body.is-resizing-tree {
  cursor: row-resize !important;
  user-select: none;
}

body.is-resizing-tree * { user-select: none !important; }

/* ─── 3-panel grid ──────────────────────────────────────────────────── */
.terminal-grid {
  flex: 1;
  display: grid;
  grid-template-columns:
    [left] var(--terminal-left)
    [left-handle] var(--terminal-handle)
    [center] 1fr
    [right-handle] var(--terminal-handle)
    [right] var(--terminal-right);
  min-height: 0;
}

.terminal-grid.terminal-grid--left-collapsed {
  grid-template-columns:
    [left] 0px
    [left-handle] 0px
    [center] 1fr
    [right-handle] var(--terminal-handle)
    [right] var(--terminal-right);
}

.terminal-grid.terminal-grid--right-collapsed {
  grid-template-columns:
    [left] var(--terminal-left)
    [left-handle] var(--terminal-handle)
    [center] 1fr
    [right-handle] 0px
    [right] 0px;
}

.terminal-grid.terminal-grid--left-collapsed.terminal-grid--right-collapsed {
  grid-template-columns:
    [left] 0px
    [left-handle] 0px
    [center] 1fr
    [right-handle] 0px
    [right] 0px;
}

.terminal-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background:
    linear-gradient(180deg, var(--terminal-primary-surface, transparent), transparent 55%),
    var(--term-bg, var(--bg-base, #14151a));
  overflow: hidden;
  position: relative;
}

.terminal-panel--left {
  grid-column: left;
  border-right: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
}

.terminal-panel--center {
  grid-column: center;
  background:
    radial-gradient(circle at 18% -20%, var(--terminal-primary-soft, transparent), transparent 34%),
    radial-gradient(circle at 92% 30%, var(--terminal-secondary-surface, transparent), transparent 32%),
    radial-gradient(circle at 86% 120%, var(--terminal-highlight-surface, transparent), transparent 32%),
    var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
}

.terminal-panel--right {
  grid-column: right;
  border-left: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), transparent 48%),
    linear-gradient(135deg, var(--terminal-primary-surface, transparent), transparent 70%),
    var(--term-bg-raised, #fff);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-panel--center {
  background:
    radial-gradient(circle at 12% -12%, var(--terminal-primary-soft, transparent), transparent 36%),
    radial-gradient(circle at 78% 8%, var(--terminal-secondary-surface, transparent), transparent 30%),
    radial-gradient(circle at 88% 110%, var(--terminal-highlight-surface, transparent), transparent 32%),
    var(--term-bg-sunken, #f7f8fc);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-panel--left,
body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-panel--right {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 16px 40px rgba(42, 57, 112, 0.08);
}

/* Terminal appearance surfaces — driven by the Terminal settings popover.
   These reuse the site Appearance background patterns as full terminal
   skins instead of exposing a separate background selector. */
.terminal-page[data-terminal-surface="solid"] {
  --terminal-page-gradient: none;
}

.terminal-page[data-terminal-surface="solid"] .terminal-panel,
.terminal-page[data-terminal-surface="solid"] .terminal-panel__header,
.terminal-page[data-terminal-surface="solid"] .terminal-center__compose {
  background: var(--term-bg-raised, var(--bg-raised, #1c1d22));
  backdrop-filter: none;
  box-shadow: none;
}

.terminal-page[data-terminal-surface="solid"] .terminal-panel--center,
.terminal-page[data-terminal-surface="solid"] .terminal-center {
  background: var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
}

.terminal-page[data-terminal-surface="glass"] .terminal-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(135deg, var(--terminal-primary-surface, transparent), transparent 70%),
    color-mix(in srgb, var(--term-bg-raised, var(--bg-raised, #1c1d22)) 82%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
}

.terminal-page[data-terminal-surface="glass"] .terminal-panel--center {
  background:
    radial-gradient(circle at 18% -20%, var(--terminal-primary-soft, transparent), transparent 34%),
    radial-gradient(circle at 92% 30%, var(--terminal-secondary-surface, transparent), transparent 32%),
    radial-gradient(circle at 86% 120%, var(--terminal-highlight-surface, transparent), transparent 32%),
    color-mix(in srgb, var(--term-bg-sunken, var(--bg-sunken, #0e0f12)) 84%, transparent);
}

.terminal-page[data-terminal-surface="checkerboard"] .terminal-panel--center,
.terminal-page[data-terminal-surface="blueprint"] .terminal-panel--center,
.terminal-page[data-terminal-surface="circuits"] .terminal-panel--center {
  box-shadow: inset 0 0 0 1px var(--terminal-secondary-border, rgba(255,255,255,0.12));
}

.terminal-page[data-terminal-surface="checkerboard"] .terminal-center__compose,
.terminal-page[data-terminal-surface="checkerboard"] .terminal-panel__header {
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 72%),
    repeating-linear-gradient(45deg, transparent 0 10px, var(--terminal-secondary-surface, rgba(255,255,255,0.04)) 10px 20px),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
}

.terminal-page[data-terminal-surface="paper"] .terminal-panel,
.terminal-page[data-terminal-surface="linen"] .terminal-panel,
.terminal-page[data-terminal-surface="marble"] .terminal-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 60%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border-color: color-mix(in srgb, var(--terminal-highlight-border, var(--term-rule)) 62%, var(--term-rule));
}

.terminal-page[data-terminal-surface="mesh"] .terminal-panel--center,
.terminal-page[data-terminal-surface="aurora"] .terminal-panel--center,
.terminal-page[data-terminal-surface="prism"] .terminal-panel--center,
.terminal-page[data-terminal-surface="constellation"] .terminal-panel--center {
  background:
    radial-gradient(circle at 14% 6%, var(--terminal-primary-soft, transparent) 0%, transparent 36%),
    radial-gradient(circle at 78% 12%, var(--terminal-secondary-soft, transparent) 0%, transparent 34%),
    radial-gradient(circle at 92% 88%, var(--terminal-highlight-soft, transparent) 0%, transparent 32%),
    var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
}

.terminal-page[data-terminal-surface="blueprint"] {
  --terminal-pattern-color: rgba(14, 157, 179, 0.22);
}

.terminal-page[data-terminal-surface="scanlines"] {
  --terminal-pattern-blend: multiply;
}

[data-mode="light"] .terminal-page[data-terminal-surface="scanlines"] {
  --terminal-pattern-blend: normal;
}

.terminal-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 70%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border-bottom: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-panel__header {
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 74%),
    rgba(255, 255, 255, 0.74);
  border-bottom-color: var(--terminal-primary-border, rgba(0, 134, 217, 0.18));
  color: var(--term-ink-2, var(--ink-2, #30394c));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

/* Panel headers keep their label and collapse affordance on opposite
   sides so the arrows stay easy to scan at a glance. */
.terminal-panel__header--left {
  justify-content: space-between;
}
.terminal-panel__header--right {
  justify-content: space-between;
  /* DOM order stays label-first (screen readers + symmetric markup), but
     visually the collapse arrow swaps to the inside edge so the two panel
     headers read as a true mirror: [Chats ‹]  …  [› Controls]. */
  flex-direction: row-reverse;
}

.terminal-panel__body {
  flex: 1;
  overflow: auto;
  padding: var(--space-3, 12px);
  min-height: 0;
}

/* ─── Shared empty-state primitive  ──────
   Used by left panel "no projects connected" and controller-band "no
   projects connected" so the visual treatment is unified across the
   page. The center scrollback's "no messages yet" still uses its own
   illustrated variant (see terminal_center.py — full-page treatment
   with SVG + hint that the primitive deliberately doesn't cover).

   Variants:
     default      — bordered card, ~12px padding, dashed rule (left panel)
     --inline     — borderless, tight padding (controller-band)
     --illustrated — reserve for future use (center already has its own) */
.terminal-empty-state {
  margin: 12px 8px;
  padding: 12px;
  border: 1px dashed var(--terminal-secondary-border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-3, #6b7280);
  text-align: center;
}
.terminal-empty-state--inline {
  margin: 0;
  padding: 8px 0;
  border: 0;
  text-align: left;
}
.terminal-empty-state__title {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
}
.terminal-empty-state__body {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3, rgba(232, 234, 238, 0.55));
  line-height: 1.5;
}
.terminal-empty-state__kbd {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-2, rgba(232, 234, 238, 0.85));
}

/* Flush variant: no padding, no own scrolling — for panels that mount a
   widget that owns its own scrolling layout (e.g. center column whose
   inner .terminal-center has scrollback + sticky compose). */
.terminal-panel__body--flush {
  padding: 0;
  overflow: hidden;
}

/* ─── Resize handles (vertical drag strips between columns) ─────────── */
.terminal-handle {
  cursor: col-resize;
  background: transparent;
  position: relative;
  user-select: none;
  touch-action: none;
}

.terminal-handle--left { grid-column: left-handle; }
.terminal-handle--right { grid-column: right-handle; }

.terminal-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  /* Default 2px so the handle is discoverable at rest — was 1px and
     blended into the panel borders. Hover/focus thickens further to
     signal grabbability. previous polish pass terminal-page Round 1 Slot α
     closes C4 (drag-handle affordance was below the "this is interactive"
     threshold). */
  width: 2px;
  background: var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.12)));
  transform: translateX(-50%);
  transition: background 120ms ease, width 120ms ease;
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-handle::before {
  background: linear-gradient(
    180deg,
    transparent,
    var(--terminal-primary-border, rgba(0, 134, 217, 0.24)) 18%,
    var(--terminal-secondary-border, rgba(14, 157, 179, 0.22)) 82%,
    transparent
  );
}

.terminal-handle:hover::before,
.terminal-handle:focus-visible::before,
.terminal-handle.is-dragging::before {
  background: var(--terminal-primary, var(--accent, #6ea8ff));
  width: 3px;
}

.terminal-handle:focus-visible {
  outline: 2px solid var(--terminal-primary, var(--accent, #6ea8ff));
  outline-offset: -2px;
}

body.is-resizing-terminal {
  cursor: col-resize !important;
  user-select: none;
}

body.is-resizing-terminal * { user-select: none !important; }


/* ─── Compose-tray vertical resize handle ──────────────────────────── */
/* Applies the --terminal-compose-height var to the tray so the resize
   runtime can grow/shrink it. flex-shrink:0 keeps the tray from being
   squeezed when scrollback grows. */
.terminal-center__compose {
  flex: 0 0 var(--terminal-compose-height, 110px) !important;
  overflow: auto;
}

.terminal-compose-handle {
  cursor: row-resize;
  height: 8px;
  background: transparent;
  position: relative;
  flex: 0 0 auto;
  user-select: none;
  touch-action: none;
}

.terminal-compose-handle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
  transform: translateY(-50%);
  transition: background 120ms ease, height 120ms ease;
}

.terminal-compose-handle:hover::before,
.terminal-compose-handle:focus-visible::before,
.terminal-compose-handle.is-dragging::before {
  background: var(--terminal-primary, var(--accent, #6ea8ff));
  height: 2px;
}

.terminal-compose-handle:focus-visible {
  outline: 2px solid var(--terminal-primary, var(--accent, #6ea8ff));
  outline-offset: -2px;
}

body.is-resizing-compose {
  cursor: row-resize !important;
  user-select: none;
}

body.is-resizing-compose * { user-select: none !important; }


/* ─── Collapsible left + right panels ──────────────────────────────── */
.terminal-panel__collapse-btn {
  appearance: none;
  background: var(--terminal-secondary-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
  color: var(--ink-2, rgba(232, 234, 238, 0.82));
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
  flex: 0 0 auto;
  /* No margin-left: auto — parent uses justify-content: space-between
     which handles the push. Auto-margin breaks the right panel's
     row-reverse mirror; removing it keeps [Chats ‹] / [› Controls]. */
  opacity: 1;
  visibility: visible;
}

.terminal-panel__collapse-btn:hover,
.terminal-panel__collapse-btn:focus-visible {
  color: var(--ink, #e8eaee);
  background: var(--terminal-primary-surface, rgba(255, 255, 255, 0.10));
  border-color: var(--terminal-primary-border, rgba(255, 255, 255, 0.24));
  outline: none;
}

.terminal-panel__collapse-btn:focus-visible {
  outline: 2px solid var(--terminal-primary, var(--accent, #6ea8ff));
  outline-offset: -2px;
}

.terminal-panel--collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border: none !important;
}

.terminal-panel--collapsed .terminal-panel__header,
.terminal-panel--collapsed .terminal-panel__body {
  display: none;
}

/* Sliver expand pill — appears at the screen edge ONLY when a panel is
   collapsed. Default `display: none` so the [hidden] HTML attribute (set
   in terminal_body.py + flipped by applyCollapse() in
   terminal_resize_runtime.py) gets honored.

   Bug fixed 2026-05-04: previously this rule used `display: flex` with
   no `:not([hidden])` guard, which overrode the UA stylesheet's
   `[hidden] { display: none }` and left both slivers visible whenever
   the panel was expanded. Now the slivers are display:none by default;
   the `:not([hidden])` rule below opts them back in to `display: flex`
   when JS removes the `hidden` attribute (i.e., when the panel is
   actually collapsed). */
.terminal-panel__sliver {
  display: none;
  position: fixed;
  top: 50vh;
  --terminal-sliver-rotate: 0deg;
  --terminal-sliver-hover-x: 0;
  transform: translateY(-50%) rotate(var(--terminal-sliver-rotate));
  z-index: 90;
  min-width: 38px;
  min-height: 132px;
  padding: 14px 8px;
  background:
    linear-gradient(180deg, var(--terminal-primary-surface, transparent), transparent 76%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-primary-border, var(--term-rule, rgba(255, 255, 255, 0.16)));
  color: var(--term-ink, var(--ink, #e8eaee));
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  align-items: center;
  justify-content: center;
  user-select: none;
  border-radius: 0;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(12px);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  appearance: none;
}
.terminal-panel__sliver:not([hidden]) {
  display: flex;
}

body:has(.terminal-page) .terminal-page > .terminal-panel__sliver {
  position: fixed;
  z-index: 120;
}

.terminal-panel__sliver--left {
  --terminal-sliver-rotate: 180deg;
  --terminal-sliver-hover-x: -3px;
  left: 0;
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.terminal-panel__sliver--right {
  --terminal-sliver-hover-x: 3px;
  right: 0;
  border-right: 0;
  border-radius: 12px 0 0 12px;
}

.terminal-panel__sliver:hover {
  color: var(--ink, #e8eaee);
  background:
    linear-gradient(180deg, var(--terminal-highlight-surface, transparent), transparent 76%),
    var(--bg-raised-hover, #252630);
  border-color: var(--terminal-highlight-border, var(--terminal-primary-border, var(--accent, #6ea8ff)));
  transform: translateY(-50%) rotate(var(--terminal-sliver-rotate)) translateX(var(--terminal-sliver-hover-x));
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.terminal-panel__sliver:focus-visible {
  outline: 2px solid var(--terminal-primary, var(--accent, #6ea8ff));
  outline-offset: 2px;
}

[data-mode="light"] .terminal-panel__sliver {
  background:
    linear-gradient(180deg, var(--terminal-primary-surface, transparent), transparent 76%),
    rgba(255, 255, 255, 0.92);
  color: var(--term-ink, var(--ink, #141821));
  box-shadow: 0 18px 48px rgba(42, 57, 112, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

/* Hide collapse UI on mobile — drawers handle panel access there.
   Hiding rules live inside the existing breakpoints below so no extra
   media block is added before the drawer toggles section. */

/* ─── Mobile drawer toggles (hidden ≥1024px, shown <1024px) ─────────── */
.terminal-drawer-toggles {
  display: none;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border-bottom: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
  flex: 0 0 auto;
}

.terminal-drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 13px;
  color: var(--ink, #e8eaee);
  background: transparent;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

.terminal-drawer-toggle:hover,
.terminal-drawer-toggle:focus-visible {
  border-color: var(--terminal-primary, var(--accent, #6ea8ff));
  outline: none;
}

.terminal-drawer-toggle:focus-visible {
  outline: 2px solid var(--terminal-primary, var(--accent, #6ea8ff));
  outline-offset: 2px;
}

.terminal-drawer-toggle[aria-expanded="true"] {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 86%, white),
      var(--terminal-primary, var(--accent, #6ea8ff)));
  color: var(--terminal-primary-ink, var(--accent-ink, #ffffff));
  border-color: color-mix(in srgb, var(--terminal-primary, var(--accent, #6ea8ff)) 86%, black);
  box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--terminal-primary, var(--accent, #6ea8ff)) 62%, transparent);
}

.terminal-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
}

/* ─── Mobile drawers (<1024px) ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .terminal-drawer-toggles { display: flex; }
  .terminal-panel__collapse-btn { display: none; }
  .terminal-panel__sliver,
  .terminal-panel__sliver:not([hidden]) { display: none; }

  .terminal-drawer-backdrop:not([hidden]) { display: block; }

  .terminal-grid {
    grid-template-columns: [center] 1fr;
  }

  .terminal-handle { display: none; }

  .terminal-panel--left,
  .terminal-panel--right {
    position: fixed;
    top: var(--terminal-mobile-top, 64px);
    bottom: 0;
    z-index: 60;
    width: min(320px, 90vw);
    transform: translateX(-100%);
    transition: transform 200ms ease;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  .terminal-panel--left {
    left: 0;
    grid-column: auto;
  }

  .terminal-panel--right {
    right: 0;
    left: auto;
    transform: translateX(100%);
    grid-column: auto;
  }

  .terminal-panel--left.is-open,
  .terminal-panel--right.is-open {
    transform: translateX(0);
  }

  .terminal-panel--center {
    grid-column: center;
  }
}

/* ─── Mobile bottom-sheets (<768px) ─────────────────────────────────── */
@media (max-width: 767px) {
  :root { --terminal-tree-height: 56px; }

  .terminal-tree {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }

  .terminal-tree__placeholder { font-size: 12px; }

  .terminal-panel--left,
  .terminal-panel--right {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
  }

  .terminal-panel--left.is-open,
  .terminal-panel--right.is-open {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-panel--left,
  .terminal-panel--right { transition: none; }
}

/* ─── TermWarmth-γ: warm context-aware empty-state cards ─────────────
   Replace the bare arrow + "Pick a project" empty states with cards
   that read as "your terminal is alive": a summary card when paired
   with projects, an onboard hint when paired but no projects yet, and
   an inline pair CTA when this browser hasn't paired with the Mac.
   --accent / --accent-soft (set in tokens.py) drive warmth; --accent-2
   doubles as hover-warm. */

/* Blank empty state — minimal centered prompt when no chat is selected */
.terminal-center__empty-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
}
.terminal-center__empty-blank-text {
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 14px;
  color: var(--ink-3, rgba(232, 234, 238, 0.45));
  text-align: center;
  line-height: 1.6;
  max-width: 320px;
}
.terminal-center__empty-blank-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--terminal-primary, var(--accent, #2f6fab));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.terminal-center__empty-blank-link:hover {
  color: var(--terminal-primary-hi, var(--accent-2, #6fa6d8));
}

/* New-session project picker */
.terminal-center__picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
}
.terminal-center__picker-title {
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2, rgba(232,234,238,0.72));
  margin: 0;
  letter-spacing: 0.01em;
}
.terminal-center__picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 400px;
}
.terminal-center__picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  transition: background 150ms ease, border-color 150ms ease;
  text-align: left;
  color: var(--ink, #e8eaee);
}
.terminal-center__picker-row:hover {
  background: var(--terminal-secondary-surface, rgba(255,255,255,0.05));
  border-color: var(--terminal-secondary-border, rgba(255,255,255,0.08));
}
.terminal-center__picker-row:focus-visible {
  outline: 2px solid var(--accent-focus, var(--terminal-primary, var(--accent, #2f6fab)));
  outline-offset: -2px;
}
.terminal-center__picker-name {
  font-size: 14px;
  font-weight: 500;
}
.terminal-center__picker-slug {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--ink-3, rgba(232,234,238,0.45));
}

.terminal-center__empty-summary,
.terminal-center__empty-onboard,
.terminal-center__empty-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 24px) var(--space-4, 16px);
  margin: 0 auto;
  max-width: 520px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, var(--terminal-primary-surface, transparent), transparent 34%),
    radial-gradient(circle at 100% 16%, var(--terminal-highlight-surface, transparent), transparent 38%),
    linear-gradient(
      180deg,
      var(--terminal-primary-surface, var(--accent-soft, rgba(0, 134, 217, 0.08))),
      transparent 65%
    );
  border: 1px solid var(--terminal-secondary-border, rgba(0, 134, 217, 0.18));
  color: var(--ink, #e8eaee);
  font-style: normal;
  text-align: left;
}

.terminal-center__empty-summary-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terminal-primary, var(--accent, #2f6fab));
  margin-bottom: 6px;
}

.terminal-center__empty-summary-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #e8eaee);
}

.terminal-center__empty-summary-big {
  font-size: 36px;
  font-weight: 700;
  color: var(--terminal-primary, var(--accent, #2f6fab));
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1;
}

.terminal-center__empty-summary-unit {
  font-size: 13px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.65));
  font-weight: 500;
}

.terminal-center__empty-summary-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
}

.terminal-center__empty-summary-section-title {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
  font-weight: 600;
}

.terminal-center__empty-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.terminal-center__empty-summary-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink, #e8eaee);
}

.terminal-center__empty-summary-row--quiet {
  color: var(--ink-muted, rgba(232, 234, 238, 0.5));
  font-style: italic;
}

.terminal-center__empty-summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted, rgba(232, 234, 238, 0.45));
}

.terminal-center__empty-summary-dot--active {
  background: var(--success, #6ad48f);
  box-shadow: 0 0 6px rgba(106, 212, 143, 0.55);
}

.terminal-center__empty-summary-dot--attention {
  background: var(--danger, #d66a6a);
}

.terminal-center__empty-summary-when {
  font-size: 11px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.5));
  font-feature-settings: "tnum" 1;
}

.terminal-center__empty-summary-foot {
  margin-top: 4px;
  padding-top: var(--space-2, 8px);
  border-top: 1px dashed var(--terminal-secondary-border, rgba(0, 134, 217, 0.22));
  font-size: 12px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
}

/* Onboard + pair cards share centered illustrated layout. */
.terminal-center__empty-onboard,
.terminal-center__empty-pair {
  align-items: center;
  text-align: center;
}

.terminal-center__empty-card-icon {
  color: var(--terminal-primary, var(--accent, #2f6fab));
  opacity: 0.85;
  margin-bottom: 4px;
}

.terminal-center__empty-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--terminal-highlight, var(--ink, #e8eaee));
}

.terminal-center__empty-card-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted, rgba(232, 234, 238, 0.7));
  max-width: 420px;
}

.terminal-center__empty-card-steps {
  width: 100%;
  max-width: 470px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 0;
}

.terminal-center__empty-card-steps span {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--terminal-secondary-border, rgba(0, 134, 217, 0.18));
  border-radius: 9px;
  background: var(--terminal-secondary-surface, rgba(0, 134, 217, 0.06));
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
  font-size: 12px;
  line-height: 1.25;
}

.terminal-center__empty-card-steps strong {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--terminal-primary, var(--accent, #2f6fab));
  color: var(--terminal-primary-ink, #08111d);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
}

.terminal-center__empty-card-security {
  width: 100%;
  max-width: 470px;
  margin: 0;
  padding: 10px 12px 10px 28px;
  border: 1px dashed var(--terminal-secondary-border, rgba(0, 134, 217, 0.22));
  border-radius: 10px;
  background: color-mix(in srgb, var(--terminal-secondary-surface, rgba(0, 134, 217, 0.06)) 72%, transparent);
  color: var(--ink-muted, rgba(232, 234, 238, 0.68));
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.terminal-center__empty-card-details {
  width: 100%;
  max-width: 470px;
  border: 1px solid var(--terminal-secondary-border, rgba(0, 134, 217, 0.22));
  border-radius: 12px;
  background: color-mix(in srgb, var(--terminal-secondary-surface, rgba(0, 134, 217, 0.06)) 82%, transparent);
  overflow: hidden;
}

.terminal-center__empty-card-details summary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 14px;
  color: var(--terminal-primary, var(--accent, #2f6fab));
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  list-style: none;
}

.terminal-center__empty-card-details summary::-webkit-details-marker {
  display: none;
}

.terminal-center__empty-card-details summary::before {
  content: "i";
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--terminal-primary-border, rgba(0, 134, 217, 0.28));
  border-radius: 50%;
  color: var(--terminal-primary, var(--accent, #2f6fab));
  font-family: var(--display);
  font-size: 13px;
  font-style: normal;
  line-height: 1;
}

.terminal-center__empty-card-details .terminal-center__empty-card-security {
  border: 0;
  border-top: 1px solid var(--terminal-secondary-border, rgba(0, 134, 217, 0.22));
  border-radius: 0;
  background: transparent;
}

.terminal-center__empty-card-kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--terminal-primary-surface, var(--accent-soft, rgba(0, 134, 217, 0.12)));
  color: var(--terminal-primary-hi, var(--accent-2, #6fa6d8));
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  border: 1px solid var(--terminal-primary-border, rgba(0, 134, 217, 0.3));
}

.terminal-center__empty-card-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  justify-content: center;
}

.terminal-center__empty-card-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--terminal-primary, var(--accent, #2f6fab));
  color: var(--terminal-primary-ink, var(--accent-ink, #0a1029));
  border: none;
  border-radius: 6px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}

.terminal-center__empty-card-cta:hover,
.terminal-center__empty-card-cta:focus-visible {
  background: var(--terminal-primary-hi, var(--accent-2, #6fa6d8));
  outline: none;
}

.terminal-center__empty-card-cta--secondary {
  background: var(--terminal-highlight, var(--terminal-primary, var(--accent, #2f6fab)));
  color: var(--terminal-highlight-ink, var(--terminal-primary-ink, #08111d));
}

.terminal-center__empty-card-cta--ghost {
  background: var(--terminal-secondary-surface, rgba(0, 134, 217, 0.08));
  color: var(--ink, #e8eaee);
  border: 1px solid var(--terminal-secondary-border, rgba(0, 134, 217, 0.24));
}

.terminal-center__empty-card-cta:active {
  transform: translateY(1px);
}

.terminal-center__empty-card-cta code {
  font-family: inherit;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.18);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0;
}

/* ─── Server-side fallback empty state (2026-05-18) ─────────────────────
   Lives inside #terminal-center-body and is visible immediately on first
   paint. terminal-center.js overwrites the parent's innerHTML on
   successful hydration, so this card vanishes once the widget mounts.
   When JS fails to hydrate (CSP block, network error, etc.) the card
   persists so the user always has clear next-step guidance.
*/
.terminal-static-empty {
  max-width: 640px;
  margin: 56px auto;
  padding: 32px clamp(20px, 4vw, 36px);
  background: var(--bg-raised, #ffffff);
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.18);
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--ink, #18222e);
  /* 2026-05-24 — symmetric centering pass per Kevin's review.
     Inherits to title/lead/foot; steps + actions handled below. */
  text-align: center;
}
.terminal-static-empty__eyebrow {
  margin: 0 0 10px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #2f6fab);
}
.terminal-static-empty__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink, #18222e);
}
.terminal-static-empty__title em {
  color: var(--accent, #2f6fab);
  font-style: italic;
}
.terminal-static-empty__diagram {
  margin: 18px 0 18px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent, #2f6fab) 4%, var(--bg-raised, #ffffff));
  border: 1px solid color-mix(in srgb, var(--accent, #2f6fab) 14%, var(--rule));
  border-radius: 10px;
}
.terminal-static-empty__diagram svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--accent, #2f6fab);
}
.terminal-static-empty__diagram figcaption {
  margin: 10px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3, #6a7a8a);
  font-style: italic;
}
.terminal-static-empty__lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2, #46586a);
}
.terminal-static-empty__lead strong {
  color: var(--ink, #18222e);
  font-weight: 600;
}
.terminal-static-empty__steps {
  list-style: none;
  margin: 18px 0 22px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--accent, #2f6fab) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2f6fab) 14%, var(--rule));
  border-radius: 8px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2, #46586a);
}
.terminal-static-empty__steps li {
  /* Centered flex row so each step reads as one balanced unit instead
     of a left-edge-anchored grid track. The step number + body shrink
     to their natural width and the pair centers in the panel. */
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  max-width: 44ch;
  margin-inline: auto;
}
.terminal-static-empty__steps strong {
  color: var(--accent, #2f6fab);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.terminal-static-empty__steps code {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  background: color-mix(in srgb, var(--ink, #18222e) 6%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  /* The URL chip lives inside a CSS grid track. Letting it shrink to
     intrinsic content size with no extra wrap rules keeps the URL on
     one line at any sensible viewport. The earlier overflow-wrap:
     anywhere was over-aggressive and shattered the URL character by
     character inside the narrow track. The sentence restructure (no
     more parens around the URL) removed the original orphan bug;
     this declaration just protects the URL from breaking weirdly. */
  white-space: nowrap;
}
/* GitHub repo link on step 1. Real <a> so visitors can click straight
   through. The <code> inside still carries the mono chip styling. */
.terminal-static-empty__repo {
  color: var(--accent, #2f6fab);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent, #2f6fab) 55%, transparent);
}
.terminal-static-empty__repo:hover,
.terminal-static-empty__repo:focus-visible {
  border-bottom-color: var(--accent, #2f6fab);
  border-bottom-style: solid;
}
.terminal-static-empty__repo code {
  color: inherit;
  background: color-mix(in srgb, var(--accent, #2f6fab) 10%, transparent);
}
@media (max-width: 520px) {
  .terminal-static-empty__steps code {
    /* On phones, allow wrapping at natural break points (slash, dot)
       so the chip does not overflow the viewport. break-word respects
       word boundaries; we never want anywhere on a URL. */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
}
.terminal-static-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 12px;
}
.terminal-static-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, transform 80ms ease, box-shadow 160ms ease;
}
.terminal-static-empty__cta--primary {
  background: var(--accent, #2f6fab);
  color: var(--accent-ink, #ffffff);
}
.terminal-static-empty__cta--primary:hover,
.terminal-static-empty__cta--primary:focus-visible {
  background: color-mix(in srgb, var(--accent, #2f6fab) 88%, white);
  outline: none;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent, #2f6fab) 80%, transparent);
}
.terminal-static-empty__cta--secondary {
  background: color-mix(in srgb, var(--accent, #2f6fab) 14%, var(--bg-raised));
  color: var(--ink, #18222e);
  border-color: color-mix(in srgb, var(--accent, #2f6fab) 30%, var(--rule));
}
.terminal-static-empty__cta--secondary:hover,
.terminal-static-empty__cta--secondary:focus-visible {
  background: color-mix(in srgb, var(--accent, #2f6fab) 20%, var(--bg-raised));
  outline: none;
}
.terminal-static-empty__cta--ghost {
  background: transparent;
  color: var(--ink-2, #46586a);
  border-color: var(--rule, rgba(0, 0, 0, 0.12));
}
.terminal-static-empty__cta--ghost:hover,
.terminal-static-empty__cta--ghost:focus-visible {
  background: color-mix(in srgb, var(--ink, #18222e) 4%, transparent);
  color: var(--ink, #18222e);
  outline: none;
}
.terminal-static-empty__cta:active {
  transform: translateY(1px);
}
.terminal-static-empty__foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.06));
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3, #6a7a8a);
}
.terminal-static-empty__foot code {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  background: color-mix(in srgb, var(--ink, #18222e) 8%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}
@media (max-width: 640px) {
  .terminal-static-empty {
    margin: 24px 16px;
    padding: 22px;
  }
  .terminal-static-empty__actions {
    flex-direction: column;
  }
  .terminal-static-empty__cta {
    width: 100%;
  }
}

.terminal-center__empty-card-cta-status {
  font-size: 11px;
  color: var(--success, #6ad48f);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Left panel onboard variant — smaller, inline. */
.terminal-left-panel__empty--onboard {
  padding: var(--space-3, 12px);
  border: 1px dashed var(--terminal-secondary-border, rgba(0, 134, 217, 0.28));
  border-radius: 8px;
  margin: var(--space-3, 12px);
  background: var(--terminal-secondary-surface, var(--accent-soft, rgba(0, 134, 217, 0.06)));
}

.terminal-left-panel__empty-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #e8eaee);
}

.terminal-left-panel__empty-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted, rgba(232, 234, 238, 0.65));
}

.terminal-left-panel__empty-kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--terminal-primary-surface, var(--accent-soft, rgba(0, 134, 217, 0.14)));
  color: var(--terminal-primary-hi, var(--accent-2, #6fa6d8));
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid var(--terminal-primary-border, rgba(0, 134, 217, 0.3));
}

/* Light-mode adjustments — soften the dark-tuned card borders. */
[data-mode="light"] .terminal-center__empty-summary,
[data-mode="light"] .terminal-center__empty-onboard,
[data-mode="light"] .terminal-center__empty-pair {
  background: linear-gradient(
    180deg,
    var(--accent-soft, rgba(0, 134, 217, 0.10)),
    transparent 65%
  );
  border-color: rgba(0, 134, 217, 0.30);
  color: var(--ink, #1c1d22);
}

[data-mode="light"] .terminal-center__empty-summary-title { color: var(--ink, #1c1d22); }
[data-mode="light"] .terminal-center__empty-card-title {
  color: var(--terminal-highlight, var(--ink, #1c1d22));
}

[data-mode="light"] .terminal-center__empty-card-body { color: rgba(28, 29, 34, 0.7); }

[data-mode="light"] .terminal-center__empty-card-steps span,
[data-mode="light"] .terminal-center__empty-card-security {
  color: rgba(28, 29, 34, 0.72);
  background: rgba(255, 255, 255, 0.56);
}

[data-mode="light"] .terminal-center__empty-card-cta--ghost {
  color: var(--ink, #1c1d22);
  background: rgba(255, 255, 255, 0.74);
}

[data-mode="light"] .terminal-left-panel__empty--onboard {
  background: rgba(0, 134, 217, 0.08);
  border-color: rgba(0, 134, 217, 0.32);
}

/* ─── TermWarmth-γ: cyberpunk visual signature (terminal-page only) ──
   Scoped strictly via body:has(.terminal-page) so studio / station /
   walk pages never inherit the scan-line band, focus glow, or motes.
   Reuses the R14-β scan-glitch keyframe vibe — gentle 60s sweep, low
   opacity, disabled under prefers-reduced-motion (WCAG 2.3.1). */

body:has(.terminal-page) .terminal-tree {
  position: relative;
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--terminal-primary-surface, rgba(0, 134, 217, 0.04)) 0px,
      var(--terminal-primary-surface, rgba(0, 134, 217, 0.04)) 1px,
      transparent 1px,
      transparent 3px
    );
  background-size: 100% 6px;
}

body:has(.terminal-page) .terminal-tree::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--terminal-primary-surface, rgba(0, 134, 217, 0.06)) 48%,
    var(--terminal-primary-soft, rgba(0, 134, 217, 0.10)) 50%,
    var(--terminal-primary-surface, rgba(0, 134, 217, 0.06)) 52%,
    transparent 100%
  );
  background-size: 100% 200%;
  background-position: 0 -100%;
  animation: terminal-tree-scan 9s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.7;
}

@keyframes terminal-tree-scan {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 200%; }
}

/* Chromatic-edge accent on the active panel (focus-within) — splits a
   1px magenta / cyan halo around whichever panel currently has focus.
   Tuned 30% opacity per the R14-β cool-theme treatment. */
body:has(.terminal-page) .terminal-panel:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--terminal-primary-border, rgba(0, 134, 217, 0.35)),
    -1px 0 0 var(--terminal-highlight-glow, rgba(255, 0, 170, 0.22)),
     1px 0 0 var(--terminal-secondary-glow, rgba(0, 255, 255, 0.22));
}

/* Gentle motes — two soft drifting points on the page, behind content. */
body:has(.terminal-page) .terminal-page::before,
body:has(.terminal-page) .terminal-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--terminal-primary, var(--accent, #2f6fab));
  box-shadow: 0 0 12px 3px var(--terminal-primary-glow, rgba(0, 134, 217, 0.45));
  opacity: 0.55;
  z-index: 1;
}

body:has(.terminal-page) .terminal-page::before {
  top: 30%;
  left: 18%;
  animation: terminal-mote-drift-a 21s ease-in-out infinite;
}

body:has(.terminal-page) .terminal-page::after {
  top: 65%;
  right: 22%;
  animation: terminal-mote-drift-b 27s ease-in-out infinite;
}

.terminal-page { position: relative; }

@keyframes terminal-mote-drift-a {
  0%, 100% { transform: translate(0, 0); opacity: 0.45; }
  50%      { transform: translate(40px, -28px); opacity: 0.7; }
}

@keyframes terminal-mote-drift-b {
  0%, 100% { transform: translate(0, 0); opacity: 0.45; }
  50%      { transform: translate(-32px, 24px); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.terminal-page) .terminal-tree::after {
    animation: none;
    background-position: 0 50%;
  }
  body:has(.terminal-page) .terminal-page::before,
  body:has(.terminal-page) .terminal-page::after {
    animation: none;
  }
}

/* Light-mode tones the cyberpunk overlay way down so the page still
   reads as warm, not as a bright orange band. */
[data-mode="light"] body:has(.terminal-page) .terminal-tree {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 134, 217, 0.06) 0px,
      rgba(0, 134, 217, 0.06) 1px,
      transparent 1px,
      transparent 3px
    );
}

[data-mode="light"] body:has(.terminal-page) .terminal-tree::after {
  opacity: 0.35;
}

[data-mode="light"] body:has(.terminal-page) .terminal-page::before,
[data-mode="light"] body:has(.terminal-page) .terminal-page::after {
  opacity: 0.3;
}

/* ─── TermChrome-γ: header context strip + smart status pill ──────────
   The header context strip sits BELOW the controller-tree band and ABOVE
   the 3-panel grid. Three cells: model name (left), message count + time
   since last message (center), token estimate (right). Empty until slot
   α dispatches `terminal:active-chat-meta`; static "—" placeholders fill
   the gap to avoid layout collapse.

   The smart status pill carries 4 states: offline (red dot), syncing
   (warm-amber pulse), live (success-green), paired (success-green plus
   solid fill — "wired AND focused"). State transitions are hot-swapped
   by the inline IIFE in pages/terminal_body.py via classList toggles. */

.terminal-header-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 6px var(--space-4, 16px);
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border-bottom: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.08));
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.65));
  flex: 0 0 auto;
  min-height: 28px;
}

/* Hide the header strip entirely when there's no chat hydrated yet
   (model is "—") — eats viewport height for nothing in the offline /
   no-chat-selected state. JS sets data-thc-hydrated="true" once values
   are populated; until then the strip stays out of the layout. */
.terminal-header-context:not([data-thc-hydrated="true"]) {
  display: none;
}

.terminal-header-context__cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.terminal-header-context__cell--model { justify-content: flex-start; }
.terminal-header-context__cell--activity { justify-content: center; flex-wrap: wrap; }
.terminal-header-context__cell--tokens { justify-content: flex-end; }

.terminal-header-context__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(232, 234, 238, 0.5));
  flex: 0 0 auto;
}

.terminal-header-context__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #e8eaee);
  font-feature-settings: "tnum" 1, "lnum" 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.terminal-header-context__sep {
  color: var(--ink-muted, rgba(232, 234, 238, 0.35));
}

@media (max-width: 767px) {
  .terminal-header-context {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px var(--space-3, 12px);
  }
  .terminal-header-context__cell--activity,
  .terminal-header-context__cell--tokens { justify-content: flex-start; }
}

/* ─── Smart status pill (overrides bare "offline" badge) ─────────────── */
.terminal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
  border: 1px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.terminal-status-pill--offline {
  /* Demoted 2026-05-02 evening: was the most prominent UI element when
     unpaired; now a quiet ink-3 pip so the central "Pair this device"
     warm card carries the actual recovery affordance. */
  background: transparent;
  border-color: var(--terminal-secondary-border, rgba(255, 255, 255, 0.08));
  color: var(--ink-3, rgba(232, 234, 238, 0.45));
  font-size: 10px;
  padding: 1px 6px;
}

.terminal-status-pill--syncing {
  background: var(--terminal-primary-surface, rgba(0, 134, 217, 0.14));
  border-color: var(--terminal-primary-border, rgba(0, 134, 217, 0.40));
  color: var(--terminal-primary-hi, var(--accent-2, #6fa6d8));
  animation: terminal-pill-pulse 1.4s ease-in-out infinite;
}

.terminal-status-pill--live {
  background: rgba(106, 212, 143, 0.12);
  border-color: rgba(106, 212, 143, 0.32);
  color: var(--success, #6ad48f);
}

.terminal-status-pill--paired {
  background: var(--success, #6ad48f);
  border-color: var(--success, #6ad48f);
  color: #06210f;
  font-weight: 600;
}

@keyframes terminal-pill-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-status-pill--syncing { animation: none; }
}

/* ─── Left-panel action bar + section labels + context menu ──────────── */
.terminal-left-panel__actions {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--terminal-secondary-border, rgba(255,255,255,0.08));
}
.terminal-left-panel__action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink-2, rgba(232,234,238,0.72));
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, color 150ms ease;
}
.terminal-left-panel__action-btn:hover {
  background: var(--terminal-secondary-surface, rgba(255,255,255,0.06));
  color: var(--ink, #e8eaee);
}
.terminal-left-panel__action-icon {
  font-size: 15px;
  font-weight: 300;
  width: 20px;
  text-align: center;
}
.terminal-left-panel__section-label {
  padding: 12px 16px 4px;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(232,234,238,0.45));
}
.terminal-left-panel__ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 140px;
  padding: 4px;
  background: var(--bg-raised, #1e2030);
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.terminal-left-panel__ctx-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink, #e8eaee);
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.terminal-left-panel__ctx-item:hover {
  background: rgba(255,255,255,0.08);
}

/* ─── Left-panel enrichment: state pill + last-activity + unread ─────── */
.terminal-left-panel__row {
  position: relative;
  flex-wrap: wrap;
  row-gap: 2px;
}

.terminal-left-panel__row--unread .terminal-left-panel__name {
  font-weight: 600;
  color: var(--ink, #e8eaee);
}

.terminal-left-panel__state-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  flex: 0 0 auto;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}

.terminal-left-panel__state-pill--active {
  background: rgba(106, 212, 143, 0.14);
  border-color: rgba(106, 212, 143, 0.32);
  color: var(--success, #6ad48f);
}

.terminal-left-panel__state-pill--stale {
  background: rgba(232, 234, 238, 0.06);
  border-color: rgba(232, 234, 238, 0.16);
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
}

.terminal-left-panel__state-pill--attention {
  background: rgba(214, 106, 106, 0.14);
  border-color: rgba(214, 106, 106, 0.32);
  color: var(--danger, #d66a6a);
}

.terminal-left-panel__last-activity {
  font-size: 10px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.5));
  font-feature-settings: "tnum" 1;
  justify-self: end;
}

.terminal-left-panel__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--terminal-primary, var(--accent, #2f6fab));
  color: var(--terminal-primary-ink, var(--accent-ink, #0a1029));
  font-size: 10px;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  flex: 0 0 auto;
}

/* Light-mode adjustments — keep contrast pleasant on the warm cards. */
[data-mode="light"] .terminal-header-context {
  background: var(--bg-raised, #f4f2ee);
  color: rgba(28, 29, 34, 0.7);
  border-color: rgba(28, 29, 34, 0.10);
}

[data-mode="light"] .terminal-header-context__value { color: var(--ink, #1c1d22); }
[data-mode="light"] .terminal-header-context__label { color: rgba(28, 29, 34, 0.55); }
[data-mode="light"] .terminal-header-context__sep   { color: rgba(28, 29, 34, 0.30); }

[data-mode="light"] .terminal-status-pill--offline {
  background: rgba(190, 60, 60, 0.10);
  border-color: rgba(190, 60, 60, 0.30);
  color: var(--danger, #a83434);
}

[data-mode="light"] .terminal-status-pill--syncing {
  background: var(--terminal-primary-surface, rgba(0, 134, 217, 0.18));
  border-color: var(--terminal-primary-border, rgba(0, 134, 217, 0.45));
  color: var(--terminal-primary, var(--warn, #8a4a10));
}

[data-mode="light"] .terminal-status-pill--live {
  background: rgba(34, 134, 78, 0.12);
  border-color: rgba(34, 134, 78, 0.32);
  color: var(--success, #1f6b3a);
}

[data-mode="light"] .terminal-status-pill--paired {
  background: var(--success, #2c8a52);
  border-color: var(--success, #2c8a52);
  color: #ffffff;
}

[data-mode="light"] .terminal-left-panel__last-activity {
  color: rgba(28, 29, 34, 0.55);
}

[data-mode="light"] .terminal-left-panel__state-pill--active {
  background: rgba(34, 134, 78, 0.12);
  border-color: rgba(34, 134, 78, 0.32);
  color: var(--success, #1f6b3a);
}

[data-mode="light"] .terminal-left-panel__state-pill--stale {
  background: rgba(28, 29, 34, 0.05);
  border-color: rgba(28, 29, 34, 0.18);
  color: rgba(28, 29, 34, 0.6);
}

[data-mode="light"] .terminal-left-panel__state-pill--attention {
  background: rgba(190, 60, 60, 0.10);
  border-color: rgba(190, 60, 60, 0.30);
  color: var(--danger, #a83434);
}

[data-mode="light"] .terminal-left-panel__unread {
  background: var(--terminal-primary, var(--accent, #2f6fab));
  color: var(--terminal-primary-ink, #ffffff);
}

/* ─── R13.5-γ — Settings → Asset Packs UI (2026-05-01) ─────────────────
   Upload zone, pack list, preview-before-commit modal, pack picker.     */

/* ── Section wrapper ── */
#settings-asset-packs {
  margin-top: 0;
}
#settings-asset-packs .settings-section__lead {
  margin-bottom: var(--space-4, 16px);
}

/* ── Sub-section headings within the packs section ── */
.packs-subsection {
  margin-top: var(--space-5, 24px);
}
.packs-subsection:first-child {
  margin-top: 0;
}
.packs-subsection__title {
  font-family: var(--sans);
  font-size: var(--fs-14, 14px);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-3, 12px);
}

/* ── Pack list grid ── */
.pack-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pack-list__empty {
  font-family: var(--sans);
  font-size: var(--fs-13, 13px);
  color: var(--ink-3);
  padding: var(--space-3, 12px) 0;
}

/* ── Pack list item ── */
.pack-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 12px);
  transition: border-color var(--dur-base, 180ms) var(--ease, ease-out);
}
.pack-item:hover {
  border-color: var(--accent);
}
.pack-item__thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--bg-sunken);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  image-rendering: pixelated;
}
.pack-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.pack-item__body {
  flex: 1;
  min-width: 0;
}
.pack-item__name {
  font-family: var(--sans);
  font-size: var(--fs-14, 14px);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pack-item__meta {
  font-family: var(--sans);
  font-size: var(--fs-12, 12px);
  color: var(--ink-3);
  margin-top: 2px;
}
.pack-item__license {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}
.pack-item__license--free {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.pack-item__license--commercial {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text, var(--accent));
}
.pack-item__license--custom {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}
.pack-item__actions {
  display: flex;
  gap: var(--space-2, 8px);
}
.pack-item__btn-delete {
  font-family: var(--sans);
  font-size: var(--fs-12, 12px);
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color var(--dur-base, 180ms) var(--ease),
              border-color var(--dur-base, 180ms) var(--ease);
}
.pack-item__btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.pack-item__btn-delete:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Drag-and-drop upload zone ── */
.pack-upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-5, 24px) var(--space-4, 16px);
  background: var(--bg-sunken);
  border: 2px dashed var(--rule);
  border-radius: var(--r-lg, 16px);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-base, 180ms) var(--ease),
              background var(--dur-base, 180ms) var(--ease);
  outline: none;
}
.pack-upload-zone:hover,
.pack-upload-zone:focus-visible {
  border-color: var(--accent);
}
.pack-upload-zone--drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-sunken));
}
.pack-upload-zone__icon {
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
}
.pack-upload-zone__label {
  font-family: var(--sans);
  font-size: var(--fs-14, 14px);
  font-weight: 500;
  color: var(--ink);
  pointer-events: none;
}
.pack-upload-zone__hint {
  font-family: var(--sans);
  font-size: var(--fs-12, 12px);
  color: var(--ink-3);
  pointer-events: none;
  max-width: 340px;
}
.pack-upload-zone__browse {
  color: var(--accent-text, var(--accent));
  text-decoration: underline;
  cursor: pointer;
}
.pack-upload-zone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.pack-upload-zone__error {
  margin-top: var(--space-2, 8px);
  font-family: var(--sans);
  font-size: var(--fs-12, 12px);
  color: var(--danger);
  display: none;
}
.pack-upload-zone__error--visible {
  display: block;
}
.pack-upload-zone__progress {
  margin-top: var(--space-2, 8px);
  font-family: var(--sans);
  font-size: var(--fs-12, 12px);
  color: var(--ink-3);
  display: none;
}
.pack-upload-zone__progress--visible {
  display: block;
}

/* ── Preview-before-commit modal ── */
.pack-preview-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  align-items: center;
  justify-content: center;
}
.pack-preview-modal--visible {
  display: flex;
}
.pack-preview-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.pack-preview-modal__panel {
  position: relative;
  z-index: 1;
  width: min(480px, calc(100vw - 32px));
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.pack-preview-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 16px) var(--space-4, 16px) 0;
}
.pack-preview-modal__title {
  font-family: var(--sans);
  font-size: var(--fs-17, 17px);
  font-weight: 600;
  color: var(--ink);
}
.pack-preview-modal__close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  line-height: 1;
  transition: color var(--dur-base, 180ms) var(--ease);
}
.pack-preview-modal__close:hover { color: var(--ink); }
.pack-preview-modal__body {
  padding: var(--space-4, 16px);
}
.pack-preview-modal__walk-preview {
  width: 100%;
  height: 96px;
  background: var(--bg-sunken);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  image-rendering: pixelated;
  overflow: hidden;
}
.pack-preview-modal__walk-frame {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  background: var(--bg-raised);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.pack-preview-modal__walk-frame img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}
.pack-preview-modal__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1, 4px) var(--space-3, 12px);
  font-family: var(--sans);
  font-size: var(--fs-13, 13px);
}
.pack-preview-modal__meta-key {
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
.pack-preview-modal__meta-val {
  color: var(--ink);
}
.pack-preview-modal__footer {
  display: flex;
  gap: var(--space-3, 12px);
  justify-content: flex-end;
  padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}

/* ── Pack picker dropdown ── */
.pack-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-family: var(--sans);
  font-size: var(--fs-13, 13px);
}
.pack-picker__label {
  color: var(--ink-3);
  white-space: nowrap;
}
.pack-picker__select {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-13, 13px);
  cursor: pointer;
  transition: border-color var(--dur-base, 180ms) var(--ease);
}
.pack-picker__select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.pack-picker__loading {
  color: var(--ink-3);
  font-size: var(--fs-12, 12px);
}

/* ─── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pack-upload-zone,
  .pack-item,
  .pack-picker__select {
    transition: none;
  }
}

/* ─── Terminal right panel — control deck (R-terminal slot delta) ─── */

#terminal-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 12px 24px;
  /* 2026-05-04: dropped max-width:320px. The cap meant the aside
     refused to grow when Kevin dragged the resize handle to widen the
     control column — cards stayed locked at 320px while the column
     ate empty space. width:100% lets the aside fill the grid cell;
     cards (full-width flex children) fill with it. */
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: var(--sans);
  color: var(--ink, #1a1a1a);
}

/* Footer toolbar — DEMOTED 2026-05-02 evening per Kevin's feedback that
   the giant "Edit Right Panel" button was eating top-of-panel weight that
   should belong to the runtime context widgets. Now lives at the bottom
   of the panel as a compact icon-button row. */
.terminal-right-panel__toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 0 0;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  margin-top: auto;
  background: transparent;
}

.terminal-right-panel__edit-btn,
.terminal-right-panel__reset-btn {
  appearance: none;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
  background: transparent;
  color: var(--ink-2, rgba(232, 234, 238, 0.7));
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.terminal-right-panel__edit-btn:hover,
.terminal-right-panel__reset-btn:hover {
  background: var(--bg-sunken, #f0f0f0);
  border-color: var(--rule-strong, rgba(0, 0, 0, 0.2));
  color: var(--ink, #1a1a1a);
}
.terminal-right-panel__edit-btn[aria-pressed="true"] {
  background: var(--accent, #2f6fab);
  color: var(--accent-ink, #fff);
  border-color: var(--accent, #2f6fab);
}

/* The right panel is a flex column so the footer toolbar can push to
   the bottom via margin-top:auto. The container's `gap` is the single
   source of truth for vertical rhythm between top-level blocks (locked
   status cards + group sections); per-block margins are forbidden so
   spacing stays consistent end-to-end. The gap value lives at root in
   `terminal.py` as --terminal-panel-block-gap so all three panels
   share the same rhythm. (2026-05-04 polish) */
#terminal-right-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--terminal-panel-block-gap, 16px);
}
#terminal-right-body > *:first-child { margin-top: 0; }

.terminal-right-panel__section {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* internal: header → first card */
}
.terminal-right-panel__section--danger .terminal-right-panel__group-header {
  color: var(--danger, #dc2626);
}
.terminal-right-panel__section--danger .terminal-right-panel__card {
  border-color: rgba(220, 38, 38, 0.18);
}

.terminal-right-panel__group-header {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6b7280);
}

/* ── Locked status cards (Connected + Active Agents) ─────────────────
   Always render at the top of the Controls panel. Subtle visual
   distinction (warm-tinted left edge) so they read as "system" rather
   than user-customizable widgets. 2026-05-04. */
.terminal-right-panel__locked-card {
  background: var(--bg-raised, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.1));
  border-left: 3px solid var(--accent, #c2711f);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* No margin-bottom — vertical rhythm is owned by #terminal-right-body
     gap so the locked cards don't drift from the consistent 16px between
     blocks (2026-05-04 polish). Locked cards are not part of the editable
     layout; muted subtitle text reinforces the "system" vibe. */
}
.terminal-right-panel__locked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.terminal-right-panel__locked-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #e8eaee);
  letter-spacing: -0.005em;
}
.terminal-right-panel__locked-sub {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-3, rgba(232, 234, 238, 0.55));
  letter-spacing: 0.02em;
}
.terminal-right-panel__locked-badge {
  margin-left: auto;
  padding: 1px 8px;
  background: var(--accent-soft, rgba(194, 113, 31, 0.18));
  color: var(--accent, #c2711f);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, "JetBrains Mono", monospace);
}

/* Status dot — shared by the locked Connected card + per-agent rows. */
.terminal-right-panel__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-3, rgba(232, 234, 238, 0.4));
  transition: background 180ms ease;
}
.terminal-right-panel__status-dot.is-ok {
  background: var(--success, #5cf6a0);
  box-shadow: 0 0 6px rgba(92, 246, 160, 0.55);
}
.terminal-right-panel__status-dot.is-warn {
  background: #f6c64f;
  box-shadow: 0 0 6px rgba(246, 198, 79, 0.55);
}
.terminal-right-panel__status-dot.is-pending {
  background: var(--ink-3, rgba(232, 234, 238, 0.5));
  animation: terminal-locked-pulse 1.5s ease-in-out infinite;
}
@keyframes terminal-locked-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .terminal-right-panel__status-dot.is-pending { animation: none; }
}

/* Active-agents card — list of currently-running agents. */
.terminal-right-panel__agent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.05));
}
.terminal-right-panel__agent-row:nth-of-type(1) { border-top: 0; }
.terminal-right-panel__agent-name {
  color: var(--ink-2, rgba(232, 234, 238, 0.85));
  font-weight: 500;
  white-space: nowrap;
}
.terminal-right-panel__agent-task {
  flex: 1 1 auto;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-3, rgba(232, 234, 238, 0.55));
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.terminal-right-panel__agent-more {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-3, rgba(232, 234, 238, 0.55));
  margin-top: 4px;
}

.terminal-right-panel__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terminal-right-panel__card {
  position: relative;
  background: var(--bg-raised, #fff);
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 64px;
}
.terminal-right-panel__card .widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.terminal-right-panel__card .widget__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2, #374151);
}
.terminal-right-panel__card .widget__hint {
  font-size: 10px;
  color: var(--ink-3, #6b7280);
}
.terminal-right-panel__card .widget__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.terminal-right-panel__card .widget__body--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.terminal-right-panel__card .widget__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.terminal-right-panel__card .widget__btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  min-height: 28px;
}
.terminal-right-panel__card .widget__btn--big {
  font-size: 13px;
  padding: 8px 14px;
}
.terminal-right-panel__section:not(.terminal-right-panel__section--danger) .widget__btn--primary {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 86%, white),
      var(--terminal-primary, var(--accent)));
  border-color: color-mix(in srgb, var(--terminal-primary, var(--accent)) 86%, black);
  color: var(--terminal-primary-ink, var(--accent-ink, #ffffff));
  box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--terminal-primary, var(--accent)) 62%, transparent);
}
.terminal-right-panel__section:not(.terminal-right-panel__section--danger) .widget__btn--primary:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 92%, white),
      color-mix(in srgb, var(--terminal-primary, var(--accent)) 92%, black));
  border-color: color-mix(in srgb, var(--terminal-primary, var(--accent)) 92%, black);
  color: var(--terminal-primary-ink, var(--accent-ink, #ffffff));
  box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--terminal-primary, var(--accent)) 68%, transparent);
}
.terminal-right-panel__card .widget__numeral {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.terminal-right-panel__card .widget__chip {
  font-size: 12px !important;
  padding: 4px 10px !important;
}

.terminal-right-panel__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
  background: var(--bg, #fff);
  color: var(--ink-3, #6b7280);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.terminal-right-panel__remove:hover {
  color: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
}

.terminal-right-panel--editing .terminal-right-panel__card {
  border-style: dashed;
  background: var(--bg-sunken, #fafafa);
}

.terminal-right-panel__shelf {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--rule, rgba(0, 0, 0, 0.16));
  border-radius: 10px;
  background: var(--bg-sunken, #fafafa);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.terminal-right-panel__shelf-header {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6b7280);
}
.terminal-right-panel__shelf-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.terminal-right-panel__shelf-item {
  appearance: none;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
  background: var(--bg, #fff);
  color: var(--ink-2, #374151);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.terminal-right-panel__shelf-item:hover:not(:disabled) {
  background: var(--bg-raised, #f5f5f5);
  border-color: var(--accent, #2f6fab);
}
.terminal-right-panel__shelf-item:disabled {
  opacity: 0.5;
  cursor: default;
}


/* ─── AC4: per-card vertical resize dividers ──────────────────────── */
.terminal-right-panel__card-divider {
  height: 6px;
  cursor: row-resize;
  background: transparent;
  position: relative;
  user-select: none;
  touch-action: none;
  flex: 0 0 auto;
}

.terminal-right-panel__card-divider::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: var(--rule, rgba(0, 0, 0, 0.08));
  transform: translateY(-50%);
  transition: background 120ms ease, height 120ms ease;
}

.terminal-right-panel__card-divider:hover::before,
.terminal-right-panel__card-divider.is-dragging::before {
  background: var(--accent, #2f6fab);
  height: 2px;
}

body.is-resizing-card {
  cursor: row-resize !important;
  user-select: none;
}

body.is-resizing-card * { user-select: none !important; }

/* ─── AC5: drag handle + drag visual states ────────────────────────── */
.terminal-right-panel__drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3, #6b7280);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.terminal-right-panel__drag-handle:hover {
  background: var(--bg-sunken, #fafafa);
  border-color: var(--rule, rgba(0, 0, 0, 0.12));
  color: var(--ink-2, #374151);
}

.terminal-right-panel__drag-handle:active {
  cursor: grabbing;
}

.terminal-right-panel--editing .terminal-right-panel__card.is-dragging {
  opacity: 0.5;
  border-style: dashed;
}

.terminal-right-panel--editing .terminal-right-panel__card.is-drop-target {
  border-color: var(--accent, #2f6fab);
  background: rgba(57, 183, 255, 0.06);
}

@media (max-width: 1023px) {
  #terminal-right {
    max-width: none;
  }
}

body[data-mode="light"][data-terminal-theme="black-grey"] #terminal-right {
  color: var(--term-ink, #141821);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__locked-card,
body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.80)),
    var(--term-bg-raised, #fff);
  border-color: var(--terminal-secondary-border, rgba(14, 157, 179, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 12px 28px rgba(42, 57, 112, 0.10);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__locked-card {
  border-left-color: var(--terminal-primary, #2f6fab);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__section--danger .terminal-right-panel__card {
  border-color: rgba(220, 38, 38, 0.20);
  border-left: 3px solid rgba(220, 38, 38, 0.72);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__locked-title,
body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__card .widget__title {
  color: var(--term-ink, #141821);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__group-header {
  color: var(--term-ink-3, #6c7487);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__section--danger .terminal-right-panel__group-header {
  color: var(--danger, #dc2626);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__card .widget__btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68)),
    color-mix(in srgb, var(--term-bg-raised, #ffffff) 88%, var(--terminal-secondary, #0e9db3) 12%);
  border-color: var(--terminal-secondary-border, rgba(14, 157, 179, 0.24));
  color: var(--term-ink, #141821);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__card .widget__btn:hover {
  border-color: var(--terminal-primary, #2f6fab);
  color: var(--terminal-primary, #2f6fab);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78)),
    color-mix(in srgb, var(--term-bg-raised, #ffffff) 84%, var(--terminal-primary, #2f6fab) 16%);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__section--danger .widget__btn--primary,
body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__card .widget__btn--danger {
  background: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
  color: #ffffff;
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__section:not(.terminal-right-panel__section--danger) .widget__btn--primary {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--terminal-primary, #2f6fab)) 86%, white),
      var(--terminal-primary, #2f6fab));
  border-color: color-mix(in srgb, var(--terminal-primary, #2f6fab) 86%, black);
  color: var(--terminal-primary-ink, #ffffff);
  box-shadow: 0 10px 24px -16px var(--terminal-primary-glow, rgba(0, 134, 217, 0.22));
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-right-panel__section:not(.terminal-right-panel__section--danger) .widget__btn--primary:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, #2872b8) 92%, white),
      color-mix(in srgb, var(--terminal-primary, #2f6fab) 92%, black));
  border-color: color-mix(in srgb, var(--terminal-primary, #2f6fab) 92%, black);
  color: var(--terminal-primary-ink, #ffffff);
}

@keyframes trPulse {
  0%, 100% { opacity: 0.07; }
  50%       { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-right-panel__skeleton {
    animation: none !important;
  }
}

/* --- Mini controller-tree band (Terminal page, R-terminal-ε) ----------
   220px tall band that sits ABOVE the 3-panel grid on /terminal.html.
   Single horizontal row of chat nodes; warp-run band slots in below
   when any warp manifest reports running slots. */

.terminal-controller-band {
  box-sizing: border-box;
  height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-sunken, #0e1115);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  font-family: var(--mono);
  color: var(--fg-default, #e7eaee);
  overflow: hidden;
}

.terminal-controller-band__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted, #9aa3ad);
}

.terminal-controller-band__title {
  font-weight: 600;
}

.terminal-controller-band__live {
  font-size: 10px;
  color: var(--fg-status-ok, #6dd58c);
}

.terminal-controller-band__live--offline {
  color: var(--fg-muted, #9aa3ad);
}

.terminal-controller-band__nodes {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
  flex: 0 0 auto;
}

.terminal-controller-band__node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background: var(--bg-elev-1, #161a20);
  color: var(--fg-default, #e7eaee);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.terminal-controller-band__node:hover,
.terminal-controller-band__node:focus-visible {
  background: var(--bg-elev-2, #1d232b);
  border-color: var(--border-strong, rgba(255,255,255,0.18));
  outline: none;
}

.terminal-controller-band__node--maestro {
  border-color: var(--accent, #6aa5ff);
}

.terminal-controller-band__node--alert {
  border-color: var(--fg-status-warn, #ffb86b);
}

.terminal-controller-band__icon {
  font-size: 14px;
  line-height: 1;
}

.terminal-controller-band__name {
  font-weight: 500;
}

.terminal-controller-band__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--fg-muted, #9aa3ad);
}

.terminal-controller-band__dot--fresh {
  background: var(--fg-status-ok, #6dd58c);
}

.terminal-controller-band__dot--stale {
  background: var(--fg-status-warn, #ffd166);
}

.terminal-controller-band__dot--attention {
  background: var(--fg-status-err, #ff6b6b);
}

.terminal-controller-band__empty {
  margin: 0;
  padding: 8px 0;
  color: var(--fg-muted, #9aa3ad);
  font-size: 12px;
}

/* Warp-run band: appears only when warp_runs[] is non-empty.
   The container is absent in the markup when no warp is running, so
   "appears live" is purely a render-time presence/absence concern. */
.terminal-controller-band__warp-run {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.10));
  border-radius: 6px;
  background: var(--bg-elev-1, #161a20);
  font-size: 11px;
  color: var(--fg-default, #e7eaee);
  overflow-x: auto;
  scrollbar-width: thin;
}

.terminal-controller-band__warp-run-card + .terminal-controller-band__warp-run-card {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-subtle, rgba(255,255,255,0.06));
}

.terminal-controller-band__warp-run-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.terminal-controller-band__warp-emoji {
  font-size: 12px;
}

.terminal-controller-band__warp-label {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #6aa5ff);
}

.terminal-controller-band__warp-round {
  font-weight: 500;
}

.terminal-controller-band__warp-stamp {
  color: var(--fg-muted, #9aa3ad);
}

.terminal-controller-band__warp-run-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--fg-muted, #9aa3ad);
}

.terminal-controller-band__warp-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}

.terminal-controller-band__slot-dot--running {
  color: var(--accent, #6aa5ff);
}

.terminal-controller-band__slot-dot--completed,
.terminal-controller-band__slot-dot--completed_with_maestro_finish {
  color: var(--fg-status-ok, #6dd58c);
}

.terminal-controller-band__slot-dot--errored,
.terminal-controller-band__slot-dot--timed_out {
  color: var(--fg-status-err, #ff6b6b);
}

.terminal-controller-band__warp-slots {
  font-size: 10px;
  color: var(--fg-muted, #9aa3ad);
  white-space: nowrap;
  overflow-x: auto;
}

@media (max-width: 1023px) {
  .terminal-controller-band {
    height: auto;
    min-height: 180px;
  }
}

@media (max-width: 767px) {
  .terminal-controller-band {
    padding: 8px 10px;
    min-height: 140px;
  }
  .terminal-controller-band__name {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-controller-band__node,
  .terminal-controller-band__warp-run {
    transition: none;
  }
}

/* ---- Terminal left panel - chat list (R-terminal slot beta) ---- */

.terminal-left-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 6px 12px;
  font-family: var(--sans);
  color: var(--ink, #1a1a1a);
}

.terminal-left-panel__empty {
  margin: 12px 8px;
  padding: 12px;
  border: 1px dashed var(--rule, rgba(0, 0, 0, 0.16));
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-3, #6b7280);
  text-align: center;
}

.terminal-left-panel__row {
  appearance: none;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  border-left: 3px solid transparent;
}

.terminal-left-panel__row:hover {
  background: var(--bg-sunken, rgba(0, 0, 0, 0.04));
}

.terminal-left-panel__row:focus-visible {
  outline: none;
  border-color: var(--accent, #2f6fab);
  background: var(--bg-sunken, rgba(0, 0, 0, 0.04));
}

.terminal-left-panel__row--active {
  background: var(--bg-raised, rgba(57, 183, 255, 0.08));
  border-left-color: var(--accent, #2f6fab);
}

.terminal-left-panel__row--active .terminal-left-panel__name {
  color: var(--ink, #1a1a1a);
  font-weight: 700;
}

.terminal-left-panel__name {
  grid-column: 2;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #374151);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminal-left-panel__slug {
  grid-column: 2;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--ink-3, #6b7280);
  letter-spacing: 0.02em;
}

.terminal-left-panel__last-activity {
  grid-column: 3;
  grid-row: 1;
}

.terminal-left-panel__unread {
  grid-column: 3;
  grid-row: 2;
}

/* ---- 3-state status dot --------------------------------------- */

.terminal-left-panel__status-dot {
  grid-row: 1 / 3;
  align-self: center;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-3, #6b7280);
  flex-shrink: 0;
}

.terminal-left-panel__status-dot--active {
  background: var(--success);
}

.terminal-left-panel__status-dot--stale {
  background: var(--ink-3, #9ca3af);
}

.terminal-left-panel__status-dot--attention {
  background: var(--danger, #dc2626);
  animation: terminal-left-panel-pulse 1.6s ease-in-out infinite;
}

@keyframes terminal-left-panel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-left-panel__status-dot--attention {
    animation: none;
  }
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel {
  color: var(--term-ink, #141821);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel__row {
  border-radius: 8px;
  color: var(--term-ink-2, #30394c);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel__row:hover {
  background: var(--terminal-primary-surface, rgba(0, 134, 217, 0.075));
  border-color: var(--terminal-primary-border, rgba(0, 134, 217, 0.20));
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel__row--active {
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, rgba(0, 134, 217, 0.08)), rgba(255,255,255,0.72));
  border-color: var(--terminal-primary-border, rgba(0, 134, 217, 0.28));
  border-left-color: var(--terminal-primary, #2f6fab);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 10px 24px rgba(0, 134, 217, 0.12);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel__name {
  color: var(--term-ink-2, #30394c);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel__row--active .terminal-left-panel__name {
  color: var(--term-ink, #141821);
}

body[data-mode="light"][data-terminal-theme="black-grey"] .terminal-left-panel__slug {
  color: var(--term-ink-3, #6c7487);
}

/* ── Terminal theme (per-page override) ────────────────────────────────
   2026-05-04 (Kevin): 'i think terminal appearance should be separate
   from the rest of the site, let's add settings for this inside the
   terminal'. The terminal page renders inside its own theme namespace
   driven by `body[data-terminal-theme="..."]`. JS in shared_scripts
   reads localStorage("ENDENZA_TERMINAL_THEME") and stamps the attr on
   `<body>` at boot.

   Default storage value is empty, which resolves to "follow-site" so
   the terminal inherits the active site theme. Selecting "Endenza glass"
   stores "black-grey" and enables the separate terminal-only skin.

   The variables below redefine ONLY what the terminal needs. Everything
   not listed inherits from the site cascade. */
body[data-terminal-theme="black-grey"] {
  --term-bg:         #0a0a0c;
  --term-bg-raised:  #15161a;
  --term-bg-sunken:  #050507;
  --term-rule:       rgba(255, 255, 255, 0.10);
  --term-ink:        #e8eaee;
  --term-ink-2:      #c8ccd4;
  --term-ink-3:      #8a8e98;
  --terminal-primary: #2f6fab;
  --terminal-primary-rgb: 0, 103, 168;
  --terminal-primary-hi: #2872b8;
  --terminal-primary-ink: #ffffff;
  --terminal-primary-soft: rgba(0, 103, 168, 0.18);
  --terminal-primary-surface: rgba(0, 103, 168, 0.11);
  --terminal-primary-border: rgba(0, 103, 168, 0.42);
  --terminal-primary-glow: rgba(0, 103, 168, 0.32);
  --terminal-secondary: #6aa6d6;
  --terminal-secondary-rgb: 106, 166, 214;
  --terminal-secondary-hi: #98c2e4;
  --terminal-secondary-ink: #071019;
  --terminal-secondary-soft: rgba(106, 166, 214, 0.18);
  --terminal-secondary-surface: rgba(106, 166, 214, 0.11);
  --terminal-secondary-border: rgba(106, 166, 214, 0.42);
  --terminal-secondary-glow: rgba(106, 166, 214, 0.30);
  --terminal-highlight: #d4925a;
  --terminal-highlight-rgb: 212, 146, 90;
  --terminal-highlight-hi: #e2b789;
  --terminal-highlight-ink: #1a1410;
  --terminal-highlight-soft: rgba(212, 146, 90, 0.18);
  --terminal-highlight-surface: rgba(212, 146, 90, 0.11);
  --terminal-highlight-border: rgba(212, 146, 90, 0.42);
  --terminal-highlight-glow: rgba(212, 146, 90, 0.30);
  --term-accent:     var(--terminal-primary);
  --term-accent-soft:var(--terminal-primary-soft);
  --accent-warm:     var(--terminal-highlight);
  --accent-warm-hi:  var(--terminal-highlight-hi);
  --accent-cool:     var(--terminal-secondary);
  --accent-link:     var(--terminal-secondary-hi);
}
body[data-mode="light"][data-terminal-theme="black-grey"] {
  --bg:              #f7f8fc;
  --bg-raised:       rgba(255, 255, 255, 0.86);
  --bg-sunken:       #edf2fb;
  --rule:            rgba(0, 134, 217, 0.18);
  --ink:             #141821;
  --ink-2:           #30394c;
  --ink-3:           #6c7487;
  --ink-4:           #9aa4b8;
  --ink-muted:       rgba(48, 57, 76, 0.68);
  --term-bg:         #edf2fb;
  --term-bg-raised:  rgba(255, 255, 255, 0.86);
  --term-bg-sunken:  #f7f8fc;
  --term-rule:       rgba(0, 134, 217, 0.18);
  --term-ink:        #141821;
  --term-ink-2:      #30394c;
  --term-ink-3:      #6c7487;
  --terminal-primary: #2f6fab;
  --terminal-primary-rgb: 0, 103, 168;
  --terminal-primary-hi: #2872b8;
  --terminal-primary-ink: #ffffff;
  --terminal-primary-soft: rgba(0, 103, 168, 0.13);
  --terminal-primary-surface: rgba(0, 103, 168, 0.075);
  --terminal-primary-border: rgba(0, 103, 168, 0.28);
  --terminal-primary-glow: rgba(0, 103, 168, 0.22);
  --terminal-secondary: #0e9db3;
  --terminal-secondary-rgb: 14, 157, 179;
  --terminal-secondary-hi: #21bed4;
  --terminal-secondary-ink: #06181d;
  --terminal-secondary-soft: rgba(14, 157, 179, 0.12);
  --terminal-secondary-surface: rgba(14, 157, 179, 0.07);
  --terminal-secondary-border: rgba(14, 157, 179, 0.24);
  --terminal-secondary-glow: rgba(14, 157, 179, 0.20);
  --terminal-highlight: #6fa6d8;
  --terminal-highlight-rgb: 123, 211, 255;
  --terminal-highlight-hi: #b8ecff;
  --terminal-highlight-ink: #ffffff;
  --terminal-highlight-soft: rgba(123, 211, 255, 0.13);
  --terminal-highlight-surface: rgba(123, 211, 255, 0.075);
  --terminal-highlight-border: rgba(123, 211, 255, 0.24);
  --terminal-highlight-glow: rgba(123, 211, 255, 0.20);
  --accent:          var(--terminal-primary);
  --accent-2:        var(--terminal-primary-hi);
  --accent-3:        var(--terminal-highlight);
  --accent-soft:     var(--terminal-primary-soft);
  --accent-ink:      var(--terminal-primary-ink);
  --terminal-page-gradient:
    radial-gradient(circle at 12% -14%, rgba(0, 134, 217, 0.24) 0%, transparent 36%),
    radial-gradient(circle at 66% 8%, rgba(14, 157, 179, 0.14) 0%, transparent 38%),
    radial-gradient(circle at 96% 92%, rgba(123, 211, 255, 0.18) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(246,248,252,0.94));
  --terminal-pattern-color: rgba(0, 134, 217, 0.12);
  --term-accent:     var(--terminal-primary);
  --term-accent-soft:var(--terminal-primary-soft);
  --accent-warm:     var(--terminal-highlight);
  --accent-warm-hi:  var(--terminal-highlight-hi);
  --accent-cool:     var(--terminal-secondary);
  --accent-link:     var(--terminal-secondary);
}
body[data-terminal-theme="follow-site"] {
  /* Inherit everything from the site cascade — set the term-* aliases
     to the site tokens so terminal selectors below resolve cleanly. */
  --term-bg:          var(--bg);
  --term-bg-raised:   var(--bg-raised);
  --term-bg-sunken:   var(--bg-sunken);
  --term-rule:        var(--rule);
  --term-ink:         var(--ink);
  --term-ink-2:       var(--ink-2);
  --term-ink-3:       var(--ink-3);
  --ink-muted:        var(--ink-3);
  --terminal-primary: var(--accent);
  --terminal-primary-hi: var(--accent-2);
  --terminal-primary-ink: var(--accent-ink, #fff);
  --terminal-primary-soft: var(--accent-soft);
  --terminal-primary-surface: var(--accent-soft);
  --terminal-primary-border: color-mix(in srgb, var(--accent) 42%, transparent);
  --terminal-secondary: var(--accent-2);
  --terminal-secondary-hi: var(--accent-3, var(--accent-2));
  --terminal-secondary-soft: var(--accent-soft);
  --terminal-secondary-surface: var(--accent-soft);
  --terminal-secondary-border: color-mix(in srgb, var(--accent-2) 38%, transparent);
  --terminal-highlight: var(--accent);
  --terminal-highlight-hi: var(--accent-2);
  --terminal-highlight-ink: var(--accent-ink, #fff);
  --terminal-highlight-soft: var(--accent-soft);
  --terminal-highlight-surface: var(--accent-soft);
  --terminal-highlight-border: color-mix(in srgb, var(--accent) 42%, transparent);
  --term-accent:      var(--terminal-primary);
  --term-accent-soft: var(--terminal-primary-soft);
  --accent-warm:      var(--terminal-highlight);
  --accent-warm-hi:   var(--terminal-highlight-hi);
  --accent-cool:      var(--terminal-secondary);
  --accent-link:      var(--terminal-secondary-hi);
}

/* -- /terminal.html center column: scrollback + compose ------------------ */
.terminal-center {
  --tc-font-size: 13px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(circle at 12% 0%, var(--terminal-primary-soft, transparent) 0%, transparent 34%),
    radial-gradient(circle at 72% 12%, var(--terminal-secondary-surface, transparent) 0%, transparent 30%),
    radial-gradient(circle at 92% 100%, var(--terminal-highlight-soft, transparent) 0%, transparent 30%),
    var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
  color: var(--term-ink, var(--ink, #e8eaee));
  font-family: var(--mono, "JetBrains Mono", monospace);
}

/* Belt-and-suspenders: force the LAST direct child of .terminal-center
   to be the compose tray, pinned at the bottom. Without this,
   intermediate "rich-render" or "settings popover" or "pinned messages"
   children that landed in Batch G v2 occasionally render above the
   compose tray and push it into the middle of the column. (Kevin
   2026-05-02 evening: "compose textarea is floating in the middle".) */
.terminal-center > .terminal-center__compose {
  margin-top: auto;
  flex-shrink: 0;
}

.terminal-center[data-tc-fontsize="small"]  { --tc-font-size: 12px; }
.terminal-center[data-tc-fontsize="medium"] { --tc-font-size: 13px; }
.terminal-center[data-tc-fontsize="large"]  { --tc-font-size: 15px; }

.terminal-center__scrollback {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  font-size: var(--tc-font-size, 13px);
  line-height: 1.5;
  scroll-behavior: smooth;
}

.terminal-center__empty {
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
  font-size: 13px;
  font-style: italic;
  padding: var(--space-4, 16px) 0;
}

.terminal-center__empty--warning {
  max-width: min(560px, 100%);
  margin-top: var(--space-3, 12px);
  padding: 12px 14px;
  border: 1px solid var(--terminal-highlight-border, rgba(212, 146, 90, 0.32));
  border-left: 3px solid var(--terminal-highlight, var(--accent-warm, #d4925a));
  border-radius: 6px;
  background:
    linear-gradient(90deg, var(--terminal-highlight-surface, rgba(212, 146, 90, 0.08)), transparent 82%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  color: var(--term-ink, var(--ink, #e8eaee));
  font-style: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

[data-mode="light"] .terminal-center__empty--warning {
  background:
    linear-gradient(90deg, var(--terminal-highlight-surface, rgba(212, 146, 90, 0.08)), transparent 82%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 36px rgba(42, 57, 112, 0.10);
}

.terminal-center__event {
  position: relative;
  display: block;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  padding-right: 32px;
  border-left: 2px solid transparent;
  border-radius: 2px;
}

.terminal-center__event--pinned {
  border-left-color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  box-shadow: inset 0 0 0 1px var(--terminal-highlight-border, rgba(212, 146, 90, 0.18));
}

/* User-message bubble (Kevin 2026-05-04: Claude.ai-parity affordance).
   Right-aligned chat-style bubble; bg = current accent's deep tint;
   text contrast handled by --ink. The `>` prefix stays anchored to
   the bubble's leading edge so the column still scans as a transcript. */
.terminal-center__event--user {
  border-left: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  justify-content: flex-end;
}
.terminal-center__event--user .terminal-center__prefix { display: none; }
.terminal-center__event--user .terminal-center__body {
  display: inline-block;
  max-width: min(72%, 560px);
  padding: 8px 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--terminal-highlight-surface, var(--term-accent-soft, rgba(212, 146, 90, 0.18))), var(--terminal-primary-surface, transparent));
  color: var(--term-ink, var(--ink, #e8eaee));
  border: 1px solid var(--terminal-highlight-border, var(--term-accent-soft, rgba(212, 146, 90, 0.32)));
  font-family: inherit;
  text-align: left;
}
/* Pin button stays clickable on the bubble row — bring it back into the flow. */
.terminal-center__event--user .terminal-center__pin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Send status badge on user messages sent from terminal */
.terminal-center__send-status {
  display: block;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  color: var(--ink-3, rgba(232,234,238,0.45));
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.terminal-center__send-status--ok {
  color: var(--success, #6ad48f);
}
.terminal-center__send-status--error {
  color: var(--danger, #d66a6a);
}

.terminal-center__event--assistant {
  border-left-color: var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
}

.terminal-center__event--tool-use {
  border-left-color: var(--terminal-secondary, var(--accent-cool, #6aa6d6));
  background: var(--terminal-secondary-surface, rgba(106, 166, 214, 0.05));
}

.terminal-center__event--tool-result {
  border-left-color: var(--success, #6ad48f);
  background: rgba(106, 212, 143, 0.04);
}

.terminal-center__event--error {
  border-left-color: var(--danger, #d66a6a);
  background: rgba(214, 106, 106, 0.06);
  color: var(--danger, #d66a6a);
}

.terminal-center__event--system {
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
  font-style: italic;
}

.terminal-center__prefix {
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  font-weight: 600;
  margin-right: var(--space-2, 8px);
}

.terminal-center__body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  color: inherit;
}

.terminal-center__tool-head {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.terminal-center__tool-name {
  color: var(--terminal-secondary, var(--accent-cool, #6aa6d6));
  font-weight: 600;
}

.terminal-center__tool-summary {
  color: var(--ink-muted, rgba(232, 234, 238, 0.6));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-center__tool-params {
  margin: var(--space-2, 8px) 0 0;
  padding: var(--space-2, 8px);
  background: var(--terminal-secondary-surface, rgba(0, 0, 0, 0.25));
  border-radius: 3px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal-center__tool-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
  margin-right: var(--space-2, 8px);
}

/* -- compose tray ------------------------------------------------------- */
.terminal-center__compose {
  flex: 0 0 auto;
  border-top: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.08)));
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 60%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  /* 2026-05-04 (later, Kevin: 'i want the message area to be a bit
     slimmer overall on our terminal as well') — trim outer padding
     + inter-row gap so the compose tray takes less vertical space
     without losing breathing room. */
  padding: var(--space-2, 8px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
/* viewport-fit=cover: keep compose above home indicator on Face ID iPhones */
@supports (padding: max(0px)) {
  .terminal-center__compose {
    padding-bottom: max(var(--space-2, 8px), env(safe-area-inset-bottom, 0));
  }
}

.terminal-center__compose-textarea {
  width: 100%;
  resize: vertical;
  /* 2026-05-04: trimmed twice per Kevin. First pass 60→36px min;
     second pass 36→30px min, 200→160px max. One text row fits at
     the default; drag to expand for longer composition. */
  min-height: 30px;
  max-height: 160px;
  padding: var(--space-1, 6px) var(--space-3, 12px);
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 80%),
    var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
  color: var(--term-ink, var(--ink, #e8eaee));
  border: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.12)));
  border-radius: 4px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}

.terminal-center__compose-textarea:focus {
  outline: none;
  border-color: var(--terminal-primary, var(--accent-warm, #d4925a));
  box-shadow: 0 0 0 1px var(--terminal-primary, var(--accent-warm, #d4925a)),
              0 0 0 4px var(--terminal-primary-soft, transparent);
}

.terminal-center__compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  position: relative;  /* anchors the chat-mode menu popover */
}

.terminal-center__compose-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2, 6px);
  flex: 1 1 auto;
  min-width: 0;
}

.terminal-center__compose-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 6px);
  flex: 0 0 auto;
}

/* ── Attachment chip rail (2026-05-04) ────────────────────────────────
   Renders below the textarea when files are pending send. Each chip
   shows filename + size + remove (×). Empty state hides the rail. */
.terminal-center__compose-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  margin-top: 4px;
}
.terminal-center__compose-attachments[hidden] { display: none; }
.terminal-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--term-bg-raised, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.10));
  border-radius: 6px;
  padding: 3px 4px 3px 10px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-2, rgba(232, 234, 238, 0.85));
  max-width: 260px;
}
.terminal-attachment-chip__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.terminal-attachment-chip__size {
  color: var(--ink-3, rgba(232, 234, 238, 0.45));
  flex: 0 0 auto;
}
.terminal-attachment-chip__remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-3, rgba(232, 234, 238, 0.55));
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
  transition: background 120ms ease, color 120ms ease;
}
.terminal-attachment-chip__remove:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink, #e8eaee);
}
.terminal-attachment-chip--unsupported {
  border-color: var(--terminal-highlight-border, rgba(247, 169, 88, 0.3));
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}

/* ── Voice button recording state (Web Speech API live) ─────────────── */
.terminal-tool[data-tc-voice].is-recording {
  color: var(--danger, #ff4d6d);
  border-color: rgba(255, 77, 109, 0.4);
  background: rgba(255, 77, 109, 0.08);
  animation: terminal-voice-pulse 1.4s ease-in-out infinite;
}
@keyframes terminal-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.45); }
  50%       { box-shadow: 0 0 0 4px rgba(255, 77, 109, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .terminal-tool[data-tc-voice].is-recording { animation: none; }
}
/* Disabled state when Web Speech API isn't available in the browser. */
.terminal-tool[data-tc-voice][disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Transcript view scrollback filter rules (2026-05-04) ─────────────
   The picker writes data-tc-transcript-view onto .terminal-center__scrollback.
   These selectors hide events that don't belong in the chosen mode.
   Default ("normal") hides system noise; verbose shows everything;
   summary keeps only user/assistant text. Thinking is reserved for
   future thinking-block surfacing. */
.terminal-center__scrollback[data-tc-transcript-view="normal"]
  .terminal-center__event--system { display: none; }

.terminal-center__scrollback[data-tc-transcript-view="summary"]
  .terminal-center__event--tool-use,
.terminal-center__scrollback[data-tc-transcript-view="summary"]
  .terminal-center__event--tool-result,
.terminal-center__scrollback[data-tc-transcript-view="summary"]
  .terminal-center__event--system { display: none; }

/* Verbose: reveal everything including system events. No hides — the
   default rendering is "show all" so the verbose attribute is a no-op
   at the CSS level. Selector exists for symmetry / future expansion. */
.terminal-center__scrollback[data-tc-transcript-view="verbose"]
  .terminal-center__event { display: block; }

/* ── Generic compose toolbar button (mode chip + icon buttons) ────────
   Two variants: --mode is a wider chip with label + caret; --icon is a
   compact 28px square. Both share the muted-glass visual language so
   the toolbar reads as one row. */
.terminal-tool {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition:
    background 140ms var(--ease, ease),
    color 140ms var(--ease, ease),
    border-color 140ms var(--ease, ease);
}
.terminal-tool:hover {
  background: var(--terminal-secondary-surface, rgba(255, 255, 255, 0.04));
  color: var(--ink, #e8eaee);
  border-color: var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
}
.terminal-tool:focus-visible {
  outline: none;
  border-color: var(--terminal-primary, var(--accent-warm, #d4925a));
  box-shadow: 0 0 0 2px var(--terminal-primary-soft, rgba(212, 146, 90, 0.2));
}
.terminal-tool[aria-expanded="true"] {
  background: var(--terminal-highlight-surface, rgba(212, 146, 90, 0.12));
  border-color: var(--terminal-highlight-border, rgba(212, 146, 90, 0.45));
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}
.terminal-tool--icon {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}
.terminal-tool__icon { font-size: 14px; line-height: 1; }
.terminal-tool__svg {
  display: block;
  color: currentColor;  /* SVG strokes inherit hover/focus tool color */
}
.terminal-tool__caret {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
}
.terminal-tool__label { line-height: 1; }

/* ── Chat-mode menu (popover above the mode chip) ─────────────────── */
.terminal-mode-menu {
  /* 2026-05-04: position fixed so the menu can never be clipped by
     an ancestor with overflow:auto/hidden. The JS anchor sets top/left
     from the button's bounding rect on open. Earlier `position:absolute`
     was getting cut off by the scrollback's overflow context. */
  position: fixed;
  z-index: 200;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 70%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.12)));
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  padding: 4px;
  overflow: hidden;
}
.terminal-mode-menu[hidden] { display: none; }

/* Header row — "Mode" label + ⇧⌘M shortcut indicator (Claude Code parity). */
.terminal-mode-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
}
.terminal-mode-menu__heading {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
  letter-spacing: 0;
}
.terminal-mode-menu__shortcut {
  display: inline-flex;
  gap: 3px;
}
.terminal-mode-menu__kbd {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
  padding: 1px 6px;
  border-radius: 4px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
.terminal-mode-menu__kbd--letter { padding: 1px 8px; }

.terminal-mode-menu__item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink, #e8eaee);
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  transition: background 120ms ease;
}
.terminal-mode-menu__item:hover {
  background: var(--terminal-highlight-surface, rgba(255, 255, 255, 0.05));
}
.terminal-mode-menu__title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink, #e8eaee);
}
.terminal-mode-menu__check {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #e8eaee);
  width: 14px;
  text-align: center;
  visibility: hidden;
}
.terminal-mode-menu__item[aria-checked="true"] .terminal-mode-menu__check {
  visibility: visible;
}
.terminal-mode-menu__num {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.45));
  min-width: 12px;
  text-align: right;
}
.terminal-mode-menu__item:hover .terminal-mode-menu__num {
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
}

/* ── Circular usage wheel + hover tooltip ─────────────────────────────
   Mirrors Claude.ai's compose-toolbar usage indicator: a tiny ring
   filled to the current "chat" percentage, with a hover tooltip
   showing chat / 5-hour / weekly bars. The arc uses pathLength=100
   so the dasharray maps directly to a percentage value. */
.terminal-usage-wheel {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.terminal-usage-wheel:focus-visible {
  outline: 2px solid var(--terminal-highlight, var(--accent-warm, #d4925a));
  outline-offset: 2px;
  border-radius: 50%;
}
.terminal-usage-wheel__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.terminal-usage-wheel__track {
  fill: none;
  stroke: var(--terminal-secondary-border, rgba(255, 255, 255, 0.14));
  stroke-width: 2.4;
}
.terminal-usage-wheel__arc {
  fill: none;
  stroke: var(--terminal-highlight, var(--accent-warm, #d4925a));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 280ms var(--ease, ease);
}
.terminal-usage-wheel__pct {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 9px;
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
/* Tooltip — fixed-positioned (2026-05-04) so the scrollback's overflow
   context can't clip its top. JS sets top/left from the wheel's
   bounding rect when it shows. Same pattern the mode menu uses. */
.terminal-usage-wheel__tooltip {
  position: fixed;
  min-width: 180px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-2, rgba(232, 234, 238, 0.85));
  display: none;
  z-index: 200;
  pointer-events: none;
}
/* JS toggles a `.is-visible` class on the wheel to show the tooltip
   (paired with fixed-position coords set in JS). Hover/focus rules
   below are no-ops now — kept for reference. 2026-05-04. */
.terminal-usage-wheel.is-tooltip-visible .terminal-usage-wheel__tooltip {
  display: block;
}
.terminal-usage-wheel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
}
.terminal-usage-wheel__row + .terminal-usage-wheel__row {
  border-top: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.06));
}
.terminal-usage-wheel__row strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #e8eaee);
}

/* Claude Code parity — pre-input status row (✦ + duration + tokens).
   Hidden via [hidden] attribute until JS populates from active-chat-meta. */
.terminal-center__compose-status {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.6));
  letter-spacing: 0.02em;
}
.terminal-center__compose-status[hidden] { display: none; }
.terminal-center__compose-status-icon {
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  font-size: 12px;
  line-height: 1;
}
.terminal-center__compose-status-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.terminal-center__compose-status-sep {
  color: var(--ink-muted, rgba(232, 234, 238, 0.35));
}

/* Model + effort selector — clickable button (Claude Code parity).
   Shows the current selection; clicking opens a 2-column popover
   with Model + Effort radios. 2026-05-04. */
.terminal-center__compose-model {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-2, rgba(232, 234, 238, 0.78));
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 80%),
    var(--term-bg-sunken, rgba(0, 0, 0, 0.15));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  appearance: none;
  font-family: var(--mono, "JetBrains Mono", monospace);
  transition:
    border-color 140ms var(--ease, ease),
    background 140ms var(--ease, ease),
    color 140ms var(--ease, ease);
}
.terminal-center__compose-model:hover {
  border-color: var(--terminal-secondary-border, rgba(255, 255, 255, 0.18));
  color: var(--ink, #e8eaee);
  background: var(--terminal-secondary-surface, rgba(255, 255, 255, 0.04));
}
.terminal-center__compose-model[aria-expanded="true"] {
  border-color: var(--terminal-highlight-border, rgba(212, 146, 90, 0.45));
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}
.terminal-center__compose-model:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--terminal-highlight-soft, rgba(212, 146, 90, 0.3));
}
.terminal-center__compose-model > span:first-child:empty { display: none; }
.terminal-center__compose-model-caret {
  font-size: 9px;
  opacity: 0.55;
}

/* Single-column model + effort menu — Claude Code parity (2026-05-04). */
.terminal-model-menu {
  position: fixed;
  z-index: 200;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  padding: 6px;
}
.terminal-model-menu[hidden] { display: none; }
.terminal-model-menu__section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.terminal-model-menu__divider {
  height: 1px;
  background: var(--terminal-secondary-border, rgba(255, 255, 255, 0.08));
  margin: 6px 4px;
}
/* Dimmed suffix for "1M" / "Legacy" tags inside model item titles. */
.terminal-mode-menu__suffix {
  color: var(--ink-muted, rgba(232, 234, 238, 0.45));
  font-weight: 400;
  margin-left: 4px;
}
/* Fast mode toggle — switch UI inside the menu. */
.terminal-model-menu__toggle {
  /* Reuse the standard menu-item grid so the title aligns. */
}
.terminal-model-menu__switch {
  width: 28px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 140ms ease;
  grid-column: 2 / span 2;  /* span the check + num slots */
  justify-self: end;
}
.terminal-model-menu__switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--ink, #fff);
  border-radius: 50%;
  transition: left 140ms ease, background 140ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.terminal-model-menu__toggle[aria-checked="true"] .terminal-model-menu__switch {
  background: var(--terminal-primary, var(--accent-warm, #d4925a));
}
.terminal-model-menu__toggle[aria-checked="true"] .terminal-model-menu__switch-knob {
  left: 14px;
  background: var(--terminal-primary-ink, #1a1410);
}
/* Hide check + number columns on the fast-mode toggle row. */
.terminal-model-menu__toggle .terminal-mode-menu__check,
.terminal-model-menu__toggle .terminal-mode-menu__num {
  display: none;
}

/* Floating toast for placeholder-button clicks (attach, voice). 2026-05-04. */
.terminal-toast {
  position: fixed;
  z-index: 250;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 12px;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink, #e8eaee);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}
.terminal-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Usage-limit banner — Anthropic-parity warn (≥80%) and urgent (≥95%). */
.terminal-usage-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 13px;
  background: rgba(246, 198, 79, 0.10);
  border: 1px solid rgba(246, 198, 79, 0.35);
  color: var(--ink, #e8eaee);
}
.terminal-usage-banner[hidden] { display: none; }
.terminal-usage-banner[data-severity="urgent"] {
  background: rgba(224, 90, 74, 0.14);
  border-color: rgba(224, 90, 74, 0.5);
}
.terminal-usage-banner__icon {
  flex-shrink: 0;
  color: var(--warning);
}
.terminal-usage-banner[data-severity="urgent"] .terminal-usage-banner__icon {
  color: var(--danger, #e05a4a);
}
.terminal-usage-banner__text {
  flex: 1 1 auto;
  letter-spacing: -0.005em;
}
.terminal-usage-banner__upgrade {
  color: var(--terminal-secondary-hi, var(--accent-link, #5fa8ff));
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 0 2px;
}
.terminal-usage-banner__upgrade:hover {
  text-decoration: underline;
}
.terminal-usage-banner__sep {
  color: var(--ink-3, rgba(232, 234, 238, 0.3));
  font-size: 14px;
}
.terminal-usage-banner__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-3, rgba(232, 234, 238, 0.55));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.terminal-usage-banner__close:hover {
  color: var(--ink, #e8eaee);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Slash-command popup (Claude Code parity, 2026-05-04) ──────────── */
.terminal-slash-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 70%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.12)));
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.terminal-slash-popup[hidden] { display: none; }
.terminal-slash-popup__item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink, #e8eaee);
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: inherit;
  transition: background 100ms ease;
}
.terminal-slash-popup__item:hover,
.terminal-slash-popup__item.is-active {
  background: var(--terminal-highlight-surface, rgba(212, 146, 90, 0.14));
}
.terminal-slash-popup__cmd {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  flex-shrink: 0;
  min-width: 90px;
}
.terminal-slash-popup__hint {
  font-size: 12px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.6));
  letter-spacing: 0;
}

/* ── Stop button — replaces Send while a turn is generating ───────── */
.terminal-center__stop-btn {
  appearance: none;
  background: var(--danger, #e05a4a);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease;
}
.terminal-center__stop-btn:hover { background: var(--danger, #f06d5e); }
.terminal-center__stop-btn[hidden] { display: none; }

.terminal-center__send-btn {
  appearance: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 86%, white),
      var(--terminal-primary, var(--accent-warm, #d4925a)));
  color: var(--terminal-primary-ink, var(--accent-ink, #ffffff));
  border: 1px solid color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 86%, black);
  border-radius: var(--r-md, 10px);
  padding: 6px 14px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 62%, transparent);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.terminal-center__send-btn:hover:not(:disabled) {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 92%, white),
      color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 92%, black));
  border-color: color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 92%, black);
  box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 68%, transparent);
  transform: translateY(-1px);
}

.terminal-center__send-btn:disabled {
  background: var(--terminal-primary-soft, rgba(212, 146, 90, 0.35));
  color: color-mix(in srgb, var(--terminal-primary-ink, #1a1410) 72%, transparent);
  cursor: not-allowed;
}

/* -- toolbar (gear icon) ----------------------------------------------- */
.terminal-center__toolbar {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.terminal-center__settings-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-muted, rgba(232, 234, 238, 0.6));
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.terminal-center__settings-btn:hover,
.terminal-center__settings-btn[aria-expanded="true"] {
  color: var(--ink, #e8eaee);
  background: var(--terminal-secondary-surface, rgba(255, 255, 255, 0.06));
  border-color: var(--terminal-secondary-border, rgba(255, 255, 255, 0.1));
}

.terminal-center__settings-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 150px));
  overflow: auto;
  padding: var(--space-2, 8px);
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.12)));
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  font-size: 12px;
}

.terminal-center__settings-popover[hidden] { display: none; }

.terminal-center__settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 8px;
  border-bottom: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.1));
}

.terminal-center__settings-head span {
  color: var(--ink, #e8eaee);
  font-weight: 700;
  letter-spacing: 0;
}

.terminal-center__settings-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
}

.terminal-center__settings-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink, #e8eaee);
}

.terminal-center__settings-row select {
  margin-left: auto;
  background: var(--term-bg-sunken, var(--bg-sunken, #0e0f12));
  color: var(--term-ink, var(--ink, #e8eaee));
  border: 1px solid var(--terminal-secondary-border, var(--term-rule, rgba(255, 255, 255, 0.12)));
  border-radius: 3px;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 12px;
}

.terminal-center__settings-hint {
  color: var(--ink-muted, rgba(232, 234, 238, 0.5));
  font-size: 11px;
  padding-left: 22px;
}

.terminal-center__appearance-panel {
  border-top: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.1));
  margin-top: 2px;
  padding: 10px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.terminal-center__appearance-head,
.terminal-center__color-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.terminal-center__appearance-head span,
.terminal-center__color-label span {
  color: var(--ink, #e8eaee);
  font-weight: 650;
  letter-spacing: 0;
}

.terminal-center__appearance-reset,
.terminal-center__settings-reset-all,
.terminal-center__color-none {
  appearance: none;
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-muted, rgba(232, 234, 238, 0.62));
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 5px 7px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.terminal-center__appearance-reset:hover,
.terminal-center__settings-reset-all:hover,
.terminal-center__color-none:hover,
.terminal-center__color-none.is-active {
  background: var(--terminal-primary-surface, rgba(255, 255, 255, 0.08));
  border-color: var(--terminal-primary, var(--accent, #2f6fab));
  color: var(--ink, #e8eaee);
}

.terminal-center__color-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.terminal-center__color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.terminal-center__color-swatch {
  appearance: none;
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--tc-color-swatch);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.terminal-center__color-swatch:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 10px rgba(0, 0, 0, 0.28);
}

.terminal-center__color-swatch:focus-visible {
  outline: 2px solid var(--ink, #e8eaee);
  outline-offset: 2px;
}

.terminal-center__color-swatch.is-active {
  border-color: var(--ink, #e8eaee);
  box-shadow: 0 0 0 2px var(--terminal-primary-soft, var(--accent-soft, rgba(0, 134, 217, 0.18)));
}

.terminal-center__color-custom {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-muted, rgba(232, 234, 238, 0.58));
  cursor: pointer;
  font-size: 11px;
}

.terminal-center__color-custom input {
  width: 26px;
  height: 22px;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.terminal-center__color-custom input::-webkit-color-swatch-wrapper { padding: 2px; }
.terminal-center__color-custom input::-webkit-color-swatch { border: none; border-radius: 3px; }

.terminal-center__settings-row--pattern {
  border-top: 1px solid var(--terminal-secondary-border, var(--rule, rgba(255, 255, 255, 0.08)));
  padding-top: 10px;
}

/* -- pin button (revealed on event hover) ------------------------------- */
.terminal-center__pin-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.terminal-center__event:hover .terminal-center__pin-btn,
.terminal-center__pin-btn:focus-visible {
  opacity: 1;
}

.terminal-center__event--pinned .terminal-center__pin-btn {
  opacity: 1;
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}

.terminal-center__pin-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}

/* -- pinned section (sticky, collapsible, capped at 40% column height) -- */
.terminal-center__pinned {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
  max-height: 40%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(90deg, var(--terminal-highlight-surface, transparent), transparent 70%),
    var(--term-bg-raised, var(--bg-raised, #1c1d22));
  border-bottom: 1px solid var(--terminal-highlight-border, var(--rule, rgba(255, 255, 255, 0.08)));
}

.terminal-center__pinned[hidden] { display: none; }

.terminal-center__pinned-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 6px var(--space-3, 12px);
  border-bottom: 1px solid var(--terminal-highlight-border, rgba(255, 255, 255, 0.06));
  background: var(--terminal-highlight-surface, rgba(212, 146, 90, 0.04));
}

.terminal-center__pinned-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-muted, rgba(232, 234, 238, 0.7));
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.terminal-center__pinned-label {
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  font-weight: 600;
}

.terminal-center__pinned-count {
  color: var(--ink-muted, rgba(232, 234, 238, 0.55));
}

.terminal-center__pinned-caret {
  display: inline-block;
  transition: transform 120ms ease;
}

.terminal-center__pinned--collapsed .terminal-center__pinned-caret {
  transform: rotate(-90deg);
}

.terminal-center__pinned--collapsed .terminal-center__pinned-body { display: none; }

.terminal-center__pinned-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  font-size: var(--tc-font-size, 13px);
  line-height: 1.5;
}

/* -- light mode override: keep terminal feel but use terminal tokens ----- */
[data-mode="light"] .terminal-center {
  background:
    radial-gradient(circle at 12% 0%, var(--terminal-primary-soft, transparent) 0%, transparent 34%),
    radial-gradient(circle at 72% 12%, var(--terminal-secondary-surface, transparent) 0%, transparent 30%),
    radial-gradient(circle at 92% 100%, var(--terminal-highlight-soft, transparent) 0%, transparent 30%),
    var(--term-bg-sunken, var(--bg-sunken, #f7f6f3));
  color: var(--ink, #1c1d22);
}

[data-mode="light"] .terminal-center__compose {
  background:
    linear-gradient(90deg, var(--terminal-primary-surface, transparent), transparent 60%),
    var(--term-bg-raised, var(--bg-raised, #fefdfa));
  border-top-color: var(--terminal-primary-border, rgba(0, 0, 0, 0.12));
}

[data-mode="light"] .terminal-center__compose-textarea {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)),
    var(--term-bg-raised, #fff);
  border-color: var(--terminal-secondary-border, rgba(0, 0, 0, 0.12));
  color: var(--ink, #1c1d22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 10px 28px rgba(0, 134, 217, 0.08);
}

[data-mode="light"] .terminal-center__tool-params {
  background: rgba(0, 0, 0, 0.04);
}

[data-mode="light"] .terminal-center__settings-popover {
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 72%),
    var(--term-bg-raised, var(--bg-raised, #fefdfa));
  border-color: var(--terminal-secondary-border, rgba(0, 0, 0, 0.12));
  box-shadow: 0 18px 48px rgba(42, 57, 112, 0.16);
}

[data-mode="light"] .terminal-center__settings-row label,
[data-mode="light"] .terminal-center__settings-row select {
  color: var(--ink, #1c1d22);
}

[data-mode="light"] .terminal-center__appearance-head span,
[data-mode="light"] .terminal-center__color-label span {
  color: var(--ink, #1c1d22);
}

[data-mode="light"] .terminal-center__settings-row select {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

[data-mode="light"] .terminal-center__appearance-reset,
[data-mode="light"] .terminal-center__color-none,
[data-mode="light"] .terminal-center__color-custom input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

[data-mode="light"] .terminal-center__pinned {
  background: var(--bg-raised, #fefdfa);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-mode="light"] .terminal-center__pinned-header {
  background: var(--terminal-highlight-surface, rgba(212, 146, 90, 0.08));
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* -- jump-to-latest button (sticky-ish overlay above compose) ----------- */
.terminal-center__jump-latest {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  appearance: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 86%, white),
      var(--terminal-primary, var(--accent-warm, #d4925a)));
  color: var(--terminal-primary-ink, var(--accent-ink, #ffffff));
  border: 1px solid color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 86%, black);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  animation: tc-jump-latest-slide-in 200ms ease-out;
}

.terminal-center__jump-latest[hidden] { display: none; }

.terminal-center__jump-latest:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--terminal-primary-hi, var(--accent-2, var(--accent))) 92%, white),
      color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 92%, black));
  border-color: color-mix(in srgb, var(--terminal-primary, var(--accent-warm, #d4925a)) 92%, black);
}

@keyframes tc-jump-latest-slide-in {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-center__jump-latest { animation: none; }
}

[data-mode="light"] .terminal-center__jump-latest {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* -- illustrated empty state ("Pick a project" placeholder) ------------- */
.terminal-center__empty-illustrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  text-align: center;
  padding: var(--space-5, 24px) var(--space-4, 16px);
  font-style: normal;
  color: var(--ink-muted, rgba(232, 234, 238, 0.7));
}

.terminal-center__empty-illustrated svg {
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  opacity: 0.7;
  margin-bottom: var(--space-2, 8px);
}

.terminal-center__empty-illustrated p {
  margin: 0;
}

.terminal-center__empty-hint {
  color: var(--ink-3, rgba(232, 234, 238, 0.5));
  font-size: 12px;
}

.terminal-center__empty-hint a {
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
  text-decoration: underline;
}

/* Skeleton placeholder shown for ~1s while bootstrapEmptyState probes
   /state to decide which warm card to render. Subtle pulsing dot —
   tells the user "I'm working on it" without dumping a wrong message. */
.terminal-center__empty-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  padding: var(--space-6, 32px) var(--space-4, 16px);
  min-height: 120px;
  color: var(--ink-3, rgba(232, 234, 238, 0.45));
}

.terminal-center__skeleton-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--terminal-primary, var(--accent, #c2711f));
  opacity: 0.5;
  animation: tc-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes tc-skeleton-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50%      { transform: scale(1.1); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-center__skeleton-pulse { animation: none; opacity: 0.6; }
}

/* -- rich event renderer (TermRender-α): tool cards + diff cards + md ---- */

.terminal-center__tool-card {
  border: 1px solid var(--terminal-secondary-border, var(--rule, rgba(255, 255, 255, 0.08)));
  border-radius: 4px;
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 86%),
    rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 2px 0;
}

.terminal-center__tool-card-head {
  appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.terminal-center__tool-card-toggle {
  appearance: none;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
}

.terminal-center__tool-card-chevron {
  transition: transform 120ms ease;
  flex: 0 0 auto;
  color: var(--terminal-secondary, var(--accent-cool, #6aa6d6));
}

.terminal-center__tool-card--collapsed .terminal-center__tool-card-chevron {
  transform: rotate(-90deg);
}

.terminal-center__tool-card--collapsed .terminal-center__tool-card-body {
  display: none;
}

.terminal-center__tool-card-body {
  padding: 6px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.terminal-center__tool-card--result .terminal-center__tool-card-head {
  justify-content: space-between;
  padding: 6px 10px;
}

.terminal-center__tool-result-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 12px;
  background: transparent;
  color: inherit;
}

.terminal-center__tool-label--error {
  color: var(--danger, #d66a6a);
}

/* -- copy button (used by tool_result + diff cards) --------------------- */
.terminal-center__copy-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-muted, rgba(232, 234, 238, 0.7));
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.12));
  border-radius: 3px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.terminal-center__copy-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink, #e8eaee);
}

/* -- file diff card (Edit / Write tool_use) ---------------------------- */
.terminal-center__diff-card {
  background:
    linear-gradient(180deg, var(--terminal-secondary-surface, transparent), transparent 80%),
    rgba(0, 0, 0, 0.18);
}

.terminal-center__diff-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.terminal-center__diff-action {
  color: var(--terminal-secondary, var(--accent-cool, #6aa6d6));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.terminal-center__diff-path {
  color: var(--ink-muted, rgba(232, 234, 238, 0.7));
  font-size: 12px;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-center__diff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--terminal-secondary-border, rgba(255, 255, 255, 0.08));
}

.terminal-center__diff-cols--single {
  grid-template-columns: 1fr;
}

.terminal-center__diff-col {
  margin: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-sunken, #0e0f12);
}

.terminal-center__diff-col--old {
  background: rgba(214, 106, 106, 0.10);
  color: var(--danger, #d66a6a);
  border-left: 2px solid rgba(214, 106, 106, 0.4);
}

.terminal-center__diff-col--new {
  background: rgba(106, 212, 143, 0.10);
  color: var(--success, #6ad48f);
  border-left: 2px solid rgba(106, 212, 143, 0.4);
}

/* -- assistant markdown body ------------------------------------------- */
.terminal-center__md-body {
  font-family: inherit;
  font-size: var(--tc-font-size, 13px);
  line-height: 1.5;
}

.terminal-center__md-body > *:first-child { margin-top: 0; }
.terminal-center__md-body > *:last-child  { margin-bottom: 0; }

.terminal-center__md-h1,
.terminal-center__md-h2,
.terminal-center__md-h3 {
  margin: 8px 0 4px;
  font-weight: 600;
  color: var(--ink, #e8eaee);
  letter-spacing: 0.01em;
}

.terminal-center__md-h1 {
  font-size: 1.25em;
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}
.terminal-center__md-h2 { font-size: 1.10em; }
.terminal-center__md-h3 { font-size: 1.0em; }

.terminal-center__md-p {
  margin: 4px 0;
}

.terminal-center__md-list {
  margin: 4px 0 4px 18px;
  padding: 0;
}

.terminal-center__md-blockquote {
  margin: 4px 0;
  padding: 4px 10px;
  border-left: 3px solid var(--terminal-highlight, var(--accent-warm, #d4925a));
  background: var(--terminal-highlight-surface, rgba(212, 146, 90, 0.06));
  color: var(--ink-muted, rgba(232, 234, 238, 0.8));
  font-style: italic;
}

.terminal-center__md-code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.95em;
  color: var(--terminal-highlight, var(--accent-warm, #d4925a));
}

.terminal-center__md-fence {
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--terminal-secondary-border, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  overflow-x: auto;
  position: relative;
}

.terminal-center__md-fence-lang {
  position: absolute;
  top: 4px;
  right: 8px;
  color: var(--terminal-secondary, var(--accent-cool, #6aa6d6));
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.terminal-center__md-link {
  color: var(--terminal-secondary, var(--accent-cool, #6aa6d6));
  text-decoration: underline;
}

/* -- JSON colorizer tokens (used by tool_use / tool_result / md fences) -- */
.terminal-center__json-key   { color: var(--terminal-highlight, var(--accent-warm, #d4925a)); }
.terminal-center__json-str   { color: var(--ink-2, #c9cdd4); }
.terminal-center__json-num   { color: var(--terminal-secondary, var(--accent-cool, #6aa6d6)); }
.terminal-center__json-bool  { color: var(--terminal-secondary, var(--accent-cool, #6aa6d6)); font-weight: 600; }
.terminal-center__json-null  { color: var(--ink-muted, rgba(232, 234, 238, 0.55)); font-style: italic; }

/* -- light-mode overrides for rich renderer ---------------------------- */
[data-mode="light"] .terminal-center__tool-card {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-mode="light"] .terminal-center__diff-col {
  background: #fff;
}

[data-mode="light"] .terminal-center__diff-col--old {
  background: rgba(214, 106, 106, 0.08);
  color: var(--danger, #a04040);
}

[data-mode="light"] .terminal-center__diff-col--new {
  background: rgba(106, 212, 143, 0.10);
  color: var(--success, #2f7048);
}

[data-mode="light"] .terminal-center__md-fence {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-mode="light"] .terminal-center__md-code {
  background: rgba(0, 0, 0, 0.06);
  color: #a05a20;
}

[data-mode="light"] .terminal-center__copy-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(28, 29, 34, 0.7);
}

[data-mode="light"] .terminal-center__copy-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1c1d22;
}

[data-mode="light"] .terminal-center__json-str { color: #2c3e50; }