@artooi/ag-ui-web-component 0.20.1 → 0.22.0

package/src/ui/styles.ts

@@ -3,151 +3,216 @@
 // 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 a page that put the tokens
+   on a wrapper would see no effect at all, which is the one thing the API is
+   documented to support. Reading the public name with the default as a var()
+   fallback leaves it undeclared on the element, so an ancestor's value is
+   inherited normally while a value aimed at the element still wins over it.
+
+   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 */
-  --ag-ui-bg: #ffffff;
-  --ag-ui-fg: #1a1a2e;
-  --ag-ui-accent: #4f46e5;
-  --ag-ui-user-bg: #4f46e5;
-  --ag-ui-user-fg: #ffffff;
-  --ag-ui-assistant-bg: #f1f1f6;
-  --ag-ui-hover: #e7e7ee;
-  --ag-ui-input-bg: var(--ag-ui-bg);
-  --ag-ui-tool-bg: var(--ag-ui-assistant-bg);
-  --ag-ui-tool-fg: var(--ag-ui-accent);
-  --ag-ui-header-bg: var(--ag-ui-accent);
-  --ag-ui-header-fg: #ffffff;
-  --ag-ui-border: #e2e2ec;
-  --ag-ui-radius: 12px;
+  --_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);
+
+  /* Body text and raised chrome. Both are referenced by the code-block copy
+     button; neither had a default before, so the declarations reading them
+     were dropped and the button fell back to the inherited colour over a
+     transparent box. The defaults below restate exactly that, so this is a
+     rename with no repaint — see the note on .code-copy. */
+  --_text: var(--ag-ui-text, var(--_fg));
+  --_surface: var(--ag-ui-surface, transparent);
 
   /* Status accents for tool-call cards. */
-  --ag-ui-success: #15803d;
-  --ag-ui-danger: #b91c1c;
-  --ag-ui-muted: #6b7280;
+  --_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. */
-  --ag-ui-tool-icon-done: "✓";
-  --ag-ui-tool-icon-error: "✕";
-  --ag-ui-tool-icon-declined: "⊘";
-  --ag-ui-tool-spin-duration: 0.7s;
+  --_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-spin-duration: var(--ag-ui-tool-spin-duration, 0.7s);
 
   /* Answer well (opt-in via data-answer-well) — boxes a whole assistant turn. */
-  --ag-ui-well-bg: transparent;
-  --ag-ui-well-border: var(--ag-ui-border);
+  --_well-bg: var(--ag-ui-well-bg, transparent);
+  --_well-border: var(--ag-ui-well-border, var(--_border));
 
   /* Surface — set --ag-ui-shadow: none for a flush, embedded panel. */
-  --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);
-  --ag-ui-font: inherit;
-  --ag-ui-font-size: 14px;
-  --ag-ui-code-font: ui-monospace, "SF Mono", Menlo, monospace;
+  --_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);
+
+  /* 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 whole widget accelerates and settles as one thing.
+     The default curve is a long-tailed ease-out (a fast start that 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. */
-  --ag-ui-space: 10px;
-  --ag-ui-pad: 16px;
-  --ag-ui-msg-pad: 8px 12px;
-  --ag-ui-msg-radius: 14px;
+  --_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);
 
   /* 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. */
-  --ag-ui-position: fixed;
-  --ag-ui-z-index: 2147483000;
-  --ag-ui-width: 380px;
-  --ag-ui-height: 560px;
-  --ag-ui-inset: auto 24px 24px auto;
-  --ag-ui-max-width: calc(100vw - 48px);
-  --ag-ui-max-height: calc(100vh - 48px);
+  --_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);
+  --_inset: var(--ag-ui-inset, auto 24px 24px auto);
+  --_max-width: var(--ag-ui-max-width, calc(100vw - 48px));
+  --_max-height: var(--ag-ui-max-height, calc(100vh - 48px));
   /* Reading-column width for placement="page" (full-bleed, centred content). */
-  --ag-ui-content-max-width: 820px;
-
-  position: var(--ag-ui-position);
-  inset: var(--ag-ui-inset);
-  z-index: var(--ag-ui-z-index);
-  width: var(--ag-ui-width);
-  max-width: var(--ag-ui-max-width);
-  height: var(--ag-ui-height);
-  max-height: var(--ag-ui-max-height);
+  --_content-max-width: var(--ag-ui-content-max-width, 820px);
+  /* Slim rail the sidebar placement collapses to. Only that placement reads
+     it, but it is declared here so invariant 2 holds for every alias. */
+  --_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(--ag-ui-font);
-  font-size: var(--ag-ui-font-size);
-  color: var(--ag-ui-fg);
+  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"]) {
-  --ag-ui-bg: #15151f;
-  --ag-ui-fg: #e8e8f2;
-  --ag-ui-assistant-bg: #25253a;
-  --ag-ui-hover: #303049;
-  --ag-ui-header-bg: #1f1f30;
-  --ag-ui-header-fg: #e8e8f2;
-  --ag-ui-border: #33334a;
-  --ag-ui-muted: #9aa0b4;
-  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --_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"]) {
-    --ag-ui-bg: #15151f;
-    --ag-ui-fg: #e8e8f2;
-    --ag-ui-assistant-bg: #25253a;
-    --ag-ui-hover: #303049;
-    --ag-ui-header-bg: #1f1f30;
-    --ag-ui-header-fg: #e8e8f2;
-    --ag-ui-border: #33334a;
-    --ag-ui-muted: #9aa0b4;
-    --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+    --_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"]) {
-  --ag-ui-bg: #0d1117;
-  --ag-ui-fg: #c9d1d9;
-  --ag-ui-accent: #3fb950;
-  --ag-ui-user-bg: #238636;
-  --ag-ui-assistant-bg: #161b22;
-  --ag-ui-hover: #21262d;
-  --ag-ui-header-bg: #010409;
-  --ag-ui-header-fg: #c9d1d9;
-  --ag-ui-border: #30363d;
-  --ag-ui-muted: #8b949e;
-  --ag-ui-font: var(--ag-ui-code-font);
-  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+  --_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"]) {
-  --ag-ui-font-size: 13px;
-  --ag-ui-space: 6px;
-  --ag-ui-pad: 10px;
-  --ag-ui-msg-pad: 5px 9px;
-  --ag-ui-msg-radius: 10px;
+  --_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"]) {
-  --ag-ui-inset: auto auto 24px 24px;
+  --_inset: var(--ag-ui-inset, auto auto 24px 24px);
 }
 
 :host([placement="side"]) {
-  --ag-ui-inset: 0 0 0 auto;
-  --ag-ui-width: 420px;
-  --ag-ui-height: 100vh;
-  --ag-ui-max-height: 100vh;
-  --ag-ui-radius: 0;
+  --_inset: var(--ag-ui-inset, 0 0 0 auto);
+  --_width: var(--ag-ui-width, 420px);
+  --_height: var(--ag-ui-height, 100vh);
+  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_radius: var(--ag-ui-radius, 0);
 }
 
 :host([placement="full"]) {
-  --ag-ui-inset: 0;
-  --ag-ui-width: 100vw;
-  --ag-ui-height: 100vh;
-  --ag-ui-max-width: 100vw;
-  --ag-ui-max-height: 100vh;
-  --ag-ui-radius: 0;
+  --_inset: var(--ag-ui-inset, 0);
+  --_width: var(--ag-ui-width, 100vw);
+  --_height: var(--ag-ui-height, 100vh);
+  --_max-width: var(--ag-ui-max-width, 100vw);
+  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_radius: var(--ag-ui-radius, 0);
 }
 
 /* Page: full-bleed background with a centred reading column. Unlike
@@ -156,85 +221,20 @@ export const STYLES = `
    padding on the scroll area + composer (no per-row wrapper), so user pills
    still right-align and the assistant well spans the column. */
 :host([placement="page"]) {
-  --ag-ui-inset: 0;
-  --ag-ui-width: 100vw;
-  --ag-ui-height: 100vh;
-  --ag-ui-max-width: 100vw;
-  --ag-ui-max-height: 100vh;
-  --ag-ui-radius: 0;
+  --_inset: var(--ag-ui-inset, 0);
+  --_width: var(--ag-ui-width, 100vw);
+  --_height: var(--ag-ui-height, 100vh);
+  --_max-width: var(--ag-ui-max-width, 100vw);
+  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_radius: var(--ag-ui-radius, 0);
 }
 
 :host([placement="page"]) .messages {
-  padding-inline: max(var(--ag-ui-pad), calc((100% - var(--ag-ui-content-max-width)) / 2));
+  padding-inline: max(var(--_pad), calc((100% - var(--_content-max-width)) / 2));
 }
 
-:host([placement="page"]) /* Resize handle: a corner grip on a floating panel, an edge grip on a docked
-   one. Absent entirely where the placement is full-bleed, since there is
-   nothing to drag. */
-.resize-handle {
-  position: absolute;
-  z-index: 2;
-  background: transparent;
-  touch-action: none;
-}
-
-.resize-handle:focus-visible {
-  outline: 2px solid var(--ag-ui-accent);
-  outline-offset: -2px;
-}
-
-/* The grip sits at the corner the panel grows toward. Which corner that is
-   depends on the host's layout, not on placement, so the element measures it
-   and stamps data-resize-anchor with the edges that stay put.
-
-   Default (bottom-right pinned, the floating case) puts the grip top-left. */
-.resize-handle {
-  top: 0;
-  left: 0;
-  width: 14px;
-  height: 14px;
-  cursor: nwse-resize;
-}
-
-:host([data-resize-anchor~="left"]) .resize-handle {
-  left: auto;
-  right: 0;
-}
-
-:host([data-resize-anchor~="top"]) .resize-handle {
-  top: auto;
-  bottom: 0;
-}
-
-/* One axis flipped means the drag runs along the other diagonal. */
-:host([data-resize-anchor="top-right"]) .resize-handle,
-:host([data-resize-anchor="bottom-left"]) .resize-handle {
-  cursor: nesw-resize;
-}
-
-/* Docked: the placement owns the height, so only the inner edge is the user's. */
-:host([placement="sidebar"]) .resize-handle,
-:host([placement="side"]) .resize-handle {
-  top: 0;
-  bottom: auto;
-  width: 8px;
-  height: 100%;
-  cursor: ew-resize;
-}
-
-/* Full-bleed: nothing to drag. */
-:host([placement="full"]) .resize-handle,
-:host([placement="page"]) .resize-handle {
-  display: none;
-}
-
-.resize-handle[data-dragging] {
-  background: var(--ag-ui-accent);
-  opacity: 0.35;
-}
-
-.input-row {
-  padding-inline: max(12px, calc((100% - var(--ag-ui-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 (skill chips, the
@@ -243,12 +243,12 @@ export const STYLES = `
    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(--ag-ui-content-max-width)) / 2));
+  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(--ag-ui-content-max-width)) / 2));
+  margin-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
 }
 
 /* In the reading column the assistant well uses the full width; the user
@@ -263,75 +263,179 @@ export const STYLES = `
    --ag-ui-position: static (and place this element in your own layout) for a
    host-managed push instead. */
 :host([placement="sidebar"]) {
-  --ag-ui-inset: 0 0 0 auto;
-  --ag-ui-width: 420px;
-  --ag-ui-height: 100vh;
-  --ag-ui-max-height: 100vh;
-  --ag-ui-radius: 0;
-  --ag-ui-rail-width: 52px;
-  transition: width 0.28s ease;
+  --_inset: var(--ag-ui-inset, 0 0 0 auto);
+  --_width: var(--ag-ui-width, 420px);
+  --_height: var(--ag-ui-height, 100vh);
+  --_max-height: var(--ag-ui-max-height, 100vh);
+  --_radius: var(--ag-ui-radius, 0);
+  transition: width var(--_motion) var(--_ease);
 }
 
 :host([placement="sidebar"][data-side="left"]) {
-  --ag-ui-inset: 0 auto 0 0;
+  --_inset: var(--ag-ui-inset, 0 auto 0 0);
 }
 
+/* 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. */
 :host([placement="sidebar"]) .chat {
-  transition: transform 0.28s ease;
+  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, hide the panel, and
-   reveal the rail. Higher specificity than the generic collapse rules, so it
-   wins regardless of source order. */
+/* 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. */
 :host([placement="sidebar"][collapsed]) {
-  width: var(--ag-ui-rail-width);
+  width: var(--_rail-width);
   height: 100vh;
   max-height: 100vh;
   bottom: 0;
+  pointer-events: auto;
 }
 
 :host([placement="sidebar"][collapsed]) .chat {
-  display: none;
+  transform: translateX(100%);
 }
 
-/* The rail is a sibling of the panel (so it survives the panel being hidden);
-   shown only for a collapsed sidebar. */
-.rail {
-  display: none;
+: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;
+  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 is laid out at rest rather than display:none, which is what lets it
+   animate in *and* out: an element that was not rendered has no before-change
+   style to transition from, and one whose display flips to none cannot
+   transition at all. visibility keeps it unpaintable, untabbable and
+   unclickable in between -- the expanded panel's own controls sit under it and
+   must stay reachable. */
+:host([collapsed]) .launcher {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
 }
 
-:host([placement="sidebar"][collapsed]) .rail {
-  display: flex;
+:host([collapsed]) .launcher:hover {
+  transform: scale(1.06);
+}
+
+:host([collapsed]) .launcher:active {
+  transform: scale(0.94);
+}
+
+.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. */
+:host([placement="sidebar"][collapsed]) .launcher {
   inset: 0;
+  width: auto;
+  height: auto;
   align-items: flex-start;
-  justify-content: center;
   padding-top: 16px;
-  border: 1px solid var(--ag-ui-border);
-  background: var(--ag-ui-header-bg);
-  color: var(--ag-ui-header-fg);
-  cursor: pointer;
+  border: 1px solid var(--_border);
+  border-radius: 0;
+  background: var(--_header-bg);
+  color: var(--_header-fg);
+  box-shadow: none;
+  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([placement="sidebar"]),
-  :host([placement="sidebar"]) .chat {
-    transition: none;
+  :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"]) {
-  --ag-ui-position: static;
-  --ag-ui-width: 100%;
-  --ag-ui-height: 100%;
-  --ag-ui-max-width: 100%;
-  --ag-ui-max-height: 100%;
-  --ag-ui-shadow: none;
-  --ag-ui-z-index: auto;
+  --_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 {
@@ -340,10 +444,10 @@ export const STYLES = `
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-border);
-  border-radius: var(--ag-ui-radius);
-  box-shadow: var(--ag-ui-shadow);
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  box-shadow: var(--_shadow);
   overflow: hidden;
 }
 
@@ -353,9 +457,9 @@ export const STYLES = `
   justify-content: space-between;
   gap: 8px;
   padding: 10px 14px;
-  border-bottom: 1px solid var(--ag-ui-border);
-  background: var(--ag-ui-header-bg);
-  color: var(--ag-ui-header-fg);
+  border-bottom: 1px solid var(--_border);
+  background: var(--_header-bg);
+  color: var(--_header-fg);
 }
 
 .header-title {
@@ -374,8 +478,8 @@ export const STYLES = `
   align-items: center;
   justify-content: center;
   flex: none;
-  width: var(--ag-ui-icon-size, 22px);
-  height: var(--ag-ui-icon-size, 22px);
+  width: var(--_icon-size);
+  height: var(--_icon-size);
   line-height: 1;
 }
 
@@ -383,7 +487,7 @@ export const STYLES = `
   width: 100%;
   height: 100%;
   object-fit: contain;
-  border-radius: var(--ag-ui-icon-radius, 4px);
+  border-radius: var(--_icon-radius);
 }
 
 .header-controls {
@@ -409,36 +513,87 @@ export const STYLES = `
   background: rgba(255, 255, 255, 0.18);
 }
 
-/* Collapsed: keep just the header bar — hide the whole body, and let the host
-   shrink to the header. (A host can also fully hide the element itself.) */
+/* ── Collapse ───────────────────────────────────────────────────────────────
+   Collapsing shrinks the widget to the round floating launcher: the panel
+   scales down toward the launcher's corner and fades out, the launcher pops in
+   from that 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. Animating it would animate layout, and
+   a dragged --ag-ui-width would then 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 back.
+
+   Two placements collapse to something else and restore what they need:
+   "sidebar" slides to its rail (below), while "embedded" and "page" keep the
+   original header bar — embedded is laid out by the host page, where a
+   floating circle would escape the layout, and page is a full-screen route
+   with no corner to float in. */
 :host([collapsed]) {
+  pointer-events: none;
+}
+
+:host([collapsed]) .chat {
+  opacity: 0;
+  transform: scale(0.94);
+  visibility: hidden;
+}
+
+/* visibility is what keeps the panel out of the tab order and the a11y tree at
+   rest without display:none killing the transition. It interpolates so that any
+   progress below 1 still counts as visible: the panel stays on screen for the
+   whole collapse and flips hidden exactly at the end, and on expand it 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;
+}
+
+/* The two in-flow placements keep the original collapse: hide the body, let
+   the host shrink to the header bar. */
+:host([collapsed]:is([placement="embedded"], [placement="page"])) {
   height: auto;
   max-height: none;
+  pointer-events: auto;
 }
 
-:host([collapsed]) .messages,
-:host([collapsed]) .input-row,
-:host([collapsed]) .skill-chips,
-:host([collapsed]) .skill-palette,
-:host([collapsed]) .skill-hint {
-  display: none;
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .chat {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
 }
 
-/* Edge-docked placements pin top *and* bottom, which would otherwise keep the
-   panel full-height when collapsed; unpin the bottom so it shrinks to the
-   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */
-:host([collapsed][placement="side"]),
-:host([collapsed][placement="full"]) {
-  bottom: auto;
+/* These two keep the header bar, so the launcher must stay out of the way —
+   an embedded host is position: static, which would otherwise leave an
+   absolutely-positioned circle to escape the layout entirely and land against
+   whatever the page happens to position. */
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .launcher {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .input-row,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-chips,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-palette,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-hint {
+  display: none;
 }
 
 .messages {
   flex: 1;
   overflow-y: auto;
-  padding: var(--ag-ui-pad);
+  padding: var(--_pad);
   display: flex;
   flex-direction: column;
-  gap: var(--ag-ui-space);
+  gap: var(--_space);
 }
 
 /* Empty-state region (slot): centred while it's the only thing in the
@@ -446,7 +601,7 @@ export const STYLES = `
 .empty {
   margin: auto;
   text-align: center;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .empty[hidden] {
@@ -462,22 +617,22 @@ export const STYLES = `
 .answer {
   display: flex;
   flex-direction: column;
-  gap: var(--ag-ui-space);
+  gap: var(--_space);
   align-self: stretch;
   min-width: 0;
 }
 
 :host([data-answer-well]) .answer {
-  padding: var(--ag-ui-pad);
-  background: var(--ag-ui-well-bg);
-  border: 1px solid var(--ag-ui-well-border);
-  border-radius: var(--ag-ui-radius);
+  padding: var(--_pad);
+  background: var(--_well-bg);
+  border: 1px solid var(--_well-border);
+  border-radius: var(--_radius);
 }
 
 .message {
   max-width: 80%;
-  padding: var(--ag-ui-msg-pad);
-  border-radius: var(--ag-ui-msg-radius);
+  padding: var(--_msg-pad);
+  border-radius: var(--_msg-radius);
   line-height: 1.4;
   white-space: pre-wrap;
   word-break: break-word;
@@ -515,14 +670,14 @@ export const STYLES = `
 
 .message--user {
   align-self: flex-end;
-  background: var(--ag-ui-user-bg);
-  color: var(--ag-ui-user-fg);
+  background: var(--_user-bg);
+  color: var(--_user-fg);
   border-bottom-right-radius: 4px;
 }
 
 .message--assistant {
   align-self: flex-start;
-  background: var(--ag-ui-assistant-bg);
+  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. */
@@ -552,7 +707,7 @@ export const STYLES = `
 }
 
 .message--assistant a {
-  color: var(--ag-ui-accent);
+  color: var(--_accent);
   text-decoration: underline;
 }
 
@@ -567,8 +722,8 @@ export const STYLES = `
 .message--assistant pre {
   padding: 8px 10px;
   overflow: auto;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-border);
+  background: var(--_bg);
+  border: 1px solid var(--_border);
   border-radius: 6px;
 }
 
@@ -584,6 +739,13 @@ export const STYLES = `
   position: relative;
 }
 
+/* This button is the only reader of --ag-ui-surface and --ag-ui-text, and
+   neither had a default until the alias layer gave them one. Both references
+   used to resolve to nothing, dropping the declaration: the background fell
+   back to the initial transparent, and the hover/copied colour to the
+   inherited body colour. The defaults chosen upstream (transparent, and the
+   body foreground) reproduce that, so the rename repaints nothing. A raised
+   surface behind the button is a separate design question. */
 .code-copy {
   position: absolute;
   top: 4px;
@@ -592,9 +754,9 @@ export const STYLES = `
   font: inherit;
   font-size: 0.75em;
   line-height: 1.6;
-  color: var(--ag-ui-muted);
-  background: var(--ag-ui-surface);
-  border: 1px solid var(--ag-ui-border);
+  color: var(--_muted);
+  background: var(--_surface);
+  border: 1px solid var(--_border);
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
@@ -609,24 +771,24 @@ export const STYLES = `
 }
 
 .code-copy:hover {
-  color: var(--ag-ui-text);
-  background: var(--ag-ui-hover);
+  color: var(--_text);
+  background: var(--_hover);
 }
 
 .code-copy[data-state="copied"] {
   opacity: 1;
-  color: var(--ag-ui-text);
+  color: var(--_text);
 }
 
 .code-copy[data-state="failed"] {
   opacity: 1;
-  color: var(--ag-ui-danger, var(--ag-ui-text));
+  color: var(--_danger, var(--_text));
 }
 
 .message--assistant blockquote {
   padding-left: 10px;
-  border-left: 3px solid var(--ag-ui-border);
-  color: var(--ag-ui-muted);
+  border-left: 3px solid var(--_border);
+  color: var(--_muted);
 }
 
 /* Markdown tables. table/thead/tbody/tr/th/td are all in
@@ -647,13 +809,13 @@ export const STYLES = `
 .message--assistant th,
 .message--assistant td {
   padding: 6px 10px;
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   text-align: left;
   vertical-align: top;
 }
 
 .message--assistant th {
-  background: var(--ag-ui-hover);
+  background: var(--_hover);
   font-weight: 600;
 }
 
@@ -663,7 +825,7 @@ export const STYLES = `
   gap: 4px;
   align-items: center;
   padding: 12px 14px;
-  background: var(--ag-ui-assistant-bg);
+  background: var(--_assistant-bg);
   border-radius: 14px;
   border-bottom-left-radius: 4px;
 }
@@ -672,7 +834,7 @@ export const STYLES = `
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--ag-ui-muted);
+  background: var(--_muted);
   animation: ag-ui-pending 1.2s infinite ease-in-out both;
 }
 
@@ -705,7 +867,7 @@ export const STYLES = `
   flex-direction: column;
   gap: 4px;
   font-size: 12px;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .thoughts-toggle {
@@ -716,7 +878,7 @@ export const STYLES = `
   font: inherit;
   font-size: 12px;
   font-weight: 600;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
   cursor: pointer;
 }
 
@@ -741,7 +903,7 @@ export const STYLES = `
 .thoughts-body {
   margin: 0;
   padding: 4px 0 4px 10px;
-  border-left: 2px solid var(--ag-ui-border);
+  border-left: 2px solid var(--_border);
   max-height: 220px;
   overflow: auto;
   white-space: pre-wrap;
@@ -770,9 +932,9 @@ export const STYLES = `
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   padding: 8px 10px;
   border-radius: 8px;
-  background: var(--ag-ui-tool-bg);
-  border: 1px solid var(--ag-ui-border);
-  color: var(--ag-ui-tool-fg);
+  background: var(--_tool-bg);
+  border: 1px solid var(--_border);
+  color: var(--_tool-fg);
 }
 
 .tool-call-head {
@@ -805,10 +967,10 @@ export const STYLES = `
 
 /* Pending: a real spinning ring. Speed is tunable; reduced motion stops it. */
 .tool-call[data-status="pending"] .tool-call-icon {
-  border: 2px solid var(--ag-ui-muted);
+  border: 2px solid var(--_muted);
   border-top-color: transparent;
   border-radius: 50%;
-  animation: ag-ui-tool-spin var(--ag-ui-tool-spin-duration) linear infinite;
+  animation: ag-ui-tool-spin var(--_tool-spin-duration) linear infinite;
 }
 
 @keyframes ag-ui-tool-spin {
@@ -817,18 +979,18 @@ export const STYLES = `
 
 /* Settled: a themeable glyph coloured by outcome. */
 .tool-call[data-status="done"] .tool-call-icon::before {
-  content: var(--ag-ui-tool-icon-done);
-  color: var(--ag-ui-success);
+  content: var(--_tool-icon-done);
+  color: var(--_success);
 }
 
 .tool-call[data-status="error"] .tool-call-icon::before {
-  content: var(--ag-ui-tool-icon-error);
-  color: var(--ag-ui-danger);
+  content: var(--_tool-icon-error);
+  color: var(--_danger);
 }
 
 .tool-call[data-status="declined"] .tool-call-icon::before {
-  content: var(--ag-ui-tool-icon-declined);
-  color: var(--ag-ui-muted);
+  content: var(--_tool-icon-declined);
+  color: var(--_muted);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -854,19 +1016,19 @@ export const STYLES = `
   font-size: 11px;
   font-weight: 600;
   background: rgba(127, 127, 127, 0.16);
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .tool-call[data-status="done"] .tool-call-status {
-  color: var(--ag-ui-success);
+  color: var(--_success);
 }
 
 .tool-call[data-status="error"] .tool-call-status {
-  color: var(--ag-ui-danger);
+  color: var(--_danger);
 }
 
 .tool-call[data-status="declined"] .tool-call-status {
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .tool-call-body {
@@ -888,7 +1050,7 @@ export const STYLES = `
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 /* The record of a human decision on a gated call. An approved call used to
@@ -896,7 +1058,7 @@ export const STYLES = `
 .skill-item-token {
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   font-size: 0.92em;
-  color: var(--ag-ui-accent);
+  color: var(--_accent);
   margin-right: 6px;
 }
 
@@ -904,7 +1066,7 @@ export const STYLES = `
   flex: none;
   font-size: 11px;
   font-style: italic;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .tool-call-args,
@@ -913,12 +1075,12 @@ export const STYLES = `
   padding: 6px 8px;
   max-height: 160px;
   overflow: auto;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-border);
+  background: var(--_bg);
+  border: 1px solid var(--_border);
   border-radius: 6px;
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--ag-ui-fg);
+  color: var(--_fg);
 }
 
 /* Display modes are pure visibility over one DOM shape, selected from the host
@@ -965,7 +1127,7 @@ export const STYLES = `
   background: none;
   font: inherit;
   font-weight: 600;
-  color: var(--ag-ui-accent);
+  color: var(--_accent);
   cursor: pointer;
 }
 
@@ -988,13 +1150,12 @@ export const STYLES = `
 }
 
 .resize-handle:focus-visible {
-  outline: 2px solid var(--ag-ui-accent);
+  outline: 2px solid var(--_accent);
   outline-offset: -2px;
 }
 
 /* The grip sits on the corner opposite the panel's anchor, because a resize
-   measures from whichever edge is not moving. Selected from the host attribute,
-   so switching placement moves the grip immediately.
+   measures from whichever edge is not moving.
 
    Default is floating: pinned bottom-right, so the grip is top-left. */
 .resize-handle {
@@ -1005,7 +1166,9 @@ export const STYLES = `
   cursor: nwse-resize;
 }
 
-/* Embedded sits in normal flow, pinned top-left, so it grows bottom-right. */
+/* Placement is only the opening guess, and these two rules are all it is good
+   for. Embedded sits in normal flow, pinned top-left, so it grows bottom-right;
+   bottom-left is pinned there, so its free corner is top-right. */
 :host([placement="embedded"]) .resize-handle {
   top: auto;
   left: auto;
@@ -1014,16 +1177,64 @@ export const STYLES = `
   cursor: nwse-resize;
 }
 
-/* Pinned bottom-left, so the free corner is top-right. */
 :host([placement="bottom-left"]) .resize-handle {
   left: auto;
   right: 0;
   cursor: nesw-resize;
 }
 
-/* Docked: the placement owns the height, so only the inner edge is the user's. */
+/* Then the measurement corrects it. Which edges are held still belongs to the
+   host's layout rather than to placement -- a floating panel a host right-aligns
+   is anchored bottom-left, not bottom-right -- so the element measures the edges
+   that stay put and stamps them here as "<y>-<x>". Equal specificity to the
+   rules above, so source order is what lets the measured value win.
+
+   These must not be written as [data-resize-anchor~="left"]: the stamped value
+   is one hyphenated token, and ~= matches whitespace-separated words, so such a
+   selector cannot ever match. It did not, which left the grip drawn at the
+   corner that moves while the cursor pointed along the right diagonal.
+
+   Each rule also sets both sides of its axis rather than only the side it
+   moves. One that flipped a single way could not undo a placement guess that
+   had flipped the other, which put the grip on the anchored corner for an
+   embedded panel its host right-aligns. */
+:host([data-resize-anchor$="-left"]) .resize-handle {
+  left: auto;
+  right: 0;
+}
+
+:host([data-resize-anchor$="-right"]) .resize-handle {
+  left: 0;
+  right: auto;
+}
+
+:host([data-resize-anchor^="top-"]) .resize-handle {
+  top: auto;
+  bottom: 0;
+}
+
+:host([data-resize-anchor^="bottom-"]) .resize-handle {
+  top: 0;
+  bottom: auto;
+}
+
+/* One axis flipped means the drag runs along the other diagonal. */
+:host([data-resize-anchor="top-left"]) .resize-handle,
+:host([data-resize-anchor="bottom-right"]) .resize-handle {
+  cursor: nwse-resize;
+}
+
+:host([data-resize-anchor="top-right"]) .resize-handle,
+:host([data-resize-anchor="bottom-left"]) .resize-handle {
+  cursor: nesw-resize;
+}
+
+/* Docked: the placement owns the height, so only the inner edge is the user's --
+   an edge, not a corner, so this outranks the measured anchor by coming after. */
 :host([placement="sidebar"]) .resize-handle,
 :host([placement="side"]) .resize-handle {
+  top: 0;
+  bottom: auto;
   width: 8px;
   height: 100%;
   cursor: ew-resize;
@@ -1042,106 +1253,191 @@ export const STYLES = `
 }
 
 .resize-handle[data-dragging] {
-  background: var(--ag-ui-accent);
+  background: var(--_accent);
   opacity: 0.35;
 }
 
+/* ── Composer ───────────────────────────────────────────────────────────────
+   One surface owns the border, the background and the focus ring; the field and
+   its tool row sit inside it. The row used to be four siblings stretched to the
+   textarea's height, which gave a paperclip the same visual weight as the field
+   and turned Send into a full-height slab. */
 .input-row {
   display: flex;
-  gap: 8px;
   padding: 12px;
-  border-top: 1px solid var(--ag-ui-border);
+  border-top: 1px solid var(--_border);
 }
 
-.input {
+.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;
-  background: var(--ag-ui-input-bg);
-  border: 1px solid var(--ag-ui-border);
-  border-radius: 8px;
-  padding: 8px 10px;
+  max-height: var(--_composer-max-height);
+  overflow-y: auto;
+  padding: 6px 4px 2px;
+  background: transparent;
+  border: none;
   font: inherit;
   color: inherit;
   outline: none;
 }
 
-.input:focus {
-  border-color: var(--ag-ui-accent);
+.composer-tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
-.send {
+/* 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;
-  padding: 0 16px;
-  background: var(--ag-ui-accent);
-  color: #ffffff;
+  background: transparent;
+  color: var(--_muted);
   font: inherit;
-  font-weight: 600;
+  line-height: 1;
   cursor: pointer;
+  transition:
+    background-color var(--_motion) var(--_ease),
+    color var(--_motion) var(--_ease);
 }
 
-.send:disabled {
-  opacity: 0.5;
-  cursor: default;
+.attach-btn:hover,
+.voice-btn:hover {
+  background: var(--_hover);
+  color: var(--_fg);
 }
 
-/* The composer button doubles as the Stop control while a run is in flight. */
-.send[data-state="running"] {
-  background: var(--ag-ui-muted);
+.attach-btn:disabled,
+.voice-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
 }
 
-/* ── File attachments ───────────────────────────────────────────────────── */
-/* The 📎 picker button sits left of the input; hidden until data-attachments-url. */
-.attach-btn {
-  border: 1px solid var(--ag-ui-border);
-  border-radius: 8px;
-  padding: 0 10px;
-  background: var(--ag-ui-input-bg);
-  color: inherit;
+/* 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: #ffffff;
   font: inherit;
+  line-height: 1;
   cursor: pointer;
+  transition:
+    background-color var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease-pop);
 }
 
-.attach-btn:hover {
-  border-color: var(--ag-ui-accent);
+.send:hover {
+  transform: scale(1.08);
 }
 
-.attach-input {
+.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;
 }
 
-/* The 🎤 mic button; shown only once #wireVoice mounts it. */
-.voice-slot {
-  display: contents;
+/* 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;
 }
 
-.voice-btn {
-  border: 1px solid var(--ag-ui-border);
-  border-radius: 8px;
-  padding: 0 10px;
-  background: var(--ag-ui-input-bg);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
+.glyph--solid {
+  fill: currentColor;
+  stroke: none;
 }
 
-.voice-btn:hover {
-  border-color: var(--ag-ui-accent);
+/* 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%;
 }
 
-.voice-btn:disabled {
-  cursor: default;
-  opacity: 0.6;
+/* ── 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 #wireVoice mounts the
+   control. */
+.voice-slot {
+  display: contents;
 }
 
 /* Recording: a red tint + a gentle pulse so it's clearly "live". */
 .voice-btn[data-state="recording"] {
-  border-color: var(--ag-ui-danger);
-  background: var(--ag-ui-danger);
+  background: var(--_danger);
   color: #ffffff;
   animation: ag-ui-voice-pulse 1.2s ease-in-out infinite;
 }
 
+.voice-btn[data-state="recording"]:hover {
+  background: var(--_danger);
+  color: #ffffff;
+}
+
 @keyframes ag-ui-voice-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.6; }
@@ -1180,10 +1476,10 @@ export const STYLES = `
   max-width: 100%;
   margin: 2px 0;
   padding: 3px 10px;
-  border: 1px dashed var(--ag-ui-border);
+  border: 1px dashed var(--_border);
   border-radius: 999px;
   background: transparent;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
   font-size: 0.8em;
   line-height: 1.4;
 }
@@ -1204,16 +1500,16 @@ export const STYLES = `
   gap: 6px;
   max-width: 100%;
   padding: 4px 8px;
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 999px;
-  background: var(--ag-ui-assistant-bg);
+  background: var(--_assistant-bg);
   font-size: 0.85em;
   position: relative;
 }
 
 .attachment-chip--error {
-  border-color: var(--ag-ui-danger);
-  color: var(--ag-ui-danger);
+  border-color: var(--_danger);
+  color: var(--_danger);
 }
 
 .attachment-chip-name {
@@ -1224,12 +1520,12 @@ export const STYLES = `
 }
 
 .attachment-chip-size {
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
   white-space: nowrap;
 }
 
 .attachment-chip--error .attachment-chip-size {
-  color: var(--ag-ui-danger);
+  color: var(--_danger);
 }
 
 /* The progress bar fills as the file uploads. */
@@ -1237,13 +1533,13 @@ export const STYLES = `
   flex-basis: 100%;
   height: 3px;
   border-radius: 2px;
-  background: var(--ag-ui-border);
+  background: var(--_border);
   overflow: hidden;
 }
 
 .attachment-chip-bar-fill {
   height: 100%;
-  background: var(--ag-ui-accent);
+  background: var(--_accent);
   transition: width 0.15s ease;
 }
 
@@ -1265,14 +1561,14 @@ export const STYLES = `
 
 /* A subtle outline while a file is dragged over the shell. */
 .chat--dragover {
-  outline: 2px dashed var(--ag-ui-accent);
+  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(--ag-ui-muted);
+  color: var(--_muted);
   font-size: 12px;
   padding: 2px 4px;
 }
@@ -1285,14 +1581,14 @@ export const STYLES = `
   flex-direction: column;
   gap: 8px;
   padding: 12px;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-accent);
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
   border-radius: 10px;
 }
 
 .confirm[data-resolved] {
   opacity: 0.7;
-  border-color: var(--ag-ui-border);
+  border-color: var(--_border);
 }
 
 .confirm-body {
@@ -1306,7 +1602,7 @@ export const STYLES = `
   overflow: auto;
   font-size: 12px;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  background: var(--ag-ui-assistant-bg);
+  background: var(--_assistant-bg);
   border-radius: 8px;
   white-space: pre-wrap;
   word-break: break-word;
@@ -1319,14 +1615,14 @@ export const STYLES = `
 }
 
 .confirm-btn {
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 8px;
   padding: 8px 14px;
   font: inherit;
   font-weight: 600;
   cursor: pointer;
-  background: var(--ag-ui-bg);
-  color: var(--ag-ui-fg);
+  background: var(--_bg);
+  color: var(--_fg);
 }
 
 .confirm-btn:disabled {
@@ -1335,8 +1631,8 @@ export const STYLES = `
 }
 
 .confirm-btn--confirm {
-  border-color: var(--ag-ui-accent);
-  background: var(--ag-ui-accent);
+  border-color: var(--_accent);
+  background: var(--_accent);
   color: #ffffff;
 }
 
@@ -1348,14 +1644,14 @@ export const STYLES = `
   flex-direction: column;
   gap: 8px;
   padding: 12px;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-accent);
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
   border-radius: 10px;
 }
 
 .approval[data-resolved] {
   opacity: 0.7;
-  border-color: var(--ag-ui-border);
+  border-color: var(--_border);
 }
 
 .approval-body {
@@ -1369,14 +1665,14 @@ export const STYLES = `
 }
 
 .approval-btn {
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 8px;
   padding: 8px 14px;
   font: inherit;
   font-weight: 600;
   cursor: pointer;
-  background: var(--ag-ui-bg);
-  color: var(--ag-ui-fg);
+  background: var(--_bg);
+  color: var(--_fg);
 }
 
 .approval-btn:disabled {
@@ -1385,8 +1681,8 @@ export const STYLES = `
 }
 
 .approval-btn--approve {
-  border-color: var(--ag-ui-accent);
-  background: var(--ag-ui-accent);
+  border-color: var(--_accent);
+  background: var(--_accent);
   color: #ffffff;
 }
 
@@ -1398,14 +1694,14 @@ export const STYLES = `
   flex-direction: column;
   gap: 8px;
   padding: 12px;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-accent);
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
   border-radius: 10px;
 }
 
 .question[data-resolved] {
   opacity: 0.7;
-  border-color: var(--ag-ui-border);
+  border-color: var(--_border);
 }
 
 .question-body {
@@ -1430,9 +1726,9 @@ export const STYLES = `
   width: 100%;
   padding: 8px 10px;
   font: inherit;
-  color: var(--ag-ui-fg);
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-border);
+  color: var(--_fg);
+  background: var(--_bg);
+  border: 1px solid var(--_border);
   border-radius: 8px;
 }
 
@@ -1446,13 +1742,13 @@ export const STYLES = `
 }
 
 .question-btn {
-  border: 1px solid var(--ag-ui-accent);
+  border: 1px solid var(--_accent);
   border-radius: 8px;
   padding: 8px 14px;
   font: inherit;
   font-weight: 600;
   cursor: pointer;
-  background: var(--ag-ui-accent);
+  background: var(--_accent);
   color: #ffffff;
 }
 
@@ -1470,18 +1766,18 @@ export const STYLES = `
 }
 
 .skill-chip {
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 999px;
   padding: 4px 12px;
   font: inherit;
   font-size: 0.9em;
   cursor: pointer;
-  background: var(--ag-ui-assistant-bg);
-  color: var(--ag-ui-fg);
+  background: var(--_assistant-bg);
+  color: var(--_fg);
 }
 
 .skill-chip:hover {
-  border-color: var(--ag-ui-accent);
+  border-color: var(--_accent);
 }
 
 .skill-palette {
@@ -1490,8 +1786,8 @@ export const STYLES = `
   flex-direction: column;
   max-height: 220px;
   overflow: auto;
-  background: var(--ag-ui-bg);
-  border: 1px solid var(--ag-ui-border);
+  background: var(--_bg);
+  border: 1px solid var(--_border);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);
 }
@@ -1507,11 +1803,11 @@ export const STYLES = `
   font: inherit;
   text-align: left;
   cursor: pointer;
-  color: var(--ag-ui-fg);
+  color: var(--_fg);
 }
 
 .skill-item[aria-selected="true"] {
-  background: var(--ag-ui-assistant-bg);
+  background: var(--_assistant-bg);
 }
 
 .skill-item-title {
@@ -1520,7 +1816,7 @@ export const STYLES = `
 
 .skill-item-desc {
   font-size: 0.85em;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 /* The hint sits directly above the composer's top border, so a zero bottom
@@ -1529,19 +1825,38 @@ export const STYLES = `
   margin: 8px 12px;
   font-size: 0.85em;
   line-height: 1.4;
-  color: var(--ag-ui-danger);
+  color: var(--_danger);
 }
 
-/* Chat-history drawer — a slide-over within the chat panel. */
+/* 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;
+  transition: visibility var(--_motion) var(--_ease);
 }
 
+/* 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, and it holds off until the slide has finished. */
 .drawer[hidden] {
-  display: none;
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.drawer[hidden] .drawer-backdrop {
+  opacity: 0;
+}
+
+.drawer[hidden] .drawer-panel {
+  transform: translateX(-100%);
 }
 
 .checkpoints {
@@ -1553,16 +1868,27 @@ export const STYLES = `
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.5rem;
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 0.5rem;
-  background: var(--ag-ui-assistant-bg);
+  background: var(--_assistant-bg);
   box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
   max-height: 60%;
   overflow-y: auto;
+  transform-origin: top center;
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility var(--_motion) var(--_ease);
 }
 
+/* Same idiom as the drawer: laid out at rest, hidden by visibility, so the
+   popover can animate open and closed. */
 .checkpoints[hidden] {
-  display: none;
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96) translateY(-6px);
 }
 
 .checkpoints-title {
@@ -1586,7 +1912,7 @@ export const STYLES = `
 }
 
 .checkpoint-row:hover {
-  background: var(--ag-ui-hover);
+  background: var(--_hover);
 }
 
 .checkpoint-label {
@@ -1601,7 +1927,7 @@ export const STYLES = `
   font-size: 0.6875rem;
   padding: 0 0.375rem;
   border-radius: 999px;
-  background: var(--ag-ui-hover);
+  background: var(--_hover);
   opacity: 0.8;
 }
 
@@ -1610,20 +1936,22 @@ export const STYLES = `
   font-size: 0.75rem;
   cursor: pointer;
   padding: 0.125rem 0.5rem;
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 0.375rem;
   background: transparent;
   color: inherit;
 }
 
 .checkpoint-action:hover {
-  background: var(--ag-ui-hover);
+  background: var(--_hover);
 }
 
 .drawer-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(20, 20, 50, 0.32);
+  opacity: 1;
+  transition: opacity var(--_motion) var(--_ease);
 }
 
 .drawer-panel {
@@ -1632,19 +1960,21 @@ export const STYLES = `
   flex-direction: column;
   width: min(300px, 85%);
   height: 100%;
-  background: var(--ag-ui-bg);
-  border-right: 1px solid var(--ag-ui-border);
-  box-shadow: var(--ag-ui-shadow);
+  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(--ag-ui-space);
-  padding: var(--ag-ui-pad);
-  border-bottom: 1px solid var(--ag-ui-border);
+  gap: var(--_space);
+  padding: var(--_pad);
+  border-bottom: 1px solid var(--_border);
 }
 
 .drawer-title {
@@ -1652,10 +1982,10 @@ export const STYLES = `
 }
 
 .drawer-new {
-  border: 1px solid var(--ag-ui-border);
-  border-radius: var(--ag-ui-radius);
-  background: var(--ag-ui-bg);
-  color: var(--ag-ui-accent);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  color: var(--_accent);
   padding: 4px 10px;
   font: inherit;
   font-size: 0.85em;
@@ -1669,19 +1999,19 @@ export const STYLES = `
 }
 
 .drawer-empty {
-  padding: var(--ag-ui-pad);
+  padding: var(--_pad);
   font-size: 0.9em;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .drawer-row {
   display: flex;
   align-items: stretch;
-  border-bottom: 1px solid var(--ag-ui-border);
+  border-bottom: 1px solid var(--_border);
 }
 
 .drawer-row--active {
-  background: var(--ag-ui-assistant-bg);
+  background: var(--_assistant-bg);
 }
 
 .drawer-row-select {
@@ -1708,12 +2038,12 @@ export const STYLES = `
 
 .drawer-row-time {
   font-size: 0.72em;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
 }
 
 .drawer-row-preview {
   font-size: 0.8em;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1730,7 +2060,7 @@ export const STYLES = `
 .drawer-row-delete {
   border: none;
   background: none;
-  color: var(--ag-ui-muted);
+  color: var(--_muted);
   font-size: 0.9em;
   padding: 4px;
   cursor: pointer;
@@ -1741,10 +2071,10 @@ export const STYLES = `
   min-width: 0;
   margin: 6px 10px;
   padding: 4px 8px;
-  border: 1px solid var(--ag-ui-accent);
+  border: 1px solid var(--_accent);
   border-radius: 6px;
-  background: var(--ag-ui-input-bg);
-  color: var(--ag-ui-fg);
+  background: var(--_input-bg);
+  color: var(--_fg);
   font: inherit;
 }
 
@@ -1757,13 +2087,13 @@ export const STYLES = `
 }
 
 .drawer-confirm-label {
-  color: var(--ag-ui-danger);
+  color: var(--_danger);
 }
 
 .drawer-confirm-yes {
   border: none;
   border-radius: 6px;
-  background: var(--ag-ui-danger);
+  background: var(--_danger);
   color: #ffffff;
   padding: 3px 10px;
   font: inherit;
@@ -1771,7 +2101,7 @@ export const STYLES = `
 }
 
 .drawer-confirm-no {
-  border: 1px solid var(--ag-ui-border);
+  border: 1px solid var(--_border);
   border-radius: 6px;
   background: none;
   color: inherit;