:root {
  /* Light is the default; data-theme="dark" is set by the host (typebulb.com
     or the typebulb CLI, sourced from prefers-color-scheme).
     GRAY RAMP — every gray rides ONE neutral tint (R=G=B), like the main app's
      bg1–bg5 ramp. Lightness may step; the HUE never changes. The bug to avoid is a
      gray in a *different* tint (a cool/blue panel beside a neutral one), not the
      number of steps. App chrome (statusbar, picker, modals) sits on the fixed
      --panel. Document panels — code, callouts, tables, user bubbles, open tools —
      paint --veil instead: a translucent neutral that matches --panel when alone on
      the page but COMPOUNDS when panels nest (a code block in a callout, a panel in a
      user bubble), so every depth separates on its own — no level-counting, no cap. */
  --bg: rgb(255, 255, 255);
  --fg: rgb(28, 28, 30);
  --muted: rgb(96, 96, 100);
  --panel: rgb(242, 242, 242);
  --border: rgb(221, 221, 221);
  --accent: rgb(58, 125, 232);
  --veil: rgba(0, 0, 0, 0.05);      /* one shade step; alpha-stacks as panels nest */
  --tool-bg: var(--panel);
  --err: rgb(206, 60, 60);
  --warn: rgb(176, 120, 12);          /* amber — the cache-leak (cost-caution) tier, milder than --err */
  --diff-add: rgb(40, 140, 70);
  --fold-marker: rgb(24, 145, 72);
  /* Prose measure for text (bubbles + notes) — kept to a readable line length.
     Diagrams break out wider than this; see .md .mermaid. */
  --content-max: 800px;
  /* One height for every word-pill control — the statusbar pills (bulbs/model/session/token) and
     the floating overlay pills (copy, breakout). Set once here so they can't drift apart again;
     chosen a touch under the old statusbar 1.7rem and a touch over the overlay pills' ~1.35rem. */
  --pill-h: 1.5rem;
  /* One text size for every word-pill too (statusbar pills + overlay copy/breakout). Was drifting:
     statusbar .85rem vs overlay .72rem read as amateurish. The emoji glyph pill keeps its own size. */
  --pill-font: .8rem;
  color-scheme: light;
}

html[data-theme="dark"] {
  /* Neutral ramp, same tint as the main app: page 18 → surface 32 → border 52. */
  --bg: rgb(18, 19, 20);
  --fg: rgb(190, 190, 190);
  --muted: rgb(150, 150, 150);
  --panel: rgb(32, 32, 32);
  --border: rgb(52, 52, 52);
  --accent: rgb(122, 162, 250);
  --veil: rgba(255, 255, 255, 0.06);
  --tool-bg: var(--panel);
  --err: rgb(230, 60, 60);
  --warn: rgb(232, 184, 80);          /* amber — the cache-leak (cost-caution) tier, milder than --err */
  --diff-add: rgb(100, 210, 130);
  --fold-marker: rgb(0, 255, 0);
  color-scheme: dark;
}

/* Aliases for beautiful-mermaid, indirecting around a var-name collision with the
   bulb's theme (see the renderMermaidSVG call). They still resolve to the live
   theme at the use site. */
:root {
  --mm-bg: var(--bg);
  --mm-fg: var(--fg);
  --mm-line: var(--muted);
  --mm-accent: var(--accent);
  --mm-muted: var(--muted);
  --mm-surface: var(--tool-bg);
  --mm-border: var(--border);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--fg);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.app { display: flex; flex-direction: column; height: 100vh; }
/* The transcript region. position:relative anchors the overlaid (absolute) statusbar and banners to
   THIS box, not the app: with a composer below the pills stay over the transcript's bottom edge
   instead of landing on the input panel. */
.chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Bottom status strip, overlaid (not in flow) on the chat — which runs
   full-height to the very bottom. The strip itself has NO fill, so the message
   text shows through everywhere, right to the bottom edge. Only the items (the
   pills) are opaque, so they overlay the text with visual precedence rather than
   the strip cutting it off with a band. No border — the typebulb host's rounded
   card is the only frame. */
.statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Same column as .messages and the composer: a --content-max band centred in a 1.75rem gutter
     (max-width carries the two gutters so the content box lands on --content-max). The pills are
     right-aligned within it, so the cluster's right edge tracks the prose column's — consistent
     with the input above and the transcript behind. The gutter also clears the overlaid scrollbar
     that the old asymmetric right padding was there to dodge. */
  margin-inline: auto;
  max-width: calc(var(--content-max) + 3.5rem);
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem 1.75rem;
  font-size: .8rem;
  /* Drop the inherited 1.55 line-height so the bar's own strut doesn't add
     phantom ascender/descender room above the pills. Everything in the bar
     is a fixed-height pill, which looks right at 1. */
  line-height: 1;
  min-width: 0;
}
.statusbar-actions {
  margin-left: auto;
  display: flex;
  gap: .4rem;
  align-items: center;
}
/* THE CENTERING RECIPE for EVERY word-label control on any surface — the status-bar pills and
   floating overlay pills below, and the launcher row's trust switch + B scope chip. One rule = one
   source of vertical alignment; when these drift apart it reads as amateurish, so a new word
   control joins this selector rather than centering itself (don't re-tweak per button — fix it
   here or nowhere). Icon buttons opt back out, keeping flex (see .pill.glyph). Segoe UI's font
   ascent (~1.08em) dwarfs its descent (~0.25em), so anything that centers the LINE BOX —
   flex, line-height, padding — parks the glyphs ~2px low at pill sizes. `text-box` trims the
   line box to the glyphs (cap→baseline) so centering centers the letters themselves. It only
   applies to block containers (not flex), hence inline-block + align-content, not inline-flex
   + align-items. Browsers without text-box (Firefox) fall back to plain line-box centering. */
.pill, .token, .overlay-pill, .trust-toggle, .batch-b {
  display: inline-block;
  align-content: center;
  text-align: center;
  text-box: trim-both cap alphabetic;
}
/* Chip shape shared by the status-bar pills (interactive and passive) AND the floating overlay
   pills (copy, breakout, code⇄run) — opaque, so they read cleanly over the message text the
   transparent strip lets through. The launcher row's pills take only the recipe above; their
   shape is the row's (.trust-toggle, .batch-b). */
.pill, .token, .overlay-pill {
  height: var(--pill-h);
  padding: 0 .7rem;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--pill-font);
  white-space: nowrap;
  user-select: none;
}
/* Pills are <button>s: reset UA chrome (font/appearance/margin) and add the
   interactive affordance. Slightly larger text than the passive indicator. */
.pill {
  font: inherit;
  font-size: var(--pill-font);
  appearance: none;
  margin: 0;
  cursor: pointer;
}
/* `.on` latches the hover accent — the bar's only persistent state cue (every other
   pill accents on hover alone). */
.pill:hover, .pill.on { border-color: var(--accent); color: var(--accent); }
/* Square glyph pill (the prose-mode toggle): width pinned to the pill height rather than
   padding-driven — the bar's first non-word pill. The emoji can't take currentColor, so it
   carries state itself: grayscale at rest, color while hovered or on — filtered on the
   inner span, never the button, or it would wash the accent border too.
   Glyph content (emoji span / the Anthropic SVG) is vertically symmetric, so plain flex
   centering is exact for it — and cap/alphabetic trim mis-seats a replaced SVG (it trims to
   TEXT metrics), so opt glyph pills back out of the word-pill recipe. */
.pill.glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-box: normal;
  width: var(--pill-h);
  padding: 0;
  font-size: .9rem;
}
.pill.glyph .glyph-img { filter: grayscale(1); opacity: .75; }
.pill.glyph:hover .glyph-img, .pill.glyph.on .glyph-img { filter: none; opacity: 1; }

/* The two status-bar chips each anchor an upward popover (token breakdown /
   session list). Wrap = positioning context; the popover anchors bottom/right and
   grows up-and-left — the chips sit in the right-aligned cluster, so left:0 would
   run them off the viewport's right edge. */
.token-wrap, .sid-wrap, .servers-wrap, .model-wrap, .gitdiff-wrap { position: relative; display: inline-block; }
/* Each pill renders its wrap unconditionally, emitting an empty div when it has
   nothing to show (no tokens / no session / nothing running). An empty wrap is
   still a flex child, so .statusbar-actions' gap lands on both its sides —
   doubling the visible gap between its neighbours. Collapse the empties so the
   cluster spaces evenly regardless of which pills are present. */
.token-wrap:empty, .sid-wrap:empty, .servers-wrap:empty, .model-wrap:empty, .gitdiff-wrap:empty { display: none; }
.picker, .servers-pop {
  --menu-h: 428px;         /* one height for both statusbar menus — they sit side by side, so a
                              mismatched cap reads as a glitch; .picker grows to it, .servers-pop
                              too (the drilled-in console is the one fixed-height exception, see
                              .log-mode). Sized to show exactly 12 rows
                              (12 × --menu-row-h + 11 gaps + filter + padding) — recognition fades
                              past ~12 and search owns the tail. Plain px: desktop-only surface,
                              every desktop window fits it. 428, not 427: at 427 the two menus land
                              on different device-pixel roundings, a 1px sibling mismatch — the
                              lesser evil is 1px off the ideal height. */
  --menu-row-h: 29px;      /* one row height for both menus' lists — rows must match pitch exactly
                              or the side-by-side menus read as two designs. Whole px, eyeball-tuned;
                              the row paddings are kept below it so this floor is what governs. */
  /* ONE geometry contract for both menus — sizing policy, padding, stacking. Stating it twice is
     how every sibling discrepancy of June '26 happened (row pitch, gaps, fixed-vs-grow). max-height,
     not height: a menu hugs its content and caps at the 12 rows above — a fixed height left a
     1-bulb project with a row floating atop a 400px void. Per-menu rules keep only width and
     alignment (.pop-center / .pop-start below). */
  max-height: var(--menu-h);
  overflow: hidden;
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: absolute;
  bottom: calc(100% + .35rem);
  right: 0;
  z-index: 10;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
/* Popover alignment — which edge of the pill the menu aligns to (floating-UI's start/center/end
   vocabulary; "end", right edges flush and growing left, is the unnamed default above). Tagged on
   the pill's WRAP, not each popover root: a menu with several drilled-in views (the model pill's
   list/info/diag/key modes) aligns once, and a future mode can't forget. The cluster's left-side
   pills (diff, model) center — end-anchored, their menus run out of room growing left. No viewport
   clamping: desktop-only; revisit if a narrow window ever clips one. */
.pop-center > :is(.picker, .servers-pop) { right: auto; left: 50%; transform: translateX(-50%); }
.pop-start > :is(.picker, .servers-pop) { right: auto; left: 0; }

/* ---- Shimmer — the one "working" cue. One gradient, one keyframes, composed via class, never
   re-pasted (paste-drift is how each new shimmer kept landing at its own speed). `.shimmer` sweeps
   the element's background; `.shimmer-text` clips the sweep to the glyphs alone. Knobs, set by the
   using rule: --shimmer-base (the gradient's resting color — transparent for see-through chrome, an
   opaque surface for pills that must cover content) and --shimmer-mix (accent strength). Pick the
   cadence by the band's LINEAR speed, which is what reads consistent: travel is proportional to
   element width (background-size 250%), and ~2rem/s is the calibrated pace — so narrow chrome
   (a 1.7rem play button) takes the 2.2s default and anything text-width or wider takes
   `.shimmer-slow` (7s). A fast sweep reads as urgency, not progress. */
/* The state longhands are !important: this class composes onto elements whose resting rules set a
   `background:` shorthand at arbitrary specificity (button resets, .overlay-pill, :hover tints) —
   any of which would silently kill the gradient (the bug that ate the play button's shimmer). A
   working cue must win while it's on; resting background-color still shows beneath the sweep. */
.shimmer, .shimmer-text { background-size: 250% 100% !important; animation: bulb-shimmer var(--shimmer-speed, 2.2s) linear infinite !important; }
.shimmer {
  background-image: linear-gradient(100deg, var(--shimmer-base, transparent) 30%, color-mix(in srgb, var(--accent) var(--shimmer-mix, 35%), var(--shimmer-base, transparent)) 50%, var(--shimmer-base, transparent) 70%) !important;
  background-color: var(--shimmer-base, transparent);
}
.shimmer-text {
  /* Shrink-to-fit, so the sweep paces the text's own length, not the container's — on a full-width
     box the band spends most of its run off-glyph (same move as typebulb.com's shimmer.ts). */
  display: inline-block;
  /* background-clip:text paints the glyphs through this element's own box, so the box must be tall
     enough to cover descenders — inheriting the statusbar's line-height:1 clips the "g" in "probing"/
     "working…" at the baseline. A descender-clearing line-height restores the paint area; the button
     centres this box, so the extra height never unbalances the row. */
  line-height: 1.3;
  background-image: linear-gradient(100deg, currentColor 35%, var(--accent) 50%, currentColor 65%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shimmer-slow { --shimmer-speed: 7s; }
@keyframes bulb-shimmer { from { background-position: 250% 0; } to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) {
  .shimmer { animation: none !important; background: color-mix(in srgb, var(--accent) 15%, var(--shimmer-base, transparent)) !important; }
  .shimmer-text { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor; }
}

/* CC mid-turn: the token pill doubles as the working indicator — an accent shimmer
   over the chip, the count frozen until the turn flushes. Passive — driven by the
   live-chain leaf, not a live token stream (the JSONL is flushed in batches, so this
   can sit lit through a multi-minute buffering window — hence shimmer-slow). The sweep
   blends with --panel, not transparent like the launch buttons': statusbar pills must
   stay opaque over the message text the strip lets through. */
.token.busy { border-color: var(--accent); --shimmer-base: var(--panel); --shimmer-mix: 25%; }

/* ── The composer (TB-Agent-Composer.md): the prompt panel under the transcript. In flow (not
   overlaid like the statusbar) — it owns real height and must never cover content. ── */
.composer { position: relative; flex: none; background: var(--bg); padding-inline: 1.75rem; }
/* Keep the composer's rows on the same prose column as the transcript (--content-max, centered like
   .messages) — full-mirror-width input reads badly, the eye has to travel to wrap long lines. The
   1.75rem inline padding above matches .messages' gutter so the two columns align at every width. */
.composer .splitter,
.composer .input-wrap,
.composer-err,
.composer-status,
.composer-queue {
  max-width: var(--content-max);
  margin-inline: auto;
}
/* A 4px drag zone centered on the composer's top border; z-index lifts it above the input-wrap
   border so the line itself is grabbable. */
.splitter {
  position: relative;
  height: 4px;
  margin-top: -2px;
  margin-bottom: -2px;
  z-index: 5;
  cursor: row-resize;
  background: transparent;
  flex-shrink: 0;
}
.splitter:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.input-wrap { position: relative; border-top: 1px solid var(--border); }
.composer-input {
  width: 100%;
  display: block;
  resize: none;               /* height is splitter-driven (inline style), not the native handle */
  border: none;
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: .9rem;
  line-height: 1.45;
  /* Zero horizontal padding so the text sits flush on the --content-max column — its left and right
     edges line up with the transcript prose (which has no inset) and the splitter. Buttons live in
     .composer-actions below, so the text needs no right gutter either. */
  padding: .5rem 0;
}
.composer-input:focus { outline: none; }
.composer-input:disabled { opacity: .6; }
.composer-input::placeholder { color: var(--muted); }
/* The icons.ts shell: one span, sized HERE (never by svg attrs), the material/custom svg filling
   it. 14px default; context classes (.btn-icon, .caret-tri, …) override. */
.icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }
/* The action bar under the textarea, right-aligned: send/stop is the primary CTA; + (new
   conversation) and the clipboard clip are the quiet secondaries to its left. Below the text (not
   overlaid) so the textarea keeps the full prose column. */
.composer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .15rem;
  padding: 0 0 .4rem;    /* flush right, so Send lines up with the copy pill / statusbar pills */
}
.composer-act, .composer-new, .composer-clip {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  appearance: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s, transform .08s;
}
/* Send/stop are CIRCLE GLYPHS (play_circle / stop_circle — typebulb.com's play look): the icon IS
   the button, no painted disc. One size for all three — the circles' diameter and the paperclip's
   ink height are both 800/960 of the material viewBox, so equal boxes = equal visual height. */
.composer-act .icon, .composer-new .icon, .composer-clip .icon { width: 24px; height: 24px; }
.composer-act { background: transparent; }
.composer-act.send { color: var(--accent); }
.composer-act.send:hover:not(:disabled) { color: color-mix(in srgb, var(--accent) 80%, white); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.composer-act.stop { color: var(--err); }
.composer-act.stop:hover { color: color-mix(in srgb, var(--err) 80%, white); background: color-mix(in srgb, var(--err) 10%, transparent); }
.composer-act:active, .composer-new:active, .composer-clip:active { transform: scale(.94); }
.composer-act:disabled, .composer-new:disabled, .composer-clip:disabled { opacity: .5; cursor: default; }
.composer-new {
  background: transparent;
  color: var(--muted);
}
.composer-new:hover:not(:disabled) { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.composer-clip {
  background: transparent;
  color: var(--muted);
}
.composer-clip:hover:not(:disabled) { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Zero horizontal padding (like .composer-input): these rows sit flush on the content column. */
.composer-err { padding: .3rem 0; color: var(--err); font-size: .78rem; }
/* The ambient status line (TB-Agent-Composer-Toolkit.md Piece 2): one slim kind-tinted row above the
   input — a retry/compaction in progress, an extension notice, a recipe's transient result. */
.composer-status { padding: .3rem 0; font-size: .78rem; color: var(--accent); }
.composer-status.warning { color: var(--warn); }
.composer-status.error { color: var(--err); }
/* The pending-queue strip (parity #2): queued steer/follow-up texts above the input. Block rows,
   not a flex column — .queue-row's overflow:hidden would zero flex min-heights (the .dlg-opts
   lesson). */
.composer-queue { padding: .15rem 0 0; }
.queue-row { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-tag { color: var(--accent); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .5rem; }
/* The @-file-mention popup, anchored above the composer. Tall enough for the pickers' full row
   caps (10 files / 12 commands); the vh guard + arrow-key scroll-into-view cover short windows. */
.at-popup {
  position: absolute;
  bottom: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-width: 600px;
  margin-inline: auto;
  max-height: min(24rem, 50vh);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  padding: .25rem;
  z-index: 10;
}
.at-row {
  padding: .35rem .55rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-row.active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.at-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* The '/' palette rides the same popup chrome; its rows pair a command with a muted description. */
.slash-desc { color: var(--muted); font-size: .74rem; margin-left: .6rem; }
/* The composer's dialog fields (TB-Agent-Composer-Toolkit.md Piece 3), shared by both homes: the
   trust-modal chrome (server dialogs, confirms) and the anchored .dlg-popup (local select/input).
   Select options reuse .at-row inside a scroll box. */
/* Block, NOT flex: .at-row's overflow:hidden zeroes flex min-heights, squashing a long option
   list (pi can return the whole OpenRouter catalog); block rows keep their natural height and
   the box scrolls. */
.dlg-opts {
  max-height: 40vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: .25rem;
}
.dlg-input, .dlg-editor {
  font: inherit; font-size: .85rem; color: var(--fg); background: transparent;
  border: 1px solid var(--border); border-radius: 7px; padding: .4rem .6rem; width: 100%;
}
.dlg-input:focus, .dlg-editor:focus { outline: none; border-color: var(--accent); }
.dlg-editor { min-height: 8rem; resize: vertical; }
.dlg-filter { margin-top: .4rem; }
/* A local (recipe) select/input rides the @-popup shell — the gesture register, not the modal's
   (composer.ts #dlgAnchored). The popup itself stops scrolling (its .dlg-opts scrolls instead, so
   the filter stays pinned at the anchored bottom edge); the opts box drops its border, the popup
   frame already provides one. The catcher is the invisible click-away target under the popup. */
.dlg-popup { max-height: none; overflow: visible; }
.dlg-popup .dlg-opts { border: none; padding: 0; }
.dlg-label { font-size: .78rem; color: var(--muted); padding: .1rem .25rem .3rem; }
.dlg-catcher { position: fixed; inset: 0; z-index: 9; }
.at-empty { padding: .6rem; color: var(--muted); font-size: .85rem; text-align: center; }
/* The driver's in-flight assistant message — visibly provisional next to landed bubbles; the
   durable row replaces it when the entry hits the transcript. */
.bubble.draft { opacity: .9; }
.draft-wait { color: var(--muted); }
/* Pasted-image thumbnails under a user message that @-mentions .typebulb/paste files. */
.paste-thumbs { margin-top: .4rem; }
.paste-thumb { display: block; max-width: min(360px, 100%); max-height: 240px; margin-top: .3rem; border: 1px solid var(--border); border-radius: 8px; }

/* Session list — shares the popover chrome (.picker above); these are
   just its own dimensions. */
.picker { width: min(440px, calc(100vw - 2rem)); }
/* The filter (.bulb-filter-control) pins at the bottom — the popover's anchored edge, so it never
   jumps as the filtered list changes height; the row list scrolls inside the capped box, resting at
   its end (newest-at-bottom) — same shape as the launcher's .servers-pop / .bulb-list. */
.picker-list { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
/* Positioned wrapper around just the list (not the filter) so the hover-peek card anchors to the
   list's bottom edge, sitting above the filter input. */
.picker-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.picker-empty { padding: .8rem; color: var(--muted); font-size: .85rem; text-align: center; }
.picker-row {
  display: flex;
  flex-direction: column;
  /* flex:none — the explicit min-height below replaces flexbox's implicit min-height:auto floor,
     which would otherwise let an overflowing list squash rows below their content (snippet rows
     rendered as overlapping text). The list scrolls; rows never compress. */
  flex: none;
  gap: .2rem;
  /* min-height, not height: a full-text result row grows for its snippet line. */
  padding: .35rem .55rem;
  min-height: var(--menu-row-h);
  box-sizing: border-box;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
}
.picker-row-main { display: flex; gap: .6rem; align-items: baseline; }
.picker:focus { outline: none; }   /* the list owns its own highlight; no focus ring */
.picker-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Keyboard cursor (arrow keys / hover) — same borderless tint as the launcher's .server-row.active. */
.picker-row.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* The attached session — a leading accent dot in its own gutter slot, reserved (transparent) on
   every row so titles align whether or not it's shown, and filled only on the attached row so it
   reads as "you are here" even when the cursor has moved off. */
.picker-dot {
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
}
.picker-row.current .picker-dot { background: var(--accent); }
.picker-preview {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg);
}
.picker-time {
  color: var(--muted);
  font-size: .72rem;
  min-width: 2.6rem; text-align: right;
}
/* Unread cue (TB-Agent-Mirror-Ready.md): the row's time turns the launcher's running-:port green
   (--fold-marker) when the session changed since the mirror opened and hasn't been viewed. */
.picker-time.unseen { color: var(--fold-marker); }
.picker-hits { color: var(--muted); font-size: .72rem; white-space: nowrap; }
/* Full-text result context: first matching turn, indented past the dot gutter into the title column. */
.picker-snippet {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  margin-left: calc(7px + .6rem);
  overflow-wrap: anywhere;
}
.picker-mark {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 2px;
  color: var(--fg);
}
/* Hover-peek (TB-Agent-Mirror-Ready.md): the session's last output, overlaid over the TOP of the
   list — not a floating card but part of the menu, opaque over the rows it covers and set off from
   the rows below by one thick divider. Stops at the left edge of the time column (right), so the
   elapsed column stays an uninterrupted strip. The list rests newest-at-bottom, so a top overlay
   rarely sits on the row being hovered. Out of flow (no reflow); pointer-events:none. */
.picker-peek {
  position: absolute;
  top: 0; left: 0; right: 3.4rem;
  z-index: 5;
  max-height: 18em;
  overflow: hidden;
  padding: .5rem .6rem .6rem;
  border-radius: 8px 8px 0 0;   /* top rounded to match the menu; bottom square where it meets the rows */
  /* One veil step over the opaque panel — the mirror's nested-panel shade (a hair off the menu bg,
     still opaque over the rows it covers). */
  background: linear-gradient(var(--veil), var(--veil)), var(--panel);
  border-bottom: 3px solid color-mix(in srgb, var(--fg) 35%, transparent);
  color: var(--fg);
  font-size: .8rem; line-height: 1.5;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.picker-peek.muted { color: var(--muted); font-style: italic; }

/* Agent switcher (TB-Agent-Switcher.md) — reuses the .picker popover + rows; just its own width and
   the no-key entry form. The active model is marked with .picker-row.current (the accent dot), like
   the attached session; the "active" tag rides .picker-time's muted right-aligned slot. */
.model-picker { width: min(380px, calc(100vw - 2rem)); }
.model-err { color: var(--danger, #f87171); font-size: .76rem; padding: .3rem .55rem; }
/* Key-entry form: the popover flips to this in place of the list when no key is set yet. */
.key-entry { gap: .5rem; padding: .7rem; }
.key-entry-head { font-size: .85rem; color: var(--fg); }
.key-entry .bulb-filter { width: 100%; }
.key-entry-acts { display: flex; gap: .4rem; justify-content: flex-end; }
.key-entry-note { font-size: .72rem; color: var(--muted); line-height: 1.4; }

/* Agent switcher watchdog (TB-Agent-Switcher.md). TWO tiers, both surfaced live while the menu is
   closed: RED when an Anthropic model is riding the OpenRouter route (the $-per-turn Opus footgun), and
   AMBER when the route served a turn uncached (the cache flip — a cost leak, pennies-scale, so quieter
   than red so the red stays meaningful). The latch outranks the .on accent (equal specificity → source
   order wins): coloured border + text, the bar's loudest states. */
.pill.danger, .pill.danger:hover { border-color: var(--err); color: var(--err); }
.pill.warn, .pill.warn:hover { border-color: var(--warn); color: var(--warn); }
/* The watchdog banner: rendered by Root just above the statusbar, anchored to the .app box. Centered,
   capped width, opaque so it reads over the message text the strip lets through. Only present when a
   tier is live, so it never costs layout in the common case. .danger is red + a glow ring (loud);
   .warn is amber, no ring (a quieter cost cue). */
.model-banner {
  position: absolute;
  left: 0; right: 0; bottom: 2.6rem;
  margin: 0 auto;
  max-width: min(640px, calc(100vw - 2rem));
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-size: .8rem;
  line-height: 1.4;
}
.model-banner.danger { border: 1px solid var(--err); box-shadow: 0 0 0 2px color-mix(in srgb, var(--err) 22%, transparent), 0 4px 14px rgba(0,0,0,.25); }
.model-banner.warn { border: 1px solid var(--warn); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.model-banner-icon { flex: none; }
.model-banner-text { color: var(--fg); }
/* L2 predictor: a status line at the top of the model popover saying what the next send will bill.
   Muted by default; red when the live model is the Anthropic-via-OpenRouter footgun. */
/* The model menu's top section: ONE row — the route headline (ellipsizing) + the reasoning dial pinned
   right. Height is one model-row minus its own border, so the row + border + the popover gap to the list
   equal one list-row pitch — the section subtracts a whole row, never a fraction, so no model is clipped
   under the scroll. (Eyeball-tune the height; exact pixel math isn't worth it.) The headline carries only
   what the user cares about; reroute/uncached mechanics live in its title, not on the line. */
.model-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex: none;
  height: calc(var(--menu-row-h) - 1px); box-sizing: border-box;
  /* left padding lines "More info" up with the model titles (row padding .55rem + dot 7px + gap .6rem);
     right padding lines the dial up with the per-row "probe" column (row padding .55rem + list
     padding-right 4px + scrollbar ~15px — the scrollbar is effectively always present, so it's accounted
     for unconditionally; tweak the 15px by eye). */
  padding: 0 calc(.55rem + 4px + 15px) 0 calc(.55rem + 7px + .6rem);
  border-bottom: 1px solid var(--border);
  font-size: .74rem; line-height: 1.35; color: var(--muted);  /* line-height clears "g"/"y" descenders */
}
/* The external-override warning is the one case that still puts words on this row. */
.model-route { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-route.warn { color: var(--warn); }
/* "More info" — a quiet text link (not a pill); drills into the routing/reasoning explainer (diag chrome). */
.model-info-toggle {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; font-size: .74rem; color: var(--accent); cursor: pointer; flex: none;
}
.model-info-toggle:hover { text-decoration: underline; }
/* The reasoning label sits a clear gap to the left of the dial; the pair hugs the right edge. */
.reasoning-ctl { display: flex; align-items: center; gap: .5rem; flex: none; }
.reasoning-label { flex: none; }

/* The reasoning dial — a Min/Low/Med/High native select styled as an accent pill (a full combobox is
   over-powered for four fixed levels), pinned to the right of the headline so the dropdown is the row's
   last element. */
.reasoning-select {
  appearance: none; margin: 0; font: inherit; font-size: .72rem;
  width: 4rem;                          /* match the probe button so the dial shares its column */
  /* centred text (symmetric padding) so the label sits like the probe button's centred caption; the
     chevron still rides the right padding zone. */
  height: 1.5rem; padding: 0 1.1rem; text-align: center; text-align-last: center; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  /* OPAQUE (mixed over --panel, not transparent) so the OPEN native option list matches the CLOSED
     pill — a transparent fill left the open list on the browser's default bg, a jarring mismatch.
     The option rows reuse the same --rs-bg so the two states are identical. */
  --rs-bg: color-mix(in srgb, var(--accent) 14%, var(--panel));
  background-color: var(--rs-bg);
  color: var(--accent); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237aa2fa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center;
}
.reasoning-select option { background-color: var(--rs-bg); color: var(--fg); }
.reasoning-select:hover { border-color: var(--accent); }
.reasoning-select:focus { outline: none; border-color: var(--accent); }

/* The Anthropic brand glyph stands in for the word on the default pill (same square footprint as the
   prose toggle). currentColor tracks the pill's muted→accent state; grayscale at rest like the monkey. */
.anthropic-glyph { display: block; }
.pill.glyph .anthropic-glyph { filter: grayscale(1); opacity: .8; }
.pill.glyph:hover .anthropic-glyph { filter: none; opacity: 1; }

.model-row .picker-row-main { align-items: center; }
/* Hold the shared --menu-row-h pitch (TB-Agent-Mirror.md: "rows must match pitch exactly or the
   side-by-side menus read as two designs"). The trailing control is the tallest per-row element; like
   the launcher's .server-row, trim the inherited .picker-row vertical padding so it stays under the
   --menu-row-h floor and that floor — not the padded content — governs the row height. The highlight
   still fills the full 29px (it paints the row box, not the padding). */
.model-row { padding-top: .05rem; padding-bottom: .05rem; }
/* The Anthropic (default) row is its own group below the OpenRouter models — it's the distinct "off the
   proxy, back to your subscription" choice, not just another model. Marked with a subtle background wash
   rather than a divider line: a line fought the rows' rounded corners + inset highlights (poking corners,
   uneven gaps), whereas the wash inherits the row's own 6px radius, so it reads as a contained band that
   sits naturally. Zero layout impact; lower specificity than :hover/.active, so the row still gives its
   normal accent feedback on top. */
.model-default-row { background: color-mix(in srgb, var(--fg) 6%, transparent); }
/* Right-aligned trailing cluster: the green `active` marker (only on the current row) then the
   fixed-width status control. The status control is rightmost + fixed width, so its column never moves
   as rows probe — least musical chairs. */
.model-trailing { flex: none; display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
/* ONE button look AND width shared by every trailing pill — probe, probing, the measured status, and
   the active marker — so they all line up and a transition only ever changes colour/text, never the
   shape. The width is snug to the widest short label ("uncached"); the labels are kept terse precisely
   so this stays tight rather than gutter-heavy. */
.model-btn {
  appearance: none; margin: 0; font: inherit; font-size: .72rem;
  width: 4rem; height: 1.5rem; padding: 0 .25rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  white-space: nowrap; cursor: pointer;
}
.model-status.probe:hover { color: var(--accent); border-color: var(--accent); }
/* Measured states. cached = the blue accent (the positive "good route" cue); uncached/unavailable =
   red (the states that bite on cost); cache-unconfirmed = neutral. All reuse existing theme colours. */
.model-status.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.model-status.bad { color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, transparent); background: color-mix(in srgb, var(--err) 12%, transparent); }
.model-status.warn { color: var(--muted); border-color: var(--border); }
.model-status.ok:hover, .model-status.bad:hover, .model-status.warn:hover { filter: brightness(1.12); text-decoration: underline; }
/* Same pill as every other state — only the text/colour change across probe → probing → result, never
   the box. Non-interactive (cursor default); the accent-tinted border holds against the row's accent
   hover tint, where the faint default --border washed out. */
.model-status.probing { color: var(--muted); border-color: color-mix(in srgb, var(--accent) 35%, transparent); cursor: default; }
/* The active marker — the lime/green live-axis colour (--fold-marker), matching the launcher's running
   :port. A cue, not a control: no hover, default cursor. */
.model-active { color: var(--fold-marker); border-color: color-mix(in srgb, var(--fold-marker) 50%, transparent); background: color-mix(in srgb, var(--fold-marker) 12%, transparent); cursor: default; }
/* Don't double-mark the current row: the green `active` pill is the marker now, so drop the accent dot
   fill (keep the gutter transparent for name alignment). */
.model-picker .picker-row.current .picker-dot { background: transparent; }

/* Drill-in surface — the probe diagnostics and the "More info" routing/reasoning explainer (the
   launcher's logs analogue). Flips the whole popover; reuses the console head/back chrome. Held at the
   FULL menu height (not content-sized) so drilling in from the list never resizes the popover — the body
   fills and scrolls if the content is long, leaving quiet space if it's short. */
.model-picker.diag-mode { padding: 0; gap: 0; height: var(--menu-h); }
.model-picker.diag-mode .diag-body { flex: 1; min-height: 0; overflow-y: auto; }
.model-picker.diag-mode:focus { outline: none; }
.diag-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.diag-head-acts { display: flex; gap: .4rem; align-items: center; flex: none; }
.diag-back:disabled { opacity: .5; cursor: default; }
/* line-height clears descenders: the popover inherits the statusbar's line-height:1, and overflow:hidden
   would otherwise crop the tails of "g"/"y" (same root cause as .shimmer-text's fix). */
.diag-name { min-width: 0; color: var(--fg); font-size: .8rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diag-back { font: inherit; font-size: .76rem; appearance: none; margin: 0; padding: .15rem .5rem; border-radius: 5px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; white-space: nowrap; }
.diag-back:hover { color: var(--accent); border-color: var(--accent); }
.diag-body { display: flex; flex-direction: column; gap: .4rem; padding: .6rem; background: var(--bg); }
.diag-line { font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
/* Hanging-indent bullet under a lead-in line — wrapped lines align past the “• ”. */
.diag-bullet { padding-left: 1rem; text-indent: -0.55rem; }
.diag-line.ok { color: var(--diff-add); }
.diag-line.bad { color: var(--err); }
.diag-line.warn { color: var(--fg); }
.diag-line.muted { color: var(--muted); }
.diag-line.small { font-size: .72rem; }

/* Running-breakouts list — shares the popover chrome (.servers-pop above); its own dimensions +
   per-row layout: the play/stop button + name read together on the left (▶/■ Title, name flex:1),
   and the metadata/controls form a right-aligned cluster of fixed-width columns (logs · trust ·
   time/port) that line up row-to-row — right-anchored, so the rightmost (time/port) always aligns and
   the rest stack inward (logs and time/port share a width; trust is wider, to fit "restricted"). The
   filter pins at the bottom and the list scrolls inside (see .bulb-list). */
.servers-pop { width: min(560px, calc(100vw - 2rem)); }
.server-row {
  /* Subgrid: all rows share ONE set of column tracks (defined on .bulb-list). A per-row grid sizes
     its columns independently — which is exactly what broke alignment (a stopped row with no
     logs/port sized its tracks differently and its trust toggle drifted right). Spanning the parent's
     tracks instead makes trust/logs/time line up row-to-row, while the parent's auto columns size to
     the widest content so the cluster stays tight (no reserved min-width slack). Absent trust/logs
     render an empty cell that still holds its column. */
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  /* Inset rounded highlight, matching the session picker. The background is the subgrid track area
     (not bled out to the edge — that ran it under the scrollbar on the right while staying clear on
     the left, an asymmetry). Text gets its breathing room inside the highlight via end-item margins
     (.server-stop/.bulb-launch on the left, .server-port/.bulb-time on the right) rather than row
     padding, which would shift the subgrid tracks and break alignment. */
  padding: .05rem 0;
  min-height: var(--menu-row-h);
  border-radius: 6px;
  font-size: .85rem;
}
.server-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Keyboard-highlighted row (arrow-key cursor) — a touch stronger than hover so it stands out. */
.server-row.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Breakout spotlight (bulbsPill.ts): the new bulb's row stays bright while the rest dim, until the
   menu closes or that row is hovered. The transition eases the dim in and back out. */
.server-row { transition: opacity .3s ease; }
.server-row.dimmed { opacity: .3; }
.server-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--accent); text-decoration: none; cursor: pointer;
}
.server-name:hover { text-decoration: underline; }
/* Port links to the running server (localhost:<port>) — painted the bright fold-marker green
   (lime in dark, deep green in light), not the name's blue accent: the :port sits at the row's
   far right, away from the play button, so making it the most prominent thing in the row lets the
   eye snap to it the moment a just-launched row lands. The green also distinguishes "open the live
   app" (port) from "open the source" (the blue name), and echoes the fold-marker on collapsed bulbs. */
.server-port { color: var(--fold-marker); font-size: .76rem; font-variant-numeric: tabular-nums; text-decoration: none; text-align: right; margin-right: .4rem; }
a.server-port:hover { text-decoration: underline; }
/* Logs reads like a link (flips to this server's console), not a button. */
.server-logs { color: var(--muted); font-size: .76rem; text-decoration: none; cursor: pointer; margin-left: .5rem; }
.server-logs:hover, .server-logs.on { color: var(--accent); text-decoration: underline; }
/* Launcher filter box — pinned above the list; type to narrow (matches name + path). The control
   wrapper pins to the top and anchors the clear (×) at the far right (position:relative + the
   input's right padding reserves its room). */
.bulb-filter-control { position: relative; flex: none; margin-top: .35rem; }
.bulb-filter {
  font: inherit;
  font-size: .82rem;
  width: 100%;
  box-sizing: border-box;
  padding: .35rem 1.7rem .35rem .5rem;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
}
.bulb-filter::placeholder { color: var(--muted); }
.bulb-filter:focus { outline: none; border-color: var(--accent); }
/* Clear (×) — only rendered when the filter is non-empty; wipes it and refocuses the box. */
.bulb-filter-clear {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 .3rem; border-radius: 4px;
}
.bulb-filter-clear:hover { color: var(--accent); }
/* Filter-mode toggle (full-text search) — inset at the input's right edge; the clear × shifts
   inward beside it. Both comboboxes render it (SearchComboboxPill's modeToggle). */
.bulb-filter-control.has-trailing .bulb-filter { padding-right: 3.8rem; }
.bulb-filter-control.has-trailing .bulb-filter-clear { right: 2.5rem; }
.bulb-filter-mode {
  /* Stretches flush to the input's top/right/bottom, inside its 1px border; the right corners
     match the input's 6px radius so the latched fill reads as part of the box. */
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-size: .8rem; line-height: 1; padding: 0 .45rem;
  border-radius: 0 5px 5px 0;
}
/* Same state cue as the prose pill's glyph: the emoji can't take currentColor, so it goes
   grayscale at rest, color while hovered or on — filtered on the inner span, never the button. */
.bulb-filter-mode .glyph-img { filter: grayscale(1); opacity: .75; }
.bulb-filter-mode:hover .glyph-img, .bulb-filter-mode.on .glyph-img { filter: none; opacity: 1; }
/* Latched: a --panel fill — the popover's own surface, one step off the input's --bg. */
.bulb-filter-mode.on { background: var(--panel); }
/* Scrolls within the fixed-height popover so the filter stays put and the box never grows. */
/* The shared grid for the launcher rows: each .server-row is a subgrid spanning these tracks, so
   columns line up row-to-row. auto cols size to their widest content (tight, no slack); 1fr is the
   name. A small right padding keeps the selected-row highlight off the scrollbar. */
/* grid-auto-rows: max-content — the grid twin of .picker-row's flex:none: when the list overflows
   the popover cap, plain auto rows compress to each row's min-height contribution, so a full-text
   row's snippet line bleeds under the next row as overlapping text. max-content tracks never
   compress; the list scrolls, rows keep their content height. */
.bulb-list { display: grid; grid-template-columns: auto 1fr auto auto auto auto; grid-auto-rows: max-content; column-gap: .6rem; row-gap: .15rem; align-items: center; align-content: start; padding-right: 4px; flex: 1; min-height: 0; overflow-y: auto; }
/* The scope column (TB-Batch.md Invariant 7): a seventh track heading the control cluster (before
   trust — a launch scope is an execution concern, like a trust tier), present only while some row
   carries a scope (bulbsPill.ts anyScope — rows emit a matching cell, spacer included). The B
   affordance keeps it one --pill-h square. */
.bulb-list.has-scope { grid-template-columns: auto 1fr auto auto auto auto auto; }
/* A stopped bulb's name isn't a link (no running URL), so it stays plain foreground. */
.server-name.stopped { color: var(--fg); }
/* Downloaded-bulb rows (TB-Agent-Mirror.md): the user link — the folder/user slug (`samples`) in
   the logs-link register — marks the category and opens the bulb's published page. A remote
   (not-yet-downloaded) row's name is additionally muted and inert (no file to open), and its
   time column stays empty (no mtime to show). */
.server-name.remote { cursor: default; }
.server-name.remote:hover { text-decoration: none; }
.sample-link { color: var(--muted); font-size: .76rem; text-decoration: none; cursor: pointer; flex: none; }
.sample-link:hover { color: var(--accent); text-decoration: underline; }
/* The batch affordance (bulbsPill.ts scopeCell, TB-Batch.md Invariant 7): one B glyph per row —
   the row shows THAT a scope applies, the tooltip and click-menu name it. Dim = batches exist but
   launch is unscoped; lit (.on) = play launches scoped (newest default) or running scoped.
   Static (running) keeps the lit look without the hand cursor. */
/* Square (its one glyph has no text pill's width to earn) and otherwise typography-free: the shared
   pill box, font and trim, so its B is the same size and sits on the same baseline as the trust
   switch beside it. Its own font-family was the bug — a monospace cap is a different size from a
   Segoe cap at one font-size, which reads as two badly-aligned widgets. */
.batch-b { font-size: var(--pill-font); color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 5px; width: var(--pill-h); height: var(--pill-h); padding: 0; cursor: pointer; }
.batch-b.on { color: var(--accent); border-color: var(--accent); }
.batch-b.static { cursor: default; }
/* The B's menu rides the composer popup register (.at-popup/.at-row/.dlg-catcher — one mini-menu
   UI across the mirror). Only the positioning is local: fixed coords (inline style, measured from
   the B at open) so the scrolling list can't clip it, sized to its content instead of the
   composer's full-width anchor. */
.at-popup.batch-pop { position: fixed; left: auto; right: auto; bottom: auto; width: max-content; min-width: 7rem; margin-inline: 0; }
/* 'unscoped' is the escape hatch, not a batch — a divider + muted italic set it apart from the list. */
.batch-pop .at-row.unscoped { color: var(--muted); font-style: italic; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; margin-top: .15rem; padding-top: .4rem; }
/* A remote pull's visible failure (bulbsPill.ts pullErrors) — the sample-link register, error-tinted. */
.pull-error { color: var(--err); font-size: .76rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The remote fold (bulbsPill.ts groupRow / fold-row): the header and the remote rows within share
   one veil step over the menu's panel bg (the picker-peek shade) as ONE contiguous band — each
   row's ::before bridges the grid row-gap up to the row above, junction corners square off, and
   only the band's outer corners round (the header's top; the last row's bottom, via :has). The
   accent label marks the header. Single-class selectors on purpose: .server-row:hover/.active
   outrank them, so the highlight tints still win. */
.sample-group { cursor: pointer; color: var(--muted); }
.sample-group, .fold-row { background: linear-gradient(var(--veil), var(--veil)), var(--panel); }
.sample-group.open { border-radius: 6px 6px 0 0; }
.fold-row { position: relative; border-radius: 0; }
.fold-row::before {
  content: ''; position: absolute; left: 0; right: 0; top: -.15rem; height: .15rem;
  background: linear-gradient(var(--veil), var(--veil)), var(--panel);
}
.fold-row:not(:has(+ .fold-row)) { border-radius: 0 0 6px 6px; }
.sample-group .caret-tri { justify-self: center; }
.sample-group-label { grid-column: 2 / -1; color: var(--accent); }
/* The 1fr name column: name + (in full-text mode) its hit count read together, the badge
   right-aligned at the column's end by the name's flex:1 — the session row's preview/hits layout. */
.bulb-name-cell { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
/* Full-text snippet in the launcher: a second internal row of the row's subgrid, aligned under the
   name column (the session picker indents past its dot gutter instead — override that margin). */
.bulb-list .picker-snippet { grid-column: 2 / -1; margin: 0 .4rem .2rem 0; }
.bulb-time { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; margin-right: .4rem; }
/* The row's chrome buttons share one reset; sizing + colour differ below. Play/stop are round icon
   buttons (friendlier, space-economic) and stay flex — a replaced SVG mis-seats under the
   word-pill trim, the .pill.glyph case; the trust switch is a word, so it seats via the shared
   recipe. Logs is a link, not a button (see .server-logs above), so it's not in this group. */
.server-stop, .bulb-launch, .trust-toggle {
  font: inherit; appearance: none; margin: 0; cursor: pointer; box-sizing: border-box;
  background: transparent; border: 1px solid var(--border); border-radius: 5px;
  height: 1.7rem;
}
/* Shorter than the icon buttons: a bordered text pill at full row height reads as cramped, where
   the round play/stop icons are meant to fill it. The shared pill box + font, not a bespoke pair —
   its own .76rem/1.45rem seated the word a full 1px below every statusbar pill, which is exactly how
   this drifts (measured: a per-control size is a per-control seating). */
.trust-toggle { font-size: var(--pill-font); height: var(--pill-h); padding: 0 .5rem; color: var(--muted); justify-self: center; }
.trust-toggle:hover, .trust-toggle.on { color: var(--accent); border-color: var(--accent); }
.server-stop, .bulb-launch { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; padding: 0; border-radius: 50%; margin-left: .4rem; }
.btn-icon { width: 16px; height: 16px; }
/* A stopped bulb's play button is dormant — the title is the primary launch target — so it's
   hidden until the row is hovered or keyboard-selected. visibility (not display) reserves its slot,
   so the name column doesn't shift when it appears. Painted the fold-marker green, matching the
   :port link: green is the live-app axis (play to launch → :port to open it), distinct from the
   blue source/name. The green even travels left→right as a bulb goes stopped→running. */
.bulb-launch { color: var(--fold-marker); visibility: hidden; }
/* No optical nudge on the play glyph, deliberately: Material's play_arrow already carries one (its
   path spans 320→760 in a 0→960 frame — ~1px right at icon size, compensating a right triangle's
   left-leaning mass). Our own translateX(1px) stacked a second correction and measured 2px right of
   the button's centre. Any glyph that reads off-centre here is the frame's business, not the app's. */
.server-row:hover .bulb-launch, .server-row.active .bulb-launch { visibility: visible; }
.bulb-launch:hover { border-color: var(--fold-marker); background: color-mix(in srgb, var(--fold-marker) 12%, transparent); }
/* Launching: stays visible (hover-independent) and shimmers until the row flips to a stop button,
   so the ~2s wait reads as "working" rather than a dead click. Transient — driven by the in-memory
   launching set, never persisted. */
.bulb-launch.launching { visibility: visible; border-color: var(--fold-marker); }
.server-stop { color: var(--muted); }
.server-stop:hover { color: var(--err); border-color: var(--err); }
/* push/pull verbs (TB-Push-Pull.md, Mirror surface): borderless quiet icons in one cell —
   frequency earns mutedness, so like the play button they're hover/keyboard-revealed
   (visibility reserves the slot; columns never shift). Accent on hover marks the live control. */
.sync-cell { display: inline-flex; gap: .15rem; justify-self: center; }
.sync-btn {
  font: inherit; appearance: none; margin: 0; padding: 0 .1rem; cursor: pointer;
  background: transparent; border: none; color: var(--muted);
  display: inline-flex; align-items: center; visibility: hidden;
}
.server-row:hover .sync-btn, .server-row.active .sync-btn { visibility: visible; }
.sync-btn:hover { color: var(--accent); }
/* In-flight: stays visible (hover-independent) and shimmers, same contract as .bulb-launch.launching;
   the ✓ beat after success likewise holds its slot so the arrow's return doesn't shift columns. */
.sync-btn.busy, .sync-btn.done { visibility: visible; }
.sync-btn.done { color: var(--fold-marker); }
.btn-icon-sm { width: 13px; height: 13px; }
/* Elevation prompt (VS-Code-Workspace-Trust style) — a modal over the whole view, since a
   denied capability is worth interrupting for. Backdrop dims; the card holds the choice. */
.trust-back {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.trust-modal {
  width: min(420px, 100%);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem;
}
.trust-modal-h { font-size: 1rem; font-weight: 600; color: var(--fg); }
.trust-modal-b { font-size: .85rem; color: var(--fg); line-height: 1.45; }
.trust-modal-warn { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.trust-modal-acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
.trust-no, .trust-yes {
  font: inherit; font-size: .82rem; appearance: none; margin: 0; cursor: pointer;
  padding: .35rem .8rem; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--fg);
}
.trust-no:hover { border-color: var(--fg); }
.trust-yes {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.trust-yes:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Drilled-in streaming console for one running server. It takes over the whole bulbs
   popover (the list flips to it; ← back flips home), so it's wider than the list and its
   body fills the popover's height. overflow:hidden lets the rounded popover border clip the
   square head/body; the body scrolls internally. */
.servers-pop.log-mode {
  padding: 0;
  /* The one fixed-height surface: a console wants its full frame regardless of how little it has
     logged yet — a height that tracked the log would grow line by line. */
  height: var(--menu-h);
}
.servers-pop.log-mode:focus { outline: none; }
.bulb-log-head {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .3rem .5rem; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.bulb-log-back {
  font: inherit; font-size: .76rem; appearance: none; margin: 0;
  padding: .15rem .5rem; border-radius: 5px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.bulb-log-back:hover { color: var(--accent); border-color: var(--accent); }
.bulb-log-name { min-width: 0; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulb-log-body {
  flex: 1; min-height: 0;
  margin: 0; padding: .5rem .6rem;
  overflow: auto;                                  /* top-anchored normal flow — output reads top→down */
  background: var(--bg);
  font: .72rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fg);
}
.bulb-log-text { white-space: pre-wrap; word-break: break-word; }

/* ── Git diff pill + menu (TB-Agent-Mirror.md): a `± N` chip (custom two-color glyph, icons.ts, +
   changed-file count) that exists only when the tree is dirty — presence is the signal, so the glyph
   keeps its red/green at rest (no grayscale: the chip can't be "idle", a clean tree removes it) and
   the accent border stays reserved for latched, like every pill. Picking a menu row swaps the
   transcript for a full-context unified diff. Flex like the square glyph pills (an svg mis-seats
   under the word-pill text-box trim), width freed for the count. ── */
/* Three classes to out-specify .pill.glyph's fixed square (width: var(--pill-h); padding: 0) —
   this is the one glyph pill that carries content beside its icon, so its width must be free. */
.pill.glyph.gitdiff-pill { width: auto; padding: 0 .45rem; gap: .3rem; }
/* 2:3, the cropped viewBox's aspect — a square box would re-add the side margins. */
.gitdiff-pill .icon { width: 8px; height: 12px; }
.gitdiff-count { font-size: var(--pill-font); font-variant-numeric: tabular-nums; }
.gitdiff-pop { width: min(480px, calc(100vw - 2rem)); }
.gitdiff-list { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.gitdiff-row { display: flex; align-items: center; gap: .55rem; flex: none; min-height: var(--menu-row-h); padding: .05rem .45rem; border-radius: 6px; font-size: .85rem; cursor: pointer; }
.gitdiff-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gitdiff-row.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.gitdiff-row.viewing .gitdiff-path { color: var(--accent); }
/* One status letter, VS Code's palette: modified/renamed amber, added/untracked green, deleted red. */
.gitdiff-status { flex: none; width: 1rem; text-align: center; font: 600 .74rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); }
.gitdiff-status.s-M, .gitdiff-status.s-R { color: var(--warn); }
.gitdiff-status.s-A, .gitdiff-status.s-U { color: var(--diff-add); }
.gitdiff-status.s-D { color: var(--err); }
.gitdiff-path { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gitdiff-counts { flex: none; display: inline-flex; gap: .35rem; font-size: .72rem; font-variant-numeric: tabular-nums; }
.gitdiff-counts .count-add { color: var(--diff-add); }
.gitdiff-counts .count-del { color: var(--err); }
/* The pill's viewing form: the doc's identity in place of the icon+count — status letter, path,
   ±counts, × (the doc itself is chrome-free). Width capped so a deep path can't crowd the cluster;
   rtl clip keeps the path's tail — the filename — visible, full path in the title. */
.pill.glyph.gitdiff-pill.viewing { max-width: min(30rem, 45vw); gap: .45rem; padding: 0 .35rem 0 .5rem; }
/* Same text seating as the word pills (.pill's text-box note): .pill.glyph opts out of the trim
   (right for pure glyphs, low for letters), and the viewing form keeps flex for the path's
   ellipsis — so the trim rides each text item instead of the button. Flex items are block
   containers, so text-box applies; the × icon stays untrimmed (symmetric, flex-exact). */
.gitdiff-pill.viewing :is(.gitdiff-status, .gitdiff-doc-path, .gitdiff-counts span) { text-box: trim-both cap alphabetic; }
.gitdiff-doc-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-size: var(--pill-font); color: var(--accent); }
.gitdiff-doc-path:hover { text-decoration: underline; }
.gitdiff-close { flex: none; display: inline-flex; padding: 0 .15rem; color: var(--muted); }
.gitdiff-close .icon { width: 10px; height: 10px; }
.gitdiff-close:hover { color: var(--accent); }
/* Doc open ⇒ the transcript-scoped pills hide: prose toggle, model switcher, session picker all act
   on the conversation, which isn't on screen (the token pill stays — its shimmer says the live diff
   may still grow). display only, never unmount — the model pill's superSelect must keep its mount. */
.statusbar-actions.doc-open :is(.prose-pill, .model-wrap, .sid-wrap) { display: none; }

/* The diff doc — takes the transcript's slot in .chat (same flex geometry as .messages). Full-bleed
   like a code surface (no --content-max column: diff lines want the width); the body is the scroll
   surface, its bottom padding clearing the overlaid statusbar like .messages' does. The ± markers and
   red/green bands are the shared .udiff-* rules the tool cards use. */
.diff-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; outline: none; }
.diff-doc-body {
  flex: 1; min-height: 0; overflow: auto;
  scrollbar-gutter: stable both-edges;
  padding: .75rem 1.75rem 2.5rem;
  font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
}
.diff-doc-empty, .diff-doc-trunc { color: var(--muted); padding: .4rem 0; }
/* The wrong-cwd empty state (Root.#cwdHint): centered over the empty transcript. */
.cwd-hint { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .5rem; padding: 2rem; color: var(--muted); font-size: .9rem; max-width: 40rem; margin-inline: auto; }
.cwd-hint-head { font-weight: 600; color: var(--fg); }
.cwd-hint-dir { color: var(--accent); }
/* With token colors under them, the full-strength (24%) bands compete — red tokens on a red band
   turn to mud — so the doc view's bands drop to a tint: polarity is still carried per-line by the
   gutter ± glyphs and at file scale by the ruler. Scoped: the tool-card hunks keep 24%, where the
   unhighlighted band is the only signal. Del a touch stronger than add — red-leaning tokens
   camouflage against red tint more than anything does against green. */
.diff-doc-body .udiff-add { background: color-mix(in srgb, var(--diff-add) 15%, transparent); }
.diff-doc-body .udiff-del { background: color-mix(in srgb, var(--err) 18%, transparent); }
/* The overview ruler — VS Code's scrollbar change-marks, owned since the native scrollbar can't be
   painted: a thin track beside the scrollbar (17px clears Windows Chromium's classic bar — plain px
   on a desktop-only surface, the menus' own stance), red/green marks at each change run's fractional
   position, min-height so a one-line change stays visible. The wrapper keeps it overlaid rather than
   scrolling with the body. Marks are pointer-inert so a click anywhere on the track jumps. */
.diff-doc-scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.diff-ruler { position: absolute; top: 2px; bottom: 2px; right: 17px; width: 6px; cursor: pointer; z-index: 5; }
.diff-ruler-mark { position: absolute; left: 0; right: 0; min-height: 3px; border-radius: 1px; pointer-events: none; }
.diff-ruler-mark.add { background: var(--diff-add); opacity: .8; }
.diff-ruler-mark.del { background: var(--err); opacity: .8; }
/* messages */
.messages {
  flex: 1;
  overflow-y: auto;
  /* Reserve the scrollbar gutter on BOTH edges so the centred --content-max column stays on the
     true axis (window centre) whether or not a scrollbar is showing. Without this the scrollbar
     shrinks the column and shifts it ~half a scrollbar left of the composer/statusbar columns
     (which never scroll) — the misalignment between the prose and the composer's left edge. */
  scrollbar-gutter: stable both-edges;
  /* Content runs under the overlaid statusbar rather than stopping above it.
     Gutters are symmetric: the turn stripe is absolutely positioned, so it claims no layout
     width and the left gutter needs no extra room for it (see Invariants). The bottom is
     larger to clear the overlaid statusbar pills (~2.1rem:
     .4rem inset + 1.7rem pill) so the last line isn't hidden behind them. */
  padding: 1.25rem 1.75rem 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.note {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--muted);
  font-size: .9rem;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
/* Top-of-transcript wordmark + tagline (messageList.ts #masthead). Centred on the prose column,
   scrolls with the conversation. Both logos render; theme picks which shows. */
.masthead {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto .25rem auto;
  padding: .15rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
  user-select: none;
}
.masthead-logo {
  width: 150px;
  max-width: 55%;
  height: auto;
  opacity: .92;
}
.masthead-tagline {
  color: var(--muted);
  font-size: .85rem;
}
/* Black wordmark on light, outline on dark. */
.masthead-logo.dark { display: none; }
html[data-theme="dark"] .masthead-logo.light { display: none; }
html[data-theme="dark"] .masthead-logo.dark { display: block; }
.bubble {
  position: relative;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
.bubble.user {
  background: var(--veil);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .7rem .9rem;
}
/* Consecutive tool-only bubbles sit tight via negative margin (flex `gap`
   can't be overridden per sibling pair). The adjacent-sibling selector leaves
   the first tools-only bubble's gap intact, preserving the turn boundary. */
.bubble.tools-only + .bubble.tools-only { margin-top: -.9rem; }

/* Turn stripe — a 2px colored bar to the left of each bubble. All bubbles in
   one user→assistant turn share a color; the palette cycles through 5 so
   adjacent turns are visually distinct when scrolling. Sits outside the
   bubble's left edge in the messages container's padding gutter.
   By default top/bottom extend half a gap beyond the bubble so same-turn
   neighbours' stripes meet seamlessly across the 1rem flex gap. The two
   turn-boundary overrides below clip those extensions so a turn's stripe
   starts at the top of its user bubble and ends at the bottom of its last
   bubble — leaving the full 2rem inter-turn gap stripe-free as a separator.
   --border-w compensates the 1px padding-edge offset that user bubbles' border
   would otherwise introduce — without it, stripes alternate 1px inset between
   user/assistant rows. */
.bubble { --border-w: 0px; }
.bubble.user { --border-w: 1px; }
.bubble::before {
  content: '';
  position: absolute;
  /* Offsets subtract --border-w: absolute positioning anchors to the
     padding-edge (inside the border), so a user bubble's 1px border would
     otherwise shave 1px off each stripe edge. */
  /* Stripe hugs the column (1rem into the left gutter); absolute, so it consumes no layout width —
     which is why the gutters can be symmetric (no asymmetric padding needed to "make room"), and
     thus why breakouts need no nudge. - var(--border-w): a user bubble's 1px border pushes the
     padding edge (the abs-pos anchor) 1px right, so without it that stripe sits 1px right of the
     assistant bubbles' — compensate. */
  left: calc(-1rem - var(--border-w));
  top: calc(-.5rem - var(--border-w));
  bottom: calc(-.5rem - var(--border-w));
  width: 1px;
  background: var(--turn-color, transparent);
}
/* Clip stripe at turn boundaries. A user bubble always starts a turn → no
   upward extension. A bubble followed by a user bubble is the last of its
   turn → no downward extension. Same for the very last bubble in the list
   (an in-flight turn whose last assistant message is the end of the stream).
   Same `0 - var(--border-w)` form as the default top/bottom so user bubbles'
   1px border still aligns with the stripe edge. */
.bubble.user::before { top: calc(0px - var(--border-w)); }
.bubble:has(+ .bubble.user)::before,
.bubble:last-child::before { bottom: calc(0px - var(--border-w)); }
/* Extra gap before each new turn (user bubble preceded by anything). Combined
   with the container's 1rem gap → ~2rem visible between turns vs ~1rem within
   a turn. Doesn't fire on the very first bubble (no preceding sibling). */
.bubble + .bubble.user { margin-top: 1rem; }
.bubble.turn-0 { --turn-color: #4cb35a; }   /* green */
.bubble.turn-1 { --turn-color: #e89a3c; }   /* amber */
.bubble.turn-2 { --turn-color: #d36b9a; }   /* pink */
.bubble.turn-3 { --turn-color: #9970d6; }   /* purple */
.bubble.turn-4 { --turn-color: #3cb8b3; }   /* teal */

/* rendered markdown */
.md { word-break: break-word; }
/* Markdown links (often many file:line citations per message) — restrained like
   the rest of the bulb's links: accent, no persistent underline, reveal it only
   on hover. Without this they'd carry the browser-default underline-on-every-one. */
.md a { color: var(--accent); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md :first-child { margin-top: 0; }
.md :last-child { margin-bottom: 0; }
.md p { margin: .5rem 0; }
/* Thematic break — also the divider between merged consecutive user sends (see applyUser): faint
   so the bubble still reads as one turn, but legible in both themes. Mixed off --fg (text contrast)
   rather than --border + opacity: --border is itself dim in dark mode, so dimming it again left the
   line invisible there — and the faintness is a property of the line's color, not the element. */
.md hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  margin: .55rem 0;
}
.md pre {
  background: var(--veil);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .7rem .85rem;
  overflow-x: auto;
}
/* A pasted image (server renders an <img> from a base64 block, see blockToMarkdown) is capped to the
   column and never blows the layout — height follows the width. */
.md img { max-width: 100%; height: auto; border-radius: 6px; }
/* Blockquote: left bar + faint tint + muted text — a quiet "quoted" callout. The bar
   is mixed toward --border so it stays distinct from the bright turn stripe in the
   gutter, and the tint is light enough not to read as a code/output panel. */
.md blockquote {
  margin: .5rem 0;
  padding: .35rem .85rem;
  border-left: 3px solid var(--border);
  background: var(--veil);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
}
.md blockquote :first-child { margin-top: 0; }
.md blockquote :last-child { margin-bottom: 0; }
.md code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .88em;
}
.md :not(pre) > code {
  background: var(--veil);
  padding: .1em .35em;
  border-radius: 5px;
}
.md table { border-collapse: collapse; }
.md th, .md td { border: 1px solid var(--border); padding: .3rem .55rem; }
/* A faint header band breaks the grid's monotony and gives the table a head/body structure — tonal
   (`--veil`, the document-panel shade), never a hue, so it reads as structure not opinion and follows
   the host light/dark theme. As a panel the veil steps one shade above the table's container, so the
   header still reads when the table sits inside a bubble or callout. The header text stays `--fg`:
   weight + the fill carry it, a tint would be the opinionated bit. Left-align to the body cells. */
.md th { background: var(--veil); font-weight: 600; text-align: left; }
/* Disclosure (<details>/<summary>) from the safe-HTML allowlist (markdown.ts): a quiet --veil container,
   subtler than a code block — assistant prose sits directly on the page, so a fill stands out; keep it
   restrained and let the border define it. Summary is the clickable caret row (native marker), accent
   on hover like a link. */
.md details {
  margin: .5rem 0;
  padding: .35rem .7rem;
  background: var(--veil);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.md summary { cursor: pointer; font-weight: 600; }
.md summary:hover { color: var(--accent); }

/* The full-lane breakout geometry, defined ONCE and shared by the two breakouts (the mermaid
   embed and a spread bulb). `100%` in --lane-ml resolves against each user's own containing block
   (prose width) at point of use, so both centre on the column axis — which is the viewport centre,
   since the gutters are symmetric. One home so the geometry can't drift between the two (the bug
   that let an off-centre nudge survive in one rule after being removed from the other). */
.md { --lane-w: calc(100vw - 2rem); --lane-ml: calc((100% - var(--lane-w)) / 2); }

/* Full-lane breakout — the mermaid embed (whole element) and a SPREAD bulb's iframe step out of
   the prose column to the transcript width so wide content gets room. Both use --lane-w/--lane-ml
   and extend symmetrically from the column, which is viewport-centred (symmetric gutters), so
   neither needs an off-centre nudge (see Invariants in Specs-Bulbs/Claude-Bulb/Claude-Bulb.md). A
   bulb's *wrapper* never breaks out — only its inner surface does — so the wrapper and its controls
   stay at prose-right. position + z-index:0 lift the box over the turn stripe it crosses; the
   mermaid SVG is transparent so a bg backs it, the bulb iframe is opaque so it occludes the stripe. */
.md .mermaid {
  width: var(--lane-w);
  /* Vertical gap must be >= the box-shadow spread (1rem below): a smaller gap lets the bg ring
     paint over the half-line of prose above/below — the trap the opaque bulb embed dodges by
     having no shadow, which the transparent mermaid can't. */
  margin: 1rem 0;
  margin-left: var(--lane-ml);
  margin-right: auto;
  position: relative;
  z-index: 0;
  background: var(--bg);
}

/* Diagram specifics: scroll when wider than the lane; `safe center` centres one that fits and
   left-aligns one that overflows, so a wide flowchart scrolls from its start node. The SVG is
   transparent, so the turn stripe the breakout crosses shows through it — a bg box-shadow backs
   the diagram to occlude it (and clears the h-scrollbar edge). The bulb embed is opaque (its
   iframe fills the box), so it occludes the stripe itself and gets NO shadow — a shadow there
   would paint its 1rem ring over the half-line of prose just above the embed (the gap is .6rem). */
.md .mermaid {
  overflow-x: auto;
  display: flex;
  justify-content: safe center;
  box-shadow: 0 0 0 1rem var(--bg);
}
/* flex-shrink:0: otherwise the SVG shrinks to the flex container and its viewBox
   scales it down — no overflow, no scrollbar. Natural width is what scrolls. */
.md .mermaid svg { max-width: none; height: auto; flex: 0 0 auto; }

/* Raw ```svg``` embeds: no breakout — these are drawings (smiley, plot), not wide
   diagrams, so keep them in the prose column, centred and capped at its width. They
   share the `.embed` stripe-chop below (a drawing earns its own row like a bulb). */
.md .svg-embed { justify-content: center; }
.md .svg-embed svg { max-width: 100%; height: auto; }

/* Markdown tables: chop in-column (the `.embed` rule below) and `safe center` — a table that fits its
   box centres, and one that overflows falls back to left so it scrolls from its first column rather than
   clipping. Centring holds in both modes: a small in-column table sits centred in the prose column, a
   spread one centred in the lane. The scroll lives on the inner `.table-scroll`, not the `.embed`
   wrapper, so a horizontal scrollbar rides above the chop's bottom padding instead of flush against the
   next line (a scrollbar sits at its own container's bottom edge). It's the centred flex child, capped at
   the box so it shrinks-to-fit and scrolls only what overflows; `max-width:100%` + the overflow-induced
   0 min-width let it shrink below the table's natural width. `spread` widens the wrapper to the lane (the
   mermaid geometry) for a table fitTableEmbeds found too wide for the column. The opaque `.embed`
   padding/z-index still occludes the turn stripe the spread crosses — no box-shadow needed. */
.md .table-embed { justify-content: safe center; }
.md .table-embed .table-scroll { overflow-x: auto; max-width: 100%; }
/* max-content keeps the table at its natural (unwrapped) width so it overflows `.table-scroll` and earns
   a scrollbar, rather than wrapping its cells to fit — the bar is the point, and it now rides inside the
   chop padding. */
/* Two ceilings work together so a prose-heavy table neither scrolls forever nor squashes to mush:
   - per-column (the cell `max-width` — in an auto-layout table every cell in a column shares one width,
     so a cell cap *is* a column cap): no single column hogs; long text wraps at a readable measure.
   - whole-table (`max-width: var(--lane-w)`): the table never grows past the lane, so when columns don't
     all fit, the browser's auto-layout *shares* the lane among them — wrapping each to its slice rather
     than scrolling. It only scrolls once even longest-word-only columns can't fit the lane (genuinely too
     many columns). `width: max-content` is still the *preferred* width, so a small table stays natural
     and a wide one spreads; the lane cap just bounds the worst case. The floor lever (a per-cell
     `min-width`) — turn squash into scroll past some readable minimum — is deliberately left off until a
     real table needs it. `word-break: normal` resets the global `.md { word-break: break-word }` (which
     behaves like overflow-wrap:anywhere): left inherited, that global lets the lane cap squeeze a column
     below its longest word and snap it mid-character ("status" → "statu·s"). Reset to word-boundary
     wrapping so each column floors at its longest whole word and a too-tight table scrolls instead of
     shattering text; a pathological no-space token (a long URL) then scrolls rather than breaking. */
.md .table-embed table { margin: 0; width: max-content; max-width: var(--lane-w); }
.md .table-embed th, .md .table-embed td { max-width: 40ch; word-break: normal; }
.md .table-embed.spread {
  width: var(--lane-w);
  margin-left: var(--lane-ml);
  margin-right: auto;
}

/* ````bulb```` embeds: a sandboxed nested app. createBulbFrame owns the iframe (auto-height,
   borderless). No frame of our own — like the mermaid/svg embeds, it sits in the flow rather
   than in a box, so it reads as part of the transcript; the rounded clip just tidies the corners
   of a bulb that paints its own background. `fit` (default) keeps it in the prose column and
   caps its height (below); `spread` adds full-lane breakout + spacing from the shared rule above.
   position:relative anchors the controls overlay in BOTH modes (spread re-declares it for the
   z-index lift). .err is the compile-failure fallback; .bulb-err-strip is a runtime-error strip
   under a live embed (both monospace, muted red). */
/* The stripe-chop, shared by every opaque in-column visual artifact (the fit bulb and a raw
   `svg` — each opts in by carrying `.embed`). An opaque bg over position:relative + z-index:0
   paints above .bubble::before; a -1rem left extension reaches the stripe in the gutter without a
   full breakout (padding-left:1rem keeps the content in the prose column, and the box's right edge
   stays at prose-right, so a bulb's controls anchored there don't move). The vertical gap is opaque
   padding, not margin: it occludes the stripe top and bottom so the cut is flush with the prose (no
   stub in a transparent gap), symmetric above/below to separate the artifact from surrounding text.
   margin top/bottom are zeroed — and the abutting prose margins too (below) — so the gap butts the
   text. Mermaid is NOT on this path: it's transparent and breaks out, occluding via box-shadow.
   Per-artifact layout (flex direction, centring) lives on .bulb-embed / .svg-embed. */
.md .embed {
  display: flex;
  position: relative;
  z-index: 0;
  background: var(--bg);
  margin: 0 0 0 -1rem;
  padding: 1.1rem 0 1.1rem 1rem;
}
/* A bulb stacks its controls/frame/code vertically; in spread mode the inner iframe's own
   breakout covers the stripe too (the wrapper still chops in column). */
.md .bulb-embed { flex-direction: column; }
/* Inline (default): cap the embed's height so a tall bulb doesn't run away down the transcript.
   Past the cap the embed scrolls internally (its own overflow, set by the host↔embed protocol —
   the iframe element can't scroll its srcdoc from out here). spread removes the cap. */
.md .bulb-embed.fit iframe { max-height: 80dvh; }
/* The frame host is a layout-less wrapper (domeleon owns the node; we parent the live iframe into
   it once) — display:contents lifts the iframe to be a flex child of .bulb-embed, so the sizing and
   spread-breakout rules target it directly, exactly as when it was appended as a direct child. The
   code toggle hides it via .code-open rather than unmounting, so the bulb keeps its state. */
.bulb-frame { display: contents; }
.md .bulb-embed.code-open .bulb-frame { display: none; }
/* Spread: the inner surface (live iframe, or the code view behind the toggle) breaks out to the
   lane while the wrapper stays in the prose column, so the controls hold at prose-right. Shares the
   --lane-* geometry; centred on the column axis so toggling spread doesn't shift a column-fitting
   bulb sideways. `width !important` beats createBulbFrame's inline width:100% on the iframe
   (harmless on the code view, which has none); both opaque, so position/z-index:0 lift them over
   the turn stripe they now cross. */
.md .bulb-embed.spread iframe,
.md .bulb-embed.spread > .bulb-code {
  width: var(--lane-w) !important;
  margin-left: var(--lane-ml);
  margin-right: auto;
  position: relative;
  z-index: 0;
}
/* Kill the transparent margin between an embed and the prose it abuts (top and bottom):
   the embed's own opaque padding is the gap, and a leftover prose margin would let the
   turn stripe show through it as a stub past the last/next line of text. */
.md :has(+ .embed) { margin-bottom: 0; }
.md .embed + * { margin-top: 0; }
/* The rounded clip lives on the inner surfaces, not the embed (whose padding is now the
   gap), so the bulb's own card — the iframe, or the code view behind the toggle — is
   what carries the corners. */
.md .bulb-embed iframe,
.md .bulb-embed > .bulb-code {
  border-radius: 8px;
}
/* Overlay pill: a small hover-revealed control floated at a container's
   bottom-right, shared by the embed breakout button and the message copy button.
   Muted at rest, accent on hover (instant, matching the status pills). The
   container supplies the reveal; per-button bits layer on top. Box shape, colors
   and vertical centering come from the shared word-pill rule (.pill, .token,
   .overlay-pill) — only positioning, reveal and sizing quirks live here. */
.overlay-pill {
  position: absolute;
  bottom: .5rem;
  right: 0;              /* flush with the content column's right edge (prose / statusbar pills) */
  font: inherit;
  font-size: var(--pill-font);
  padding: 0 .45rem;
  /* Word buttons that swap labels in place (fit⇄spread, code⇄run, copy⇄copied), so a min-width
     keeps the button from jumping as the word's length changes — "fit" is much narrower than
     "spread". */
  min-width: 3.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.overlay-pill:hover { color: var(--accent); border-color: var(--accent); }

/* Per-fence copy pill (code / svg / mermaid) — one reveal rule for every copyable block, since the
   fence rule stamps `.copyable` on each. The svg/mermaid containers are already position:relative for
   the chop/breakout; the code-block wrapper needs it for the absolute pill. The pill is positioned
   (absolute), so it paints over the static fence content regardless of DOM order. */
.md .copyable { position: relative; }
.md .copyable:hover .copy-src,
.md .copy-src:focus-visible { opacity: 1; }
.md .copy-src.done { color: var(--accent); border-color: var(--accent); }
/* The wrapper carries the code block's vertical rhythm (it, not the <pre>, is the `.md` flow child
   now, so the first/last-child margin resets land on it); the <pre> sits flush inside. */
.md .code-block { margin: .6rem 0; }
.md .code-block pre { margin: 0; }

/* Controls (code ⇄ run, then copy, then breakout) — a centered overlay straddling the
   bulb's top edge: clear of the running bulb below, free to overlap the prose above.
   Absolute, so toggling run↔code (which resizes the bulb below) never moves it, and so
   the bulb's vertical gap stays small. Revealed on embed-hover or focus; inside the row
   the shared .overlay-pill drops its own corner-anchoring. */
.md .bulb-controls {
  position: absolute;
  top: 0;
  right: 0;              /* flush with the content column's right edge (prose / statusbar pills) */
  z-index: 2;
  display: flex;
  gap: .4rem;
  transform: translateY(-50%);
}
.md .bulb-controls .overlay-pill { position: static; }
.md .bulb-embed:hover .bulb-controls .overlay-pill,
.md .bulb-controls .overlay-pill:focus-visible { opacity: 1; }
.md .bulb-breakout:disabled { cursor: default; opacity: 1; }
/* Breakout in flight: shimmers through the ~2s write+spawn wait so the click reads as "working"
   rather than dead — same treatment as the launcher's play button (.bulb-launch.launching).
   :disabled already keeps it visible if the pointer leaves. */
.md .bulb-breakout.launching { color: var(--accent); border-color: var(--accent); }
/* Copy pill "copied" flash — mirrors the message .copy.done accent cue, scoped to the
   embed control so it doesn't pick up the bubble-hover reveal. */
.md .bulb-copy.done { color: var(--accent); border-color: var(--accent); }
/* Source view behind the toggle — the bulb's .bulb.md rendered as markdown (file
   labels + fenced code panels via the shared .md rules). Just a scroll container
   here, capped so a long bulb doesn't blow out the transcript. No `display` — the
   [hidden] attribute the toggle flips drives visibility. */
/* Code view: a streamlined source listing — one labeled bar per file with the code
   flush beneath, not a stack of bordered panels. The container is just the scroll box;
   the file-label bar is the only fill (overriding .md pre's panel chrome below). */
.md .bulb-code {
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow: auto;
  font-size: .85rem;
  /* A distinct surface from the transcript: the live bulb blends into the flow, but the
     code view reads as an inspector panel. Code panels (.md pre below) are transparent, so
     they show this through. */
  background: var(--tool-bg);
}
/* **file.ext** labels render as <p><strong>…</strong></p>; a bulb's source has no other
   top-level prose, so styling the paragraph as a header bar only ever hits a label. */
.md .bulb-code p {
  margin: 0;
  padding: .3rem .85rem;
  /* A touch darker than the code surface so the file-label header stays distinct now
     that the whole code view shares one background. */
  background: color-mix(in srgb, var(--fg) 6%, var(--tool-bg));
  border-top: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .78rem;
  color: var(--muted);
}
.md .bulb-code p:first-child { border-top: none; }
.md .bulb-code p strong { font-weight: 600; color: var(--fg); }
/* Code flush on the embed bg — drop the inherited .md pre box (border/bg/radius). */
.md .bulb-code pre {
  margin: 0;
  padding: .5rem .85rem .85rem;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
}
/* hljs token colors for the code view AND the diff doc (one palette, or the same file reads as two
   languages across surfaces), mapped to the bulb's own theme vars (no hljs
   theme stylesheet) so highlighting follows light/dark rather than baking a palette
   that would clash in dark mode. Minimal token set — enough for legible TS/HTML/CSS/
   JSON/markdown without chasing every grammar scope. */
.bulb-code .hljs-comment, .diff-doc-body .hljs-comment, .bulb-code .hljs-quote, .diff-doc-body .hljs-quote { color: var(--muted); font-style: italic; }
.bulb-code .hljs-keyword, .diff-doc-body .hljs-keyword, .bulb-code .hljs-literal, .diff-doc-body .hljs-literal, .bulb-code .hljs-built_in, .diff-doc-body .hljs-built_in { color: var(--accent); }
.bulb-code .hljs-tag, .diff-doc-body .hljs-tag, .bulb-code .hljs-name, .diff-doc-body .hljs-name, .bulb-code .hljs-selector-tag, .diff-doc-body .hljs-selector-tag { color: var(--accent); }
.bulb-code .hljs-string, .diff-doc-body .hljs-string, .bulb-code .hljs-regexp, .diff-doc-body .hljs-regexp, .bulb-code .hljs-meta .hljs-string, .diff-doc-body .hljs-meta .hljs-string {
  color: color-mix(in srgb, var(--diff-add) 85%, var(--fg));
}
.bulb-code .hljs-number, .diff-doc-body .hljs-number { color: color-mix(in srgb, var(--accent) 55%, var(--fg)); }
.bulb-code .hljs-attr, .diff-doc-body .hljs-attr, .bulb-code .hljs-attribute, .diff-doc-body .hljs-attribute, .bulb-code .hljs-property, .diff-doc-body .hljs-property, .bulb-code .hljs-type, .diff-doc-body .hljs-type {
  color: color-mix(in srgb, var(--accent) 75%, var(--fg));
}
.bulb-code .hljs-title, .diff-doc-body .hljs-title, .bulb-code .hljs-title.function_, .diff-doc-body .hljs-title.function_, .bulb-code .hljs-section, .diff-doc-body .hljs-section {
  color: var(--fg); font-weight: 600;
}
.bulb-code .hljs-symbol, .diff-doc-body .hljs-symbol, .bulb-code .hljs-bullet, .diff-doc-body .hljs-bullet, .bulb-code .hljs-punctuation, .diff-doc-body .hljs-punctuation { color: var(--muted); }
/* Draft-streaming bulb card (#draftBulbCard): the code view wearing a progress header — never a
   live mount; the durable row's BulbEmbed takes this slot when the entry lands. Cap tighter than
   .bulb-code's resting 480px: ambient progress, not reading material. */
.md .bulb-streaming { flex-direction: column; }
.md .bulb-streaming > .bulb-code { max-height: 220px; border-radius: 0 0 8px 8px; }
.bulb-streaming-head {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .3rem .85rem;
  border-radius: 8px 8px 0 0;
  /* A notch above the file-label bars inside the listing, so the header owns the card. */
  background: color-mix(in srgb, var(--fg) 10%, var(--tool-bg));
  font-size: .78rem;
  color: var(--muted);
}
.bulb-streaming-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.md .bulb-embed.err {
  padding: .6rem .8rem;
  font-family: ui-monospace, monospace;
  font-size: .85em;
  color: color-mix(in srgb, var(--err) 70%, var(--fg));
  white-space: pre-wrap;
}
.md .bulb-err-strip {
  padding: .45rem .7rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--err) 8%, var(--bg));
  font-family: ui-monospace, monospace;
  font-size: .8em;
  color: color-mix(in srgb, var(--err) 75%, var(--fg));
  white-space: pre-wrap;
}

/* Structural-defect strip (a malformed bulb that still rendered) — same shape as the error strip but
   amber: a warning, not a failure. */
.md .bulb-warn-strip {
  padding: .45rem .7rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, rgb(200 140 30) 10%, var(--bg));
  font-family: ui-monospace, monospace;
  font-size: .8em;
  color: color-mix(in srgb, rgb(200 140 30) 80%, var(--fg));
  white-space: pre-wrap;
}

/* tool calls */
/* Closed tool: just a single-line row, no chrome — a tool-only turn stays a
   tight list, not N stacked panels. Open tools get the panel treatment below. */
.tool {
  font-size: .85rem;
}
/* Row shape shared by tool heads and the collapsed-turn summary; only the latter is a click
   target (a tool's toggle is its digest row). */
.tool-head, .turn-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .15rem 0;
}
.turn-summary {
  cursor: pointer;
  user-select: none;
}
/* The shared disclosure triangle (caret() in messageList.ts). flex:none so a squeezed row can't
   crush it; the digest row has no flex gap, so its spacing rides the marker. */
.caret-tri { width: 10px; height: 10px; transition: transform .15s ease; }
.caret-tri.open { transform: rotate(90deg); }
.tool-digest .caret-tri { margin-right: .5rem; }
/* Plain bold — an accent verb reads as a hyperlink; accent is reserved for the file-path link. */
.tool-name { font-weight: 600; }
/* Errors here are routine (a first-read miss the retry fixes), so a failed tool
   recolors just its verb rather than boxing the whole row — a quiet signal. */
.tool.err .tool-name { color: var(--err); }

/* Collapsed-turn summary strip (intermediate steps hidden behind the final
   answer). Same caret/row shape as a tool head, italic muted label. */
.turn-summary { color: var(--muted); font-size: .85rem; }
.turn-summary-text { font-style: italic; }
.fork-icon { width: 11px; height: 11px; vertical-align: -1px; margin-right: .15rem; }
.turn-summary:hover .turn-summary-text { color: var(--fg); }

/* An expanded abandoned-branch (fork) stub renders its orphan messages here — set apart from the live
   transcript with a left rule and slight fade, signalling "this is not the active conversation"
   (TB-LostMessage.md). The stub header itself is a .turn-summary row above. */
.fork-body {
  margin-top: .4rem;
  padding-left: .6rem;
  border-left: 2px solid color-mix(in srgb, var(--fg) 18%, transparent);
  opacity: .82;
  /* Same column geometry as .messages — the tools-only negative-margin rule assumes a 1rem gap. */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* --turn-color is a custom property and INHERITS — the stub's own .bubble.turn-N sets it, so without
     this reset every nested orphan bubble inherits the parent turn's color and redraws the stripe
     (the recursive-line bug). Reset to transparent so .bubble::before falls back to no stripe here. */
  --turn-color: transparent;
}

/* A superseded embed (an earlier same-name version) folds to this "💡 <Name> — Version N" stub — it
   reclaims the bulb's full height. Marker-green text (--fold-marker: lime in dark, deep green in light)
   on a neutral gray fill (--panel) that hugs the text (width:max-content), no border: text-hugging and
   borderless keeps it distinct from the page's full-width bordered panels and clear of the live bulb's
   hover pills, and the colored title rides a gray pill rather than a green block. Its look never depends
   on outcome: errors show only inside the embed when expanded, so the title never changes. Click to
   expand the older bulb (rerun fresh) back in. */
.bulb-fold {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: .5rem;
  padding: .3rem .55rem;
  border-radius: 6px;
  background: var(--panel);
  color: var(--fold-marker);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
/* The fold is the sole child of its `.md` wrapper, so the `.md :first-child`/`:last-child` margin
   reset (above) would zero a plain `margin` here. Scope it under `.md` so it outweighs that reset
   (equal specificity, later in source) and the stub actually gets its breathing room. */
.md .bulb-fold { margin: .7rem 0; }
.bulb-fold:hover { background: color-mix(in srgb, var(--fg) 8%, var(--panel)); }
/* Verb + summary are inline siblings sharing one line box and font, so they sit
   on a common baseline. Ellipsis truncation lives on the wrapper, not the
   children — overflow:hidden on the summary itself skews its baseline. */
/* flex: 0 1 auto (not 1) so the pending '…' sits right after the label instead of at the row's
   far edge; the label shrinks with ellipsis when the row is tight. */
.tool-label {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-sum {
  margin-left: .5rem;
  color: var(--muted);
}
.tool-run { color: var(--muted); }

/* The OUT line ("463 lines", the first stdout line): a tool's second row and its only toggle.
   Text stays selectable — a drag copies, a plain click toggles. */
.tool-digest {
  padding: 0 0 .15rem .6rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: text;
}
.tool-digest:hover { color: var(--fg); }
/* Expanded = nothing readable hidden: the digest wraps to its full text (it may be the whole
   result — suppressed patch one-liners rely on this). */
.tool-digest.open { white-space: normal; }

/* Expanded input/output card beneath the digest row — additive only, the rows above keep their
   collapsed look. First child sheds its top divider (nothing above it inside the card). */
.tool-card {
  margin: .15rem 0 .55rem .6rem;
  background: var(--veil);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tool-card > :first-child, .tool-card > .diff:first-child > :first-child { border-top: none; }

/* TodoWrite checklist (CC's treatment: struck-through done, bold in-progress, plain pending). */
.todo-list { padding: .45rem .7rem; display: grid; gap: .25rem; font-size: .85rem; }
.todo { display: flex; gap: .5rem; align-items: baseline; }
.todo-icon { flex: none; }
.todo.completed .todo-icon { color: var(--diff-add); }
.todo.completed .todo-text { text-decoration: line-through; color: var(--muted); }
.todo.in_progress .todo-text { font-weight: 600; }
.todo.in_progress .todo-icon { color: var(--accent); }

/* Code-display panels inside an open tool card: raw input/output (.tool-in,
   .tool-out) and per-hunk diff halves (.diff-old, .diff-new). All four share
   the same monospace block geometry — padding, max-height with scroll,
   pre-wrap with word-break, top-divider — so consolidating here means edits
   to "how a code panel looks" land in one place. Color treatment is the only
   per-variant difference. */
.tool-in, .tool-out, .diff-old, .diff-new {
  margin: 0;
  padding: .55rem .7rem;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .8rem;
  max-height: 320px;
  overflow: auto;
}
.tool-out { color: var(--muted); }
/* Structured input fields inside an open tool card (one row per input key), replacing the old raw
   JSON dump. The key is a muted inline label; the value keeps the shared mono geometry, flowing on
   the same line and wrapping/multi-lining as pre-wrap dictates. */
.tool-field + .tool-field { margin-top: .5rem; }
.tool-key { color: var(--muted); margin-right: .6rem; user-select: text; }
.tool-val { display: inline; margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }
/* Line-banded unified-diff view (± lines only): the same add/remove band colors as
   .diff-new/.diff-old; a muted ⋯ row separates hunks. The ± marker is ::before content in a
   reserved gutter — visible (the non-color cue colorblind readers need) but outside the DOM
   text, so selection-copy grabs only the code. min-height keeps blank changed lines from
   collapsing now that they carry no marker char. */
.udiff { white-space: pre-wrap; word-break: break-word; }
.udiff-line { position: relative; padding: 0 .2rem 0 1.05rem; min-height: 1lh; }
.udiff-line::before { position: absolute; left: .25rem; }
.udiff-add::before { content: '+'; }
.udiff-del::before { content: '-'; }
.udiff-add { background: color-mix(in srgb, var(--diff-add) 24%, transparent); }
.udiff-del { background: color-mix(in srgb, var(--err) 24%, transparent); }
.udiff-gap { color: var(--muted); user-select: none; }
/* The band carries the add/remove signal; text stays --fg so it's readable. Colouring the text the same
   hue as its fill (red-on-red) is what washes a diff out — the band alone is the convention. */
.diff-old {
  background: color-mix(in srgb, var(--err) 24%, transparent);
  color: var(--fg);
}
.diff-new {
  background: color-mix(in srgb, var(--diff-add) 24%, transparent);
  color: var(--fg);
}

/* Path link: plain accent, underline only on hover. skip-ink:none so the
   underline stays solid under a path's descenders and slashes. */
.tool-sum.link {
  color: var(--accent);
  text-decoration: none;
}
.tool-sum.link:hover { text-decoration: underline; text-decoration-skip-ink: none; }

.diff { display: flex; flex-direction: column; }
.diff-step {
  padding: .35rem .7rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.thinking { margin-bottom: .4rem; font-size: .82rem; color: var(--muted); }
/* The <summary> toggle defaults to a text cursor — give it the pointer every other expandable uses. */
.thinking summary { cursor: pointer; }
.thinking pre { white-space: pre-wrap; }
/* Streaming (draft) thinking: capped + scrollable at the bulb-streaming card's height — ambient
   progress, not reading material — stuck to the live edge unless the user scrolls up
   (#draftThinkingPre). Durable rows stay uncapped: finished thinking IS reading material. */
.draft .thinking pre { max-height: 220px; overflow-y: auto; }

/* Copy button: an .overlay-pill revealed on bubble-hover. */
.bubble:hover .copy { opacity: 1; }
/* "copied" flash: eases into accent on click (CopyButton is a Component, so its
   node persists across re-renders and the transition actually runs). The color
   transition lives only on .done, not the base pill, so hover stays instant — the
   trade is the revert snaps back rather than easing out. */
.copy.done {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
  transition: opacity .2s ease, color .5s ease, border-color .5s ease;
}
/* Assistant bubbles carry no padding, so the shared .5rem bottom would float the
   pill above the last line — pin it to the text's bottom edge. */
.bubble.assistant .copy { bottom: 0; }