@gemboss/ui 0.2.0 → 0.3.0

package/gemboss-ui.css

@@ -1,8 +1,8 @@
 /*
  * GemBoss admin design system — GENERATED — do not edit; regenerate from gemboss:
  *   node apps/admin/scripts/export-ui-css.mjs --out <path>   (npm run export:ui-css)
- * gemboss commit: 62b85f8a0c756bf63d370bff60e6debaaf4ea4df
- * sources sha256: fd64ea38ae59bb5ecf1c38da341be89f963c9fef11bd3189e83433588f4d88b5
+ * gemboss commit: 7d7968ae7238c5f4e7643d54dbac372f32ef5775
+ * sources sha256: 2807a6d2a8b27730eaa31cbe6195b633cbba9467b0ab62b9244a7f814bb8d205
  * contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
  *   (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
  *   + 180 rules from packages/ui/src/shell.css (the shared shell)
@@ -337,7 +337,7 @@
   background-color: var(--gemboss-field-bg-hover);
 }
 .ui-select:focus { outline: none; }
-.ui-select:focus-visible {
+.ui-select:focus-visible:not(:disabled) {
   outline: 2px solid #005bd3; outline-offset: 1px;
   border-color: var(--gemboss-field-line-active);
 }
@@ -483,12 +483,35 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
    consumer belongs in that consumer's chunk (see SettingsDialog.module.css). */
 .ui-modal--lg { position: relative; }
 
+/* The kit's multi-line field joins the ONE field family (01/10/2026, Chris: "form control đồng bộ"):
+   same input-border token, hover and focus ring as `gemboss-field` and `.ui-select`. Before, it drew a
+   lighter --ui-border box at 14px with no focus ring, so on GemFactory's compose form a textarea sat
+   beside selects of a darker border and text fields of a third look (measured on prod). */
 .ui-textarea {
   width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
-  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md);
-  padding: 12px; color: var(--ui-text); font-size: 14px; font-family: inherit; outline: none;
+  background: var(--gemboss-field-bg);
+  border: 1px solid var(--gemboss-field-line); border-radius: var(--ui-radius-md);
+  padding: 12px; color: var(--gemboss-field-ink); font-size: var(--ui-fs-body); line-height: 1.5; font-family: inherit;
+}
+.ui-textarea::placeholder { color: var(--gemboss-field-placeholder); }
+.ui-textarea:hover:not(:disabled) {
+  border-color: var(--gemboss-field-line-hover);
+  background-color: var(--gemboss-field-bg-hover);
+}
+.ui-textarea:focus { outline: none; }
+.ui-textarea:focus-visible:not(:disabled) {
+  outline: 2px solid #005bd3; outline-offset: 1px;
+  border-color: var(--gemboss-field-line-active);
+}
+.ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
+/* On a PHONE-WIDTH screen every field of the family reads 16px (iOS zooms the page on tap below that)
+   and a select is a 44px target — by WIDTH, as `gemboss-field` does, because a desktop browser at 320px
+   still reports pointer: fine. Measured on GemFactory at 390px before this: select 13px, textarea 14px. */
+@media (max-width: 47.9975em) {
+  .ui-select.ui-select, .ui-textarea { font-size: 16px; }
+  /* Height only for the full select: `--slim` is a density decision (table rows), as the coarse block keeps it. */
+  .ui-select:not(.ui-select--slim) { min-height: 44px; }
 }
-.ui-textarea:focus { border-color: var(--ui-accent); }
 
 /* ── Segmented control ────────────────────────────────────────────────────────
    Grouped toggle: icon squares (.ui-seg button) or text tabs (.is-text). The
@@ -768,6 +791,10 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   border: 1px solid var(--gemboss-field-line);
   border-radius: 8px;
 }
+/* WebKit draws `input[type=search]` as `-webkit-appearance: searchfield`: its own padding and rounding, so in Safari
+   (macOS and iOS, the platform the 16px rule exists for) a search box did not match the fields beside it. Same box for
+   every text type; the clear button stays. (GemFactory #98 review, 01/10/2026.) */
+input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearance: none; appearance: none; }
 .gemboss-field::placeholder { color: var(--gemboss-field-placeholder); }
 /* A NARROW field — the inspector's T/R/B/L boxes and its number spinners are 40-68px wide, and the
    shared 12px side padding left 38px of content box for a three-digit value (measured in Chromium:
@@ -882,7 +909,8 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
   z-index: 320;
   overflow: hidden;
 }
-.gemboss-account-menu-item {
+.gemboss-account-menu-item,
+.ui-menu__item {
   display: block;
   width: 100%;
   min-height: 44px;
@@ -897,15 +925,18 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
   cursor: pointer;
   transition: background var(--gemboss-transition-fast) ease, color var(--gemboss-transition-fast) ease;
 }
-.gemboss-account-menu-item:hover {
+.gemboss-account-menu-item:hover,
+.ui-menu__item:hover {
   background: var(--gemboss-hover);
 }
-.gemboss-account-menu-item:focus-visible {
+.gemboss-account-menu-item:focus-visible,
+.ui-menu__item:focus-visible {
   outline: 2px solid var(--gemboss-primary);
   outline-offset: -2px;
   background: var(--gemboss-hover);
 }
-.gemboss-account-menu-item.danger {
+.gemboss-account-menu-item.danger,
+.ui-menu__item--danger {
   color: var(--gemboss-danger-strong);
 }
 .gemboss-account-chip {
@@ -2709,6 +2740,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
    degrading to instant is the right failure for chrome nobody asked to watch. */
 @starting-style {
   .gb-dock-dock, .gb-dock-mini { transform: translateY(10px); opacity: 0; }
+  .gb-dock-side { transform: translateX(12px); opacity: 0; }
 }
 /* Nothing animates while a pointer is setting the numbers — see `dragging` in the host. */
 .gb-dock-dragging, .gb-dock-dragging * { transition: none !important; }
@@ -2747,6 +2779,66 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   background: var(--gemboss-app-bg);
 }
 
+/* ── Side: a full-height panel pinned to the right edge (01/10/2026) ─────────────────────────────
+   The third working shape, beside the popup and full screen: a long conversation next to the screen
+   it is about. Opt-in per surface (`<AssistantHost allowSide>`), because unlike the popup it TAKES
+   ROOM — the page beside it moves over (rule below), so nothing under it is hidden. That is why the
+   surface is solid rather than frosted: nothing sits behind it to show through.
+   Above `.gemboss-route-shell` (5), so the panel stays put while routes change — a sidebar that
+   vanishes on every click is a popup with extra steps. BELOW the topbar (300): the account menu
+   opens down out of the topbar's right end, exactly where this panel starts, and at the popup's 320
+   the menu fell behind the panel (review). 290 still clears the desktop invite (260/280). The host
+   is rendered inside `main` (AppShell's slot), which works because `main` makes no stacking context
+   or containing block; a surface that gives its `main` a transform or z-index must mount it outside. */
+.gb-dock-side {
+  z-index: 290;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  width: var(--gb-dock-side-w, 400px);
+  background: var(--gemboss-surface);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border: 0;
+  border-left: 1px solid var(--gemboss-divider);
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;         /* the seam's touch band reaches 14px past the left edge */
+}
+.gb-dock-side .gb-dock-body, .gb-dock-side .gb-dock-pane { overflow: hidden; }
+/* The header does not drag a panel that is pinned. */
+.gb-dock-side .gb-dock-header { cursor: default; touch-action: auto; }
+/* The word for what the dot already says stands down here, as it does in a popup under 420px: the panel has
+   five controls in its header, and the title needs the room (measured: "Gem assi…" / "Re…" at 400). Visually
+   only — the dot is aria-hidden, so the word is the one place a screen reader hears "Working" (review #3622). */
+.gb-dock-side .gb-dock-status {
+  flex: 0 0 auto; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.gb-dock-side .gb-dock-header:active { cursor: default; }
+/* The seam: the panel's left edge, the fleet's one `.ui-resizer` (ui.css draws the grip). A 5px strip
+   centred on the border, ABOVE the page beside it. */
+/* `.gb-dock-side >` is not decoration: `.ui-resizer { position: relative }` (ui.css) has the weight of one
+   class too, and which file a bundler loads last would decide whether the seam is a 5px strip or a 0px
+   line nobody can grab. */
+.gb-dock-side > .gb-dock-sidegrip {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  width: 5px;
+  z-index: 3;
+}
+/* The page makes room. `margin-right`, not padding: main's padding is set by four rules in shell.css
+   and a fifth here would fight them. The provider puts the class and the width on <body>; the default
+   `bodyClassPrefix` is `gemboss-assistant` — a surface with another prefix writes its own copy of this
+   one rule. No transition: the seam is set from a pointer, and a page that trails the finger is the
+   bug `.gb-dock` already avoids. */
+@media (min-width: 1100px) {
+  body.gemboss-assistant-side .gemboss-platform-main { margin-right: var(--gb-assistant-side-w, 400px); }
+}
+
+
 /* ── Full: the one control full screen needs — the way back to the popup ──────────────────────
    Floated over the chat's own header, whose right half is empty, rather than given a bar of its
    own: a whole strip of chrome for one button would push the conversation down on every screen. */
@@ -2896,7 +2988,10 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   white-space: nowrap;
 }
 .gb-dock-header:active { cursor: grabbing; }
-.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; }
+/* `margin-left: auto`: the status word was the only thing that stretched, so wherever it stands down (a popup under
+   420px, the side panel) the controls followed the title instead of the right edge — 350px adrift in a 720px panel
+   (review #3622). With the word showing, it still takes the free space first and nothing moves. */
+.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; margin-left: auto; }
 /* One ACTION, then the three WINDOW controls — ordered by how much each changes the window: bigger,
    smaller, gone. The gap is what says they are two different kinds of button; without it four icons
    in a row read as one undifferentiated strip, which is what "các icon đang không đồng đều" was
@@ -3039,4 +3134,682 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
     bottom: 0;
     border-radius: 0;
   }
+  /* No room beside a phone screen: the side panel takes the screen, the way full does, and there is
+     nothing to drag. The page is not pushed (the rule above stops at 761). */
+  .gb-dock-side {
+    left: 0;
+    right: 0;
+    width: auto;
+    border-left: 0;
+    border-radius: 0;        /* the phone .gb-dock rule above rounds the top; this panel is the screen */
+  }
+  .gb-dock-sidegrip { display: none; }
+  /* …so the button that pins it there would only say "full screen" a second time. */
+  .gb-dock-pinside { display: none; }
+}
+
+/* 1100 = rail 240 + the panel's narrowest 380 + the page's narrowest 480 (SIDE_MIN_WIDTH, SIDE_PAGE_MIN in
+   assistant/dock.ts). Below it the two do not fit side by side — MEASURED at 768: pushed, the page kept
+   120px and its table ran under the panel. So between the phone and 1100 the panel covers the content
+   area the way full screen does, nothing is pushed, there is no seam to drag, and the popup does not
+   offer to pin.
+   AT THE END OF THE FILE on purpose: `.gb-dock-icon { display: grid }` comes later than the side
+   section and has the same weight, so placed there this block lost and the pin still showed at 768
+   (measured). */
+@media (min-width: 761px) and (max-width: 1099.98px) {
+  .gb-dock-side { left: 240px; width: auto; }
+  .gb-dock-side .gb-dock-sidegrip, .gb-dock-pinside { display: none; }
+}
+
+/* ═══ @gemboss/ui src/kit-plain.css ═══ */
+/* kit-plain.css — kit primitives that only the NON-React surfaces use (GemFactory, gemcare, gempress write the
+   markup by hand). They ship inside gemboss-ui.css (scripts/build-css.mjs `own`), but the admin does NOT import
+   this file: `ui.css` is loaded by the admin's root layout, so every rule there is paid on every admin screen,
+   and adding these to it pushed the admin shell 0.2 KB over its first-load budget (CI of #3591, 01/10/2026).
+   The admin has Polaris for menus, checkboxes and description lists. */
+
+/* ── Icon button · Menu · Key-value list ──────────────────────────────────────
+   Added 01/10/2026 for GemFactory's item dialog, which had seven actions in one header row; the
+   secondary five now sit behind one "⋯" button. Plain CSS, same contract as the tabs and tables in ui.css.
+
+   Icon button: `<button class="ui-btn ui-btn--icon" aria-label="…"><svg…></button>` — square, the
+   label is REQUIRED (there is no text for a screen reader to read otherwise).
+
+   Menu: a `<details>` so it opens with no script. `<details class="ui-menu ui-menu--end">
+   <summary class="ui-btn ui-btn--icon" aria-label="More actions">…</summary><div class="ui-menu__list">
+   <button class="ui-menu__item">Copy #12<span class="ui-menu__hint">for Claude Code</span></button>
+   <hr class="ui-menu__sep"><button class="ui-menu__item ui-menu__item--danger">Delete…</button></div>
+   </details>`. `--end` aligns the list to the right edge of its button. Closing on an outside click,
+   on an item, and on Escape is the page's job (a few lines; GemFactory's ui-kit.mjs has them).
+   Items are 44px under EVERY pointer, not only coarse: they touch each other (0px apart), and §9.1
+   only allows a gap under 8px between targets that are already 44px.
+
+   Key-value list: `<dl class="ui-kv"><dt>Owner</dt><dd>Lily</dd>…</dl>` — label column sized to
+   its longest label, value column takes the rest and wraps long keys and URLs. */
+.ui-btn--icon { flex: none; width: var(--ui-control-h); padding: 0; }
+.ui-btn--icon.ui-btn--sm { width: 28px; }
+.ui-btn--icon svg { width: 18px; height: 18px; }
+/* Menu: the SURFACE is the shell's `gemboss-popover-surface` and the rows are the account menu's row (shell.css
+   declares `.gemboss-account-menu-item, .ui-menu__item` together), so a kit menu and the account menu on one page
+   look the same and a fix to one reaches the other (§9.3). Markup: `<div class="ui-menu__list gemboss-popover-surface">`.
+   Here: only placement, the hint, the separator and the disabled state. */
+.ui-menu { position: relative; display: inline-block; }
+.ui-menu > summary { list-style: none; cursor: pointer; }
+.ui-menu > summary::-webkit-details-marker { display: none; }
+.ui-menu__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; min-width: 220px; padding: var(--ui-space-1); box-sizing: border-box; }
+.ui-menu--end .ui-menu__list { left: auto; right: 0; }
+.ui-menu__item { display: flex; align-items: center; gap: var(--ui-space-2); white-space: nowrap; border-radius: var(--ui-radius-sm); }
+.ui-menu__item:is([disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.ui-menu__hint { margin-left: auto; padding-left: var(--ui-space-4); color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
+.ui-menu__sep { height: 1px; margin: var(--ui-space-1) 0; border: 0; background: var(--ui-border); }
+/* Checkbox: the LABEL is the target; disabled turns both the label and the box to not-allowed. Focus ring in the
+   kit's own token (no --p-* here: this file is appended after the export's Polaris resolver runs). */
+.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
+.ui-check > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); cursor: inherit; }
+.ui-check > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.ui-check:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+.ui-label { display: block; margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: 600; color: var(--ui-text-muted); }
+.ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ui-space-2) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
+.ui-kv > dt { color: var(--ui-text-muted); }
+.ui-kv > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ui-text); }
+
+/* Under a thumb the icon-only button is 44 WIDE as well (the kit's coarse block already raises every .ui-btn to 44 tall). */
+@media (pointer: coarse) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; } }
+/* …and at phone WIDTH, as gemboss-field does: a desktop browser at 320px still reports pointer: fine. */
+@media (max-width: 47.9975em) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; min-height: 44px; } }
+
+/* ── Link · Media card (02/10/2026) ──────────────────────────────────────────
+   GemFactory, gemcare and gempress left text links in the browser's default blue-and-purple, and each drew its own
+   thumbnail card. The admin uses Polaris' Link and has no media card, so both live here, not in ui.css.
+
+   Link: `<a class="ui-link" href>` for a link inside text. Iris (--gemboss-accent-strong, 6.2:1 on white), underlined
+   so it is not told by colour alone (WCAG 1.4.1); visited looks the same (these are tools, not articles). Markdown or
+   other generated HTML you cannot add classes to: wrap it in `.ui-prose` and its bare `<a>` get the same look.
+
+   Media card: `<article class="ui-card ui-card--media"><a|button class="ui-card__media"><img alt=""></…>
+   <div class="ui-card__body">…</div><div class="ui-card__foot">…</div></article>`. The picture is 16:10 and
+   cropped to fill; the card has no padding of its own, the body and foot do. */
+.ui-link,
+.ui-prose a:not([class]) {
+  color: var(--gemboss-accent-strong, #3a44de);
+  text-decoration: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 2px;
+}
+.ui-link:visited,
+.ui-prose a:not([class]):visited { color: var(--gemboss-accent-strong, #3a44de); }
+.ui-link:hover,
+.ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
+.ui-link:focus-visible,
+.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: 2px; border-radius: 2px; }
+
+.ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.ui-card__media {
+  display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0; padding: 0; border: 0;
+  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-2); overflow: hidden; color: inherit;
+}
+.ui-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+button.ui-card__media, a.ui-card__media { cursor: pointer; }
+.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: -2px; }
+/* justify-items: start: a tag or a button in the body keeps its own width instead of stretching across the card. */
+.ui-card__body { display: grid; justify-items: start; gap: var(--ui-space-2, 8px); padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); min-width: 0; }
+.ui-card__foot {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2, 8px);
+  margin-top: auto; padding: 0 var(--ui-space-4, 16px) var(--ui-space-3, 12px);
+  color: var(--ui-text-muted); font-size: var(--ui-fs-caption, 13px);
+}
+
+/* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
+   The admin's Modal.tsx pads its own children, so ui.css never styled these; every non-React surface padded them by
+   hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
+.ui-modal__body { padding: 16px 20px; }
+.ui-modal__foot {
+  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
+  padding: 12px 20px; border-top: 1px solid var(--ui-border);
+}
+/* A popup taller than the screen: the body scrolls, the head and foot stay, so the actions are always reachable
+   (320×568 with a long form put Huỷ/Xoá below the fold, unreachable under the locked page; review #3633). */
+.ui-overlay > .ui-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
+.ui-modal > .ui-modal__head, .ui-modal > .ui-modal__foot { flex: none; }
+.ui-modal > .ui-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+
+/* ═══ @gemboss/ui src/chat.css ═══ */
+/*
+ * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
+ *
+ * Chris: every surface's AI assistant (gemcare, content-radar, partner-radar, GemCommunity) must be built from the
+ * GemBoss UI framework. Until today only the FRAME was shared (assistant.css: popup / bar / full screen; shell.css:
+ * the thread rail); the body lived in the admin's gemboss-shell.css and the exporter left it out on purpose, so every
+ * surface drew its own bubbles, markdown and composer. These are those rules, moved here VERBATIM (same selectors,
+ * same values, same order) — the admin @imports this file at the top of its shell, so it is still the one owner.
+ *
+ * What is here: the header (`.gemboss-ec-head/title/sub`), the message list (`.gemboss-ec-scroll`), messages and
+ * bubbles (`.gemboss-ec-msg.user|.assistant`, `.gemboss-ec-bubble`), the working indicator and the streaming cursor
+ * (`.gemboss-ec-pending*`, `.gemboss-ec-cursor`), markdown (`.gemboss-md-*`, `.gemboss-ec-md-link`), step narration
+ * (`.gemboss-narr*`), starters and option chips (`.gemboss-ec-starter(s)`, `.gemboss-ec-chip(s)`), and the composer
+ * (`.gemboss-ec-input` with its textarea and submit button).
+ * What is NOT: the panel's geometry (`.gemboss-ec` width, editor columns, tabs), attachments, CTA / action cards,
+ * the engine picker and work mode — those are still the admin's, and a surface brings its own. ONE exception, on
+ * purpose: the chat panel's touch / mouse TARGET blocks (`@media (pointer: coarse|fine)` below) name every control
+ * of the panel, the admin-only ones (tabs, upload, engine picker, work mode, attach, stop) included. They are one
+ * rule per pointer kind; split in two they wrote their declarations twice and the admin's shell budget had no room.
+ * Those selectors match nothing on a surface without those controls. (`.gemboss-ec-workmode`: the click-area
+ * `::before` is here, its label-sizing `::after` stays the admin's.)
+ *
+ * Markup: see the catalog's "Thân chat" section. Behaviour (streaming, stop, keyboard) belongs to the surface.
+ */
+
+.gemboss-ec-head { padding: 16px 16px; border-bottom: 1px solid var(--gemboss-divider); display: flex; flex-direction: column; gap: 2px; }
+.gemboss-ec-title { font-family: var(--gemboss-serif); font-size: 15px; font-weight: 600; }
+.gemboss-ec-sub { font-size: 12px; color: var(--gemboss-text-muted); }
+.gemboss-ec-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; scrollbar-gutter: stable; }
+/* Visible thin scrollbar on the chat message list — the default macOS overlay bar is
+   hidden until you actively scroll, so the list reads as "can't scroll" (esp. on the
+   dedicated Assistant page, a fixed-height chat where the page itself doesn't scroll).
+   A persistent thin bar makes the scroll affordance obvious; matches the composer input. */
+.gemboss-ec-scroll { scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; }
+.gemboss-ec-scroll::-webkit-scrollbar { width: 9px; }
+.gemboss-ec-scroll::-webkit-scrollbar-track { background: transparent; }
+.gemboss-ec-scroll::-webkit-scrollbar-thumb { background: rgba(31,30,29,0.2); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
+.gemboss-ec-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
+.gemboss-ec-msg.user { align-items: flex-end; }
+.gemboss-ec-msg.assistant { align-items: flex-start; }
+.gemboss-ec-bubble {
+  /* Cap reading measure: a chat reply stays at a readable line length, not the bubble's full 90%. */
+  font-size: var(--gemboss-fs-body); line-height: 1.5; padding: 12px 12px; border-radius: 16px; max-width: min(90%, 68ch);
+  white-space: pre-wrap; word-break: break-word;
+}
+.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: #fff; border-bottom-right-radius: 4px; }
+.gemboss-ec-msg.assistant .gemboss-ec-bubble { background: var(--gemboss-surface); color: var(--gemboss-text); border: 1px solid var(--gemboss-divider); border-bottom-left-radius: 4px; }
+.gemboss-ec-input button[type="submit"] svg { width: 18px; height: 18px; fill: currentColor; }
+/* Live "working" heartbeat — the Claude-Code-style running asterisk shown before the first token.
+   Slim, muted, single line so the chat stays clean; the motion (pulsing ✳, crossfading verb, live
+   counter) is what makes the wait feel fast instead of frozen. */
+.gemboss-ec-pending { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
+.gemboss-ec-pending-star { color: var(--gemboss-primary); font-size: 12px; line-height: 1; animation: gemboss-star-pulse 1.1s ease-in-out infinite; }
+.gemboss-ec-pending-verb { color: var(--gemboss-text); animation: gemboss-verb-in 0.4s ease-out; }
+.gemboss-ec-pending-meta { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: var(--gemboss-fs-caption); }
+@keyframes gemboss-star-pulse { 0%,100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } }
+@keyframes gemboss-verb-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+/* Typewriter cursor — a thin blinking bar trailing the answer while tokens stream in. */
+.gemboss-ec-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--gemboss-primary); border-radius: 2px; animation: gemboss-cursor-blink 1s steps(1) infinite; }
+@keyframes gemboss-cursor-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: 0.15; } 100% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .gemboss-ec-pending-star, .gemboss-ec-cursor { animation: none; }
+}
+/* Markdown link inside the answer bubble — a friendly inline link, never a raw path. */
+.gemboss-ec-md-link { color: var(--gemboss-primary-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gemboss-primary) 35%, transparent); cursor: pointer; }
+.gemboss-ec-md-link:hover { border-bottom-color: var(--gemboss-primary); }
+/* Suggestion starters = compact wrapping CHIPS (pills), not stacked full-width boxes —
+   reads as a chat's quick-reply chips and stops one prompt eating a whole row. */
+.gemboss-ec-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
+.gemboss-ec-starter {
+  text-align: left; font-size: 13px; padding: 6px 12px; border-radius: var(--gemboss-radius-full); cursor: pointer;
+  background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); color: var(--gemboss-text);
+  white-space: nowrap; max-width: 100%;
+}
+.gemboss-ec-starter:hover { border-color: var(--gemboss-primary); background: rgba(86, 97, 245, 0.06); }
+/* (removed) dead legacy rail styles — `.icon-nav-assistant` + the hover-flyout submenu
+   (`.icon-nav-flyout*`). The current nav (IconNav.tsx) is a persistent 240px labeled
+   sidebar using `.gnav-*` classes with route-driven sub-nav; there is no 72px icon rail
+   and no hover flyout, so these selectors matched nothing. */
+
+/* Composer = ONE bordered rounded shell (ChatGPT/Claude-style): the textarea sits borderless
+   inside it and the attach (📎) + send (↑) buttons float within the same box — cleaner than the
+   old three-separate-boxes row. The shell is inset from the panel edges (margin) and lifts its
+   border to primary on focus-within, so the whole composer reads as one focused field. */
+/* TWO ROWS when there are chips (ChatComposer): the textarea on its own full-width row, the toolbar
+   under it. The toolbar is where chips of any length live, and when they shared a row with the text
+   box the send button was the thing that gave way — measured 22/09/2026 at 320px, it wrapped to a
+   THIRD line. With no chips at all, ONE row — see `:has` below.
+   8px inside, not 6: at 6 the text sat 13px from the border and the box read as cramped. What the
+   toolbar SAYS at each width is ChatComposer's job (data-density), measured rather than guessed. */
+.gemboss-ec-input {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
+  margin: 12px; padding: 8px;
+  border: 1px solid var(--gemboss-divider); border-radius: 16px;
+  background: var(--gemboss-surface);
+  transition: border-color var(--gemboss-transition-fast) ease, box-shadow var(--gemboss-transition-fast) ease;
+}
+.gemboss-ec-input:focus-within {
+  border-color: var(--gemboss-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gemboss-primary) 12%, transparent);
+}
+.gemboss-ec-input textarea {
+  flex: 1 0 100%; min-width: 0; width: 100%; box-sizing: border-box; resize: none; border-radius: 0; background: transparent;
+  /* The CHIP's box model — a transparent 1px border and 8px of padding — so the first letter typed
+     lines up with the first letter of "Claude Code" below it. It was 6px with no border: the text
+     started 3px left of the chips, measured on every host at every width, and the box read as two
+     columns. (Box model rather than nine pixels of padding: nine is off the spacing scale the CI guard holds.) */
+  border: 1px solid transparent;
+  padding: 6px 8px; font-size: var(--gemboss-fs-body); font-family: inherit;
+  /* Starts at one line; GemChat's auto-grow JS expands it up to ~3 lines (max-height),
+     then scrolls inside (ChatGPT/Gemini-style). overflow-y is hidden until the JS flips
+     it to auto past the cap, so a 1–2 line message never shows a (rounding) scrollbar. */
+  min-height: 0; max-height: 84px; line-height: 1.5; overflow-y: hidden;
+  scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; /* thin, not the OS bar */
+}
+.gemboss-ec-input textarea::-webkit-scrollbar { width: 7px; }
+.gemboss-ec-input textarea::-webkit-scrollbar-track { background: transparent; }
+.gemboss-ec-input textarea::-webkit-scrollbar-thumb { background: rgba(31,30,29,0.2); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
+.gemboss-ec-input textarea:focus { outline: none; }
+/* Send button — a filled primary circle floating at the shell's bottom-right. inline-flex centers
+   the ↑ SVG (the old rule had no flex-centering, so the icon sat high).
+
+   SCOPED TO THE SUBMIT BUTTON, and that word is load-bearing. This rule used to read
+   `.gemboss-ec-input button`, which reached EVERY button in the composer — including whatever a host
+   passes in through `composerLeading`, a slot that exists precisely so hosts can put their own
+   controls here. The 📎 attach button already had to fight it back with a class of its own (see the
+   comment above `.gemboss-ec-attach-btn`), which was the first sign that this selector owns more than
+   it should. The second was the engine picker: a Polaris Button, rendered into the slot, came out as a
+   34px black circle with its label ("Claude Code · Opus") clipped to three characters. Nothing was
+   wrong with the picker — this rule was painting it.
+
+   §9.3: one visual owner per component. The composer owns its own send button and nothing that is
+   handed to it. Guarded by composer-owns-only-its-own-buttons.test.ts.
+
+   44px, not 34: it is a CONTROL (§9.1, Apple HIG / WCAG 2.5.5 AAA). This branch had already raised
+   it — but on the OLD unscoped selector, the very rule main had just narrowed. The two changes were
+   fixing different faults in one declaration, so both are kept: main's scope, this branch's size. */
+.gemboss-ec-input button[type="submit"] {
+  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--gemboss-primary); color: #fff; font-size: 16px; font-weight: 700;
+  transition: background var(--gemboss-transition-fast) ease, filter var(--gemboss-transition-fast) ease;
+}
+.gemboss-ec-input button[type="submit"]:hover:not(:disabled) { background: var(--gemboss-primary-dark); }
+.gemboss-ec-input button[type="submit"]:active:not(:disabled) { background: var(--gemboss-primary-dark); filter: brightness(0.94); }
+.gemboss-ec-input button[type="submit"]:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
+/* Disabled (empty input): a clear neutral grey circle with a muted arrow — reads as
+   "inactive" rather than a washed-out faint-primary blob. */
+.gemboss-ec-input button[type="submit"]:disabled { background: var(--gemboss-divider); color: var(--gemboss-text-muted); opacity: 1; cursor: default; }
+/* ── Narration timeline ── */
+.gemboss-narr { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
+.gemboss-narr-row { display: flex; align-items: center; gap: 8px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
+.gemboss-narr-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 auto; }
+.gemboss-narr-row.ok .gemboss-narr-dot { background: var(--gemboss-active-bg); color: var(--gemboss-active-fg); }
+.gemboss-narr-row.failed .gemboss-narr-dot { background: #fde8e6; color: var(--gemboss-danger); }
+.gemboss-narr-row.running .gemboss-narr-dot { background: transparent; }
+/* THE ENGINE'S MARK, in the dot's slot. No pill behind it: the ✓/✕ dots earn their background by
+   being a glyph in a circle, and a logo in a coloured circle reads as a badge the engine awarded
+   itself. It takes the ROW's colour, so a failed turn's mark goes red with everything else — a mark
+   that stayed brand-coloured over a failure would be the one cheerful thing on a broken row. */
+.gemboss-narr-dot-engine { background: transparent !important; color: inherit; }
+.gemboss-narr-row.ok .gemboss-narr-dot-engine { color: var(--gemboss-text); }
+.gemboss-narr-row.failed .gemboss-narr-dot-engine { color: var(--gemboss-danger); }
+.gemboss-narr-row.ok .gemboss-narr-text, .gemboss-narr-row.failed .gemboss-narr-text { color: var(--gemboss-text); }
+/* A message the seller typed INTO the running turn. It reads as THEIR line, not as a step the agent
+   took: full-strength text (the timeline is muted by default) against the page's own text colour, and
+   a `❯` prompt caret instead of a status dot. It must be legible at a glance while the agent is still
+   writing above it — a seller scanning a long timeline needs to find the moment they interrupted. */
+.gemboss-narr-row.steer .gemboss-narr-dot { background: transparent; color: var(--gemboss-text-muted); }
+/* `anywhere`, not `normal`: a seller correcting a turn pastes URLs and product handles, and one
+   unbroken 60-character token in a 320px chat column is a row that pushes the panel sideways. Measured
+   2026-09-23 — the default `overflow-wrap: normal` on this row does not break such a token. */
+.gemboss-narr-steer { color: var(--gemboss-text); font-weight: 500; overflow-wrap: anywhere; }
+.gemboss-narr-spin { width: 11px; height: 11px; border: 2px solid var(--gemboss-divider-soft); border-top-color: var(--gemboss-primary); border-radius: 50%; animation: gemboss-spin 0.7s linear infinite; }
+@keyframes gemboss-spin { to { transform: rotate(360deg); } }
+/* Live-reasoning ("thinking") row: muted + italic while streaming, collapsible once settled. */
+.gemboss-narr-row.thinking { align-items: flex-start; }
+.gemboss-narr-row.thinking .gemboss-narr-dot { color: var(--gemboss-text-muted); background: transparent; }
+.gemboss-narr-thinking-live { font-style: italic; color: var(--gemboss-text-muted); white-space: pre-wrap; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-thinking { font-size: var(--gemboss-fs-caption); }
+.gemboss-narr-thinking > summary { cursor: pointer; color: var(--gemboss-text-muted); list-style: none; user-select: none; }
+.gemboss-narr-thinking > summary::-webkit-details-marker { display: none; }
+.gemboss-narr-thinking > summary::before { content: "▸ "; }
+.gemboss-narr-thinking[open] > summary::before { content: "▾ "; }
+.gemboss-narr-thinking-body { margin-top: 6px; padding: 8px 8px; border-left: 2px solid var(--gemboss-divider-soft); color: var(--gemboss-text-muted); font-style: italic; white-space: pre-wrap; line-height: 1.5; }
+/* TOOL TRANSCRIPT rows — the Claude-Code shape: a monospace call line, its return value folded
+   behind a disclosure. Muted on purpose: the transcript is evidence you can audit, not the answer. */
+.gemboss-narr-row.trace code { font-family: var(--gemboss-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--gemboss-fs-caption); word-break: break-word; }
+.gemboss-narr-trace-call { color: var(--gemboss-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-trace { font-size: var(--gemboss-fs-caption); min-width: 0; }
+.gemboss-narr-trace > summary { cursor: pointer; color: var(--gemboss-text-muted); list-style: none; user-select: none;
+  /* A tool call with real arguments is long and the chat panel is narrow: a full payload wrapped to five
+     lines buries the rows around it. Clamp while closed; opening the row shows the call in full. */
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-trace[open] > summary { display: block; overflow: visible; }
+.gemboss-narr-trace > summary::-webkit-details-marker { display: none; }
+/* The fold is now the ONLY way to see a payload or a finished thought (both start closed), so its
+   summary is a target: ≥24px tall, the list-link tier of Gems/CLAUDE.md §9.1 (WCAG 2.5.8). Measured
+   21px before, 13/09. */
+.gemboss-narr-trace > summary, .gemboss-narr-thinking > summary { min-height: 24px; box-sizing: border-box; padding-block: 2px; }
+.gemboss-narr-trace > summary::before { content: "▸ "; }
+.gemboss-narr-trace[open] > summary::before { content: "▾ "; }
+.gemboss-narr-trace-body { margin-top: 6px; padding: 8px; border-left: 2px solid var(--gemboss-divider-soft); color: var(--gemboss-text-muted); white-space: pre-wrap; line-height: 1.5; overflow-x: auto; }
+@media (max-width: 640px) {
+  /* Composer auto-grows from one line (see GemChat) — no fixed floor needed here. */
+  .gemboss-ec-input textarea { min-height: 0; }
+  .gemboss-ec-scroll { padding: 12px; }
+}
+/* ── Chat option chips (persona/goal polling) ── */
+.gemboss-ec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
+/* 44px because a chip is a CONTROL, not a link in a list — Apple HIG / WCAG 2.5.5 AAA, Gems CLAUDE.md
+   §9.1. Measured 2026-09-09 at 390px and 1366px: padding alone rendered these at 34px, ten short, and
+   they are the only way to answer a poll or resume an unfinished run on a phone. `min-height` rather
+   than `height` so a wrapped two-line label still grows instead of clipping. */
+.gemboss-ec-chip {
+  background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-full);
+  padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--gemboss-text);
+  min-height: 44px;
+}
+.gemboss-ec-chip:hover { border-color: var(--gemboss-primary); color: var(--gemboss-active-fg); }
+.gemboss-ec-chip:disabled { opacity: 0.5; cursor: default; }
+/* ════ Mouse targets — the same 44px, bought with an overlay instead of a bigger box ═══════
+   §9.1 asks 44px of a CONTROL, and it does not say "on touch only". The chat panel's controls are
+   28-37px under a mouse, which clears WCAG 2.5.8 AA (24px) and not 2.5.5 AAA (44px). The dense look
+   is deliberate and worth keeping, so the TARGET grows and the ink does not — the same trick the
+   editor topbar already uses on its device buttons.
+
+   WHICH ONES, AND WHY NOT THE REST. A target that reaches into a neighbour steals clicks meant for
+   it, which is worse than a small one. So this was decided by measuring the gap between every pair
+   of vertically adjacent controls at 390 / 768 / 1366 and asking whether BOTH could grow into it —
+   a control's own clearance is not enough, because its neighbour is growing too. Measured
+   2026-09-09, three pairs could not:
+
+     starter chips, row to row   gap 8px, both need 7  -> the ROW GAP goes to 16px below, which buys
+                                                          it without changing how the chips look
+     textarea / engine picker    gap 8px, needs 10     -> the textarea does not grow (see below)
+     textarea / send             gap 6px, needs 9      -> same
+
+   THE MESSAGE BOX IS EXCLUDED ON PURPOSE. It is a full-width field 37px tall: its AREA is already
+   enormous, the only dimension short of 44 is its height, and it is the one control here you reach
+   by clicking INTO text rather than at a point. Growing it also collides with both of its
+   neighbours. With it left alone, everything else fits: send needs 5 of the 6px above it, the
+   picker needs 8 of 8.
+
+   Height only. Horizontally these controls are already 34-196px wide, and an overlay that also grew
+   sideways would collide with the chip beside it, which is 8px away. */
+@media (pointer: fine) {
+  .gemboss-ec-starters { row-gap: 16px; }
+  .gemboss-ec-tab,
+  .gemboss-ec-starter,
+  .gemboss-ec-upload,
+  .gemboss-ec-enginepick button,
+  .gemboss-ec-workmode,
+  .gemboss-ec-input .gemboss-ec-attach-btn,
+  .gemboss-ec-stop,
+  /* Shares the toolbar row with Stop, which is already 44px tall — so a 44px overlay here grows into
+     a row that is that tall already, and reaches into nothing above or below it. */
+  .gemboss-ec-stop-send,
+  .gemboss-ec-input button[type="submit"] { position: relative; }
+  .gemboss-ec-tab::after,
+  .gemboss-ec-starter::after,
+  .gemboss-ec-upload::after,
+  .gemboss-ec-enginepick button::after,
+  /* `::before` on the work-mode wrapper: its `::after` is the invisible label that SIZES it, and a
+     second use of the same pseudo-element would silently replace that. */
+  .gemboss-ec-workmode::before,
+  .gemboss-ec-input .gemboss-ec-attach-btn::after,
+  .gemboss-ec-stop::after,
+  .gemboss-ec-stop-send::after,
+  .gemboss-ec-input button[type="submit"]::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 44px;
+    /* No background at all: a pseudo-element is transparent already, and the `background` shorthand
+       is banned in this family because it resets `background-image` — the work-mode caret. My own
+       guard from #2158 caught this line, which is the guard doing exactly what it was written for. */
+    pointer-events: auto;
+    /* Above the panel chrome it overhangs — the chrome is not interactive, so a click landing on the
+       control the overlay belongs to is the point.
+       This does NOT rescue a control sitting flush against the top of `.gemboss-ec-scroll`: an
+       overflow container clips its absolutely-positioned descendants, and z-index cannot cross that.
+       Measured at 768px, where the first row of starter chips begins at the exact pixel the header
+       ends: their target is 37px until the list scrolls, and 44px after. A scroll position, not a
+       layout constant — the same chips measure 44px at 390, 1366 and 1920. Left alone rather than
+       bought with padding on the scroll area, which every seller would see all the time to fix a
+       target in one transient position. */
+    z-index: 1;
+  }
+}
+@media (pointer: coarse) {
+  .gemboss-ec-input button[type="submit"] { width: 44px; height: 44px; font-size: 17px; }
+  .gemboss-ec-starter, .gemboss-ec-opt { min-height: 44px; }
+  .gemboss-ec-input textarea { min-height: 44px; }
+}
+/* ── The answer bubble's markdown ────────────────────────────────────────────────────────────────
+ *
+ * The bubble understood bold, links and line breaks. The models writing into it do not restrict
+ * themselves to three things: a question about pages came back as a markdown TABLE and rendered as
+ * literal pipes down the page. These are the styles for what it actually writes. */
+
+.gemboss-md-p { margin: 0 0 8px; }
+.gemboss-md-p:last-child { margin-bottom: 0; }
+/* Demoted one level in the markup (h1 → h3) because the bubble sits under the page's own headings.
+ * The SIZE hierarchy is kept here, because that is what a reader uses to skim. */
+.gemboss-md-h { margin: 16px 0 6px; font-weight: 650; line-height: 1.3; }
+.gemboss-md-h:first-child { margin-top: 0; }
+/* RESTORED after #3370 deleted these three. MarkdownLite.tsx builds the class by interpolation —
+ * `gemboss-md-h gemboss-md-h${b.level}` — so the literal `gemboss-md-h1` exists in no source file
+ * and in no compiled chunk, and all three of that PR's detection passes read them as dead. The gate
+ * now carries the prefix rule that catches this shape. Do not "clean" these up. */
+.gemboss-md-h1 { font-size: 17px; }
+.gemboss-md-h2 { font-size: 15px; }
+.gemboss-md-h3 { font-size: var(--gemboss-fs-body); color: var(--gemboss-text-subdued, #616161); }
+.gemboss-md-list { margin: 0 0 8px; padding-left: 20px; }
+.gemboss-md-list li { margin: 2px 0; }
+.gemboss-md-quote {
+  margin: 0 0 8px;
+  padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--gemboss-border, #e3e3e3);
+  color: var(--gemboss-text-subdued, #616161);
+}
+.gemboss-md-rule { margin: 12px 0; border: 0; border-top: 1px solid var(--gemboss-border, #e3e3e3); }
+/* Inline code: a chip, so an identifier stops reading as prose. */
+.gemboss-md-code {
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--gemboss-surface-subdued, #f1f1f1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  word-break: break-word;
+}
+/* Tables scroll INSIDE their own box. The chat lives in a 380px sidebar in the theme editor, and a
+ * five-column table there would otherwise push the whole panel sideways — §9.1's rule that wide
+ * content scrolls in its own container, not the page. */
+.gemboss-md-tablewrap { margin: 0 0 12px; overflow-x: auto; }
+.gemboss-md-table { border-collapse: collapse; font-size: var(--gemboss-fs-caption); min-width: 100%; }
+.gemboss-md-table th,
+.gemboss-md-table td {
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.gemboss-md-table th { background: var(--gemboss-surface-subdued, #f7f7f7); font-weight: 600; }
+/* A picture in an answer (only from hosts markdown-blocks.ts trusts). Never wider than the bubble — the
+ * chat can sit in a 380px sidebar — and capped in height so five thumbnails read as a shortlist, not
+ * five screens. The link around it is the tap target: keyboard focus has to be visible on it. */
+.gemboss-md-imglink { display: inline-block; max-width: 100%; margin: 4px 0 8px; border-radius: 8px; line-height: 0; }
+.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-md-img {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+  height: auto;
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  border-radius: 8px;
+  background: var(--gemboss-surface-subdued, #f7f7f7);
+  object-fit: contain;
+}
+/* A code block, with the fold. A 200-line answer should not push everything after it off screen. */
+.gemboss-md-codeblock {
+  position: relative;
+  margin: 0 0 12px;
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  border-radius: 8px;
+  background: var(--gemboss-surface-subdued, #f7f7f7);
+  overflow: hidden;
+}
+.gemboss-md-codelang {
+  display: block;
+  padding: 4px 12px 0;
+  color: var(--gemboss-text-subdued, #8a8a8a);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+}
+.gemboss-md-codeblock pre { margin: 0; padding: 8px 12px; overflow-x: auto; }
+.gemboss-md-codeblock code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+}
+.gemboss-md-codemore {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: 0;
+  border-top: 1px solid var(--gemboss-border, #e3e3e3);
+  background: transparent;
+  color: var(--gemboss-text-subdued, #616161);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.gemboss-md-codemore:hover { background: rgba(0, 0, 0, 0.03); }
+/* ── The payload, live, in the chat ──────────────────────────────────────────────────────────────
+   A trace row said `apply_section_edit(section_id:"hero")` — that something happened, and nothing about
+   what. This is what. Open by default: folding it would put the answer back behind a click. */
+.gemboss-narr-row.source { align-items: flex-start; }
+.gemboss-narr-source { min-width: 0; flex: 1; }
+.gemboss-narr-source-head { font-size: 11px; color: var(--gemboss-text-muted, #686b71); margin-bottom: 4px; }
+.gemboss-narr-source-head code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.gemboss-narr-source-code {
+  margin: 0; padding: 8px 12px; border-radius: 8px; max-height: 220px; overflow: auto;
+  background: var(--gemboss-primary-soft, #f2f3f5); border: 1px solid var(--gemboss-divider, #e5e7ea);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--gemboss-fs-micro); line-height: 17px;
+  white-space: pre; tab-size: 2;
+}
+/* Light-ground syntax colours for the payload rows (the code-highlight.ts `c-*` spans). Contrast checked
+   against #fff: every one clears 4.5:1. (The page editor's Code tab shared them until it was removed, #2651.) */
+.gemboss-narr-source-code .c-com { color: #6a7a86; font-style: italic; }
+.gemboss-narr-source-code .c-str { color: #9a3412; }
+.gemboss-narr-source-code .c-num { color: #1d6fa5; }
+.gemboss-narr-source-code .c-kw  { color: #7c3aed; font-weight: 600; }
+.gemboss-narr-source-code .c-key { color: #0b6b3a; }
+.gemboss-narr-source-code .c-tag { color: #b0197a; }
+.gemboss-narr-source-code .c-attr{ color: #7c3aed; }
+.gemboss-narr-source-code .c-pun { color: #6a6d73; }
+@media (max-width: 520px) {
+  .gemboss-narr-source-code { max-height: 160px; font-size: 11px; }
+}
+/* A checklist row's box IS its marker; the dot column stays for alignment and shows nothing. */
+.gemboss-narr-dot-quiet { visibility: hidden; }
+
+/* ═══ @gemboss/ui src/chat-composer.css ═══ */
+/*
+ * The chat COMPOSER — @gemboss/ui (moved from apps/admin/src/components/chat/chat-composer.css, 02/10/2026).
+ *
+ * The toolbar row under the text box (chips lead, tools, status, the one action pinned right), the one-row
+ * layout when there are no chips, the engine picker's layout and the Stop button. A second surface needs the
+ * toolbar — gemcare's assistant composer is a text box and a send button, i.e. the one-row case — and a copy
+ * would be a second owner. The box itself (`form.gemboss-ec-input`, its textarea and send button) is in chat.css.
+ *
+ * A SEPARATE file from chat.css on purpose, as it was a separate file in the admin: chat.css rides the shell's
+ * first load on every screen, while this sheet follows the chat chunk — the admin imports it from ChatComposer
+ * and EnginePicker, not from the layout (the shell sat at 239.1 / 240 KB brotli when this moved). Other surfaces
+ * get it inside gemboss-ui.css. Rules and their order are unchanged.
+ *
+ * Every selector here names a composer-only class (chiplabel · chipmark · chipsub · enginepick · enginepick-btn ·
+ * stop · toolbar · toolbar-lead · toolbar-tools), so a rule only matches while a composer is on screen.
+ */
+
+/* The toolbar row: chips on the left, then status, then the one action button pinned right.
+   `align-items: center` — the old row was `flex-end`, so 28px chips sat on the BOTTOM edge of a 44px
+   button and their centres ran 8px below its centre. Measured at 1366: chips cy 819, send cy 811.
+   The lead group is the only thing that shrinks. Send is `flex: none` and the chips inside the lead
+   carry `min-width: 0`, so a narrow composer ellipsises a label instead of pushing send off the row. */
+.gemboss-ec-toolbar { flex: 1 0 100%; display: flex; align-items: center; gap: 4px; min-width: 0; }
+.gemboss-ec-toolbar-lead { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
+/* The lead GROWS, and that is what pins status + action to the right edge. With nothing in it (a
+   browser tab has no engine picker, a driver without work mode has no select) it is removed, and
+   whatever follows takes the auto margin instead. */
+.gemboss-ec-toolbar-lead:empty { display: none; }
+.gemboss-ec-toolbar-lead:empty + * { margin-left: auto; }
+/* TOOLS ARE NOT CHIPS. The 📎 lives here, never in the lead: the composer gate reads `leading` as the
+   chip strip twice over — `edge` wants the first chip's text flush with the typed text, and `oneRow`
+   only runs when the lead is EMPTY. A button parked in the lead pushed the chips 47px right AND left
+   `oneRow` unable to fail at all; the gate's own negative control said so out loud
+   ("MÙ với oneRow — đối chứng ĐÃ QUAN SÁT ĐƯỢC và vẫn xanh") once the breakage stopped registering.
+   `flex: none` so it never steals the shrink budget the lead needs to ellipsise a long chip label. */
+.gemboss-ec-toolbar-tools { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; }
+.gemboss-ec-toolbar-tools:empty { display: none; }
+/* NO CHIPS ⇒ ONE ROW. Product Studio has nothing in its lead, and it still spent a whole 44px row on
+   a lone send button beside empty space — 99-120px tall for a one-line box. The text box shares the
+   row now and send sits at its bottom edge, where a growing message keeps it. */
+.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) { flex-wrap: nowrap; align-items: flex-end; }
+.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) > textarea { flex: 1 1 0; }
+.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) > .gemboss-ec-toolbar { flex: 0 0 auto; }
+/* The engine picker is a `gemboss-ec-chipctl` like the select beside it — its colour, weight, padding
+   and hover all come from that one rule. What is left here is layout: Popover wraps the activator in an
+   element of its own, and the chip can only shrink if every box between it and the toolbar can.
+   DESCENDANT, not child, for that reason — `>` matched nothing when the button sat inside Polaris'
+   wrapper, measured, after the first attempt left it unstyled. */
+.gemboss-ec-enginepick { flex: 0 3 auto; min-width: 0; display: inline-flex; }
+.gemboss-ec-enginepick > * { min-width: 0; max-width: 100%; display: flex; }
+.gemboss-ec-enginepick button {
+  min-width: 0; max-width: 100%;
+  /* The same caret the work-mode select draws, at the same inset, so the two chips read as one type. */
+  padding-right: 24px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 7px center;
+}
+.gemboss-ec-chiplabel { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gemboss-ec-chipmark { display: none; }
+.gemboss-ec-chipmark .gemboss-engine-mark { display: block; width: 16px; height: 16px; margin: 2px 0; }
+/* The steps ChatComposer measured its way down to (data-density on the form). The ellipsis above stays
+   as the floor for an engine with no mark, never as the plan. */
+.gemboss-ec-input:not([data-density="full"]) .gemboss-ec-chipsub { display: none; }
+.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chiplabel { display: none; }
+.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chipmark { display: block; }
+/* A mark does not ellipsise, so once the chip IS the mark it holds its width — shrunk further it slid
+   under the mode chip beside it. The overflow that leaves is what tells ChatComposer to step on. */
+.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick:has(.has-mark) { flex-shrink: 0; }
+/* Open: it is showing a popover, so it stops being quiet. */
+.gemboss-ec-enginepick button[aria-expanded="true"] {
+  color: var(--gemboss-text); background-color: var(--gemboss-hover, rgba(0,0,0,0.05));
+}
+@media (pointer: coarse) {
+  /* SCOPED, and that word is load-bearing — this line was DEAD as `.gemboss-ec-stop`.
+     A media query adds no specificity, so the unscoped rule for the same class, declared ~1800 lines
+     LATER at its mouse size, beat this one on source order alone. Measured
+     2026-09-09 in a real coarse-pointer context: `matchMedia('(pointer: coarse)').matches === true`
+     and the computed width unchanged at its mouse size. Every phone got a Stop button ten pixels
+     under the target, while the rule meant to
+     fix that sat here reading as done — and the source test beside this block could not see it,
+     because a name being PRESENT is not the same fact as a rule WINNING.
+     `.gemboss-ec-input` is the same idiom the attach button above already uses for the same reason. */
+  .gemboss-ec-input .gemboss-ec-stop { width: 44px; height: 44px; min-width: 44px; }
+  /* SCOPED for the reason above: this control's own look is declared later, in the shell sheet. */
+  .gemboss-ec-input .gemboss-ec-stop-send { min-height: 44px; }
+  .gemboss-ec-enginepick button { min-height: 44px; }
+}
+/* Sized like the send button it replaces, so the composer does not reflow when a turn starts —
+ * a control that moves under the cursor is a control people misclick. So it is THE SAME CIRCLE AS SEND
+ * — same 44px, same 50% radius, only the colour and the glyph change. It used to be a 32px red
+ * rounded square beside a 44px round send: two shapes, two sizes, one slot. */
+.gemboss-ec-stop {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  border: none;
+  border-radius: 50%;
+  background: var(--gemboss-critical, #d72c0d);
+  color: #fff;
+  cursor: pointer;
 }
+.gemboss-ec-stop svg { width: 12px; height: 12px; fill: currentColor; }
+.gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
+.gemboss-ec-stop:hover { filter: brightness(1.08); }
+.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }