typebulb 0.61.2 → 0.61.3

package/dist/agents/pi/styles.css

@@ -1,2140 +1,2163 @@
-: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. 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 {
-  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). */
-.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: width pinned to the pill height rather than padding-driven. 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, .children-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, .children-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;
-  /* The bar's line-height:1 is for its fixed-height pills; a menu is a text surface, so restore
-     descender room HERE, once. Inherited, the 1 crops the tails of "g"/"j"/"p" under every row's
-     overflow:hidden (the ellipsis clip) — a leaf-by-leaf fix that had already been pasted three
-     times. Rows are floored at --menu-row-h with their paddings kept under it, so pitch is unchanged. */
-  line-height: 1.35;
-  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);
-}
-/* Menu-list scrollbars: the channel is ALWAYS reserved (overflow-y: scroll on all three lists) and
-   the scrollbar is owned — no arrow buttons, transparent track, a floating thumb only when the list
-   actually overflows. Native auto scrollbars made a row band's right inset depend on list length: a
-   project with no bulbs of its own (one collapsed fold row) ran its band 15px nearer the popover
-   edge than the filter box under it, and bare overflow:scroll parked a vestigial arrow-stub beside
-   the short list. Width stays 15px, the native width .model-head's alignment padding hardcodes.
-   Chromium pseudos on purpose: setting the standard scrollbar-color would disable them. */
-:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar { width: 15px; }
-:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-button { display: none; }
-:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-track { background: transparent; }
-:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-thumb {
-  background-color: color-mix(in srgb, var(--fg) 28%, transparent);
-  border-radius: 8px;
-  /* Transparent border + padding-box clip floats a slim pill in the 15px channel. */
-  border: 4px solid transparent;
-  background-clip: padding-box;
-}
-:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fg) 45%, transparent); }
-
-/* The overview ruler (overviewRuler.ts): a scroll container's bar, replaced. .oruler-host is applied
-   by the widget at mount — never statically — so the native bar only disappears once its replacement
-   is painted. BOTH hiding routes: the standard property covers Gecko, the pseudo covers WebKit, and
-   Blink honours either, so no engine is left showing two scrollbars. Window and marks are % of a track
-   that spans the pane, so they share the container's content space. Marks are pointer-inert; the track
-   takes the press, the drag and the wheel. Colour and the track's inset are the host's (.diff-ruler).
-   Cursor stays the plain arrow — that's what a scrollbar shows, and `grab` would claim otherwise. */
-.oruler-host { scrollbar-width: none; }
-.oruler-host::-webkit-scrollbar { width: 0; height: 0; }
-.oruler { position: absolute; inset-block: 0; width: 6px; z-index: 5; cursor: default; touch-action: none; }
-.oruler-mark { position: absolute; left: 0; right: 0; min-height: 3px; border-radius: 1px; pointer-events: none; }
-/* Wider than the track and above the marks, so what's on screen reads as a thumb laid over the map. */
-.oruler-win {
-  position: absolute; left: -3px; right: -3px; z-index: 1; min-height: 6px; border-radius: 3px;
-  pointer-events: none; background: color-mix(in srgb, var(--fg) 28%, transparent);
-}
-/* The menu thumbs' own two steps (28/45) — same surface, same weights. Still a wash rather than a
-   solid fill: the marks it covers are the ones you're about to read. */
-.oruler:hover .oruler-win { background: color-mix(in srgb, var(--fg) 45%, transparent); }
-/* A finger needs a target a 6px track can't give; the map is worth more widened than dropped. */
-@media (pointer: coarse) {
-  .oruler { width: 14px; }
-  .oruler-win { left: -2px; right: -2px; }
-}
-/* Forced colours drop our tints — the window would vanish outright, and the marks' red/green IS the
-   information, so it keeps its own palette rather than collapsing to one system colour. */
-@media (forced-colors: active) {
-  .oruler-win { background: transparent; border: 1px solid Highlight; }
-  .oruler-mark { forced-color-adjust: none; }
-}
-/* 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; }
-/* Summary's text-only working cue sits on a white surface in the light theme. Widen and deepen its
-   blue sweep there so the seven-second motion remains plainly visible; dark's calibrated treatment
-   stays untouched. */
-html:not([data-theme="dark"]) .turn-view > .shimmer-text {
-  background-image: linear-gradient(100deg, currentColor 20%, var(--accent) 40%, color-mix(in srgb, var(--accent) 70%, var(--fg)) 50%, var(--accent) 60%, currentColor 80%) !important;
-}
-@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; }
-}
-
-/* THE WORKING STATE for an opaque word pill — the token chip mid-turn. Only the shimmer's knobs live
-   here; the sweep itself is the shared .shimmer above, composed by `busyPill()` (ui.ts) so a new busy
-   pill cannot land at its own speed or its own base colour. The sweep blends with --panel, not
-   transparent like the launch buttons': a word pill sits over message text and must keep covering it.
-   shimmer-slow because these can sit lit for minutes (the JSONL flushes in batches, so the token chip
-   rides a whole buffering window). */
-.pill-busy { border-color: var(--accent); --shimmer-base: var(--panel); --shimmer-mix: 25%; }
-
-/* ---- Boot overlay (index.html, markup and script both) — what the window shows between the HTML
-   landing and the client having a transcript. Opaque and over #app, so the empty
-   chrome never flashes through first. The 1.2s animation delay is the whole don't-flash-on-a-fast-load
-   mechanism: a normal boot is retired before this fades in, so the wait is only ever announced when
-   there is one. Measured, not guessed — a warm local boot lands at 590-930ms (dev, where the client
-   bundle is unminified and slowest), so the delay has to clear that, not merely beat a blank screen.
-   Geometry follows .cwd-hint, the mirror's other centred whole-window message. */
-.boot {
-  position: fixed;
-  inset: 0;
-  background: var(--bg);
-  display: grid;
-  place-content: center;
-  justify-items: center;
-  gap: .5rem;
-  padding: 2rem;
-  text-align: center;
-  animation: boot-in .35s ease 1.2s both;
-}
-.boot-title { font-size: 1.15rem; }
-/* min-height reserves the line the seconds count lands on, so naming the wait doesn't shift the title. */
-.boot-why { color: var(--muted); font-size: .95rem; max-width: 32rem; min-height: 1.4em; }
-@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }
-
-/* ── Tooltip — the styled stand-in for native `title`, and only on FIXED EXPLANATORY copy: text
-   that teaches what a control does. Dynamic identifiers (a path, a model id, an mcp tool's full
-   name) keep the native attribute, which is better at them: they run long, they want to wrap, and
-   `title` is the reliable "show me the whole string" affordance a bounded box is worse at. One
-   attribute opts a control in, no wrapper component and no JS, and it shows on :focus-visible,
-   which native `title` never does for a keyboard user. `data-tip` is not an accessible name, so a
-   glyph-only control still needs its own ariaLabel.
-   Three non-obvious bits. :where() zeroes the position rule's specificity, so a control that is
-   ALREADY positioned (the filter's inset × and 🔬) keeps its own and is its own containing block
-   anyway. display:none at rest rather than opacity:0, because an absolutely positioned box still
-   counts toward a scroll container's scrollable overflow and .messages' stuck-to-bottom test is
-   measured in pixels. The open delay therefore rides an animation (fill-mode both holds the
-   from-state through the delay), since a display switch cannot transition. ── */
-:where([data-tip]) { position: relative; }
-[data-tip]::after {
-  content: attr(data-tip);
-  display: none;
-  position: absolute;
-  z-index: 40;
-  top: calc(100% + 7px);
-  left: 50%;
-  transform: translateX(-50%);
-  width: max-content;
-  max-width: min(22rem, 60vw);
-  padding: .3rem .55rem;
-  background: var(--panel);
-  color: var(--fg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
-  /* Its own typography, never the host's (a stub label is italic, a pill is not) — but the same
-     SIZE as the chrome it explains, .8rem, which is both the statusbar's and the tab row's. A tip
-     set larger than the control it belongs to reads as shouting. Full --fg carries it instead. */
-  font-size: .8rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.4;
-  /* Centred and balanced, because the box CANNOT hug wrapped text: `width: max-content` capped by
-     max-width means any tip too long for one line sits at exactly max-width, whatever it wraps to.
-     Left-aligned, the leftover on the last line then reads as dead space (the model pill's tip, the
-     only one long enough to wrap). Balancing evens the lines and centring splits what's left to both
-     sides, so a two-line tip reads as a block instead of a full line plus a stub. */
-  text-align: center;
-  text-wrap: balance;
-  /* pre-line, not normal: a tip built from two lines (the session pill's cwd over its id) keeps the
-     break native `title` gave it, and everything else still wraps at the max-width. */
-  white-space: pre-line;
-  pointer-events: none;
-}
-[data-tip]:hover::after,
-[data-tip]:focus-visible::after { display: block; animation: tip-in .12s ease .4s both; }
-@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
-/* One tip nested in another (the diff pill's × sits inside the pill body): hovering the inner one
-   hovers the outer too, so both boxes would open. Only the innermost shows, which is how native
-   `title` resolves it. */
-[data-tip]:has([data-tip]:hover)::after { display: none; }
-/* Pressed: tooltips are dismissed until the pointer reaches a different one (ui.ts
-   armTooltipDismiss). Out-specifies the :hover rule on its own, no !important needed. */
-body.tips-off [data-tip]::after { display: none; }
-/* Bottom-anchored surfaces open upward, like their own menus: under the statusbar and under the
-   composer's action row there is no room to drop into. */
-:is(.statusbar, .composer) [data-tip]::after { top: auto; bottom: calc(100% + 7px); }
-/* ...and grow LEFT from the control's right edge, which is the "end" alignment the statusbar menus
-   already take by default (.pop-center / .pop-start above are their opt-outs). Every one of these
-   clusters is right-aligned, so a centred box runs past the viewport — the bulbs pill's tip was
-   clipped — and inside a menu it is also the direction that stays within its overflow:hidden for a
-   control inset at the right edge. The transcript's own tips stay centred: they sit mid-column. */
-:is(.statusbar, .composer, .picker, .servers-pop) [data-tip]::after { left: auto; right: 0; transform: none; }
-/* ...except where the pill's WRAP already names an alignment for its menu. A tip and the menu it
-   belongs to must open the same way, so both read off the same tag (.pop-center / .pop-start above)
-   and neither can be set on its own. Direct child, like the menu rules: a control nested inside a
-   pill (the diff pill's ×) keeps the cluster's end alignment, which is right at a pill's far edge. */
-.pop-center > [data-tip]::after { right: auto; left: 50%; transform: translateX(-50%); }
-.pop-start > [data-tip]::after { right: auto; left: 0; transform: none; }
-
-/* ── 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: scroll; 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); }
-/* One dot in a reserved gutter slot, transparent on every row so titles align whether or not it
-   shows. Green = the harness reports this session mid-turn (the live-app axis, the launcher's
-   running-:port green); accent = "you are here", and it wins, because the row you are reading is
-   self-evidently working and a second mark at 7px would say nothing new. Deliberately NOT process
-   liveness, which is true of every window left open — see TB-Agent-Mirror-Ready.md. */
-.picker-dot {
-  flex: none;
-  align-self: center;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: transparent;
-}
-.picker-dot.working { background: var(--fold-marker); }
-/* Higher specificity than .working on purpose: attachment outranks the turn state. */
-.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; }
-/* A full-text hit inside a session's child transcript (TB-Agent-Children.md): indented under its
-   parent's row and muted, at the SAME size — the row's distinguishing content is the agent's
-   description, so shrinking it is the last thing that should happen to it. */
-.picker-row.child { padding-left: 1.9rem; }
-.picker-row.child .picker-preview { color: var(--muted); }
-.picker-child-kind { flex: none; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); opacity: .8; }
-/* 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; color: var(--muted);
-}
-/* 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. currentColor tracks the
-   pill's muted→accent state; grayscale at rest like the other compact glyph controls. */
-.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; }
-.diag-name { min-width: 0; color: var(--fg); font-size: .8rem; 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); }
-/* The inset controls (clear ×, then the mode toggle) flow in one cluster flush to the input's
-   top/right/bottom, inside its 1px border — so neither carries an offset for the other's width. */
-.bulb-filter-inset { position: absolute; right: 1px; top: 1px; bottom: 1px; display: flex; align-items: stretch; }
-/* Clear (×) — only rendered when the filter is non-empty; wipes it and refocuses the box. */
-.bulb-filter-clear {
-  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) — the cluster's right end. Both comboboxes render it
-   (ComboboxPill's modeToggle). */
-.bulb-filter-control.has-trailing .bulb-filter { padding-right: 3.8rem; }
-.bulb-filter-mode {
-  /* The right corners match the input's 6px radius so the latched fill reads as part of the box. */
-  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. */
-/* overflow-y: scroll, not auto — the scrollbar channel is 15px of the row band's right inset, so a
-   list short enough not to scroll (a project with no bulbs of its own: one collapsed fold row) had
-   its rows run 15px nearer the edge than the filter box below them. Keeping the channel always
-   present makes that inset one number — the same "effectively always present" the model menu's
-   header padding already hardcodes. (scrollbar-gutter is the stated fix and is ignored here.) */
-.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: scroll; }
-/* 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; }
-/* 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-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); }
-/* .fold-caret shares only this geometry line (not the bordered-button rule above): the fold header's
-   caret rides an invisible play-button-sized box, so a samples-only list sizes the button column
-   exactly as a list with real buttons does, and the caret centres where the play glyphs do. */
-.server-stop, .bulb-launch, .fold-caret { 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; }
-/* Summary’s first-use setup is deliberately informational: the normal interruption chrome makes
-   the compact .env recipe legible without pretending the reader made a risky choice. */
-.summary-setup { width: min(390px, 100%); }
-.summary-setup-keys {
-  padding: .55rem .65rem;
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--bg);
-  color: var(--fg);
-  font: .78rem/1.6 ui-monospace, Menlo, Consolas, monospace;
-  white-space: pre-line;
-  user-select: text;
-}
-.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)); }
-/* The single-line menu-row geometry both swap-pills use (the session picker's rows are a column —
-   they grow for a search snippet — so they keep their own). Merged selectors, the convention the
-   .*-wrap rules above already follow: a third pill adds its name here rather than a fourth copy. */
-.gitdiff-list, .children-list { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-height: 0; overflow-y: scroll; padding-right: 4px; }
-.gitdiff-row, .children-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, .children-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
-.gitdiff-row.active, .children-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; }
-/* The × on a pill holding the transcript's slot (ui.ts closeChip) — one rule, both swap-pills. */
-.pill-close { flex: none; display: inline-flex; padding: 0 .15rem; color: var(--muted); }
-.pill-close .icon { width: 10px; height: 10px; }
-.pill-close:hover { color: var(--accent); }
-/* Doc open ⇒ transcript-scoped pills hide: model switcher and session picker act on a conversation
-   that is not 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(.model-wrap, .sid-wrap, .children-wrap) { display: none; }
-
-/* ── the agents pill (TB-Agent-Children.md): this session's child transcripts. The git-diff pill's
-   shape throughout — presence is the signal (a session that spawned nothing has no pill), picking a
-   row swaps the transcript for that child's conversation, and the pill then wears its identity so
-   the child view carries no chrome of its own. ── */
-/* Only the VIEWING form is a glyph pill (it needs the fixed square's width freed); the chip is an
-   ordinary word pill, `🤖${n}🤖`, so it takes .pill's centering recipe untouched. */
-.pill.glyph.children-pill { width: auto; padding: 0 .45rem; gap: .3rem; }
-/* The chip is a word pill, so it sits outside `.pill.glyph` twice over: its emoji keep their colour
-   at rest (they read as the agents themselves, not as chrome), and they take none of the glyph
-   padding. `.pill`'s .7rem is measured for letters; an emoji's advance already carries its own side
-   bearings, so that padding lands outside whitespace the glyph brought with it and reads as a gap.
-   The margin then goes on each glyph's INNER side only: the padding already owns the outer gap, so a
-   symmetric one doubles up exactly where it shows. Chip only, since the viewing form is a flex row
-   with a gap of its own. */
-.children-pill { padding: 0 .3rem; }
-.children-pill:not(.glyph) .glyph-img:first-child { margin-right: .12rem; }
-.children-pill:not(.glyph) .glyph-img:last-child { margin-left: .12rem; }
-.children-pop { width: min(520px, calc(100vw - 2rem)); }
-.children-row.viewing .children-label { color: var(--accent); }
-/* One dot carries the state: still working (the fold-marker green), finished (dim), killed by the
-   user (warn). Green because running is the LIVE-APP axis, the same one the launcher's running
-   :port and play glyph sit on; the blue accent is the source/name axis and would read as "selected"
-   here, which the row already says by other means. */
-.children-dot { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .4; }
-.children-dot.running { background: var(--fold-marker); opacity: 1; }
-.children-dot.stopped { background: var(--warn); opacity: .85; }
-/* The agent's type, capped so the common long one (general-purpose) can't crowd out the
-   description — which is the only thing telling eleven siblings apart. Muted by colour, not size. */
-.children-kind { flex: none; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
-.children-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.children-model { flex: none; color: var(--muted); opacity: .8; }
-.children-time, .children-tokens { flex: none; color: var(--muted); font-size: .72rem; min-width: 2.6rem; text-align: right; }
-/* The viewing form: the open child's identity in place of the icon+count, with the × that returns.
-   Same seating rule as the diff pill's — .pill.glyph opts out of the text-box trim, so each TEXT
-   flex item takes it back or the words sit low against the icon. */
-.pill.glyph.children-pill.viewing { max-width: min(18rem, 35vw); gap: .45rem; padding: 0 .35rem 0 .5rem; }
-.children-pill.viewing .children-doc-label { text-box: trim-both cap alphabetic; }
-.children-doc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pill-font); color: var(--accent); }
-
-/* 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;
-  /* No scrollbar-gutter: the native bar is hidden (.oruler-host), so the 15px it used to reserve on
-     each edge rides in the padding instead — same metrics, and the right one is the ruler's channel. */
-  padding: .75rem calc(1.75rem + 15px) 2.5rem;
-  font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  white-space: pre-wrap; word-break: break-word;
-}
-/* The scroller is the focusable element (it owns the paging keys), but a ring round a full-bleed pane
-   is a box round the whole screen. Keyboard focus shows on the ruler's window instead — the thing the
-   paging keys actually move, and a real indicator rather than none at all. */
-.diff-doc-body:focus { outline: none; }
-.diff-doc-body:focus-visible ~ .diff-ruler .oruler-win { background: color-mix(in srgb, var(--accent) 55%, transparent); }
-.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 ruler's diff clothing — red/green per change run; it rides in the channel the body's right
-   padding reserves, where the scrollbar it replaces used to be. Geometry, the window and the click
-   are the shared widget's. The wrapper keeps it overlaid rather than scrolling with the body. */
-.diff-doc-scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
-.diff-ruler { right: 4px; }
-.diff-ruler .oruler-mark.add { background: var(--diff-add); opacity: .8; }
-.diff-ruler .oruler-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;
-}
-/* A user bubble is a panel, so its hover copy pill clears the border instead of sitting on it.
-   .5rem matches the controls' own `bottom`, so the pill stands equally clear on both axes.
-   Inherited by the agent variant below, and by any later bubble that grows a surface. */
-.bubble.user { --pill-inset: .5rem; }
-/* A sub-agent's hand-back (TB-Agent-Children.md): a user turn the harness delivered on an agent's
-   behalf, never one the user typed, so it wears its own outline instead of the plain send's. The
-   accent is the source/name axis (the same one the agents pill's open-child label sits on); green
-   belongs to the live axis and would read as "still running", which a report never is. */
-.bubble.user.agent {
-  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
-  background: color-mix(in srgb, var(--accent) 7%, transparent);
-}
-/* The frame's header: the agents pill's glyph, the agent's type, then its description, which is the
-   link into its transcript. Muted by colour and NOT by size — the description is the one thing that
-   tells eleven siblings apart, so it stays at the body's size (the picker's child-row rule). */
-.agent-head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .55rem; }
-.agent-head .glyph-img { flex: none; align-self: center; }
-.agent-kind { flex: none; color: var(--muted); }
-.agent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-a.agent-name { color: var(--accent); cursor: pointer; }
-a.agent-name:hover { text-decoration: underline; }
-/* 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
-   inline bulb 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).
-   --chop-inset (the stripe-chop's reach into the gutter) and --chop-bg (the fill that covers the
-   stripe) live here too: all four describe the transcript column, so all four are the container's
-   to declare rather than the artifact's. */
-.md {
-  --lane-w: calc(100vw - 2rem); --lane-ml: calc((100% - var(--lane-w)) / 2);
-  --chop-inset: 1rem; --chop-bg: var(--bg);
-}
-
-/* A padded panel that holds rendered markdown redeclares all four as its own box: a sub-agent
-   hand-back frame (TB-Agent-Children.md), a disclosure, a blockquote. Inside one there is no turn
-   stripe to reach for or to cover, so the reach and the fill go to zero and an embed keeps only its
-   vertical band, while the lane collapses to the panel: a wide table then shares the panel's width
-   through its two ceilings and scrolls in .table-scroll, instead of a band that bleeds over the
-   card's border and paints page colour across its tint. The reset must land on the `.md` element
-   itself, since `.md` declares the defaults on itself and would beat a rule on an ancestor. The
-   next panel is one more selector here. */
-.bubble.user > .md, .md details, .md blockquote {
-  --lane-w: 100%; --lane-ml: 0px; --chop-inset: 0px; --chop-bg: transparent;
-}
-
-/* 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 inline bulb 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 inline bulb 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 inline bulb (the gap is .6rem). */
-.md .mermaid {
-  overflow-x: auto;
-  display: flex;
-  justify-content: safe center;
-  box-shadow: 0 0 0 1rem var(--chop-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). An IN-COLUMN table starts where the prose
-   starts — it is part of the paragraph flow, and a narrow one centred in the column reads as shifted
-   right against the left-aligned text above and below it, which is the whole of that bug. Only a
-   SPREAD table centres, and it has earned it: spreading means it is already wider than the column, so
-   centring keeps it symmetric about the column axis exactly as the mermaid lane does. `safe` on both
-   means one that overflows its box falls back to the start and scrolls from its first column rather
-   than clipping. 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 flex-start; }
-.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; }
-/* The spread band's comfort goes on the RIGHT only, which looks asymmetric written down and is what
-   reads as even on screen. `.messages` reserves a scrollbar gutter at BOTH edges (to hold the column
-   on the window axis), but only the right one ever contains a scrollbar: the left gutter is dead
-   space that already reads as margin, while on the right the lane's own 1rem inset is all there is
-   between the table and the bar. Inset both sides equally and the left gap measures a gutter wider
-   than the right; inset neither and the table sits flush against the bar, which is the bug. So the
-   band adds back one inset on the right, and the table's cap comes down by that same inset or it
-   would overflow the band's content box by exactly that at every width — the permanent scrollbar the
-   zeroed inset was avoiding. */
-.md .table-embed.spread {
-  justify-content: safe center;
-  width: var(--lane-w);
-  margin-left: var(--lane-ml);
-  margin-right: auto;
-  padding-left: 0;
-  padding-right: var(--chop-inset);
-}
-.md .table-embed.spread table { max-width: calc(var(--lane-w) - var(--chop-inset)); }
-
-/* ````bulb```` inline bulbs: 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 inline bulb (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 --chop-inset left extension reaches the stripe in the gutter
-   without a full breakout (the matching padding-left 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); inside a
-   panel both zero out (the nesting reset above). 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-inline / .svg-embed. */
-.md .embed {
-  display: flex;
-  position: relative;
-  z-index: 0;
-  background: var(--chop-bg);
-  margin: 0 0 0 calc(-1 * var(--chop-inset));
-  padding: 1.1rem 0 1.1rem var(--chop-inset);
-}
-/* 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-inline { flex-direction: column; }
-/* Inline (default): cap the inline bulb's height so a tall bulb doesn't run away down the transcript.
-   Past the cap the inline bulb scrolls internally (its own overflow, set by the host↔inline bulb protocol —
-   the iframe element can't scroll its srcdoc from out here). spread removes the cap. */
-.md .bulb-inline.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-inline, 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-inline.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-inline.spread iframe,
-.md .bulb-inline.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 inline bulb and the prose it abuts (top and bottom):
-   the inline bulb'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 inline bulb (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-inline iframe,
-.md .bulb-inline > .bulb-code {
-  border-radius: 8px;
-}
-/* Overlay pill: a small hover-revealed control floated at a container's
-   bottom-right, shared by the inline bulb 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;
-  /* Flush with the content column's right edge (prose / statusbar pills) when the pill sits on the
-     page's own background. A PANEL sets --pill-inset instead, so the pill clears its edge rather
-     than landing on the border: `right: 0` resolves against the containing block's padding box, so
-     inside a bordered box it means "touching the border". Only this axis needed it — `bottom` has
-     always stood the pill off, which is why the defect read as a right-edge one. */
-  right: var(--pill-inset, 0px);
-  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; }
-/* A code fence IS a panel (the <pre> carries the border and background, the wrapper is the
-   positioning context), so its copy pill takes the inset. The svg and mermaid embeds are
-   transparent bands on the page background and keep the flush edge. */
-.md .code-block { --pill-inset: .5rem; }
-.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 inline bulb-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-inline: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
-   inline bulb 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 inline bulb 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 InlineBulb 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-inline.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); }
-/* Reply's stand-in for a turn that said nothing (messageList #noProseBubble). Same voice as the stub
-   above, minus its row shape and cursor — this one is a label, not a toggle. */
-.no-prose { color: var(--muted); font-size: .85rem; font-style: italic; padding: .15rem 0; }
-
-/* 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 inline bulb (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 inline bulb 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; the cursor is explicit because the anchor carries no href
-   (the click is a server RPC, not navigation) and so defaults to the surrounding prose's caret. */
-.tool-sum.link {
-  color: var(--accent);
-  text-decoration: none;
-  cursor: pointer;
-}
-.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; }
-
-/* The bubble's hover-revealed copy-pill row. The direct-child reveal avoids firing an inline bulb's
-   own controls when the reader merely hovers the outer assistant bubble. */
-.bubble-controls {
-  position: absolute;
-  bottom: .5rem;
-  right: var(--pill-inset, 0px);
-  display: flex;
-  gap: .4rem;
-}
-.bubble-controls .overlay-pill { position: static; }
-.bubble:hover > .bubble-controls .overlay-pill,
-.bubble-controls .overlay-pill:focus-visible { 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 > .bubble-controls { bottom: 0; }
-
-/* A turn's local representation selector (turnView.ts). A standard tab bar: a continuous bottom
-   line under all tabs, the selected tab's thicker line indicating the active view. Raw is the full
-   chronological trace for one turn, Reply is its exact prose, and Summary is the generated
-   compression. Normal flow above the selected body means every switch resizes only below itself. */
-.turn-views-row {
-  display: flex;
-  align-items: baseline;
-  gap: 0;
-  width: fit-content;
-  margin: .7rem auto;
-  font-size: .8rem;
-  line-height: 1.3;
-  border-bottom: 1px solid var(--border);
-}
-.turn-view {
-  appearance: none;
-  margin: 0 0 -1px 0;
-  padding: 0 .5rem .1rem;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  background: none;
-  color: var(--muted);
-  font: inherit;
-  cursor: pointer;
-  text-align: center;
-}
-.turn-view:hover, .turn-view.on { color: var(--accent); }
-.turn-view.on { border-bottom-color: var(--accent); }
-.turn-view.err { color: var(--err); }
+: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. 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 {
+  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). */
+.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: width pinned to the pill height rather than padding-driven. 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, .children-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, .children-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;
+  /* The bar's line-height:1 is for its fixed-height pills; a menu is a text surface, so restore
+     descender room HERE, once. Inherited, the 1 crops the tails of "g"/"j"/"p" under every row's
+     overflow:hidden (the ellipsis clip) — a leaf-by-leaf fix that had already been pasted three
+     times. Rows are floored at --menu-row-h with their paddings kept under it, so pitch is unchanged. */
+  line-height: 1.35;
+  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);
+}
+/* Menu-list scrollbars: the channel is ALWAYS reserved (overflow-y: scroll on all three lists) and
+   the scrollbar is owned — no arrow buttons, transparent track, a floating thumb only when the list
+   actually overflows. Native auto scrollbars made a row band's right inset depend on list length: a
+   project with no bulbs of its own (one collapsed fold row) ran its band 15px nearer the popover
+   edge than the filter box under it, and bare overflow:scroll parked a vestigial arrow-stub beside
+   the short list. Width stays 15px, the native width .model-head's alignment padding hardcodes.
+   Chromium pseudos on purpose: setting the standard scrollbar-color would disable them. */
+:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar { width: 15px; }
+:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-button { display: none; }
+:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-track { background: transparent; }
+:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--fg) 28%, transparent);
+  border-radius: 8px;
+  /* Transparent border + padding-box clip floats a slim pill in the 15px channel. */
+  border: 4px solid transparent;
+  background-clip: padding-box;
+}
+:is(.picker-list, .bulb-list, .gitdiff-list)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fg) 45%, transparent); }
+
+/* The overview ruler (overviewRuler.ts): a scroll container's bar, replaced. .oruler-host is applied
+   by the widget at mount — never statically — so the native bar only disappears once its replacement
+   is painted. BOTH hiding routes: the standard property covers Gecko, the pseudo covers WebKit, and
+   Blink honours either, so no engine is left showing two scrollbars. Window and marks are % of a track
+   that spans the pane, so they share the container's content space. Marks are pointer-inert; the track
+   takes the press, the drag and the wheel. Colour and the track's inset are the host's (.diff-ruler).
+   Cursor stays the plain arrow — that's what a scrollbar shows, and `grab` would claim otherwise. */
+.oruler-host { scrollbar-width: none; }
+.oruler-host::-webkit-scrollbar { width: 0; height: 0; }
+.oruler { position: absolute; inset-block: 0; width: 6px; z-index: 5; cursor: default; touch-action: none; }
+.oruler-mark { position: absolute; left: 0; right: 0; min-height: 3px; border-radius: 1px; pointer-events: none; }
+/* Wider than the track and above the marks, so what's on screen reads as a thumb laid over the map. */
+.oruler-win {
+  position: absolute; left: -3px; right: -3px; z-index: 1; min-height: 6px; border-radius: 3px;
+  pointer-events: none; background: color-mix(in srgb, var(--fg) 28%, transparent);
+}
+/* The menu thumbs' own two steps (28/45) — same surface, same weights. Still a wash rather than a
+   solid fill: the marks it covers are the ones you're about to read. */
+.oruler:hover .oruler-win { background: color-mix(in srgb, var(--fg) 45%, transparent); }
+/* A finger needs a target a 6px track can't give; the map is worth more widened than dropped. */
+@media (pointer: coarse) {
+  .oruler { width: 14px; }
+  .oruler-win { left: -2px; right: -2px; }
+}
+/* Forced colours drop our tints — the window would vanish outright, and the marks' red/green IS the
+   information, so it keeps its own palette rather than collapsing to one system colour. */
+@media (forced-colors: active) {
+  .oruler-win { background: transparent; border: 1px solid Highlight; }
+  .oruler-mark { forced-color-adjust: none; }
+}
+/* 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; }
+/* Summary's text-only working cue sits on a white surface in the light theme. Widen and deepen its
+   blue sweep there so the seven-second motion remains plainly visible; dark's calibrated treatment
+   stays untouched. */
+html:not([data-theme="dark"]) .turn-view > .shimmer-text {
+  background-image: linear-gradient(100deg, currentColor 20%, var(--accent) 40%, color-mix(in srgb, var(--accent) 70%, var(--fg)) 50%, var(--accent) 60%, currentColor 80%) !important;
+}
+@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; }
+}
+
+/* THE WORKING STATE for an opaque word pill — the token chip mid-turn. Only the shimmer's knobs live
+   here; the sweep itself is the shared .shimmer above, composed by `busyPill()` (ui.ts) so a new busy
+   pill cannot land at its own speed or its own base colour. The sweep blends with --panel, not
+   transparent like the launch buttons': a word pill sits over message text and must keep covering it.
+   shimmer-slow because these can sit lit for minutes (the JSONL flushes in batches, so the token chip
+   rides a whole buffering window). */
+.pill-busy { border-color: var(--accent); --shimmer-base: var(--panel); --shimmer-mix: 25%; }
+
+/* ---- Boot overlay (index.html, markup and script both) — what the window shows between the HTML
+   landing and the client having a transcript. Opaque and over #app, so the empty
+   chrome never flashes through first. The 1.2s animation delay is the whole don't-flash-on-a-fast-load
+   mechanism: a normal boot is retired before this fades in, so the wait is only ever announced when
+   there is one. Measured, not guessed — a warm local boot lands at 590-930ms (dev, where the client
+   bundle is unminified and slowest), so the delay has to clear that, not merely beat a blank screen.
+   Geometry follows .cwd-hint, the mirror's other centred whole-window message. */
+.boot {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: .5rem;
+  padding: 2rem;
+  text-align: center;
+  animation: boot-in .35s ease 1.2s both;
+}
+.boot-title { font-size: 1.15rem; }
+/* min-height reserves the line the seconds count lands on, so naming the wait doesn't shift the title. */
+.boot-why { color: var(--muted); font-size: .95rem; max-width: 32rem; min-height: 1.4em; }
+@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* ── Tooltip — the styled stand-in for native `title`, and only on FIXED EXPLANATORY copy: text
+   that teaches what a control does. Dynamic identifiers (a path, a model id, an mcp tool's full
+   name) keep the native attribute, which is better at them: they run long, they want to wrap, and
+   `title` is the reliable "show me the whole string" affordance a bounded box is worse at. One
+   attribute opts a control in, no wrapper component and no JS, and it shows on :focus-visible,
+   which native `title` never does for a keyboard user. `data-tip` is not an accessible name, so a
+   glyph-only control still needs its own ariaLabel.
+   Three non-obvious bits. :where() zeroes the position rule's specificity, so a control that is
+   ALREADY positioned (the filter's inset × and 🔬) keeps its own and is its own containing block
+   anyway. display:none at rest rather than opacity:0, because an absolutely positioned box still
+   counts toward a scroll container's scrollable overflow and .messages' stuck-to-bottom test is
+   measured in pixels. The open delay therefore rides an animation (fill-mode both holds the
+   from-state through the delay), since a display switch cannot transition. ── */
+:where([data-tip]) { position: relative; }
+[data-tip]::after {
+  content: attr(data-tip);
+  display: none;
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 7px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: min(22rem, 60vw);
+  padding: .3rem .55rem;
+  background: var(--panel);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
+  /* Its own typography, never the host's (a stub label is italic, a pill is not) — but the same
+     SIZE as the chrome it explains, .8rem, which is both the statusbar's and the tab row's. A tip
+     set larger than the control it belongs to reads as shouting. Full --fg carries it instead. */
+  font-size: .8rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.4;
+  /* Centred and balanced, because the box CANNOT hug wrapped text: `width: max-content` capped by
+     max-width means any tip too long for one line sits at exactly max-width, whatever it wraps to.
+     Left-aligned, the leftover on the last line then reads as dead space (the model pill's tip, the
+     only one long enough to wrap). Balancing evens the lines and centring splits what's left to both
+     sides, so a two-line tip reads as a block instead of a full line plus a stub. */
+  text-align: center;
+  text-wrap: balance;
+  /* pre-line, not normal: a tip built from two lines (the session pill's cwd over its id) keeps the
+     break native `title` gave it, and everything else still wraps at the max-width. */
+  white-space: pre-line;
+  pointer-events: none;
+}
+[data-tip]:hover::after,
+[data-tip]:focus-visible::after { display: block; animation: tip-in .12s ease .4s both; }
+@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
+/* One tip nested in another (the diff pill's × sits inside the pill body): hovering the inner one
+   hovers the outer too, so both boxes would open. Only the innermost shows, which is how native
+   `title` resolves it. */
+[data-tip]:has([data-tip]:hover)::after { display: none; }
+/* Pressed: tooltips are dismissed until the pointer reaches a different one (ui.ts
+   armTooltipDismiss). Out-specifies the :hover rule on its own, no !important needed. */
+body.tips-off [data-tip]::after { display: none; }
+/* Bottom-anchored surfaces open upward, like their own menus: under the statusbar and under the
+   composer's action row there is no room to drop into. */
+:is(.statusbar, .composer) [data-tip]::after { top: auto; bottom: calc(100% + 7px); }
+/* ...and grow LEFT from the control's right edge, which is the "end" alignment the statusbar menus
+   already take by default (.pop-center / .pop-start above are their opt-outs). Every one of these
+   clusters is right-aligned, so a centred box runs past the viewport — the bulbs pill's tip was
+   clipped — and inside a menu it is also the direction that stays within its overflow:hidden for a
+   control inset at the right edge. The transcript's own tips stay centred: they sit mid-column. */
+:is(.statusbar, .composer, .picker, .servers-pop) [data-tip]::after { left: auto; right: 0; transform: none; }
+/* ...except where the pill's WRAP already names an alignment for its menu. A tip and the menu it
+   belongs to must open the same way, so both read off the same tag (.pop-center / .pop-start above)
+   and neither can be set on its own. Direct child, like the menu rules: a control nested inside a
+   pill (the diff pill's ×) keeps the cluster's end alignment, which is right at a pill's far edge. */
+.pop-center > [data-tip]::after { right: auto; left: 50%; transform: translateX(-50%); }
+.pop-start > [data-tip]::after { right: auto; left: 0; transform: none; }
+
+/* ── 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: scroll; padding-right: 4px; }
+/* Wrapper around just the list (not the filter), so the list takes the space above the 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); }
+/* One dot in a reserved gutter slot, transparent on every row so titles align whether or not it
+   shows. Green = the harness reports this session mid-turn (the live-app axis, the launcher's
+   running-:port green); accent = "you are here", and it wins, because the row you are reading is
+   self-evidently working and a second mark at 7px would say nothing new. Deliberately NOT process
+   liveness, which is true of every window left open — see TB-Agent-Mirror-Ready.md. */
+.picker-dot {
+  flex: none;
+  align-self: center;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: transparent;
+}
+.picker-dot.working { background: var(--fold-marker); }
+/* Higher specificity than .working on purpose: attachment outranks the turn state. */
+.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; }
+/* A full-text hit inside a session's child transcript (TB-Agent-Children.md): indented under its
+   parent's row and muted, at the SAME size — the row's distinguishing content is the agent's
+   description, so shrinking it is the last thing that should happen to it. */
+.picker-row.child { padding-left: 1.9rem; }
+.picker-row.child .picker-preview { color: var(--muted); }
+.picker-child-kind { flex: none; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); opacity: .8; }
+/* 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);
+}
+/* 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; color: var(--muted);
+}
+/* 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. currentColor tracks the
+   pill's muted→accent state; grayscale at rest like the other compact glyph controls. */
+.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; }
+.diag-name { min-width: 0; color: var(--fg); font-size: .8rem; 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); }
+/* The inset controls (clear ×, then the mode toggle) flow in one cluster flush to the input's
+   top/right/bottom, inside its 1px border — so neither carries an offset for the other's width. */
+.bulb-filter-inset { position: absolute; right: 1px; top: 1px; bottom: 1px; display: flex; align-items: stretch; }
+/* Clear (×) — only rendered when the filter is non-empty; wipes it and refocuses the box. */
+.bulb-filter-clear {
+  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) — the cluster's right end. Both comboboxes render it
+   (ComboboxPill's modeToggle). */
+.bulb-filter-control.has-trailing .bulb-filter { padding-right: 3.8rem; }
+.bulb-filter-mode {
+  /* The right corners match the input's 6px radius so the latched fill reads as part of the box. */
+  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. */
+/* overflow-y: scroll, not auto — the scrollbar channel is 15px of the row band's right inset, so a
+   list short enough not to scroll (a project with no bulbs of its own: one collapsed fold row) had
+   its rows run 15px nearer the edge than the filter box below them. Keeping the channel always
+   present makes that inset one number — the same "effectively always present" the model menu's
+   header padding already hardcodes. (scrollbar-gutter is the stated fix and is ignored here.) */
+.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: scroll; }
+/* 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; }
+/* 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 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-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); }
+/* .fold-caret shares only this geometry line (not the bordered-button rule above): the fold header's
+   caret rides an invisible play-button-sized box, so a samples-only list sizes the button column
+   exactly as a list with real buttons does, and the caret centres where the play glyphs do. */
+.server-stop, .bulb-launch, .fold-caret { 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; }
+/* Summary’s first-use setup is deliberately informational: the normal interruption chrome makes
+   the compact .env recipe legible without pretending the reader made a risky choice. */
+.summary-setup { width: min(390px, 100%); }
+.summary-setup-keys {
+  padding: .55rem .65rem;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg);
+  color: var(--fg);
+  font: .78rem/1.6 ui-monospace, Menlo, Consolas, monospace;
+  white-space: pre-line;
+  user-select: text;
+}
+.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)); }
+/* The single-line menu-row geometry both swap-pills use (the session picker's rows are a column —
+   they grow for a search snippet — so they keep their own). Merged selectors, the convention the
+   .*-wrap rules above already follow: a third pill adds its name here rather than a fourth copy. */
+.gitdiff-list, .children-list { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-height: 0; overflow-y: scroll; padding-right: 4px; }
+.gitdiff-row, .children-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, .children-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.gitdiff-row.active, .children-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; }
+/* The × on a pill holding the transcript's slot (ui.ts closeChip) — one rule, both swap-pills. */
+.pill-close { flex: none; display: inline-flex; padding: 0 .15rem; color: var(--muted); }
+.pill-close .icon { width: 10px; height: 10px; }
+.pill-close:hover { color: var(--accent); }
+/* Doc open ⇒ transcript-scoped pills hide: model switcher and session picker act on a conversation
+   that is not 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(.model-wrap, .sid-wrap, .children-wrap) { display: none; }
+
+/* ── the agents pill (TB-Agent-Children.md): this session's child transcripts. The git-diff pill's
+   shape throughout — presence is the signal (a session that spawned nothing has no pill), picking a
+   row swaps the transcript for that child's conversation, and the pill then wears its identity so
+   the child view carries no chrome of its own. ── */
+/* Only the VIEWING form is a glyph pill (it needs the fixed square's width freed); the chip is an
+   ordinary word pill, `🤖${n}🤖`, so it takes .pill's centering recipe untouched. */
+.pill.glyph.children-pill { width: auto; padding: 0 .45rem; gap: .3rem; }
+/* The chip is a word pill, so it sits outside `.pill.glyph` twice over: its emoji keep their colour
+   at rest (they read as the agents themselves, not as chrome), and they take none of the glyph
+   padding. `.pill`'s .7rem is measured for letters; an emoji's advance already carries its own side
+   bearings, so that padding lands outside whitespace the glyph brought with it and reads as a gap.
+   The margin then goes on each glyph's INNER side only: the padding already owns the outer gap, so a
+   symmetric one doubles up exactly where it shows. Chip only, since the viewing form is a flex row
+   with a gap of its own. */
+.children-pill { padding: 0 .3rem; }
+.children-pill:not(.glyph) .glyph-img:first-child { margin-right: .12rem; }
+.children-pill:not(.glyph) .glyph-img:last-child { margin-left: .12rem; }
+.children-pop { width: min(520px, calc(100vw - 2rem)); }
+.children-row.viewing .children-label { color: var(--accent); }
+/* One dot carries the state: still working (the fold-marker green), finished (dim), killed by the
+   user (warn). Green because running is the LIVE-APP axis, the same one the launcher's running
+   :port and play glyph sit on; the blue accent is the source/name axis and would read as "selected"
+   here, which the row already says by other means. */
+.children-dot { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .4; }
+.children-dot.running { background: var(--fold-marker); opacity: 1; }
+.children-dot.stopped { background: var(--warn); opacity: .85; }
+/* The agent's type, capped so the common long one (general-purpose) can't crowd out the
+   description — which is the only thing telling eleven siblings apart. Muted by colour, not size. */
+.children-kind { flex: none; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.children-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.children-model { flex: none; color: var(--muted); opacity: .8; }
+.children-time, .children-tokens { flex: none; color: var(--muted); font-size: .72rem; min-width: 2.6rem; text-align: right; }
+/* The viewing form: the open child's identity in place of the icon+count, with the × that returns.
+   Same seating rule as the diff pill's — .pill.glyph opts out of the text-box trim, so each TEXT
+   flex item takes it back or the words sit low against the icon. */
+.pill.glyph.children-pill.viewing { max-width: min(18rem, 35vw); gap: .45rem; padding: 0 .35rem 0 .5rem; }
+.children-pill.viewing .children-doc-label { text-box: trim-both cap alphabetic; }
+.children-doc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pill-font); color: var(--accent); }
+
+/* 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;
+  /* No scrollbar-gutter: the native bar is hidden (.oruler-host), so the 15px it used to reserve on
+     each edge rides in the padding instead — same metrics, and the right one is the ruler's channel. */
+  padding: .75rem calc(1.75rem + 15px) 2.5rem;
+  font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre-wrap; word-break: break-word;
+}
+/* The scroller is the focusable element (it owns the paging keys), but a ring round a full-bleed pane
+   is a box round the whole screen. Keyboard focus shows on the ruler's window instead — the thing the
+   paging keys actually move, and a real indicator rather than none at all. */
+.diff-doc-body:focus { outline: none; }
+.diff-doc-body:focus-visible ~ .diff-ruler .oruler-win { background: color-mix(in srgb, var(--accent) 55%, transparent); }
+.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 ruler's diff clothing — red/green per change run; it rides in the channel the body's right
+   padding reserves, where the scrollbar it replaces used to be. Geometry, the window and the click
+   are the shared widget's. The wrapper keeps it overlaid rather than scrolling with the body. */
+.diff-doc-scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.diff-ruler { right: 4px; }
+.diff-ruler .oruler-mark.add { background: var(--diff-add); opacity: .8; }
+.diff-ruler .oruler-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;
+}
+/* A user bubble is a panel, so its hover copy pill clears the border instead of sitting on it.
+   .5rem matches the controls' own `bottom`, so the pill stands equally clear on both axes.
+   Inherited by the agent variant below, and by any later bubble that grows a surface. */
+.bubble.user { --pill-inset: .5rem; }
+/* A sub-agent's hand-back (TB-Agent-Children.md): a user turn the harness delivered on an agent's
+   behalf, never one the user typed, so it wears its own outline instead of the plain send's. The
+   accent is the source/name axis (the same one the agents pill's open-child label sits on); green
+   belongs to the live axis and would read as "still running", which a report never is. */
+.bubble.user.agent {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+}
+/* The frame's header: the agents pill's glyph, the agent's type, then its description, which is the
+   link into its transcript. Muted by colour and NOT by size — the description is the one thing that
+   tells eleven siblings apart, so it stays at the body's size (the picker's child-row rule). */
+.agent-head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .55rem; }
+.agent-head .glyph-img { flex: none; align-self: center; }
+.agent-kind { flex: none; color: var(--muted); }
+.agent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+a.agent-name { color: var(--accent); cursor: pointer; }
+a.agent-name:hover { text-decoration: underline; }
+/* 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
+   inline bulb 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).
+   --chop-inset (the stripe-chop's reach into the gutter) and --chop-bg (the fill that covers the
+   stripe) live here too: all four describe the transcript column, so all four are the container's
+   to declare rather than the artifact's. */
+.md {
+  --lane-w: calc(100vw - 2rem); --lane-ml: calc((100% - var(--lane-w)) / 2);
+  --chop-inset: 1rem; --chop-bg: var(--bg);
+}
+
+/* A padded panel that holds rendered markdown redeclares all four as its own box: a sub-agent
+   hand-back frame (TB-Agent-Children.md), a disclosure, a blockquote. Inside one there is no turn
+   stripe to reach for or to cover, so the reach and the fill go to zero and an embed keeps only its
+   vertical band, while the lane collapses to the panel: a wide table then shares the panel's width
+   through its two ceilings and scrolls in .table-scroll, instead of a band that bleeds over the
+   card's border and paints page colour across its tint. The reset must land on the `.md` element
+   itself, since `.md` declares the defaults on itself and would beat a rule on an ancestor. The
+   next panel is one more selector here. */
+.bubble.user > .md, .md details, .md blockquote {
+  --lane-w: 100%; --lane-ml: 0px; --chop-inset: 0px; --chop-bg: transparent;
+}
+
+/* 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 inline bulb 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 inline bulb 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 inline bulb (the gap is .6rem). */
+.md .mermaid {
+  overflow-x: auto;
+  display: flex;
+  justify-content: safe center;
+  box-shadow: 0 0 0 1rem var(--chop-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). An IN-COLUMN table starts where the prose
+   starts — it is part of the paragraph flow, and a narrow one centred in the column reads as shifted
+   right against the left-aligned text above and below it, which is the whole of that bug. Only a
+   SPREAD table centres, and it has earned it: spreading means it is already wider than the column, so
+   centring keeps it symmetric about the column axis exactly as the mermaid lane does. `safe` on both
+   means one that overflows its box falls back to the start and scrolls from its first column rather
+   than clipping. 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 flex-start; }
+.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; }
+/* The spread band's comfort goes on the RIGHT only, which looks asymmetric written down and is what
+   reads as even on screen. `.messages` reserves a scrollbar gutter at BOTH edges (to hold the column
+   on the window axis), but only the right one ever contains a scrollbar: the left gutter is dead
+   space that already reads as margin, while on the right the lane's own 1rem inset is all there is
+   between the table and the bar. Inset both sides equally and the left gap measures a gutter wider
+   than the right; inset neither and the table sits flush against the bar, which is the bug. So the
+   band adds back one inset on the right, and the table's cap comes down by that same inset or it
+   would overflow the band's content box by exactly that at every width — the permanent scrollbar the
+   zeroed inset was avoiding. */
+.md .table-embed.spread {
+  justify-content: safe center;
+  width: var(--lane-w);
+  margin-left: var(--lane-ml);
+  margin-right: auto;
+  padding-left: 0;
+  padding-right: var(--chop-inset);
+}
+.md .table-embed.spread table { max-width: calc(var(--lane-w) - var(--chop-inset)); }
+
+/* ````bulb```` inline bulbs: 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 inline bulb (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 --chop-inset left extension reaches the stripe in the gutter
+   without a full breakout (the matching padding-left 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); inside a
+   panel both zero out (the nesting reset above). 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-inline / .svg-embed. */
+.md .embed {
+  display: flex;
+  position: relative;
+  z-index: 0;
+  background: var(--chop-bg);
+  margin: 0 0 0 calc(-1 * var(--chop-inset));
+  padding: 1.1rem 0 1.1rem var(--chop-inset);
+}
+/* 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-inline { flex-direction: column; }
+/* Inline (default): cap the inline bulb's height so a tall bulb doesn't run away down the transcript.
+   Past the cap the inline bulb scrolls internally (its own overflow, set by the host↔inline bulb protocol —
+   the iframe element can't scroll its srcdoc from out here). spread removes the cap. */
+.md .bulb-inline.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-inline, 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-inline.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-inline.spread iframe,
+.md .bulb-inline.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 inline bulb and the prose it abuts (top and bottom):
+   the inline bulb'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 inline bulb (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-inline iframe,
+.md .bulb-inline > .bulb-code {
+  border-radius: 8px;
+}
+/* Overlay pill: a small hover-revealed control floated at a container's
+   bottom-right, shared by the inline bulb 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;
+  /* Flush with the content column's right edge (prose / statusbar pills) when the pill sits on the
+     page's own background. A PANEL sets --pill-inset instead, so the pill clears its edge rather
+     than landing on the border: `right: 0` resolves against the containing block's padding box, so
+     inside a bordered box it means "touching the border". Only this axis needed it — `bottom` has
+     always stood the pill off, which is why the defect read as a right-edge one. */
+  right: var(--pill-inset, 0px);
+  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; }
+/* A code fence IS a panel (the <pre> carries the border and background, the wrapper is the
+   positioning context), so its copy pill takes the inset. The svg and mermaid embeds are
+   transparent bands on the page background and keep the flush edge. */
+.md .code-block { --pill-inset: .5rem; }
+.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 inline bulb-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-inline: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
+   inline bulb 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 inline bulb 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 InlineBulb 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-inline.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); }
+/* Reply's stand-in for a turn that said nothing (messageList #noProseBubble). Same voice as the stub
+   above, minus its row shape and cursor — this one is a label, not a toggle. */
+.no-prose { color: var(--muted); font-size: .85rem; font-style: italic; padding: .15rem 0; }
+
+/* A child's Tasks view (childTasks.ts): the parent's request, then the task table. Status reads
+   by colour on the existing roles; anything unusual is --warn, the mirror's amber. */
+/* The request bubble, then the table under it. */
+.child-tasks > .bubble.user { margin: .5rem auto .9rem; }
+/* Under the table, centred: where the table stands in time, then the view's two actions. */
+.child-tasks-foot { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem 0 1.75rem; }
+.child-tasks-actions { display: flex; gap: 1.4rem; }
+.child-tasks-actions a { cursor: pointer; color: var(--accent); }
+.child-tasks-actions a:hover { text-decoration: underline; }
+.child-tasks-note { color: var(--muted); font-size: .9rem; font-style: italic; }
+/* Every working text in this view is centred, like the status line under the table. */
+.child-tasks-pending { text-align: center; color: var(--muted); padding: .3rem 0; }
+.child-tasks-note.err { color: var(--err); }
+.child-tasks-note a { cursor: pointer; color: var(--accent); }
+.cs-table { width: 100%; border-collapse: collapse; }
+.cs-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: .9rem; padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
+.cs-table td { padding: .5rem; vertical-align: top; border-bottom: 1px solid var(--border); }
+.cs-table td:first-child { width: 34%; }
+.cs-status { white-space: nowrap; font-weight: 600; color: var(--muted); }
+.cs-status.in_progress { color: var(--accent); }
+.cs-status.done { color: var(--diff-add); }
+.cs-status.blocked { color: var(--err); }
+.cs-status.off { color: var(--warn); }
+.cs-off td:first-child { color: var(--warn); }
+.cs-note { color: var(--warn); padding-top: .2rem; }
+.cs-cite { color: var(--muted); font-size: .9rem; }
+.cs-cite a { cursor: pointer; color: var(--muted); text-decoration: underline dotted; }
+.cs-cite a:hover { color: var(--accent); }
+.cs-time { white-space: nowrap; color: var(--muted); }
+/* The timeline cell: a fixed track standing for the child's whole run, the row's stretches on it. */
+.cs-gantt-cell { display: flex; align-items: center; gap: .5rem; }
+.cs-gantt { position: relative; width: 140px; height: 10px; flex: none; border-radius: 3px; background: var(--veil); }
+.cs-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 2px; background: var(--muted); }
+.cs-seg.in_progress { background: var(--accent); }
+.cs-seg.done { background: var(--diff-add); }
+.cs-seg.blocked { background: var(--err); }
+.cs-seg.off { background: var(--warn); }
+/* A wake (the child was messaged and resumed): a hairline across the track, above the segments. */
+.cs-wake { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--fg); opacity: .45; }
+.cs-mins { min-width: 2.2rem; text-align: right; }
+/* A follow-up's bubble spans its row, so the columns under it stay aligned with the rest. */
+.cs-table .cs-group td { padding: 1.2rem 0 .6rem; border-bottom: 0; }
+/* The agents menu's per-row way straight into a child's Tasks view. */
+.children-tasks-link { flex: none; margin-left: .6rem; color: var(--muted); cursor: pointer; }
+.children-tasks-link:hover { color: var(--accent); text-decoration: underline; }
+/* A citation's landing row, marked briefly so the eye finds it. */
+.tool.revealed { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; transition: outline-color 1s; }
+
+/* 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 inline bulb (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 inline bulb 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; the cursor is explicit because the anchor carries no href
+   (the click is a server RPC, not navigation) and so defaults to the surrounding prose's caret. */
+.tool-sum.link {
+  color: var(--accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+.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; }
+
+/* The bubble's hover-revealed copy-pill row. The direct-child reveal avoids firing an inline bulb's
+   own controls when the reader merely hovers the outer assistant bubble. */
+.bubble-controls {
+  position: absolute;
+  bottom: .5rem;
+  right: var(--pill-inset, 0px);
+  display: flex;
+  gap: .4rem;
+}
+.bubble-controls .overlay-pill { position: static; }
+.bubble:hover > .bubble-controls .overlay-pill,
+.bubble-controls .overlay-pill:focus-visible { 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 > .bubble-controls { bottom: 0; }
+
+/* A turn's local representation selector (turnView.ts). A standard tab bar: a continuous bottom
+   line under all tabs, the selected tab's thicker line indicating the active view. Raw is the full
+   chronological trace for one turn, Reply is its exact prose, and Summary is the generated
+   compression. Normal flow above the selected body means every switch resizes only below itself. */
+.turn-views-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0;
+  width: fit-content;
+  margin: .7rem auto;
+  font-size: .8rem;
+  line-height: 1.3;
+  border-bottom: 1px solid var(--border);
+}
+.turn-view {
+  appearance: none;
+  margin: 0 0 -1px 0;
+  padding: 0 .5rem .1rem;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+  text-align: center;
+}
+.turn-view:hover, .turn-view.on { color: var(--accent); }
+.turn-view.on { border-bottom-color: var(--accent); }
+.turn-view.err { color: var(--err); }
 .turn-view:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }