@artooi/ag-ui-web-component 0.44.0 → 0.46.0

package/src/ui/styles.ts

@@ -1,3774 +1,104 @@
-// Shadow-DOM-scoped styles for the chat shell. Kept as a string constant so
-// the Custom Element can inject it into its shadow root without a build-time
-// CSS pipeline. Scoped by the shadow boundary, so class names stay terse.
-
-export const STYLES = `
-/* ── Token defaults ─────────────────────────────────────────────────────────
-   Every public --ag-ui-* token is read here into a private --_* alias, and
-   only the alias is used by the rules below.
-
-   The indirection is what makes ancestor theming work. Declaring the public
-   name on :host would set it on the host element, and a value on an element
-   always beats one inherited from an ancestor, so tokens put on a wrapper
-   would have no effect. Reading the public name with the default as a var()
-   fallback leaves it undeclared on the element, so an ancestor's value
-   inherits normally while one aimed at the element still wins.
-
-   Two invariants hold this together:
-   1. No rule outside this file's :host blocks may reference a public name
-      directly. A public name read outside these blocks resolves to nothing and
-      silently drops its declaration rather than erroring, so the miss shows up
-      as a missing colour, not a failure.
-   2. Every --_* alias in use is declared here. Aliases inherit like any custom
-      property, so an undeclared one would pick up a same-named property from
-      the host page; declaring it on :host shields the shadow tree from that. */
-:host {
-  /* Colors */
-  --_bg: var(--ag-ui-bg, #ffffff);
-  --_fg: var(--ag-ui-fg, #1a1a2e);
-  --_accent: var(--ag-ui-accent, #4f46e5);
-  --_user-bg: var(--ag-ui-user-bg, #4f46e5);
-  --_user-fg: var(--ag-ui-user-fg, #ffffff);
-  --_assistant-bg: var(--ag-ui-assistant-bg, #f1f1f6);
-  --_hover: var(--ag-ui-hover, #e7e7ee);
-  --_input-bg: var(--ag-ui-input-bg, var(--_bg));
-  --_tool-bg: var(--ag-ui-tool-bg, var(--_assistant-bg));
-  --_tool-fg: var(--ag-ui-tool-fg, var(--_accent));
-  --_header-bg: var(--ag-ui-header-bg, var(--_accent));
-  --_header-fg: var(--ag-ui-header-fg, #ffffff);
-  --_border: var(--ag-ui-border, #e2e2ec);
-  --_radius: var(--ag-ui-radius, 12px);
-  /* The panel's own frame, which is the one corner a placement can put against
-     the edge of the viewport. The placements that do (page, sidebar, side, full,
-     and all but embedded on a small viewport) square this and leave --_radius alone, so
-     the answer well and the controls inside the panel stay as round as the
-     theme says: none of them meets that edge. */
-  --_panel-radius: var(--ag-ui-panel-radius, var(--_radius));
-
-  /* Body text and raised chrome, read only by the code-block copy button.
-     The defaults restate what it inherits, so a host that sets neither sees
-     no repaint — see the note on .code-copy. */
-  --_text: var(--ag-ui-text, var(--_fg));
-  --_surface: var(--ag-ui-surface, transparent);
-
-  /* Message action row: the control box and the mark inside it. The box has a
-     floor of 24px so it stays a reliable target at every density. */
-  --_action-size: var(--ag-ui-action-size, 28px);
-  /* The header's own controls. Sized rather than left to their contents: a row
-     of buttons each as wide as the glyph inside it comes out uneven, and uneven
-     buttons two pixels apart read as one smudge rather than five controls. */
-  --_header-btn-size: var(--ag-ui-header-btn-size, 30px);
-  --_header-gap: var(--ag-ui-header-gap, 4px);
-  --_action-icon-size: var(--ag-ui-action-icon-size, 15px);
-  --_tooltip-bg: var(--ag-ui-tooltip-bg, #1f2430);
-  --_tooltip-fg: var(--ag-ui-tooltip-fg, #f5f6fa);
-
-  /* Text and marks drawn on top of the accent and danger fills. Separate
-     tokens because they are not free: a host that themes the accent to a pale
-     colour has white-on-pale with no way to correct it, which is the one
-     theming change that makes a control unreadable rather than merely off. */
-  --_on-accent: var(--ag-ui-on-accent, #ffffff);
-  --_on-danger: var(--ag-ui-on-danger, #ffffff);
-
-  /* Resize grips: the corner squares and the edge strips between them. Wide
-     enough to hit without being wide enough to swallow a click on the content
-     underneath, and adjustable for a host with a coarser pointer. */
-  --_grip-corner: var(--ag-ui-grip-corner, 14px);
-  --_grip-edge: var(--ag-ui-grip-edge, 6px);
-  --_grip-edge-docked: var(--ag-ui-grip-edge-docked, 8px);
-  /* The mark drawn inside a grip, as opposed to the area it answers to. */
-  --_grip-mark-length: var(--ag-ui-grip-mark-length, 28px);
-  --_grip-mark-thickness: var(--ag-ui-grip-mark-thickness, 3px);
-
-  /* Status accents for tool-call cards. */
-  --_success: var(--ag-ui-success, #15803d);
-  --_danger: var(--ag-ui-danger, #b91c1c);
-  --_muted: var(--ag-ui-muted, #6b7280);
-
-  /* Tool-call status icon glyphs (override to re-theme) + spinner speed.
-     The pending state is the animated ring; the settled states use these. */
-  --_tool-icon-done: var(--ag-ui-tool-icon-done, "✓");
-  --_tool-icon-error: var(--ag-ui-tool-icon-error, "✕");
-  --_tool-icon-declined: var(--ag-ui-tool-icon-declined, "⊘");
-  --_tool-icon-interrupted: var(--ag-ui-tool-icon-interrupted, "◌");
-
-  /* Disclosure marks on every expandable row. Tokenised for the same reason
-     the status icons above are: a host re-theming one set and not the other
-     ends up with two vocabularies in one transcript. */
-  --_disclosure-collapsed: var(--ag-ui-disclosure-collapsed, "▸");
-  --_disclosure-expanded: var(--ag-ui-disclosure-expanded, "▾");
-  --_tool-spin-duration: var(--ag-ui-tool-spin-duration, 0.7s);
-
-  /* Answer well (opt-in via data-answer-well) — boxes a whole assistant turn. */
-  --_well-bg: var(--ag-ui-well-bg, transparent);
-  --_well-border: var(--ag-ui-well-border, var(--_border));
-  --_well-radius: var(--ag-ui-well-radius, var(--_radius));
-
-  /* Surface — set --ag-ui-shadow: none for a flush, embedded panel. */
-  --_shadow: var(--ag-ui-shadow, 0 12px 32px rgba(20, 20, 50, 0.18));
-  --_font: var(--ag-ui-font, inherit);
-  --_font-size: var(--ag-ui-font-size, 14px);
-  --_code-font: var(--ag-ui-code-font, ui-monospace, "SF Mono", Menlo, monospace);
-
-  /* Header / launcher icon box. */
-  --_icon-size: var(--ag-ui-icon-size, 22px);
-  --_icon-radius: var(--ag-ui-icon-radius, 4px);
-
-  /* Composer — one bordered surface holding the field and its tool row. */
-  --_composer-radius: var(--ag-ui-composer-radius, 14px);
-  --_composer-max-height: var(--ag-ui-composer-max-height, 40vh);
-  --_tool-btn-size: var(--ag-ui-tool-btn-size, 30px);
-  --_send-size: var(--ag-ui-send-size, 30px);
-  --_glyph-size: var(--ag-ui-glyph-size, 18px);
-  --_glyph-stroke: var(--ag-ui-glyph-stroke, 1.75);
-
-  /* How wide a chart is allowed to get. A cap rather than a width: below it
-     the chart fills its column, and above it a wider panel is just a wider
-     panel. */
-  --_chart-max-width: var(--ag-ui-chart-max-width, 480px);
-
-  /* Unread badge on the launcher. */
-  --_badge-bg: var(--ag-ui-badge-bg, var(--_danger));
-  --_badge-fg: var(--ag-ui-badge-fg, #ffffff);
-  --_badge-size: var(--ag-ui-badge-size, 18px);
-  --_badge-font-size: var(--ag-ui-badge-font-size, 11px);
-
-  /* The floating launcher a collapsed widget shrinks to. */
-  --_launcher-size: var(--ag-ui-launcher-size, 56px);
-  --_launcher-bg: var(--ag-ui-launcher-bg, var(--_header-bg));
-  --_launcher-fg: var(--ag-ui-launcher-fg, var(--_header-fg));
-  --_launcher-radius: var(--ag-ui-launcher-radius, 50%);
-  --_launcher-icon-size: var(--ag-ui-launcher-icon-size, 26px);
-  --_launcher-inset: var(--ag-ui-launcher-inset, auto 0 0 auto);
-
-  /* Motion. One duration and two curves drive every collapse, expand and
-     slide-over, so the widget accelerates and settles as one thing. The
-     default curve decelerates into place; the pop curve overshoots slightly,
-     for something arriving. */
-  --_motion: var(--ag-ui-motion, 0.28s);
-  --_ease: var(--ag-ui-ease, cubic-bezier(0.32, 0.72, 0, 1));
-  --_ease-pop: var(--ag-ui-ease-pop, cubic-bezier(0.34, 1.36, 0.64, 1));
-
-  /* Spacing — the density preset overrides these. */
-  --_space: var(--ag-ui-space, 10px);
-  --_pad: var(--ag-ui-pad, 16px);
-  --_msg-pad: var(--ag-ui-msg-pad, 8px 12px);
-  --_msg-radius: var(--ag-ui-msg-radius, 14px);
-
-  /* Edges of the viewport the host has already spent, and that a fixed
-     placement must therefore stay out of: a sticky nav bar, a docked toolbar,
-     a device's safe area. Four longhands rather than one shorthand because a
-     custom property is a token stream and CSS cannot index one -- the height
-     arithmetic below needs the vertical pair on its own.
-
-     Every fixed placement derives from these, and the heights subtract them in
-     one place. A host that reserved its chrome by restating --ag-ui-inset per
-     placement had to keep --ag-ui-height in step by hand, and forgetting it
-     overflowed the panel past the bottom of the screen with nothing to say so.
-
-     These take env(safe-area-inset-*) verbatim, which is what a full-bleed
-     placement wants on a device with a notch. */
-  --_viewport-inset-top: var(--ag-ui-viewport-inset-top, 0px);
-  --_viewport-inset-right: var(--ag-ui-viewport-inset-right, 0px);
-  --_viewport-inset-bottom: var(--ag-ui-viewport-inset-bottom, 0px);
-  --_viewport-inset-left: var(--ag-ui-viewport-inset-left, 0px);
-  /* What is left of the viewport once the host's chrome is taken out, on both
-     axes, so a placement never composes this itself and no host can subtract
-     an edge from the position and forget it in the height.
-
-     Settable in their own right, and that is not only convention: an on-screen
-     keyboard changes no viewport-percentage length -- not vh, not dvh, not svh
-     -- so a full-bleed panel on a phone has to be told the height rather than
-     deriving it. The value to publish there is the visual viewport's. */
-  --_viewport-height: var(
-    --ag-ui-viewport-height,
-    calc(
-      min(var(--_visual-viewport-inset-top) + var(--_visual-viewport-height), 100dvh - var(--_viewport-inset-bottom)) -
-        var(--_viewport-inset-top) - var(--_keyboard-inset-top)
-    )
-  );
-  /* That default is the host's box cut to the part of the screen the user can
-     see: from the top the panel starts at, the host's reserved top moved down
-     by the keyboard inset below, to whichever is further up, the bottom of the
-     visible area or the host's reserved bottom. Where nothing has measured, the
-     visible area is the layout viewport with no pan, and this is the host's
-     box exactly.
-
-     Cut rather than replaced. A measured height used as the whole answer kept
-     a bar the host reserved at the top in the position and out of the height,
-     so the panel ran that far past the bottom of the visible area, with its
-     composer behind the keyboard. */
-  /* The measured height of the part of the screen the user can actually see,
-     written by the element from the visual viewport and falling back to the
-     layout viewport where nothing has measured yet.
-
-     This is the on-screen keyboard, and it needs measuring because no CSS
-     length describes it: an on-screen keyboard has no effect on any
-     viewport-percentage unit, so 100vh, 100dvh and 100svh are all the same
-     number with the keyboard up as without it. A full-bleed panel sized from
-     any of them puts its composer behind the keyboard the user is typing into.
-
-     Separate from the token above so a host that states the usable height
-     outright still wins: the element writes this one inline, and an inline
-     value would otherwise outrank the host's own rule.
-
-     The fallback is dvh rather than vh because the browser's own bars do move
-     it, where a keyboard does not. iOS Safari resolves vh to the viewport with
-     its bars collapsed, so on a page that does not scroll them away a panel
-     sized from it ran under the address bar by the bars' height -- 40px on
-     the phone measured -- with a docked composer underneath. dvh is the
-     viewport with the bars as they are. */
-  --_visual-viewport-height: var(--ag-ui-visual-viewport-height, 100dvh);
-  /* How much of the layout viewport is hidden below the visible one, measured
-     and written by the element alongside the height above.
-
-     A shorter panel is not enough on its own for anything anchored to the
-     bottom. A floating widget is positioned against the layout viewport, so
-     with a keyboard up its bottom edge -- and the launcher that lives at that
-     corner -- sits behind the keyboard however tall the panel is. This is what
-     lifts it clear. */
-  /* Two tokens, for the same reason the height above has two: the element
-     writes the measurement inline, and a host that states its own value needs
-     a knob that outranks that write rather than one the next write replaces.
-     A host wanting no keyboard lift at all sets --ag-ui-keyboard-inset: 0px. */
-  --_keyboard-inset: var(--ag-ui-keyboard-inset, var(--_visual-viewport-inset-bottom));
-  --_visual-viewport-inset-bottom: var(--ag-ui-visual-viewport-inset-bottom, 0px);
-  /* How far a panel anchored at the top moves down for a keyboard, below the
-     top the host reserved. With the same two-token shape as the lift above;
-     0px keeps the panel at the host's top.
-
-     To show the field being typed into, a browser pans the visible area down
-     the layout viewport, and a fixed element stays against the layout top, so
-     a panel that did not move showed only its lower part, from the pan down,
-     with its header off the screen and an empty band under it. It moves by
-     what the pan goes past the host's reserved top, not by the whole pan: the
-     pan scrolls a bar reserved there away with the rest of the page rather
-     than pushing it down, and adding the two put the panel a whole bar below
-     the visible area. A corner panel anchored at the bottom does not use this,
-     because the band below already accounts for the pan. */
-  --_keyboard-inset-top: var(--ag-ui-keyboard-inset-top, max(0px, var(--_visual-viewport-inset-top) - var(--_viewport-inset-top)));
-  /* How much of the layout viewport is hidden above the visible one: how far
-     the browser panned. Measured and written by the element with the two
-     above. */
-  --_visual-viewport-inset-top: var(--ag-ui-visual-viewport-inset-top, 0px);
-  --_viewport-width: var(
-    --ag-ui-viewport-width,
-    calc(100vw - var(--_viewport-inset-left) - var(--_viewport-inset-right))
-  );
-
-  /* Layout — override from outside to dock the widget anywhere.
-     Set --ag-ui-position: static (and place this element in your own
-     grid/flex layout) to embed it in the page flow instead of floating. */
-  --_position: var(--ag-ui-position, fixed);
-  --_z-index: var(--ag-ui-z-index, 2147483000);
-  --_width: var(--ag-ui-width, 380px);
-  --_height: var(--ag-ui-height, 560px);
-  /* The gutter a resting floating panel keeps between itself and the edge of
-     the box the host left free. One number, because the inset below spends it
-     and the cap beneath has to know it was spent. */
-  --_edge-gutter: var(--ag-ui-edge-gutter, 24px);
-  --_inset: var(
-    --ag-ui-inset,
-    auto calc(var(--_edge-gutter) + var(--_viewport-inset-right))
-      calc(var(--_edge-gutter) + var(--_viewport-inset-bottom) + var(--_keyboard-inset)) auto
-  );
-  /* The cap is what the host left free, less the *one* gutter the inset above
-     spends on the anchored edge -- not two, and not none.
-
-     Two was the first answer and it was felt on one axis only. The arithmetic
-     says why: the default panel is 560 tall against a cap of the viewport
-     minus 48, which on an 800px screen with a header reserved is 72px of
-     headroom, so the height reaches its cap almost immediately; the default
-     width is 380 against a cap near 1230, which is 850px nothing ever reaches.
-     Once the size is capped a grip cannot grow the panel, so a pull on the
-     anchored edge is written as position instead and the panel travels, and a
-     pull on the free edge stops a whole gutter short of an edge a drag can
-     reach.
-
-     None was the correction, and it overshot: the panel is anchored bottom-
-     right with a gutter already spent there, so a cap of the full usable
-     height puts the far edge exactly one gutter outside it. On an 800px screen
-     with nothing reserved that is a top of -24 -- the header, and every
-     control in it, off the top of the window. Reserve a 120px header and it
-     sits inside that instead, which is the one thing the reservation exists to
-     prevent.
-
-     One is the fixed point of both complaints. A resting panel grown to the
-     cap runs from the usable near edge to its gutter on the far one, so the
-     near edge is reachable by a resize exactly as it is by a drag, and neither
-     can put any part of the panel outside the box. */
-  --_max-width: var(--ag-ui-max-width, calc(var(--_viewport-width) - var(--_edge-gutter)));
-  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_edge-gutter)));
-  /* Reading-column width for placement="page" (full-bleed, centred content). */
-  --_content-max-width: var(--ag-ui-content-max-width, 820px);
-  /* The greeting over an empty full-page conversation. The size scales with
-     the viewport between a phone and a desktop rather than stepping at a
-     breakpoint. */
-  --_greeting-font: var(--ag-ui-greeting-font, var(--_font));
-  --_greeting-size: var(--ag-ui-greeting-size, clamp(1.5rem, 4vw, 2.25rem));
-  /* Slim rail the sidebar placement collapses to. Only that placement reads
-     it, but it is declared here so every alias has a default in one place. */
-  --_rail-width: var(--ag-ui-rail-width, 52px);
-
-  position: var(--_position);
-  inset: var(--_inset);
-  z-index: var(--_z-index);
-  width: var(--_width);
-  max-width: var(--_max-width);
-  height: var(--_height);
-  max-height: var(--_max-height);
-  display: flex;
-  font-family: var(--_font);
-  font-size: var(--_font-size);
-  color: var(--_fg);
-}
-
-/* ── Themes ─────────────────────────────────────────────────────────────
-   Themes only re-set the colour variables; layout/spacing are unaffected.
-   theme="auto" follows the OS via prefers-color-scheme. */
-:host([theme="dark"]) {
-  --_bg: var(--ag-ui-bg, #15151f);
-  --_fg: var(--ag-ui-fg, #e8e8f2);
-  --_assistant-bg: var(--ag-ui-assistant-bg, #25253a);
-  --_hover: var(--ag-ui-hover, #303049);
-  --_header-bg: var(--ag-ui-header-bg, #1f1f30);
-  --_header-fg: var(--ag-ui-header-fg, #e8e8f2);
-  --_border: var(--ag-ui-border, #33334a);
-  --_muted: var(--ag-ui-muted, #9aa0b4);
-  --_shadow: var(--ag-ui-shadow, 0 12px 32px rgba(0, 0, 0, 0.5));
-}
-
-@media (prefers-color-scheme: dark) {
-  :host([theme="auto"]) {
-    --_bg: var(--ag-ui-bg, #15151f);
-    --_fg: var(--ag-ui-fg, #e8e8f2);
-    --_assistant-bg: var(--ag-ui-assistant-bg, #25253a);
-    --_hover: var(--ag-ui-hover, #303049);
-    --_header-bg: var(--ag-ui-header-bg, #1f1f30);
-    --_header-fg: var(--ag-ui-header-fg, #e8e8f2);
-    --_border: var(--ag-ui-border, #33334a);
-    --_muted: var(--ag-ui-muted, #9aa0b4);
-    --_shadow: var(--ag-ui-shadow, 0 12px 32px rgba(0, 0, 0, 0.5));
-  }
-}
-
-/* A terminal-flavoured "code" theme: dark, monospace, green accent. */
-:host([theme="code"]) {
-  --_bg: var(--ag-ui-bg, #0d1117);
-  --_fg: var(--ag-ui-fg, #c9d1d9);
-  --_accent: var(--ag-ui-accent, #3fb950);
-  --_user-bg: var(--ag-ui-user-bg, #238636);
-  --_assistant-bg: var(--ag-ui-assistant-bg, #161b22);
-  --_hover: var(--ag-ui-hover, #21262d);
-  --_header-bg: var(--ag-ui-header-bg, #010409);
-  --_header-fg: var(--ag-ui-header-fg, #c9d1d9);
-  --_border: var(--ag-ui-border, #30363d);
-  --_muted: var(--ag-ui-muted, #8b949e);
-  --_font: var(--ag-ui-font, var(--_code-font));
-  --_shadow: var(--ag-ui-shadow, 0 12px 32px rgba(0, 0, 0, 0.6));
-}
-
-/* ── Density ────────────────────────────────────────────────────────────── */
-:host([density="compact"]) {
-  --_font-size: var(--ag-ui-font-size, 13px);
-  --_space: var(--ag-ui-space, 6px);
-  --_pad: var(--ag-ui-pad, 10px);
-  --_msg-pad: var(--ag-ui-msg-pad, 5px 9px);
-  --_msg-radius: var(--ag-ui-msg-radius, 10px);
-}
-
-/* ── Placement presets ──────────────────────────────────────────────────── */
-:host([placement="bottom-left"]) {
-  --_inset: var(
-    --ag-ui-inset,
-    auto auto calc(var(--_edge-gutter) + var(--_viewport-inset-bottom) + var(--_keyboard-inset))
-      calc(var(--_edge-gutter) + var(--_viewport-inset-left))
-  );
-}
-
-:host([placement="side"]) {
-  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
-  --_height: var(--ag-ui-height, var(--_viewport-height));
-  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-  --_panel-radius: var(--ag-ui-panel-radius, 0);
-}
-
-:host([placement="full"]) {
-  --_inset: var(
-    --ag-ui-inset,
-    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
-      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
-  );
-  --_width: var(--ag-ui-width, var(--_viewport-width));
-  --_height: var(--ag-ui-height, var(--_viewport-height));
-  --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
-  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-  --_panel-radius: var(--ag-ui-panel-radius, 0);
-}
-
-/* Page: full-bleed background with a centred reading column capped at
-   --ag-ui-content-max-width, where "full" is edge-to-edge and left-aligned.
-   The column comes from symmetric auto padding on the scroll area and
-   composer rather than a per-row wrapper, so user pills still right-align and
-   the assistant well spans the column. */
-:host([placement="page"]) {
-  --_inset: var(
-    --ag-ui-inset,
-    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
-      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
-  );
-  --_width: var(--ag-ui-width, var(--_viewport-width));
-  --_height: var(--ag-ui-height, var(--_viewport-height));
-  --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
-  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-  --_panel-radius: var(--ag-ui-panel-radius, 0);
-}
-
-:host([placement="page"]) .messages {
-  padding-inline: max(var(--_pad), calc((100% - var(--_content-max-width)) / 2));
-}
-
-:host([placement="page"]) .input-row {
-  padding-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
-}
-
-/* The rows between the message list and the composer line up with the column
-   too. Chips and tray are padding-based while palette and hint are
-   margin-based, so each gets its own inline axis nudged by the same gutter. */
-:host([placement="page"]) .skill-chips,
-:host([placement="page"]) .attachment-tray {
-  padding-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
-}
-
-:host([placement="page"]) .skill-palette,
-:host([placement="page"]) .skill-hint {
-  margin-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
-}
-
-/* In the reading column the assistant well uses the full width; the user
-   message stays a right-aligned pill (its default align-self + max-width). */
-:host([placement="page"]) .message--assistant {
-  max-width: 100%;
-}
-
-/* Small viewports: one shape, reached from whichever placement the host chose.
-
-   A phone is not an eighth placement, it is an override that collapses the
-   others onto one of them. The host picked a placement for the desktop it was
-   designing; a 380x560 panel with a 24px margin is not a smaller version of
-   that decision, it is most of the screen with a frame drawn round it.
-
-   The breakpoint is a literal because a custom property cannot be read in a
-   media query -- which is exactly why there is an opt-out. Everything the block
-   sets is a token a host can re-state, but the *trigger* is unreachable, so a
-   host whose layout wants a different threshold, or none, sets
-   data-small-viewport="off" and keeps its desktop shape at every width. 600px is above every common phone in portrait and below every
-   tablet in landscape, and it is a width rather than a pointer test on purpose:
-   a touch laptop is coarse-pointered and wide, a narrow desktop window is
-   fine-pointered and small, and conflating the two gets both wrong. What the
-   pointer decides is which controls make sense, further down.
-
-   Two placements are left alone. "page" is already this shape. "embedded" sits
-   in a box the host sized and placed, and taking that over would break the app
-   shell it was embedded into -- the host is the only party that knows whether
-   its column should become the whole screen. */
-@media (max-width: 600px) {
-  :host([placement="floating"]:not([data-small-viewport="off"])),
-  :host([placement="bottom-left"]:not([data-small-viewport="off"])),
-  :host([placement="sidebar"]:not([data-small-viewport="off"])),
-  :host([placement="side"]:not([data-small-viewport="off"])),
-  :host(:not([placement]):not([data-small-viewport="off"])),
-  :host([placement=""]:not([data-small-viewport="off"])) {
-    --_inset: var(
-      --ag-ui-inset,
-      calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
-        calc(var(--_viewport-inset-bottom) + var(--_keyboard-inset))
-        var(--_viewport-inset-left)
-    );
-    --_width: var(--ag-ui-width, var(--_viewport-width));
-    --_height: var(--ag-ui-height, var(--_viewport-height));
-    --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
-    --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-    --_panel-radius: var(--ag-ui-panel-radius, 0);
-    --_shadow: var(--ag-ui-shadow, none);
-  }
-
-  /* Nothing to resize once the panel is the screen, and the grips would sit
-     under the thumbs holding the phone. */
-  :host([placement="floating"]:not([data-small-viewport="off"])) .resize-handle,
-  :host([placement="bottom-left"]:not([data-small-viewport="off"])) .resize-handle,
-  :host([placement="sidebar"]:not([data-small-viewport="off"])) .resize-handle,
-  :host([placement="side"]:not([data-small-viewport="off"])) .resize-handle,
-  :host(:not([placement]):not([data-small-viewport="off"])) .resize-handle,
-  :host([placement=""]:not([data-small-viewport="off"])) .resize-handle {
-    display: none;
-  }
-}
-
-/* Sidebar: a full-height docked panel that slides open/closed and
-   collapses to a slim icon rail (not the floating launcher). Docked right by
-   default; data-side="left" docks it left. Overlay by default — set
-   --ag-ui-position: static (and place this element in your own layout) for a
-   host-managed push instead. */
-:host([placement="sidebar"]) {
-  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
-  --_height: var(--ag-ui-height, var(--_viewport-height));
-  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-  --_panel-radius: var(--ag-ui-panel-radius, 0);
-  transition: width var(--_motion) var(--_ease);
-}
-
-:host([placement="sidebar"][data-side="left"]) {
-  --_inset: var(
-    --ag-ui-inset,
-    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) auto var(--_viewport-inset-bottom)
-      var(--_viewport-inset-left)
-  );
-}
-
-/* The docked panel is pinned to the edge it docks against rather than filling
-   the host as a flex child. Collapsing shrinks the host to the rail width, and
-   a flex child would be squashed to 52px on the way out instead of sliding out
-   at full width. */
-/* The panel is taken out of flow so the collapse can slide it out at full
-   width; see the note above. That makes the host its containing block, and the
-   host is only one by accident: it is position: fixed by default. A host that
-   takes the documented route to a pushed layout instead of an overlay sets
-   --ag-ui-position: static, and a static element establishes nothing -- so the
-   panel resolved against the initial containing block, landed at the document
-   origin, and scrolled away with the page. Docked left it pinned to the
-   document's left edge rather than the host's.
-
-   It looked correct wherever it was first tried, because a full-height column
-   at the top of an unscrolled document is exactly where those two answers
-   coincide. Containment makes the host a containing block whatever its
-   position, so the panel stays in the box the host was given. It is a no-op in
-   the default case, which is already positioned. */
-:host([placement="sidebar"]) {
-  contain: layout;
-}
-
-:host([placement="sidebar"]) .chat {
-  position: absolute;
-  inset: 0 0 0 auto;
-  width: var(--_width);
-  transform-origin: right center;
-}
-
-:host([placement="sidebar"][data-side="left"]) .chat {
-  inset: 0 auto 0 0;
-  transform-origin: left center;
-}
-
-/* Collapsed sidebar: shrink the host to the rail width and slide the panel out
-   through the edge it docks against. Higher specificity than the generic
-   collapse rules, so it wins regardless of source order. */
-/* The rail is the full height of what the host left, not of the screen. It
-   said 100vh and pinned its own bottom, which put it under any chrome the host
-   had reserved -- and the icon lives at the top of the rail, so the one control
-   that reopens the panel was the first thing to disappear behind a sticky
-   header. */
-:host([placement="sidebar"][collapsed]) {
-  width: var(--_rail-width);
-  height: var(--_viewport-height);
-  max-height: var(--_viewport-height);
-  pointer-events: auto;
-}
-
-:host([placement="sidebar"][collapsed]) .chat {
-  transform: translateX(100%);
-}
-
-:host([placement="sidebar"][data-side="left"][collapsed]) .chat {
-  transform: translateX(-100%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host([placement="sidebar"]),
-  :host([placement="sidebar"]) .chat {
-    transition: none;
-  }
-}
-
-/* ── Launcher ───────────────────────────────────────────────────────────────
-   What a collapsed widget shrinks to: a round floating button by default, the
-   sidebar's slim edge rail under that placement. A sibling of the panel, so it
-   survives the panel being hidden, and the only part of a collapsed widget
-   that takes pointer events. */
-.launcher {
-  display: flex;
-  position: absolute;
-  inset: var(--_launcher-inset);
-  align-items: center;
-  justify-content: center;
-  width: var(--_launcher-size);
-  height: var(--_launcher-size);
-  padding: 0;
-  border: none;
-  border-radius: var(--_launcher-radius);
-  background: var(--_launcher-bg);
-  color: var(--_launcher-fg);
-  box-shadow: var(--_shadow);
-  font: inherit;
-  cursor: pointer;
-  pointer-events: auto;
-  /* A touch drag on the launcher moves it; without this the page scrolls under
-     the finger instead and the launcher never moves at all. */
-  touch-action: none;
-  opacity: 0;
-  transform: scale(0.4);
-  visibility: hidden;
-  transition:
-    opacity var(--_motion) var(--_ease),
-    transform var(--_motion) var(--_ease-pop),
-    visibility var(--_motion) var(--_ease);
-}
-
-/* The launcher grows out of the corner the panel shrank into. It stays laid
-   out at rest rather than display:none, which is what lets it animate both in
-   and out: an unrendered element has no before-change style to transition
-   from, and one flipping display to none cannot transition at all. visibility
-   keeps it unpaintable, untabbable and unclickable in between, so the expanded
-   panel's own controls underneath stay reachable. */
-:host([collapsed]) .launcher {
-  opacity: 1;
-  transform: none;
-  visibility: visible;
-}
-
-:host([collapsed]) .launcher:hover {
-  transform: scale(1.06);
-}
-
-:host([collapsed]) .launcher:active {
-  transform: scale(0.94);
-}
-
-/* A drag is a press and a hover at the same time, so both scale rules above are
-   live throughout it. Cancelling them is what keeps the launcher the size of
-   the thing under the pointer while it travels; the position itself comes from
-   inset, which nothing here transitions, so it tracks the pointer exactly. */
-:host([collapsed]) .launcher[data-dragging] {
-  transform: none;
-  cursor: grabbing;
-}
-
-.launcher .icon-holder {
-  width: var(--_launcher-icon-size);
-  height: var(--_launcher-icon-size);
-}
-
-/* The unread badge rides the launcher's top-right corner. The ring in the
-   widget's own background is what separates it from the launcher underneath,
-   whatever colour the host themes either one. */
-.launcher-badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: var(--_badge-size);
-  height: var(--_badge-size);
-  padding: 0 5px;
-  border-radius: 999px;
-  background: var(--_badge-bg);
-  color: var(--_badge-fg);
-  font-size: var(--_badge-font-size);
-  font-weight: 600;
-  line-height: 1;
-  box-shadow: 0 0 0 2px var(--_bg);
-}
-
-.launcher-badge[hidden] {
-  display: none;
-}
-
-/* The sidebar collapses to an edge rail instead: full height, square, flush
-   against the dock. It slides in with the panel rather than popping. */
-/* The edge rail. It reads as the docked edge of a panel rather than a coloured
-   stripe: the surface the panel is made of, a border on the side it docks
-   against, and the accent kept for the icon -- a full-height slab of accent is
-   the loudest thing on the page and says the least about itself.
-
-   Content sits at the top rather than centred, because a control floating in
-   the middle of a screen-high column has nothing to belong to. */
-:host([placement="sidebar"][collapsed]) .launcher {
-  inset: 0;
-  width: auto;
-  height: auto;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-  padding-top: 14px;
-  border: 0;
-  border-inline-start: 1px solid var(--_border);
-  border-radius: 0;
-  background: var(--_bg);
-  color: var(--_fg);
-  box-shadow: none;
-  transform: none;
-}
-
-:host([placement="sidebar"][data-side="left"][collapsed]) .launcher {
-  border-inline-start: 0;
-  border-inline-end: 1px solid var(--_border);
-}
-
-/* The icon keeps the accent, so there is one obvious thing to press.
-
-   The glyph is sized here rather than left to fill the holder. A glyph in an
-   icon holder takes the holder's whole box by default, which is right where the
-   holder is only a box and wrong the moment it becomes a filled circle: the
-   mark then runs edge to edge and reads as a square crammed into a disc. The
-   proportion is the floating launcher's own -- a 26px glyph in a 56px bubble --
-   so the two collapsed states look like the same widget. */
-:host([placement="sidebar"][collapsed]) .launcher .icon-holder {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: var(--_header-bg);
-  color: var(--_header-fg);
-}
-
-:host([placement="sidebar"][collapsed]) .launcher .icon-holder .glyph,
-:host([placement="sidebar"][collapsed]) .launcher .icon-holder .icon-img {
-  width: 16px;
-  height: 16px;
-}
-
-/* Written down the rail, which is the only direction it fits. Reading upward
-   is the convention for a right-hand edge and matches how a docked panel's
-   label is set everywhere it appears. */
-.rail-label {
-  display: none;
-}
-
-:host([placement="sidebar"][collapsed]) .rail-label {
-  display: block;
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-  max-height: calc(100% - 96px);
-  overflow: hidden;
-  font-size: 0.9em;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-:host([placement="sidebar"][data-side="left"][collapsed]) .rail-label {
-  writing-mode: vertical-rl;
-  transform: none;
-}
-
-/* Every transition in this file is timed by --_motion, so collapsing it to a
-   frame is the whole reduced-motion story: states still change (and display
-   still flips at the end of its discrete transition), nothing travels. */
-@media (prefers-reduced-motion: reduce) {
-  :host {
-    --_motion: var(--ag-ui-motion, 0.001s);
-  }
-}
-
-/* Embedded: drop the floating chrome and the high z-index stacking context so
-   the widget lives in the host's own layout (fixes overlay/z-index clashes). */
-:host([placement="embedded"]) {
-  --_position: var(--ag-ui-position, static);
-  --_width: var(--ag-ui-width, 100%);
-  --_height: var(--ag-ui-height, 100%);
-  --_max-width: var(--ag-ui-max-width, 100%);
-  --_max-height: var(--ag-ui-max-height, 100%);
-  --_shadow: var(--ag-ui-shadow, none);
-  --_z-index: var(--ag-ui-z-index, auto);
-}
-
-.chat {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  background: var(--_bg);
-  border: 1px solid var(--_border);
-  border-radius: var(--_panel-radius);
-  box-shadow: var(--_shadow);
-  overflow: hidden;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--_border);
-  background: var(--_header-bg);
-  color: var(--_header-fg);
-}
-
-/* The header is the panel's title bar: on the placements that let the widget
-   be moved it drags the whole thing, matching the launcher's own drag. The
-   selector lists those placements rather than asking JS to stamp an attribute,
-   because a cursor that appears one frame late reads as a control that only
-   sometimes exists. touch-action keeps a finger drag here moving the panel
-   instead of scrolling the page behind it. */
-:host(:not([placement])) .header,
-:host([placement=""]) .header,
-:host([placement="floating"]) .header,
-:host([placement="bottom-left"]) .header {
-  cursor: move;
-  touch-action: none;
-}
-
-/* A host that turned the drag off keeps a header that says so. */
-:host([data-launcher-drag="false"]) .header {
-  cursor: auto;
-  touch-action: auto;
-}
-
-/* :host is carried for the specificity, not the scope: the placement rules
-   above are a host selector plus a class plus an attribute, and a bare
-   .header[data-dragging] loses to them -- silently, because the drag still
-   works and only the cursor is wrong. */
-:host .header[data-dragging] {
-  cursor: grabbing;
-}
-
-/* The cursor inherits, so a control a host slots into the header would show
-   the drag cursor over something the drag deliberately ignores. Named to
-   match the controls panel_drag steps aside for. */
-.header ::slotted(:is(button, a, input, select, textarea)) {
-  cursor: pointer;
-}
-
-.header-title {
-  flex: 1;
-  min-width: 0;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Header / launcher icon holder: a slot, with a data-icon-url <img>
-   fallback, sized via --ag-ui-icon-size. */
-.icon-holder {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--_icon-size);
-  height: var(--_icon-size);
-  line-height: 1;
-}
-
-.icon-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: var(--_icon-radius);
-}
-
-.header-controls {
-  display: flex;
-  gap: var(--_header-gap);
-  flex: none;
-}
-
-.header-btn {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--_header-btn-size);
-  height: var(--_header-btn-size);
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: 1;
-  padding: 0;
-  border-radius: 6px;
-  cursor: pointer;
-  opacity: 0.85;
-}
-
-.header-btn:hover {
-  opacity: 1;
-  background: rgba(255, 255, 255, 0.18);
-}
-
-/* ── Collapse ───────────────────────────────────────────────────────────────
-   Collapsing shrinks the widget to the round floating launcher: the panel
-   scales toward the launcher's corner and fades, the launcher pops in from the
-   same point. Both halves are transform and opacity only, so the morph runs on
-   the compositor and never reflows the host page.
-
-   The host box keeps its expanded size, since animating it would animate
-   layout and a dragged --ag-ui-width would fight the launcher's own size.
-   Nothing paints there once the panel is gone, so the box only has to stop
-   swallowing clicks: pointer events go to none and the launcher takes them.
-
-   Two placements do not use it: "sidebar" slides to its rail (below), and
-   "embedded" keeps its header bar, having no corner for a floating circle that
-   would escape the host's layout. "page" has no collapsed state at all. */
-:host([collapsed]) {
-  pointer-events: none;
-  /* A collapsed host has to be allowed to shrink, and in the layout hosts
-     actually use it is not. Every collapse path here works by letting the host
-     size to its content -- the in-flow ones set height: auto, the floating one
-     leaves only the launcher -- and a flex or grid parent whose align-items is
-     the default stretch value overrides all of it. The panel then hides and the box
-     it occupied stays: a header bar over several hundred pixels of nothing.
-     Every known consumer hit this, because putting the element in a flex column
-     beside the page content is the obvious way to embed it. */
-  align-self: start;
-}
-
-:host([collapsed]) .chat {
-  opacity: 0;
-  transform: scale(0.94);
-  visibility: hidden;
-}
-
-/* visibility keeps the panel out of the tab order and the a11y tree at rest
-   without display:none killing the transition. It interpolates so any progress
-   below 1 still counts as visible: the panel stays on screen for the whole
-   collapse, flips hidden exactly at the end, and on expand is visible from the
-   first frame. */
-.chat {
-  transform-origin: bottom right;
-  transition:
-    opacity var(--_motion) var(--_ease),
-    transform var(--_motion) var(--_ease),
-    visibility var(--_motion) var(--_ease);
-}
-
-:host([placement="bottom-left"]) .chat {
-  transform-origin: bottom left;
-}
-
-/* Once the launcher has been dragged the element places itself, and stamps the
-   corner it chose to open away from. The morph has to start at that same
-   corner: scaling out of the one the placement originally guessed reads as the
-   panel leaping across the screen before it opens.
-
-   Equal specificity to the placement rule above, so source order is what lets
-   the stamped value win -- the same arrangement the resize grip uses, and the
-   same trap. Write these with = on the whole hyphenated token; a ~= would match
-   whitespace-separated words and so could never match at all. */
-:host([data-expand-corner="top-left"]) .chat {
-  transform-origin: top left;
-}
-
-:host([data-expand-corner="top-right"]) .chat {
-  transform-origin: top right;
-}
-
-:host([data-expand-corner="bottom-left"]) .chat {
-  transform-origin: bottom left;
-}
-
-:host([data-expand-corner="bottom-right"]) .chat {
-  transform-origin: bottom right;
-}
-
-/* The in-flow placement keeps the original collapse: hide the body, let the
-   host shrink to the header bar. */
-:host([collapsed][placement="embedded"]) {
-  height: auto;
-  max-height: none;
-  pointer-events: auto;
-}
-
-:host([collapsed][placement="embedded"]) .chat {
-  opacity: 1;
-  transform: none;
-  visibility: visible;
-}
-
-/* It keeps the header bar, so the launcher must stay out of the way: an
-   embedded host is position: static, which would let an absolutely-positioned
-   circle escape the layout and land against whatever the page positions. */
-:host([collapsed][placement="embedded"]) .launcher {
-  visibility: hidden;
-  opacity: 0;
-}
-
-:host([collapsed][placement="embedded"]) .messages-wrap,
-:host([collapsed][placement="embedded"]) .messages,
-:host([collapsed][placement="embedded"]) .input-row,
-:host([collapsed][placement="embedded"]) .skill-chips,
-:host([collapsed][placement="embedded"]) .skill-palette,
-:host([collapsed][placement="embedded"]) .skill-hint {
-  display: none;
-}
-
-/* The page placement has no collapsed state, so it offers no control for one.
-   A dedicated route has no "away" to go to: shrinking it left a strip of
-   application chrome fixed over a route that no longer had an owner, and this
-   is the one placement where the launcher that would bring it back is hidden.
-
-   Hiding the control is only half of it. The state has another way in -- the
-   attribute can be written straight onto the element, and a value stored under
-   a different placement is restored on connect -- and the JS guards that catch
-   those cannot see an attribute set directly. So the placement neutralises the
-   state here as well: with the collapse rules above no longer naming "page", an
-   unguarded collapsed attribute would otherwise fall through to the generic
-   rule that scales the panel away and drops pointer events, leaving nothing on
-   screen and no launcher to press. */
-:host([placement="page"]) .header-btn--collapse {
-  display: none;
-}
-
-:host([placement="page"][collapsed]) {
-  pointer-events: auto;
-  align-self: auto;
-}
-
-:host([placement="page"][collapsed]) .chat {
-  opacity: 1;
-  transform: none;
-  visibility: visible;
-}
-
-/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
-   something. Anchored to the panel rather than the list so it does not scroll
-   with the content it is offering to scroll to. */
-/* The transcript's own box, and the only one whose foot is the transcript's
-   foot. The panel's foot is below the composer, the chips and the footer. */
-.messages-wrap {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.jump-latest {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: var(--_pad);
-  z-index: 2;
-  display: none;
-  align-items: center;
-  gap: 0.35em;
-  padding: 0.4em 0.9em;
-  border: 1px solid var(--_border);
-  border-radius: 999px;
-  /* A raised surface, not the panel's own background. Reusing --_bg made the
-     pill the same colour as everything behind it, leaving a 1px border and a
-     shadow to carry the whole affordance -- and a dark-on-dark shadow carries
-     nothing. --_hover is the token that already means "lifted off the panel",
-     and it separates in both themes without competing with the accent the send
-     button owns. */
-  background: var(--_hover);
-  color: var(--_text);
-  font: inherit;
-  font-size: 0.85em;
-  cursor: pointer;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
-}
-
-.jump-latest[data-missed="true"] {
-  display: flex;
-}
-
-.jump-latest:hover {
-  border-color: var(--_accent);
-}
-
-/* The offer to quote a selection. Positioned in script against the transcript
-   box, which is the only ancestor whose top and foot are the transcript's --
-   the same reason .jump-latest lives here. The translate is the half the
-   script does not do: script sets the point the offer hangs from, CSS decides
-   which corner of the offer that point is. */
-.quote-selection {
-  position: absolute;
-  z-index: 2;
-  transform: translate(-50%, -100%);
-  padding: 0.25em 0.7em;
-  border: 1px solid var(--_border);
-  border-radius: 999px;
-  background: var(--_hover);
-  color: var(--_text);
-  font: inherit;
-  font-size: 0.8em;
-  line-height: 1.6;
-  white-space: nowrap;
-  cursor: pointer;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
-}
-
-/* Flipped under the selection when there was no room above it. Only the
-   vertical half of the translate changes: it still hangs from its own centre
-   horizontally. */
-.quote-selection[data-below="true"] {
-  transform: translate(-50%, 0);
-}
-
-.quote-selection:hover {
-  border-color: var(--_accent);
-}
-
-/* Screen-reader-only status region. Off-screen rather than display:none or
-   visibility:hidden, both of which take the element out of the accessibility
-   tree entirely -- a hidden live region announces nothing at all, which is the
-   classic way this pattern is written wrong.
-
-   The 1px box with clip-path, rather than width/height 0, is the shape that
-   survives: a zero-sized element is dropped from the tree by some engines. */
-/* A used-value reader for the four viewport-inset tokens, and the only
-   reliable one. getComputedStyle().getPropertyValue() on an unregistered
-   custom property hands back the substituted token stream, not a length: it
-   returns "4rem" verbatim, and "calc(56px + env(safe-area-inset-top))" as
-   "calc(56px + 0px)" -- which parses as NaN and takes the whole inset with it.
-   Padding is a real property, so the same tokens come back resolved to px.
-
-   visibility rather than display: none, because a box that generates no
-   layout has no used values to read. Zero-sized, absolutely positioned and
-   inert, so it costs nothing but the read. */
-.viewport-probe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  visibility: hidden;
-  pointer-events: none;
-  padding: var(--_viewport-inset-top) var(--_viewport-inset-right)
-    var(--_viewport-inset-bottom) var(--_viewport-inset-left);
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
-}
-
-.messages {
-  flex: 1;
-  overflow-y: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  /* The browser's own scroll anchoring competes with the scroller for the same
-     job and wins unpredictably -- it can hold the view still exactly when we
-     want to follow. Turned off so following is decided in one place. Safari
-     does not implement it, which is itself a reason not to depend on it. */
-  overflow-anchor: none;
-  padding: var(--_pad);
-  display: flex;
-  flex-direction: column;
-  gap: var(--_space);
-}
-
-/* Empty-state region (slot): centred while it's the only thing in the
-   list, hidden as soon as a message, card, or pending indicator renders. */
-.empty {
-  margin: auto;
-  text-align: center;
-  color: var(--_muted);
-}
-
-.empty[hidden] {
-  display: none;
-}
-
-/* The greeting layout: a greeting over an empty conversation, and the
-   composer centred beneath it until the conversation has something in it.
-
-   On by default for the page placement, where a conversation is the whole
-   route; data-greeting="off" turns it off there. An embedded panel opts in
-   with any other data-greeting value. No other placement has it: a panel
-   opened from a launcher is already mid-task, and a greeting in a corner
-   panel costs space and says little.
-
-   The greeting itself renders under every placement and is hidden here, so a
-   placement switch at runtime needs nothing from script. */
-.greeting {
-  display: none;
-}
-
-:host([placement="page"]:not([data-greeting="off"])) .greeting,
-:host([placement="embedded"][data-greeting]:not([data-greeting="off"])) .greeting {
-  display: block;
-  margin-block-end: calc(var(--_space) * 2);
-  font-family: var(--_greeting-font);
-  font-size: var(--_greeting-size);
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--_fg);
-  overflow-wrap: anywhere;
-}
-
-/* Centring is two equal flexible boxes either side of the composer rows: the
-   transcript above, which already grows, and this one below. Equal zero bases
-   make the two halves the same height whatever they hold, so the rows sit in
-   the middle of the panel below its header, and stay there as a draft, an
-   attachment tray or a hint grows them, because growth splits into both
-   halves at once.
-
-   A pseudo element rather than a node, so no host layout and nothing that
-   counts children can see it. It exists whether or not the conversation is
-   empty and only its growth changes, because a box that appears and
-   disappears is a box nothing can ever transition.
-
-   Only the rule that generates it names the placements. The one that grows it
-   needs nothing but the state: where the first rule does not apply there is no
-   box to grow. The box is empty, so its automatic basis is already zero, the
-   same as the transcript's; nothing here writes the flex shorthand, because
-   this selector is the more specific of the two and a shorthand would win
-   over the growth. */
-:host([placement="page"]:not([data-greeting="off"])) .chat::after,
-:host([placement="embedded"][data-greeting]:not([data-greeting="off"])) .chat::after {
-  content: "";
-}
-
-/* Not while a restore is in flight: a conversation a remote store is still
-   fetching is more likely to have messages than not, and centring it first
-   would drop the composer the moment they land. */
-:host([data-empty]:not([data-restoring])) .chat::after {
-  flex-grow: 1;
-}
-
-/* Only the send that leaves the empty state travels. The element arms this for
-   that one change and disarms it whenever the transcript is cleared, so a
-   restored conversation, a thread switch and a new chat all snap. Growth rather
-   than a transform, because the rows between the transcript and the composer
-   move with it, and growth is continuous where a reorder is not. Reduced motion
-   needs no rule of its own: the motion token already collapses to a frame
-   there.
-
-   The rule over the composer fades in over the same stretch. Appearing at once,
-   it was drawn across the page at the composer's destination while the
-   composer was still on its way there. */
-:host([data-composer-settling]) .chat::after {
-  transition: flex-grow var(--_motion) var(--_ease);
-}
-
-:host([data-composer-settling]) .input-row {
-  transition: border-color var(--_motion) var(--_ease);
-}
-
-/* The greeting and whatever the host slotted sit at the foot of the upper
-   half, directly over the composer, rather than floating in its middle. The
-   region is hidden once the conversation has content, so this needs no state
-   of its own. */
-:host([placement="page"]:not([data-greeting="off"]):not([data-restoring])) .empty,
-:host([placement="embedded"][data-greeting]:not([data-greeting="off"]):not([data-restoring])) .empty {
-  margin: auto auto 0;
-}
-
-/* The rule over the composer separates it from a transcript. Over nothing it
-   is a line drawn across the middle of the page. */
-:host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring])) .input-row,
-:host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring])) .input-row {
-  border-block-start-color: transparent;
-}
-
-/* On a phone the composer stays at the foot and the greeting takes the room
-   above it, which is the other way round from everything above.
-
-   Centring is a shape for a screen with room to spare: the composer reads as
-   the one thing on the page, and whichever way the rows grow there is space
-   left on both sides of them. A phone has no space to spare, and the keyboard
-   is what takes it -- opening one leaves a 426px-tall visible area with the
-   composer halfway up it and an empty band underneath, which is the half of
-   the screen a thumb is already resting on. Docked, the field sits directly
-   over the keyboard, where every chat on the platform puts it, and the
-   greeting keeps the rest.
-
-   Both rules restate the selector they override, with the breakpoint's own
-   opt-out added: this is part of the shape a host keeps its desktop layout
-   instead of, so it goes the same way as the rest of that shape. Restating
-   rather than adding conditions to the originals keeps each of those rules
-   readable as one decision, and source order settles the pair. */
-@media (max-width: 600px) {
-  :host([data-empty]:not([data-restoring]):not([data-small-viewport="off"])) .chat::after {
-    flex-grow: 0;
-  }
-
-  /* The empty region fills the transcript instead of being centred in it as a
-     block, so the two things in it can go to different places: the prompts the
-     host offers to the foot, against the composer, and the greeting to the
-     middle of what they leave.
-
-     A prompt chip is a way into the conversation. Against the field it starts,
-     it reads as one; under the greeting halfway up the panel, with the field
-     at the foot, it reads as decoration next to something else. Nothing here
-     moves them on a screen where the composer is still centred: there the
-     whole region hangs at the foot of the upper half, directly over the
-     composer, and the prompts are already against it.
-
-     Auto block margins on the greeting are what centre it, and they take the
-     free space whether or not there are prompts below to leave any, so a host
-     that offers none gets a greeting in the middle of the transcript rather
-     than one clinging to the composer.
-     The region declares a display here, which outranks the rule collapsing a
-     hidden one, so it says it is not hidden itself. Nothing sets the two
-     apart today -- the transcript writes the hidden property and the host's
-     data-empty from one expression -- and that is exactly why: a rule holding
-     because of how a method in another file happens to be written is a rule
-     holding by luck. */
-  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]),
-  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]) {
-    margin: 0;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting,
-  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting {
-    margin-block: auto;
-  }
-}
-
-/* Nor does the greeting paint while a restore is in flight. Hidden rather than
-   removed, so it keeps its place and nothing around it moves when it shows. */
-:host([data-restoring]) .greeting {
-  visibility: hidden;
-}
-
-/* ── Answer group / well ─────────────────────────────────────────
-   One .answer per assistant turn wraps the streamed text, its tool cards,
-   and the pending indicator so a whole answer reads (and can be boxed) as one
-   unit. A flex column on the message-list gap, stretched to the list width so
-   its children keep their own left/right alignment. data-answer-well opts into
-   the bordered "well"; without it the turn renders as a flat stack. */
-.answer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--_space);
-  align-self: stretch;
-  min-width: 0;
-}
-
-:host([data-answer-well]) .answer {
-  padding: var(--_pad);
-  background: var(--_well-bg);
-  border: 1px solid var(--_well-border);
-  border-radius: var(--_well-radius);
-}
-
-.message {
-  max-width: 80%;
-  padding: var(--_msg-pad);
-  border-radius: var(--_msg-radius);
-  line-height: 1.4;
-  white-space: pre-wrap;
-  /* overflow-wrap, not word-break, and the difference is the whole reason a
-     markdown table used to be unreadable.
-
-     Both stop one long unbroken token blowing out the bubble, which is all this
-     is for. But word-break: break-word is the legacy spelling of "break
-     anywhere", and breaking anywhere drops the *min-content* width of every
-     descendant to one character. A table's column algorithm takes min-content
-     as an input, so the table always fitted max-width: 100%, the overflow-x:
-     auto below it never had anything to scroll, and the columns absorbed the
-     pressure by rendering one letter per line instead. A seven-column header
-     came out 162px tall.
-
-     overflow-wrap: break-word breaks a word only when it would otherwise
-     overflow its line, and leaves min-content alone -- so the bubble is still
-     protected and the table is free to be wider than the panel and scroll. */
-  overflow-wrap: break-word;
-}
-
-/* ── Incoming-text animations (data-text-animation) ─────────────────────── */
-/* .message--restored (rehydrated history) is excluded: entrance animations are
-   for freshly-arriving messages, not the whole transcript replaying on reload.
-   Word mode is excluded implicitly — restored bubbles aren't wrapped. */
-:host([data-text-animation="fade"]) .message--assistant:not(.message--restored) {
-  animation: ag-ui-msg-fade 0.25s ease both;
-}
-
-@keyframes ag-ui-msg-fade {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: none; }
-}
-
-.message--assistant .word {
-  animation: ag-ui-word-in 0.3s ease both;
-  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);
-}
-
-@keyframes ag-ui-word-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host([data-text-animation="fade"]) .message--assistant,
-  .message--assistant .word {
-    animation: none;
-  }
-}
-
-.message--user {
-  align-self: flex-end;
-  background: var(--_user-bg);
-  color: var(--_user-fg);
-  border-bottom-right-radius: 4px;
-}
-
-.message--assistant {
-  align-self: flex-start;
-  background: var(--_assistant-bg);
-  border-bottom-left-radius: 4px;
-  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source
-     whitespace the renderer leaves between block tags. */
-  white-space: normal;
-}
-
-/* Rendered-markdown elements inside an assistant bubble. */
-.message--assistant > :first-child {
-  margin-top: 0;
-}
-
-.message--assistant > :last-child {
-  margin-bottom: 0;
-}
-
-.message--assistant p,
-.message--assistant ul,
-.message--assistant ol,
-.message--assistant blockquote,
-.message--assistant pre {
-  margin: 0.5em 0;
-}
-
-.message--assistant ul,
-.message--assistant ol {
-  padding-left: 1.3em;
-}
-
-.message--assistant a {
-  color: var(--_accent);
-  text-decoration: underline;
-}
-
-.message--assistant code {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 0.92em;
-  background: rgba(127, 127, 127, 0.16);
-  padding: 1px 4px;
-  border-radius: 4px;
-}
-
-.message--assistant pre {
-  padding: 8px 10px;
-  overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  background: var(--_bg);
-  border: 1px solid var(--_border);
-  border-radius: 6px;
-}
-
-.message--assistant pre code {
-  background: none;
-  padding: 0;
-}
-
-/* The copy button sits inside the block, so it scrolls with wide code rather
-   than floating over the bubble. Positioning is on the pre; the button only
-   appears once one has been attached. */
-.message--assistant pre.has-copy {
-  position: relative;
-}
-
-/* The only reader of --ag-ui-surface and --ag-ui-text. Their defaults are
-   transparent and the body foreground, which is what this button rendered as
-   before either token existed; changing them repaints only this control. */
-.code-copy {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  padding: 2px 8px;
-  font: inherit;
-  font-size: 0.75em;
-  line-height: 1.6;
-  color: var(--_muted);
-  background: var(--_surface);
-  border: 1px solid var(--_border);
-  border-radius: 4px;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.12s ease;
-}
-
-/* Revealed on hover or keyboard focus. Focus matters as much as hover here:
-   hidden-until-hover is invisible to a keyboard user otherwise. */
-.message--assistant pre.has-copy:hover .code-copy,
-.code-copy:focus-visible {
-  opacity: 1;
-}
-
-.code-copy:hover {
-  color: var(--_text);
-  background: var(--_hover);
-}
-
-.code-copy[data-state="copied"] {
-  opacity: 1;
-  color: var(--_text);
-}
-
-.code-copy[data-state="failed"] {
-  opacity: 1;
-  color: var(--_danger, var(--_text));
-}
-
-.message--assistant blockquote {
-  padding-left: 10px;
-  border-left: 3px solid var(--_border);
-  color: var(--_muted);
-}
-
-/* Markdown tables. table/thead/tbody/tr/th/td are all in the sanitizer's
-   ALLOWED_TAGS, so an agent can emit one. A wide table must scroll inside its
-   own box rather than stretch the message: the bubble is width-constrained, so
-   without this the columns either crush or push the layout sideways. */
-.message--assistant table {
-  display: block;
-  width: fit-content;
-  max-width: 100%;
-  overflow-x: auto;
-  border-collapse: collapse;
-  font-size: 0.95em;
-}
-
-.message--assistant th,
-.message--assistant td {
-  padding: 6px 10px;
-  border: 1px solid var(--_border);
-  text-align: left;
-  vertical-align: top;
-}
-
-.message--assistant th {
-  background: var(--_hover);
-  font-weight: 600;
-}
-
-.pending {
-  align-self: flex-start;
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  padding: 12px 14px;
-  background: var(--_assistant-bg);
-  border-radius: 14px;
-  border-bottom-left-radius: 4px;
-}
-
-.pending-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--_muted);
-  animation: ag-ui-pending 1.2s infinite ease-in-out both;
-}
-
-.pending-dot:nth-child(2) {
-  animation-delay: 0.16s;
-}
-
-.pending-dot:nth-child(3) {
-  animation-delay: 0.32s;
-}
-
-@keyframes ag-ui-pending {
-  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
-  40% { opacity: 1; transform: translateY(-3px); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .pending-dot {
-    animation: none;
-    opacity: 0.6;
-  }
-}
-
-/* ── Thoughts region ────────────────────────────────────────────
-   A muted, collapsible chain-of-thought at the top of the answer group: open
-   while the model reasons, folded once the answer text starts. */
-.thoughts {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--_muted);
-}
-
-.thoughts-toggle {
-  align-self: flex-start;
-  border: none;
-  padding: 0;
-  background: none;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--_muted);
-  cursor: pointer;
-}
-
-.thoughts-toggle::before {
-  content: var(--_disclosure-expanded) " ";
-}
-
-.thoughts-toggle[aria-expanded="false"]::before {
-  content: var(--_disclosure-collapsed) " ";
-}
-
-/* A gentle pulse on the label while reasoning is still streaming. */
-.thoughts[data-streaming] .thoughts-label {
-  animation: ag-ui-thoughts-pulse 1.4s ease-in-out infinite;
-}
-
-@keyframes ag-ui-thoughts-pulse {
-  0%, 100% { opacity: 0.55; }
-  50% { opacity: 1; }
-}
-
-.thoughts-body {
-  margin: 0;
-  padding: 4px 0 4px 10px;
-  border-left: 2px solid var(--_border);
-  max-height: 220px;
-  overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: inherit;
-}
-
-.thoughts-body[hidden] {
-  display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .thoughts[data-streaming] .thoughts-label {
-    animation: none;
-  }
-}
-
-.tool-call {
-  align-self: flex-start;
-  max-width: 80%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 12px;
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  padding: 8px 10px;
-  border-radius: 8px;
-  background: var(--_tool-bg);
-  border: 1px solid var(--_border);
-  color: var(--_tool-fg);
-}
-
-/* Wraps, because the name is the only flexible child and every badge the row
-   gains is taken out of it. An approved call adds a third fixed badge, which in
-   a sidebar-width panel left the name 37px and broke it mid-word. Badges drop to
-   their own row instead. */
-.tool-call-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.tool-call-name {
-  /* An auto basis, and a min-width floor rather than zero: the name may shrink,
-     but not below something readable, so wrapping moves a badge instead of
-     shredding a word. Breaking anywhere still applies to a name that cannot fit
-     on a line of its own, which is what keeps a long unbroken tool name inside
-     the card. */
-  flex: 1 1 auto;
-  min-width: 6ch;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-/* Leading status icon. Empty in the DOM — the glyph/spinner is drawn
-   here from the card's data-status, so it stays themeable. */
-.tool-call-icon {
-  flex: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  font-size: 12px;
-  line-height: 1;
-}
-
-/* Pending: a real spinning ring. Speed is tunable; reduced motion stops it. */
-.tool-call[data-status="pending"] .tool-call-icon {
-  border: 2px solid var(--_muted);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: ag-ui-tool-spin var(--_tool-spin-duration) linear infinite;
-}
-
-@keyframes ag-ui-tool-spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Deferred: no spinner, because nothing is spinning. A steady accent dot, since
-   the state is waiting-on-you rather than an outcome. */
-.tool-call[data-status="deferred"] .tool-call-icon {
-  border-radius: 50%;
-  background: var(--_accent);
-}
-
-/* Settled: a themeable glyph coloured by outcome. */
-.tool-call[data-status="done"] .tool-call-icon::before {
-  content: var(--_tool-icon-done);
-  color: var(--_success);
-}
-
-.tool-call[data-status="error"] .tool-call-icon::before {
-  content: var(--_tool-icon-error);
-  color: var(--_danger);
-}
-
-.tool-call[data-status="declined"] .tool-call-icon::before {
-  content: var(--_tool-icon-declined);
-  color: var(--_muted);
-}
-
-/* Not finished: muted like declined, since nothing failed, but its own glyph,
-   since nobody refused it either. */
-.tool-call[data-status="interrupted"] .tool-call-icon::before {
-  content: var(--_tool-icon-interrupted);
-  color: var(--_muted);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tool-call[data-status="pending"] .tool-call-icon {
-    animation: none;
-  }
-}
-
-/* Inline display mode: the lightest card. Drop the box chrome so the status row
-   reads as one line of the answer; the result toggle still expands below it. */
-:host([data-tool-display="inline"]) .tool-call {
-  max-width: 100%;
-  background: transparent;
-  border: none;
-  padding: 2px 0;
-  gap: 2px;
-}
-
-.tool-call-status {
-  flex: none;
-  padding: 1px 8px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 600;
-  background: rgba(127, 127, 127, 0.16);
-  color: var(--_muted);
-}
-
-.tool-call[data-status="deferred"] .tool-call-status {
-  color: var(--_accent);
-}
-
-.tool-call[data-status="done"] .tool-call-status {
-  color: var(--_success);
-}
-
-.tool-call[data-status="error"] .tool-call-status {
-  color: var(--_danger);
-}
-
-.tool-call[data-status="declined"] .tool-call-status,
-.tool-call[data-status="interrupted"] .tool-call-status {
-  color: var(--_muted);
-}
-
-.tool-call-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.tool-call-section {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-/* A call with no arguments drops the region rather than framing an empty
-   object, and a settled card drops the result region until it has one -- both
-   by setting the hidden property, and an author display beats the user-agent
-   rule for that attribute. Without this the region kept laying out: 42px of
-   card holding the ARGUMENTS heading over nothing, on every call the agent
-   made with no arguments, in the display mode that shows arguments by
-   default. */
-.tool-call-section[hidden] {
-  display: none;
-}
-
-/* The heading that tells the two payloads apart. Without it the arguments and
-   the result were one run of text and a reader had to guess the boundary. */
-.tool-call-section-label {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--_muted);
-}
-
-.skill-item-token {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 0.92em;
-  color: var(--_accent);
-  margin-right: 6px;
-}
-
-/* The lasting record of a human decision on a gated call — without it an
-   approved call looks exactly like one that was never gated. */
-.tool-call-decision {
-  flex: none;
-  font-size: 11px;
-  font-style: italic;
-  color: var(--_muted);
-}
-
-.tool-call-args,
-.tool-call-result {
-  margin: 0;
-  padding: 6px 8px;
-  max-height: 160px;
-  overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  background: var(--_bg);
-  border: 1px solid var(--_border);
-  border-radius: 6px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--_fg);
-}
-
-/* A region a host formatter took over, marked by the card. Preformatted
-   whitespace is what makes the built-in block read as written, and it is the one
-   thing a host cannot want: a table inherits it as mangled cell spacing, and a
-   sentence as line breaks nobody typed.
-
-   Whitespace only. The card's own face, frame, padding and scroll cap stay,
-   because the card is one visual object -- the head row and the status pill are
-   monospaced too -- and a region that dropped the family would be the only part
-   of it wearing a different one. A host that wants that restyles the
-   tool-card-result part, which does not need the formatter at all. */
-.tool-call-args[data-formatted],
-.tool-call-result[data-formatted] {
-  white-space: normal;
-}
-
-/* Display modes are pure visibility over one DOM shape, selected from the host
-   attribute rather than a value stamped on the card at build time, so flipping
-   data-tool-display re-styles cards already on screen. See ToolCallCard.
-
-   Default (no attribute) is the full mode: arguments always visible, result
-   behind the toggle. */
-.tool-call[data-expanded="false"] .tool-call-section--result {
-  display: none;
-}
-
-/* Compact: one toggle over both regions, so a settled card is a single line
-   until asked. */
-:host([data-tool-display="compact"]) .tool-call[data-expanded="false"] .tool-call-section {
-  display: none;
-}
-
-/* Inline: the result only; the call's arguments are noise at this density. */
-:host([data-tool-display="inline"]) .tool-call .tool-call-section--args {
-  display: none;
-}
-
-/* Minimal: the status row and nothing else, so there is no toggle to press. */
-:host([data-tool-display="minimal"]) .tool-call .tool-call-toggle,
-:host([data-tool-display="minimal"]) .tool-call .tool-call-body {
-  display: none;
-}
-
-/* A pending card has no result yet, and in the modes where the arguments are
-   hidden too there is nothing behind the toggle. Hide the control rather than
-   offer one that expands onto nothing. A deferred card is the same, and its
-   arguments are shown unconditionally by the rules below. */
-.tool-call[data-status="pending"] .tool-call-toggle,
-.tool-call[data-status="deferred"] .tool-call-toggle,
-:host([data-tool-display="inline"]) .tool-call[data-status="pending"] .tool-call-toggle {
-  display: none;
-}
-
-/* The approval prompt for a gated call, rendered inside that call's own card.
-   Empty on every card nobody is being asked about, so it collapses instead of
-   adding a gap to each one. */
-.tool-call-approval:empty {
-  display: none;
-}
-
-.tool-call-approval {
-  margin-top: 8px;
-}
-
-/* A card that is asking a question shows what it is asking about, in every
-   display mode. Three gated calls of one tool ask the same words, so the
-   arguments are the only thing telling them apart, and a density setting must
-   not be able to hide the answer to "which one is this". */
-:host([data-tool-display="minimal"]) .tool-call[data-status="deferred"] .tool-call-body {
-  display: flex;
-}
-
-/* The arguments region only, never every section: the result region carries the
-   hidden attribute until a result exists, and a display value here overrides it,
-   framing an empty RESULT heading under the question. */
-:host([data-tool-display="compact"]) .tool-call[data-status="deferred"] .tool-call-section--args,
-:host([data-tool-display="inline"]) .tool-call[data-status="deferred"] .tool-call-section--args {
-  display: flex;
-}
-
-/* A delegated sub-agent's progress, inside the card that delegated. Empty on
-   every card that delegated nothing, so it collapses rather than adding a gap
-   to each one -- the same shape the approval slot uses. */
-.tool-call-subagent:empty {
-  display: none;
-}
-
-.tool-call-subagent {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.subagent {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-
-/* The collapsed row is the status and the expander at once, which is what keeps
-   a ten-step child one row until somebody opens it. Full width and left-aligned,
-   because it is a line of the card rather than a button on it. */
-.subagent-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 2px 0;
-  border: none;
-  background: none;
-  font: inherit;
-  text-align: left;
-  color: var(--_muted);
-  cursor: pointer;
-}
-
-/* Nothing behind the row yet -- a delegation that failed before calling
-   anything. Drop the affordances rather than offer a control that expands onto
-   an empty region, which is the refusal the card's own toggle already makes. */
-.subagent-row:disabled {
-  cursor: default;
-}
-
-.subagent-row::after {
-  content: var(--_disclosure-collapsed);
-  flex: none;
-  margin-left: auto;
-  color: var(--_accent);
-}
-
-.subagent-row[aria-expanded="true"]::after {
-  content: var(--_disclosure-expanded);
-}
-
-.subagent-row:disabled::after {
-  display: none;
-}
-
-/* Empty in the DOM; the glyph is drawn here from the panel's data-phase, so a
-   host re-themes it through the same tool-icon custom properties the card uses. */
-.subagent-icon {
-  flex: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 10px;
-  height: 10px;
-  font-size: 10px;
-  line-height: 1;
-}
-
-/* Anything that is not a terminal phase is the child still working. Selected by
-   what it is not, so a phase this client has not heard of still spins rather
-   than rendering as a blank. */
-.subagent[data-phase]:not([data-phase="finished"]):not([data-phase="failed"]) .subagent-icon {
-  border: 2px solid var(--_muted);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: ag-ui-tool-spin var(--_tool-spin-duration) linear infinite;
-}
-
-.subagent[data-phase="finished"] .subagent-icon::before {
-  content: var(--_tool-icon-done);
-  color: var(--_success);
-}
-
-.subagent[data-phase="failed"] .subagent-icon::before {
-  content: var(--_tool-icon-error);
-  color: var(--_danger);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .subagent .subagent-icon {
-    animation: none;
-  }
-}
-
-/* The server's own pre-rendered line. Shrinks and wraps rather than pushing the
-   chevron out of the card, which is what a fixed-width sibling in a flex row
-   does to a panel at sidebar width. */
-.subagent-status {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-/* The child's own calls. Indented and ruled, so the nesting is visible without
-   a second card frame around it. */
-.subagent-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-left: 4px;
-  padding-left: 10px;
-  border-left: 1px solid var(--_border);
-}
-
-.subagent-steps[hidden] {
-  display: none;
-}
-
-.subagent-step {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  color: var(--_muted);
-}
-
-.subagent-step-icon {
-  flex: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 8px;
-  height: 8px;
-  font-size: 9px;
-  line-height: 1;
-}
-
-/* No outcome yet: the wire says null while the call is in flight, and the
-   absence of the attribute is how that arrives here. A hollow ring, not a
-   spinner -- several can be on screen at once and the row above already spins. */
-.subagent-step:not([data-ok]) .subagent-step-icon {
-  border: 1px solid var(--_muted);
-  border-radius: 50%;
-}
-
-.subagent-step[data-ok="true"] .subagent-step-icon::before {
-  content: var(--_tool-icon-done);
-  color: var(--_success);
-}
-
-.subagent-step[data-ok="false"] .subagent-step-icon::before {
-  content: var(--_tool-icon-error);
-  color: var(--_danger);
-}
-
-.subagent-step-name {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.tool-call-toggle {
-  align-self: flex-start;
-  border: none;
-  padding: 0;
-  background: none;
-  font: inherit;
-  font-weight: 600;
-  color: var(--_accent);
-  cursor: pointer;
-}
-
-.tool-call-toggle::before {
-  content: var(--_disclosure-collapsed) " ";
-}
-
-.tool-call-toggle[aria-expanded="true"]::before {
-  content: var(--_disclosure-expanded) " ";
-}
-
-/* Resize grips: every edge and every corner, so the panel can be dragged from
-   whichever side the reader is already near. Absent entirely where the
-   placement is full-bleed, since there is nothing to drag.
-
-   The whole set is always laid out. Which edges the *layout* pins is not a
-   question the stylesheet needs to answer any more -- it decided where the one
-   grip went, and there is no longer one grip. The element still measures and
-   stamps data-resize-anchor, because it decides what a drag on a pinned edge
-   costs in position and which grip carries the tab stop, but no rule here
-   reads it. */
-.resize-handle {
-  position: absolute;
-  z-index: 2;
-  background: transparent;
-  touch-action: none;
-}
-
-.resize-handle:focus-visible {
-  outline: 2px solid var(--_accent);
-  outline-offset: -2px;
-}
-
-/* Corners first in the file and last in the DOM, so they take the pointer
-   where they overlap an edge strip. */
-.resize-handle--top-left,
-.resize-handle--top-right,
-.resize-handle--bottom-left,
-.resize-handle--bottom-right {
-  width: var(--_grip-corner);
-  height: var(--_grip-corner);
-}
-
-.resize-handle--top-left {
-  top: 0;
-  left: 0;
-  cursor: nwse-resize;
-}
-
-.resize-handle--top-right {
-  top: 0;
-  right: 0;
-  cursor: nesw-resize;
-}
-
-.resize-handle--bottom-left {
-  bottom: 0;
-  left: 0;
-  cursor: nesw-resize;
-}
-
-.resize-handle--bottom-right {
-  bottom: 0;
-  right: 0;
-  cursor: nwse-resize;
-}
-
-/* Edge strips, held clear of the corners at both ends so a corner drag is
-   never swallowed by the edge next to it. */
-.resize-handle--left,
-.resize-handle--right {
-  top: var(--_grip-corner);
-  bottom: var(--_grip-corner);
-  width: var(--_grip-edge);
-  cursor: ew-resize;
-}
-
-.resize-handle--left {
-  left: 0;
-}
-
-.resize-handle--right {
-  right: 0;
-}
-
-.resize-handle--top,
-.resize-handle--bottom {
-  left: var(--_grip-corner);
-  right: var(--_grip-corner);
-  height: var(--_grip-edge);
-  cursor: ns-resize;
-}
-
-.resize-handle--top {
-  top: 0;
-}
-
-.resize-handle--bottom {
-  bottom: 0;
-}
-
-/* Docked: the placement owns the height, so the horizontal edges and every
-   corner are inert and must not advertise a drag that does nothing. The two
-   vertical edges remain, which is the same affordance these placements had
-   when there was one grip -- now on both sides, since either may be the inner
-   one depending on which side the rail is docked to. */
-:host([placement="sidebar"]) .resize-handle--top,
-:host([placement="sidebar"]) .resize-handle--bottom,
-:host([placement="sidebar"]) .resize-handle--top-left,
-:host([placement="sidebar"]) .resize-handle--top-right,
-:host([placement="sidebar"]) .resize-handle--bottom-left,
-:host([placement="sidebar"]) .resize-handle--bottom-right,
-:host([placement="side"]) .resize-handle--top,
-:host([placement="side"]) .resize-handle--bottom,
-:host([placement="side"]) .resize-handle--top-left,
-:host([placement="side"]) .resize-handle--top-right,
-:host([placement="side"]) .resize-handle--bottom-left,
-:host([placement="side"]) .resize-handle--bottom-right {
-  display: none;
-}
-
-/* The vertical edges run the full height once no corner shares them. */
-:host([placement="sidebar"]) .resize-handle--left,
-:host([placement="sidebar"]) .resize-handle--right,
-:host([placement="side"]) .resize-handle--left,
-:host([placement="side"]) .resize-handle--right {
-  top: 0;
-  bottom: 0;
-  width: var(--_grip-edge-docked);
-}
-
-/* Full-bleed: nothing to drag. */
-:host([placement="full"]) .resize-handle,
-:host([placement="page"]) .resize-handle {
-  display: none;
-}
-
-/* The visible mark on a grip.
-
-   Filling the whole strip was what the single corner grip did, and at 14px
-   square nobody ever saw it. On a strip running the length of an edge the same
-   fill reads as a border the panel grew -- square ended, stopping short of the
-   corner radius at both ends, and easily mistaken for a rendering fault rather
-   than for something to grab.
-
-   So the hit area stays the full strip and the mark is a short pill centred on
-   it, which cannot be read as an edge of anything and never meets the radius.
-
-   It shows on hover and focus as well as during the drag. With eight grips, a
-   mark that appears only once you are already dragging is a mark that never
-   told anyone the grips were there. */
-.resize-handle::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 999px;
-  background: var(--_accent);
-  opacity: 0;
-  transition: opacity var(--_motion) var(--_ease);
-}
-
-.resize-handle--top::after,
-.resize-handle--bottom::after {
-  width: var(--_grip-mark-length);
-  height: var(--_grip-mark-thickness);
-}
-
-.resize-handle--left::after,
-.resize-handle--right::after {
-  width: var(--_grip-mark-thickness);
-  height: var(--_grip-mark-length);
-}
-
-/* A corner has no length to run along, so it gets a dot instead of a pill. */
-.resize-handle--top-left::after,
-.resize-handle--top-right::after,
-.resize-handle--bottom-left::after,
-.resize-handle--bottom-right::after {
-  width: var(--_grip-mark-thickness);
-  height: var(--_grip-mark-thickness);
-}
-
-.resize-handle:hover::after,
-.resize-handle:focus-visible::after {
-  opacity: 0.5;
-}
-
-/* Equal specificity to the pair above, so source order is what makes the drag
-   the stronger of the two states. */
-.resize-handle[data-dragging]::after {
-  opacity: 0.9;
-}
-
-/* ── Composer ───────────────────────────────────────────────────────────────
-   One surface owns the border, the background and the focus ring; the field
-   and its tool row sit inside it, rather than being siblings stretched to the
-   textarea's height. */
-.input-row {
-  display: flex;
-  padding: 12px;
-  border-top: 1px solid var(--_border);
-}
-
-.composer {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 6px 6px 6px 10px;
-  background: var(--_input-bg);
-  border: 1px solid var(--_border);
-  border-radius: var(--_composer-radius);
-  transition: border-color var(--_motion) var(--_ease);
-}
-
-.composer:focus-within {
-  border-color: var(--_accent);
-}
-
-/* The field grows with its content (sized by #autoGrow) up to the ceiling,
-   then scrolls. border-box keeps that measurement stable: with content-box the
-   padding would be added to every scrollHeight read and the field would creep
-   taller on each keystroke. */
-.input {
-  box-sizing: border-box;
-  resize: none;
-  max-height: var(--_composer-max-height);
-  overflow-y: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  padding: 6px 4px 2px;
-  background: transparent;
-  border: none;
-  font: inherit;
-  color: inherit;
-  outline: none;
-}
-
-.composer-tools {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-/* Icon buttons: quiet at rest, so the field is what the eye lands on. */
-.attach-btn,
-.voice-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--_tool-btn-size);
-  height: var(--_tool-btn-size);
-  padding: 0;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--_muted);
-  font: inherit;
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color var(--_motion) var(--_ease),
-    color var(--_motion) var(--_ease);
-}
-
-.attach-btn:hover,
-.voice-btn:hover {
-  background: var(--_hover);
-  color: var(--_fg);
-}
-
-.attach-btn:disabled,
-.voice-btn:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-/* The same trap the attachment tray carries a note about, two rules along: an
-   author display beats the UA stylesheet's rule for the hidden property, so a
-   button the element has explicitly hidden keeps laying out and painting. The
-   clip is hidden until a host supplies an upload handler or an attachments URL,
-   and without this it is a visible control that cannot do anything.
-
-   The mic needs no such rule, and the asymmetry is worth knowing before adding
-   one: it is not hidden when unconfigured, it is never built. The voice wiring
-   returns before constructing the button, leaving only an empty voice slot that
-   is display: contents. A hidden-state rule for the mic would match nothing. */
-.attach-btn[hidden] {
-  display: none;
-}
-
-/* Send closes the row on the right: a circle, the only filled control in the
-   composer, so "the thing that acts" reads at a glance. */
-.send {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--_send-size);
-  height: var(--_send-size);
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: var(--_accent);
-  color: var(--_on-accent);
-  font: inherit;
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color var(--_motion) var(--_ease),
-    transform var(--_motion) var(--_ease-pop);
-}
-
-.send:hover {
-  transform: scale(1.08);
-}
-
-.send:active {
-  transform: scale(0.92);
-}
-
-.send:disabled {
-  opacity: 0.5;
-  cursor: default;
-  transform: none;
-}
-
-/* The composer button doubles as the Stop control while a run is in flight —
-   same circle, different glyph, so nothing moves when a run starts. */
-.send[data-state="running"] {
-  background: var(--_muted);
-}
-
-.send[data-state="idle"] .send-stop,
-.send[data-state="running"] .send-send {
-  display: none;
-}
-
-/* Glyphs — one class, painted from the button's own colour so every state
-   (hover, recording, running) carries the icon with it. */
-.glyph {
-  width: var(--_glyph-size);
-  height: var(--_glyph-size);
-  fill: none;
-  stroke: currentColor;
-  stroke-width: var(--_glyph-stroke);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.glyph--solid {
-  fill: currentColor;
-  stroke: none;
-}
-
-/* In an icon holder (header brand, launcher) the glyph takes the holder's size
-   rather than the composer's. */
-.icon-holder .glyph {
-  width: 100%;
-  height: 100%;
-}
-
-/* ── File attachments ───────────────────────────────────────────────────── */
-/* The picker button sits in the composer's tool row; hidden until
-   data-attachments-url. */
-.attach-input {
-  display: none;
-}
-
-/* The mic button's mount point; filled only once ComposerVoice.wire mounts
-   the control, which it skips unless transcription is configured. */
-.voice-slot {
-  display: contents;
-}
-
-/* Recording: a red tint + a gentle pulse so it's clearly "live". */
-.voice-btn[data-state="recording"] {
-  background: var(--_danger);
-  color: var(--_on-danger);
-  animation: ag-ui-voice-pulse 1.2s ease-in-out infinite;
-}
-
-.voice-btn[data-state="recording"]:hover {
-  background: var(--_danger);
-  color: var(--_on-danger);
-}
-
-@keyframes ag-ui-voice-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .voice-btn[data-state="recording"] {
-    animation: none;
-  }
-}
-
-/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */
-.attachment-slot {
-  display: contents;
-}
-
-/* The padding is the only separation the tray gets: its slot is display:
-   contents, so the tray is a direct child of the .chat column, and that column
-   sets no gap. The bottom value keeps a chip off the composer's top edge.
-   The inline value here is only the default: the page placement overrides
-   padding-inline further down to compute its reading-column gutter, and wins
-   on specificity whichever way this declaration is written. Read the two
-   together before changing either. */
-.attachment-tray {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 12px;
-}
-
-/* The tray sets the hidden property while empty, and an author display beats
-   the UA stylesheet's rule for it, so without this the empty tray keeps
-   laying out and its padding is permanent dead space above the composer. */
-.attachment-tray[hidden] {
-  display: none;
-}
-
-.attachment-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-/* Charts.
- *
- * The SVG scales to the column and carries no colours of its own beyond the
- * series palette, so a host restyles it the same way it restyles everything
- * else. Series colours are custom properties with fallbacks rather than fixed
- * values, and the axis furniture inherits currentColor at low opacity so it
- * reads correctly in either theme without a second palette.
- */
-/* A chart is sized like a message, not like a panel: it takes the width it
-   needs and stops, rather than stretching into whatever room the transcript
-   has. A message bubble caps at 80% for the same reason -- widening the panel
-   should not resize what is already in it. The cap is a token so a host with a
-   wide panel and a real reason can raise it; the default is the width this
-   renderer has always drawn at. Below the cap the block still fills its column,
-   which is what a narrow panel needs. */
-.chart-block {
-  align-self: flex-start;
-  width: 100%;
-  max-width: var(--_chart-max-width);
-  margin: 6px 0;
-  color: var(--_fg);
-}
-
-/* The drawing fills the block's width and carries its own height in the
-   viewBox, so it is laid out rather than magnified: block display keeps the
-   inline baseline gap from adding a stripe under every chart. */
-.chart-block svg {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-.chart-title {
-  margin-bottom: 2px;
-  font-size: 0.85em;
-  font-weight: 600;
-  opacity: 0.85;
-}
-
-.chart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  margin-top: 4px;
-  font-size: 0.78em;
-  opacity: 0.75;
-}
-
-.chart-legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.chart-legend-swatch {
-  width: 9px;
-  height: 9px;
-  border-radius: 2px;
-  flex: 0 0 auto;
-}
-
-.run-notice {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  align-self: flex-start;
-  max-width: 100%;
-  margin: 2px 0;
-  padding: 3px 10px;
-  border: 1px dashed var(--_border);
-  border-radius: 999px;
-  background: transparent;
-  color: var(--_muted);
-  font-size: 0.8em;
-  line-height: 1.4;
-}
-
-.run-notice-icon {
-  flex: none;
-  opacity: 0.75;
-}
-
-/* The one control a notice may carry. Quiet, because it reports something
-   already done rather than asking for a decision. */
-.run-notice-undo {
-  flex: 0 0 auto;
-  margin-inline-start: auto;
-  padding: 2px 8px;
-  border: 1px solid var(--_border);
-  border-radius: var(--_radius);
-  background: var(--_bg);
-  color: var(--_accent);
-  font: inherit;
-  font-size: 0.9em;
-  cursor: pointer;
-}
-
-.run-notice-undo:hover:not(:disabled) {
-  background: var(--_hover);
-}
-
-.run-notice-undo:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.run-notice-text {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-/* A chip carries its own text colour because it carries its own background.
-   The same chip renders in two places with opposite inherited colours: the
-   composer tray gives it the panel's, a sent user bubble gives it the user
-   foreground, which is white on the stock light theme and near-invisible
-   against the chip. Pairing the colour with the background it belongs to makes
-   both placements read alike. Overridden below for an errored chip, which
-   keeps its red. */
-.attachment-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  /* Without this the 100% below caps the content box, so the chip still
-     overflows its container by its own padding and border. Invisible while a
-     character cap kept names short; routine once the container is what bounds
-     the name. */
-  box-sizing: border-box;
-  max-width: 100%;
-  padding: 4px 8px;
-  border: 1px solid var(--_border);
-  border-radius: 999px;
-  background: var(--_assistant-bg);
-  color: var(--_text);
-  font-size: 0.85em;
-  position: relative;
-}
-
-.attachment-chip--error {
-  border-color: var(--_danger);
-  color: var(--_danger);
-}
-
-/* The type mark. Painted from currentColor, so it carries the chip's state
-   with it and turns red along with an errored one; muted by opacity rather
-   than a colour, which is what keeps that true. Sized from the chip's own text
-   rather than --ag-ui-glyph-size, the way an icon holder's glyph takes the
-   holder's size: the composer's 18px buttons would make a chip button-height. */
-.attachment-chip-icon {
-  display: inline-flex;
-  flex: none;
-  opacity: 0.75;
-}
-
-.attachment-chip-icon .glyph {
-  width: 1.25em;
-  height: 1.25em;
-}
-
-/* No character cap: the chip is already max-width 100%, so its container is
-   what bounds the name, and a fixed cap only truncated names the chip had room
-   for. min-width: 0 is what lets the flex item shrink past its content, so the
-   ellipsis appears at the container edge instead of the chip overflowing. */
-.attachment-chip-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.attachment-chip-size {
-  color: var(--_muted);
-  white-space: nowrap;
-}
-
-.attachment-chip--error .attachment-chip-size {
-  color: var(--_danger);
-}
-
-/* The progress bar fills as the file uploads. */
-.attachment-chip-bar {
-  flex-basis: 100%;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--_border);
-  overflow: hidden;
-}
-
-.attachment-chip-bar-fill {
-  height: 100%;
-  background: var(--_accent);
-  transition: width 0.15s ease;
-}
-
-.attachment-chip-remove,
-.attachment-chip-retry {
-  border: none;
-  background: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  opacity: 0.7;
-}
-
-.attachment-chip-remove:hover,
-.attachment-chip-retry:hover {
-  opacity: 1;
-}
-
-/* A subtle outline while a file is dragged over the shell. */
-.chat--dragover {
-  outline: 2px dashed var(--_accent);
-  outline-offset: -4px;
-}
-
-/* Muted "⏹ Stopped" line after a cancelled run — a note, not an error bubble. */
-.stopped-note {
-  align-self: flex-start;
-  color: var(--_muted);
-  font-size: 12px;
-  padding: 2px 4px;
-}
-
-/* Inline confirmation card — lives in the transcript, no focus-stealing overlay. */
-.confirm {
-  align-self: stretch;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: var(--_bg);
-  border: 1px solid var(--_accent);
-  border-radius: 10px;
-}
-
-.confirm[data-resolved] {
-  opacity: 0.7;
-  border-color: var(--_border);
-}
-
-.confirm-body {
-  font-weight: 600;
-}
-
-.confirm-args {
-  margin: 0;
-  padding: 8px 10px;
-  max-height: 140px;
-  overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  font-size: 12px;
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  background: var(--_assistant-bg);
-  border-radius: 8px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.confirm-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-.confirm-btn {
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-  padding: 8px 14px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  background: var(--_bg);
-  color: var(--_fg);
-}
-
-.confirm-btn:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.confirm-btn--confirm {
-  border-color: var(--_accent);
-  background: var(--_accent);
-  color: var(--_on-accent);
-}
-
-/* The session waiver. Deliberately the quietest of the three: it is the widest
-   decision on the card, so it should be reachable without being the one the eye
-   lands on when the user means to say yes once. */
-.confirm-btn--always {
-  font-weight: 500;
-  opacity: 0.85;
-}
-
-.confirm-btn--always:hover,
-.confirm-btn--always:focus-visible {
-  opacity: 1;
-}
-
-/* Editable arguments on an approval card. A plain field rather than a code
-   editor: it holds the JSON a card already displays, and the only interaction
-   is correcting a value before letting the call run. */
-.approval-edit {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.approval-args {
-  box-sizing: border-box;
-  width: 100%;
-  resize: vertical;
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-  padding: 8px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.85em;
-  background: var(--_bg);
-  color: var(--_fg);
-}
-
-.approval-args:focus-visible {
-  border-color: var(--_accent);
-  outline: none;
-}
-
-.approval-error {
-  font-size: 0.85em;
-  color: var(--_danger);
-}
-
-/* Message action row. Sits under a finished assistant bubble.
-
-   The wrap is insurance rather than a fix: these buttons are glyph-only, so at
-   every width tested they fit on one line and removing the wrap changes
-   nothing. It is here because the confirmation row one release earlier did
-   overflow when it gained a third button, off the left edge and outside its own
-   card, and the difference between the two rows is only that this one's labels
-   are icons today. */
-.message-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  /* Negative, and that is the point. The answer group is a flex column with its
-     own gap, so a positive margin here pushes the row further from the message
-     it acts on than the next card is below it -- the buttons then read as
-     belonging to whatever follows. Pulling back inside the gap is what makes
-     them the message's own. */
-  margin-top: -6px;
-}
-
-/* The row's controls are icon-only, so the box is the whole target. Sized from
-   a variable a host can raise, with a floor rather than a fixed height: the
-   compact density shrinks the font, and a target that shrinks with it lands
-   under the 24px minimum that makes a control reliably tappable. It used to,
-   at roughly 20px square. */
-.message-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: var(--_action-size);
-  min-height: var(--_action-size);
-  padding: 4px;
-  border: none;
-  border-radius: 6px;
-  font: inherit;
-  line-height: 1.2;
-  cursor: pointer;
-  background: transparent;
-  color: var(--_muted);
-  opacity: 0.75;
-  /* The tooltip below is positioned against this box. */
-  position: relative;
-}
-
-.message-action:hover,
-.message-action:focus-visible {
-  opacity: 1;
-  background: var(--_border);
-}
-
-.message-action-icon {
-  display: inline-flex;
-  width: var(--_action-icon-size);
-  height: var(--_action-icon-size);
-}
-
-.message-action-icon .glyph {
-  width: 100%;
-  height: 100%;
-}
-
-/* The label, drawn rather than left to the browser.
-
-   A title attribute is the usual answer and covers only half the readers: it
-   never appears on keyboard focus, so tabbing onto an icon-only control shows
-   nothing at all. The attribute stays for the pointer users who expect it, and
-   this shows the same words on hover and on focus alike.
-
-   Left-aligned rather than centred because the row sits at the left edge of an
-   answer inside a scrolling column, and a centred tooltip on the first control
-   is clipped by that column. Growing rightward keeps it inside.
-
-   Not exposed to assistive technology: the button already carries the same
-   string as its accessible name, and this would be a second copy of it. */
-.message-action::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: calc(100% + 4px);
-  left: 0;
-  z-index: 3;
-  padding: 3px 6px;
-  border-radius: 4px;
-  background: var(--_tooltip-bg);
-  color: var(--_tooltip-fg);
-  font-size: 11px;
-  line-height: 1.4;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--_motion) var(--_ease);
-}
-
-.message-action:hover::after,
-.message-action:focus-visible::after {
-  opacity: 1;
-}
-
-/* Touch has no hover to reveal it, and a tooltip that latches open under a
-   finger covers the answer it belongs to. */
-@media (hover: none) {
-  .message-action::after {
-    content: none;
-  }
-}
-
-/* Touch. Separate from the width breakpoint above on purpose: width decides
-   the layout, the pointer decides which controls make sense, and a touch
-   laptop is coarse-pointered and wide while a narrow desktop window is
-   fine-pointered and small. */
-@media (pointer: coarse) {
-  /* A 6px edge strip is not a control, it is a trap that eats a scroll. The
-     corners are 14px, still under the 24px floor a target is meant to clear,
-     and the panel has other ways to be resized on a device that has a pointer
-     precise enough to grab one. */
-  .resize-handle {
-    display: none;
-  }
-
-  /* Platform guidance is 44pt on iOS and 48dp on Android. These sit at 28-30px,
-     which clears the WCAG minimum and misses both. */
-  :host {
-    --_action-size: var(--ag-ui-action-size, 44px);
-    --_tool-btn-size: var(--ag-ui-tool-btn-size, 44px);
-    --_send-size: var(--ag-ui-send-size, 44px);
-    /* Missed the first time these were raised, which left the header -- the
-       widget's primary controls, and the only way to reach history, a new chat
-       or the collapse -- at half the size of everything beside it. */
-    --_header-btn-size: var(--ag-ui-header-btn-size, 44px);
-    --_header-gap: var(--ag-ui-header-gap, 6px);
-  }
-
-  /* iOS Safari zooms the page when a control under 16px takes focus, which
-     drags the whole fixed panel with it and leaves the user pinching back out
-     of a chat they only wanted to type into. The composer inherits the widget
-     font, which is 14px by default and 13px at compact density, so it has to
-     say 16 outright -- and only ever upward, so a host that has deliberately
-     set something larger keeps it. */
-  .input {
-    font-size: max(16px, var(--_font-size));
-  }
-}
-
-.message-action[aria-pressed="true"] {
-  opacity: 1;
-  color: var(--_accent);
-}
-
-.message-action--confirmed {
-  opacity: 1;
-  color: var(--_accent);
-}
-
-/* Approval card — the server-side-tool gate (approve/deny an interrupt). */
-.approval {
-  align-self: stretch;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: var(--_bg);
-  border: 1px solid var(--_accent);
-  border-radius: 10px;
-}
-
-.approval[data-resolved] {
-  opacity: 0.7;
-  border-color: var(--_border);
-}
-
-.approval-body {
-  font-weight: 600;
-}
-
-.approval-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-.approval-btn {
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-  padding: 8px 14px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  background: var(--_bg);
-  color: var(--_fg);
-}
-
-.approval-btn:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.approval-btn--approve {
-  border-color: var(--_accent);
-  background: var(--_accent);
-  color: var(--_on-accent);
-}
-
-/* Question card — the built-in ask_user prompt (radios and/or free text). */
-.question {
-  align-self: stretch;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: var(--_bg);
-  border: 1px solid var(--_accent);
-  border-radius: 10px;
-}
-
-.question[data-resolved] {
-  opacity: 0.7;
-  border-color: var(--_border);
-}
-
-.question-body {
-  font-weight: 600;
-}
-
-.question-options {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.question-choice {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-}
-
-.question-input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 8px 10px;
-  font: inherit;
-  color: var(--_fg);
-  background: var(--_bg);
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-}
-
-.question-input:disabled {
-  opacity: 0.6;
-}
-
-.question-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.question-btn {
-  border: 1px solid var(--_accent);
-  border-radius: 8px;
-  padding: 8px 14px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  background: var(--_accent);
-  color: var(--_on-accent);
-}
-
-.question-btn:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-/* Skills — chips row + the /-command palette, above the input. */
-.skill-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 10px 12px;
-}
-
-/* The row is hidden whenever the host offers no skills, which is most elements
-   most of the time, and an author display beats the user-agent rule for the
-   hidden attribute. Without this it kept its padding: 20px of panel between
-   the transcript and the composer, under every placement, reading as the gap
-   under whatever the transcript ends with. */
-.skill-chips[hidden] {
-  display: none;
-}
-
-.skill-chip {
-  border: 1px solid var(--_border);
-  border-radius: 999px;
-  padding: 4px 12px;
-  font: inherit;
-  font-size: 0.9em;
-  cursor: pointer;
-  background: var(--_assistant-bg);
-  color: var(--_fg);
-}
-
-.skill-chip:hover {
-  border-color: var(--_accent);
-}
-
-/* Follow-up suggestion chips. Deliberately the skill chips' shape rather than a
-   second chip vocabulary -- both are "a question you could ask", and the only
-   difference is who chose it. Inside the transcript, so they scroll with the
-   answer they follow instead of hovering above the composer. */
-.suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-self: stretch;
-}
-
-.suggestion-chip {
-  border: 1px solid var(--_border);
-  border-radius: 999px;
-  padding: 4px 12px;
-  font: inherit;
-  font-size: 0.9em;
-  text-align: left;
-  cursor: pointer;
-  background: var(--_assistant-bg);
-  color: var(--_fg);
-}
-
-.suggestion-chip:hover,
-.suggestion-chip:focus-visible {
-  border-color: var(--_accent);
-}
-
-.skill-palette {
-  margin: 8px 12px 0;
-  display: flex;
-  flex-direction: column;
-  max-height: 220px;
-  overflow: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  background: var(--_bg);
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);
-}
-
-/* Closed nearly all of the time and mounted on every element. The display
-   above beats the user-agent rule for the hidden attribute, so without this a
-   closed palette still painted its margin, border and shadow as a line over
-   the composer. */
-.skill-palette[hidden] {
-  display: none;
-}
-
-.skill-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: flex-start;
-  padding: 8px 12px;
-  border: none;
-  background: none;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  color: var(--_fg);
-}
-
-.skill-item[aria-selected="true"] {
-  background: var(--_assistant-bg);
-}
-
-.skill-item-title {
-  font-weight: 600;
-}
-
-.skill-item-desc {
-  font-size: 0.85em;
-  color: var(--_muted);
-}
-
-/* The hint sits directly above the composer's top border, so a zero bottom
-   margin left the text touching the divider. */
-.skill-hint {
-  margin: 8px 12px;
-  font-size: 0.85em;
-  line-height: 1.4;
-  color: var(--_danger);
-}
-
-/* Chat-history drawer — a slide-over within the chat panel.
-   The hidden attribute stays the single source of truth for open/closed (no
-   JS-driven animation state): display is transitioned discretely, so on close
-   the drawer stays displayed for the whole exit and is removed only at the end,
-   which is what lets the backdrop fade and the panel slide out. */
-.drawer {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-  display: flex;
-  /* Visible at once on the way in. Opening moves focus to the list in the
-     same task that unhides it, and an element still hidden cannot take focus:
-     a transition on visibility starts at its first value, so easing it in
-     left the drawer hidden at exactly that instant and the focus call was
-     dropped at every placement. Reduced motion shortens the transition
-     without removing it, so it had the same first frame. */
-  transition: visibility 0s;
-}
-
-/* Closed. The overlay keeps its box (display, not none) so the backdrop and
-   panel inside it stay rendered and can transition both ways; visibility is
-   what takes the whole subtree out of the tab order, the a11y tree and hit
-   testing at rest. On the way out it is delayed rather than eased, so it
-   flips only once the slide has finished. A transition is read from the
-   state being entered, which is what lets the two directions differ. */
-.drawer[hidden] {
-  display: flex;
-  visibility: hidden;
-  pointer-events: none;
-  transition: visibility 0s var(--_motion);
-}
-
-.drawer[hidden] .drawer-backdrop {
-  opacity: 0;
-}
-
-.drawer[hidden] .drawer-panel {
-  transform: translateX(-100%);
-}
-
-.checkpoints {
-  position: absolute;
-  inset-block-start: 3rem;
-  inset-inline: 0.75rem;
-  z-index: 6;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  border: 1px solid var(--_border);
-  border-radius: 0.5rem;
-  background: var(--_assistant-bg);
-  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
-  max-height: 60%;
-  overflow-y: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-  transform-origin: top center;
-  /* Visibility flips at once on the way in, for the drawer's reason: opening
-     focuses the panel in the same task that unhides it, and an element still
-     hidden cannot take focus. The fade and the scale still ease in. */
-  transition:
-    opacity var(--_motion) var(--_ease),
-    transform var(--_motion) var(--_ease),
-    visibility 0s;
-}
-
-/* Same idiom as the drawer: laid out at rest, hidden by visibility, so the
-   popover can animate open and closed. The whole list is restated because a
-   transition is read from the state being entered; only visibility differs,
-   delayed rather than eased so it flips once the exit has played. */
-.checkpoints[hidden] {
-  display: flex;
-  visibility: hidden;
-  pointer-events: none;
-  opacity: 0;
-  transform: scale(0.96) translateY(-6px);
-  transition:
-    opacity var(--_motion) var(--_ease),
-    transform var(--_motion) var(--_ease),
-    visibility 0s var(--_motion);
-}
-
-.checkpoints-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  opacity: 0.7;
-}
-
-.checkpoints-empty {
-  padding: 0.5rem 0.25rem;
-  font-size: 0.8125rem;
-  opacity: 0.7;
-}
-
-/* A row is a label and two buttons, and nothing about the row itself is
-   pressable. It used to light up on hover, which is the affordance of something
-   clickable and made the buttons look like decoration on a clickable strip. The
-   resting surface groups the row instead, so hover can mean what it says: only
-   the buttons respond to it.
-
-   It wraps for the same reason the tool-call head does. Every child but the label
-   is fixed-width, so in a narrow panel the label is the only thing that can give
-   -- and a flex-basis of zero lets it give everything. Adding the run id was
-   enough to crush "just now" to zero pixels: present, correct, and invisible.
-   Wrapping puts the buttons on their own line instead. */
-.checkpoint-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.3125rem 0.4375rem;
-  border-radius: 0.375rem;
-  background: var(--_hover);
-}
-
-/* Grows into spare room, and refuses to shrink past the shortest thing it ever
-   says. A time is short and bounded, so there is no case for eliding it. */
-.checkpoint-label {
-  flex: 1 1 auto;
-  min-width: 7ch;
-  font-size: 0.8125rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* When the label holds the run's first message, the time moves here: still worth
-   showing, no longer what identifies the row. Muted and unshrinkable, so it does
-   not compete with the words beside it. */
-.checkpoint-time {
-  flex: 0 0 auto;
-  font-size: 0.6875rem;
-  opacity: 0.7;
-  white-space: nowrap;
-}
-
-/* Enough of the run id to tell two runs apart when both say "just now". Muted
-   and monospaced: it is a reference, not a name. */
-.checkpoint-id {
-  flex: 0 0 auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6875rem;
-  opacity: 0.55;
-}
-
-/* On the panel's own surface, not the row's: the row now paints the hover token
-   itself, and a badge the same colour as what it sits on is not a badge. */
-.checkpoint-branch {
-  font-size: 0.6875rem;
-  padding: 0 0.375rem;
-  border-radius: 999px;
-  background: var(--_assistant-bg);
-  opacity: 0.8;
-}
-
-/* The two things in the row that actually do something, so they are the two
-   things that look like it: a filled surface at rest rather than a transparent
-   outline, which on top of the old row highlight was nearly invisible. */
-.checkpoint-action {
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  cursor: pointer;
-  padding: 0.1875rem 0.5625rem;
-  border: 1px solid var(--_border);
-  border-radius: 0.375rem;
-  background: var(--_bg);
-  color: inherit;
-  transition:
-    background var(--_motion) var(--_ease),
-    border-color var(--_motion) var(--_ease),
-    transform var(--_motion) var(--_ease);
-}
-
-/* Resume is what a reader wants nine times in ten; fork is the deliberate choice
-   beside it. Filled and outlined, the same pair the confirmation and approval
-   cards already use for their primary and secondary action. */
-.checkpoint-resume {
-  font-weight: 600;
-  border-color: var(--_accent);
-  background: var(--_accent);
-  color: var(--_on-accent);
-}
-
-.checkpoint-fork:hover {
-  background: var(--_hover);
-  border-color: var(--_accent);
-}
-
-/* The filled one cannot go lighter on hover without losing its contrast with the
-   white label, so it dims instead. */
-.checkpoint-resume:hover {
-  opacity: 0.88;
-}
-
-/* Pressed: a pixel down, so the click is felt as well as seen. */
-.checkpoint-action:active {
-  transform: translateY(1px);
-}
-
-/* Keyboard focus was invisible here, in a panel that traps focus and is reached
-   by Tab -- so the one navigation path guaranteed to land on these buttons was
-   the one with nothing to show for it. */
-.checkpoint-action:focus-visible {
-  outline: 2px solid var(--_accent);
-  outline-offset: 2px;
-}
-
-.drawer-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(20, 20, 50, 0.32);
-  opacity: 1;
-  transition: opacity var(--_motion) var(--_ease);
-}
-
-.drawer-panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: min(300px, 85%);
-  height: 100%;
-  background: var(--_bg);
-  border-right: 1px solid var(--_border);
-  box-shadow: var(--_shadow);
-  overflow: hidden;
-  transform: none;
-  transition: transform var(--_motion) var(--_ease);
-}
-
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--_space);
-  padding: var(--_pad);
-  border-bottom: 1px solid var(--_border);
-}
-
-.drawer-title {
-  /* Takes the slack so the two controls group at the trailing edge. With
-     space-between and three items the middle one floats, which reads as the
-     title and the close button being a pair with New chat wedged between
-     them. Truncates rather than pushing them off the row. */
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
-}
-
-.drawer-new {
-  flex: 0 0 auto;
-  border: 1px solid var(--_border);
-  border-radius: var(--_radius);
-  background: var(--_bg);
-  color: var(--_accent);
-  padding: 4px 10px;
-  font: inherit;
-  font-size: 0.85em;
-  cursor: pointer;
-}
-
-/* Narrows the list. Sits under the header rather than in it: the header's two
-   controls act on the conversation, and a field that filters what is below it
-   belongs with what it filters. */
-/* What is waiting for the run to finish. Above the composer, beside the
-   attachment tray, because both are things already handed over and not yet
-   sent. Each chip is a button: pressing it takes that message back. */
-.queued {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--_space);
-  padding: 0 var(--_pad) var(--_space);
-}
-
-/* Empty whenever no run is in flight, and hidden then. Same reason as the
-   palette: the display above would otherwise keep the bottom padding as dead
-   space over the composer. */
-.queued[hidden] {
-  display: none;
-}
-
-.queued-chip {
-  max-width: 100%;
-  overflow: hidden;
-  padding: 4px 10px;
-  border: 1px dashed var(--_border);
-  border-radius: var(--_msg-radius);
-  background: var(--_bg);
-  color: var(--_muted);
-  font: inherit;
-  font-size: 0.9em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.queued-chip:hover {
-  border-style: solid;
-  color: var(--_fg);
-}
-
-.drawer-filter {
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  width: calc(100% - var(--_pad) * 2);
-  margin: var(--_space) var(--_pad) 0;
-  padding: 6px 10px;
-  border: 1px solid var(--_border);
-  border-radius: var(--_radius);
-  background: var(--_input-bg);
-  color: var(--_fg);
-  font: inherit;
-  font-size: 0.9em;
-}
-
-.drawer-filter::placeholder {
-  color: var(--_muted);
-}
-
-.drawer-list {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  /* Scrolling past the end of this must not scroll the page behind it. */
-  overscroll-behavior: contain;
-}
-
-.drawer-empty {
-  padding: var(--_pad);
-  font-size: 0.9em;
-  color: var(--_muted);
-}
-
-.drawer-row {
-  display: flex;
-  align-items: stretch;
-  border-bottom: 1px solid var(--_border);
-}
-
-.drawer-row--active {
-  background: var(--_assistant-bg);
-}
-
-.drawer-row-select {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px 12px;
-  border: none;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.drawer-row-title {
-  font-weight: 600;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.drawer-row-time {
-  font-size: 0.72em;
-  color: var(--_muted);
-}
-
-.drawer-row-preview {
-  font-size: 0.8em;
-  color: var(--_muted);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.drawer-row-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 6px;
-}
-
-.drawer-row-rename,
-.drawer-row-delete {
-  border: none;
-  background: none;
-  color: var(--_muted);
-  font-size: 0.9em;
-  padding: 4px;
-  cursor: pointer;
-}
-
-.drawer-rename-input {
-  flex: 1;
-  min-width: 0;
-  margin: 6px 10px;
-  padding: 4px 8px;
-  border: 1px solid var(--_accent);
-  border-radius: 6px;
-  background: var(--_input-bg);
-  color: var(--_fg);
-  font: inherit;
-}
-
-.drawer-confirm {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 0.85em;
-}
-
-.drawer-confirm-label {
-  color: var(--_danger);
-}
-
-.drawer-confirm-yes {
-  border: none;
-  border-radius: 6px;
-  background: var(--_danger);
-  color: var(--_on-danger);
-  padding: 3px 10px;
-  font: inherit;
-  cursor: pointer;
-}
-
-.drawer-confirm-no {
-  border: 1px solid var(--_border);
-  border-radius: 6px;
-  background: none;
-  color: inherit;
-  padding: 3px 10px;
-  font: inherit;
-  cursor: pointer;
-}
-
-/* Embedded placement: an inline, flush side panel rather than a dimmed,
-   floating slide-over. */
-:host([placement="embedded"]) .drawer-backdrop {
-  background: none;
-}
-
-/* The way back out of the list. It sits beside New chat, which is the control
-   it must not be mistaken for: one returns you to the conversation you were
-   reading, the other replaces it. */
-.drawer-close {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.drawer-close:hover {
-  background: var(--_hover);
-}
-
-:host([placement="embedded"]) .drawer-panel {
-  width: 100%;
-  border-right: none;
-  box-shadow: none;
-}
-`;
+// The shadow stylesheet, composed from one module per concern. Each module is
+// a plain string constant so the element can adopt the whole sheet without a
+// build-time CSS pipeline, and the shadow boundary scopes every class name.
+//
+// The list below is in cascade order, and that order is load-bearing: two
+// rules of equal specificity resolve by which comes later, and several
+// modules restate a state another module set at rest. A module moves in this
+// list only with a browser test that pins what the move changes. The split
+// that produced these modules moved no rule, so the composed sheet is the
+// single stylesheet it replaced: the rules and their order are unchanged and
+// only comments differ, which is also why a few small rules still sit in a
+// neighbouring concern's module.
+//
+// Every module is a template literal: a backtick or a dollar-brace inside a
+// CSS comment ends it, and tsc reports the error far from the edit.
+
+import { CHART_STYLES } from "./charts/chart_styles.js";
+import { ATTACHMENT_STYLES } from "./composer/attachment_styles.js";
+import { COMPOSER_STYLES } from "./composer/composer_styles.js";
+import { SKILL_STYLES } from "./composer/skill_styles.js";
+import { HISTORY_STYLES } from "./history/history_styles.js";
+import { APPROVAL_STYLES } from "./interrupts/approval_styles.js";
+import { CONFIRMATION_STYLES } from "./interrupts/confirmation_styles.js";
+import { QUESTION_STYLES } from "./interrupts/question_styles.js";
+import { COLLAPSE_STYLES } from "./placement/collapse_styles.js";
+import { EMBEDDED_STYLES } from "./placement/embedded_styles.js";
+import { LAUNCHER_STYLES } from "./placement/launcher_styles.js";
+import { PAGE_STYLES } from "./placement/page_styles.js";
+import { PRESET_STYLES } from "./placement/preset_styles.js";
+import { RESIZE_STYLES } from "./placement/resize_styles.js";
+import { SIDEBAR_STYLES } from "./placement/sidebar_styles.js";
+import { SMALL_VIEWPORT_STYLES } from "./placement/small_viewport_styles.js";
+import { RUN_NOTICE_STYLES } from "./progress/run_notice_styles.js";
+import { THOUGHTS_STYLES } from "./progress/thoughts_styles.js";
+import { TOOL_GROUP_STYLES } from "./progress/tool_group_styles.js";
+import { TOOL_STEP_STYLES } from "./progress/tool_step_styles.js";
+import { FRAME_STYLES } from "./shell/frame_styles.js";
+import { THEME_STYLES } from "./shell/theme_styles.js";
+import { TOKEN_STYLES } from "./shell/token_styles.js";
+import { CLASSIC_STYLES } from "./themes/classic_styles.js";
+import { CLASSIC_TOKENS } from "./themes/classic_tokens.js";
+import { CODE_TOKENS } from "./themes/code_tokens.js";
+import { LEDGER_STYLES } from "./themes/ledger_styles.js";
+import { LEDGER_TOKENS } from "./themes/ledger_tokens.js";
+import { MODERN_STYLES } from "./themes/modern_styles.js";
+import { QUIET_STYLES } from "./themes/quiet_styles.js";
+import { SCHEME_STYLES } from "./themes/scheme_styles.js";
+import { SOFT_STYLES } from "./themes/soft_styles.js";
+import { SOFT_TOKENS } from "./themes/soft_tokens.js";
+import { ATTACHMENT_CHIP_STYLES } from "./transcript/attachment_chip_styles.js";
+import { GREETING_STYLES } from "./transcript/greeting_styles.js";
+import { MESSAGE_ACTION_STYLES } from "./transcript/message_action_styles.js";
+import { MESSAGE_STYLES } from "./transcript/message_styles.js";
+import { TRANSCRIPT_STYLES } from "./transcript/transcript_styles.js";
+
+export const STYLES: string = [
+  // Quiet's tokens are the defaults; each theme's tokens follow, then the
+  // scheme, then density, so density="compact" outranks a theme's own scale.
+  TOKEN_STYLES,
+  CLASSIC_TOKENS,
+  CODE_TOKENS,
+  SOFT_TOKENS,
+  LEDGER_TOKENS,
+  SCHEME_STYLES,
+  THEME_STYLES,
+  PRESET_STYLES,
+  PAGE_STYLES,
+  SMALL_VIEWPORT_STYLES,
+  SIDEBAR_STYLES,
+  LAUNCHER_STYLES,
+  EMBEDDED_STYLES,
+  FRAME_STYLES,
+  COLLAPSE_STYLES,
+  TRANSCRIPT_STYLES,
+  GREETING_STYLES,
+  MESSAGE_STYLES,
+  THOUGHTS_STYLES,
+  TOOL_STEP_STYLES,
+  RESIZE_STYLES,
+  COMPOSER_STYLES,
+  ATTACHMENT_STYLES,
+  CHART_STYLES,
+  RUN_NOTICE_STYLES,
+  ATTACHMENT_CHIP_STYLES,
+  CONFIRMATION_STYLES,
+  MESSAGE_ACTION_STYLES,
+  APPROVAL_STYLES,
+  QUESTION_STYLES,
+  SKILL_STYLES,
+  HISTORY_STYLES,
+  // The step group restates, inside a group, card rules the modules above set
+  // at rest; it outweighs them rather than relying on order, and sits ahead
+  // of the themes so a theme restating a group rule at equal weight wins.
+  TOOL_GROUP_STYLES,
+  // Each theme's structure comes last: it restates rules the modules above
+  // set at rest, at equal weight. Classic and code have no structural
+  // module; they are the base stylesheet, and classic adds only its
+  // contrast fixes.
+  CLASSIC_STYLES,
+  MODERN_STYLES,
+  QUIET_STYLES,
+  SOFT_STYLES,
+  LEDGER_STYLES,
+].join("");