@gemboss/ui 0.1.0

package/gemboss-ui.css

@@ -0,0 +1,2889 @@
+/*
+ * 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: cf59218eb5d076a1585551bfb3eca691a812c31b
+ * sources sha256: 89ec556bd16fd74dc4733abb73c0550383b1efb0cb7b6c5bb33d86f98d35bcab
+ * 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)
+ * Polaris --p-* references are resolved to their fallbacks; declarations with no fallback are dropped
+ *   (0 dropped).
+ */
+/* ═══ globals.css — allow-listed reset ═══ */
+* {
+  box-sizing: border-box;
+}
+
+/* ═══ gemboss-tokens.css ═══ */
+/* The design tokens, and ONLY the tokens.
+ *
+ * Split out of gemboss-shell.css because that file is 203 KB of dashboard component CSS and it was
+ * loaded by the ROOT layout — so /try and /login, which render no .gemboss-* component at all,
+ * blocked their first paint on it. Tokens are 6 KB of the 203; /login uses var(--gemboss-primary)
+ * and the rewritten /try uses the palette, so everyone needs these and almost nobody needs the rest.
+ *
+ * Order matters and is preserved: the second :root block below redefines --gemboss-primary and
+ * friends from the first, exactly as it did inside the shell file. The Polaris --p-* overrides stay
+ * in gemboss-shell.css, next to the Polaris stylesheet they override.
+ */
+:root {
+  --gemboss-primary: #1b1c1e;        /* near-black — primary action (buttons / CTA) */
+  --gemboss-primary-dark: #000000;   /* black hover */
+  --gemboss-primary-soft: #f2f3f5;   /* neutral tint */
+  --gemboss-accent: #5661f5;         /* iris — brand accent, điểm nhấn only (links / focus / active) */
+  --gemboss-accent-strong: #3a44de;  /* iris strong (hover / text) */
+  --gemboss-accent-soft: #eef0fe;    /* iris tint */
+  --gemboss-text-strong: #1b1c1e;    /* neutral near-black */
+  --gemboss-text: #1b1c1e;
+  --gemboss-text-muted: #686b71;     /* neutral gray */
+  --gemboss-surface: #ffffff;
+  --gemboss-canvas: #ffffff;         /* white page background (was #f6f7f9 gray) — body + Polaris --p-color-bg */
+  --gemboss-preview-canvas: #eceef1; /* neutral sunken backdrop behind a live preview/widget stage */
+  --gemboss-rail-bg: #ffffff;        /* white sidebar (was #f4f5f7) — separated by border-right divider */
+  --gemboss-panel-bg: #ffffff;       /* white secondary panels (was #f2f4f6) */
+  --gemboss-divider: #e5e7ea;        /* neutral hairline border */
+
+  /* Chiều cao THẬT của lời mời desktop, do DesktopInvite.tsx ghi đè lúc chạy bằng ResizeObserver
+     (chip ~44px, thẻ mở ~328px) và GỠ HẲN khi lời mời không hiện. Khai ở đây bằng 0px vì hai lẽ:
+     cổng `export-ui-css` đòi mọi token phải được khai (nó bắt được đúng thiếu sót này), và một
+     `var()` không có chủ sở hữu là thứ không ai tra ngược được. Trang dùng nó để chừa chỗ ở cuối
+     tài liệu — xem `.gemboss-platform-main { padding-bottom: … }` trong gemboss-shell.css. */
+  --gemboss-invite-h: 0px;
+  --gemboss-divider-soft: #edeff2;
+  --gemboss-hover: #eceef2;
+  --gemboss-active-bg: #f0f1f4;      /* neutral selected (Polaris-style) */
+  --gemboss-active-fg: #1b1c1e;      /* near-black selected text */
+  --gemboss-danger: #d72c0d;
+  --gemboss-danger-strong: #b42318;
+  --gemboss-danger-soft: #fff0e9;
+  --gemboss-danger-border: #f5c9bc;
+  --gemboss-success: #007f5f;
+  --gemboss-success-strong: #0a6a4c;
+  --gemboss-success-soft: #e3f1df;
+  --gemboss-success-border: #b7dfcd;
+  --gemboss-warning: #9a6700;
+  --gemboss-warning-soft: #fff8e0;
+  --gemboss-warning-border: #f5d569;
+  /* Corner-radius scale — Polaris border-radius steps (2/4/6/8/12/16/20 + pill). The old
+     long tail of one-off radii (5/7/9/10/11/14/18px) was consolidated onto these steps
+     (round-half-up on ties: 5→6, 7→8, 9→8, 10→12, 11→12, 14→16, 18→20) — the
+     check-typography guard now keeps radii on-scale. Prefer a token below; raw px must
+     still land on a step. */
+  --gemboss-radius-xs: 4px;
+  --gemboss-radius-sm: 6px;
+  --gemboss-radius-md: 8px;
+  --gemboss-radius-lg: 12px;
+  --gemboss-radius-xl: 16px;
+  --gemboss-radius-2xl: 20px;
+  --gemboss-radius-full: 999px;
+  /* ── Elevation scale (design-language §G) ────────────────────────────────────
+     THREE layers, one shadow each — was ~25 bespoke box-shadows (0 6/8/12/16/28px
+     at a dozen opacities + mixed shadow colours) = no elevation system. Warm-neutral
+     shadow (rgba 31,30,29) to match the ivory canvas. Use a token, never a hand-rolled
+     drop shadow. (Directional edge shadows, coloured glows, focus rings, and insets are
+     NOT elevation — they stay literal.) */
+  --gemboss-shadow-resting: 0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06); /* cards at rest on canvas */
+  --gemboss-shadow-raised: 0 4px 16px rgba(31, 30, 29, 0.10);   /* dropdowns · popovers · hovercards */
+  --gemboss-shadow-overlay: 0 16px 48px rgba(31, 30, 29, 0.18); /* modals · sheets · large floating panels */
+  /* Interaction transition speeds — fast = hover/focus on buttons & toggles, base = the
+     general default. One-off animation timings (toast/enter, 240–420ms) stay literal. */
+  --gemboss-transition-fast: 0.12s;
+  --gemboss-transition-base: 0.15s;
+  /* ── Type scale ─────────────────────────────────────────────────────────────
+     ONE font-size scale for all custom (non-Polaris-<Text>) chrome. Before this,
+     gemboss-shell.css carried ~20 ad-hoc sizes (9px → 40px, incl. fractional 10.5 /
+     11.5 / 12.5 / 13.5) — every component hand-nudged its own, drifting smaller
+     and reading as "the font keeps shrinking". New rule: pick a step here, never a
+     raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
+     micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
+     step up from Polaris bodySm(13) which the app had been leaning on for prose. */
+  --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
+  --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
+  --gemboss-fs-body: 14px;    /* default body / reading text */
+  --gemboss-fs-body-lg: 16px; /* primary descriptions, empty-state prose */
+  --gemboss-fs-h3: 16px;      /* card titles */
+  --gemboss-fs-h2: 20px;      /* zone / section headers */
+  --gemboss-fs-h1: 24px;      /* page titles */
+  --gemboss-fs-display: 30px; /* hero / banner display */
+  /* Headings use the same clean sans as Polaris body (Shopify-admin feel) rather
+   * than a serif display face — a dashboard reads calmer/more neutral that way.
+   * Name kept as `--gemboss-serif` to avoid churning ~10 call sites. */
+  /* -- Khung nen TOI, dung chung cho hai be mat toi --------------------------
+     `/admin` khai `--adm-*`, `/intel` khai `--in-*`, va bay gia tri trung tinh cua chung trung
+     nhau TUNG BYTE duoi hai bo ten khac nhau -- do 10/09/2026:
+
+       #0a0a0c  adm-bg        in-bg        #2a2a31  adm-divider    in-border
+       #0e0e11  adm-rail      in-bg2       #ededf0  adm-text       in-text
+       #16161a  adm-surface   in-panel     #9a9aa4  adm-muted      in-muted
+       #1e1e24  adm-surface-2 in-panel2
+
+     Do la mot ban sao, khong phai mot bien the: hai console cung mot nen, va lam nen sang them
+     mot bac thi phai nho sua o hai cho mang ten khac nhau. Bay gia tri nay song o day; `--adm-*`
+     va `--in-*` tro thanh BI DANH tro vao, nen 595 cho dang goi chung khong phai doi mot chu.
+
+     KHONG gop phan con lai: `--in-panel3/-border2/-faint` la bac rieng intel that su can, va bon
+     mau ngu nghia cua no (xanh - ho phach - san ho - tim) la ngon ngu rieng cua be mat do. Gop
+     nen, giu diem nhan. */
+  --gemboss-dark-bg: #0a0a0c;
+  --gemboss-dark-rail: #0e0e11;
+  --gemboss-dark-surface: #16161a;
+  --gemboss-dark-surface-2: #1e1e24;
+  --gemboss-dark-divider: #2a2a31;
+  --gemboss-dark-text: #ededf0;
+  --gemboss-dark-muted: #9a9aa4;
+  --gemboss-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  /* The BODY font, for surfaces without Polaris. The admin never reads it: its body text comes from
+     Polaris's `html, body, button` rule (--p-font-family-sans, @shopify/polaris 13.9.5). The fallback
+     below is that stack character for character, and export-ui-css.mjs ships the fallback, so a
+     surface on gemboss-ui.css picks the admin's face on the same machine (Inter is not loaded as a web
+     font anywhere; it renders where installed). Painted by packages/ui/src/app-shell.css; re-theme by
+     redefining the token. Added 28/09/2026: before it, those surfaces rendered in default serif. */
+  --gemboss-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  /* COMPONENT colours that used to be literals, so a surface with a dark theme re-themes them by
+     redefining the token instead of overriding the rule (29/09/2026). Each value is the literal it
+     replaced, so the admin paints exactly what it painted before. Measured reason: gempress's dark
+     theme had to override `.gemboss-account-chip` (initials #303633 on #16161a all but vanished)
+     and keep its own copy of the field and the nav count rather than use the package's.
+     - field: the fallbacks of gemboss-field.css. The admin still reads Polaris's --p-* first;
+       export-ui-css.mjs resolves --p-* away, so on every other surface these tokens are the look.
+     - chip: `.gemboss-account-chip` in apps/admin/src/app/gemboss-shell.css.
+     - on-primary: text on a --gemboss-primary fill (the active `.gnav-count` pill). */
+  --gemboss-field-bg: #fdfdfd;
+  --gemboss-field-bg-hover: #fafafa;
+  --gemboss-field-ink: #303030;
+  --gemboss-field-placeholder: #616161;
+  --gemboss-field-line: #8a8a8a;
+  --gemboss-field-line-hover: #616161;
+  --gemboss-field-line-active: #1a1a1a;
+  --gemboss-chip-ink: #303633;
+  --gemboss-chip-line: #cfd6ce;
+  --gemboss-chip-line-hover: #aab4ad;
+  --gemboss-chip-bg-hover: #f6f7f5;
+  --gemboss-on-primary: #ffffff;
+  /* The shell's own surfaces (29/09/2026), for the same reason as the slots above: a dark surface
+     (gempress) had to override `.gemboss-platform-topbar`, `.icon-nav` and `.gnav-item:hover` by rule.
+     Defaults are exactly what the shell painted. */
+  --gemboss-topbar-bg: rgba(255, 255, 255, 0.98);
+  --gemboss-nav-bg: var(--gemboss-surface);
+  --gemboss-nav-hover: rgba(20, 19, 18, 0.045);
+}
+
+:root {
+  --gemboss-primary: #1b1c1e;
+  --gemboss-primary-dark: #000000;
+  --gemboss-primary-soft: #f2f3f5;
+  --gemboss-accent: #5661f5;
+  --gemboss-accent-strong: #3a44de;
+  --gemboss-accent-soft: #eef0fe;
+  --gemboss-active-bg: #f0f1f4;      /* neutral selected (Polaris-style) */
+  --gemboss-active-fg: #1b1c1e;      /* near-black selected text */
+  --gemboss-app-bg: #ffffff; /* clean white main content (was #f6f7f9 gray) — cards keep separation via border/resting-shadow */
+}
+
+/* ═══ ui.css ═══ */
+/* ════════════════════════════════════════════════════════════════════════════
+   Tool/App UI kit — the shared primitive layer for the internal operator surfaces
+   (admin console, seller app chrome, theme-editor). ONE semantic token spine
+   (`--ui-*`) that every primitive reads, plus the primitive CSS itself.
+
+   Why this exists: buttons/cards/badges were forked into 4–8 hand-rolled class
+   families per surface, each re-deriving color/spacing/centering — so the same
+   primitive drifted (e.g. a link-button whose text wasn't vertically centered).
+   See docs/frontend-shared-system-plan.md.
+
+   The `--ui-*` layer is SEMANTIC and resolved per surface: components only read
+   `--ui-*`; each surface maps those to its own tokens (admin → `--adm-*` below),
+   so one <Button> looks native everywhere without hard-coding a palette.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+:root {
+  --ui-surface: #ffffff;
+  /* --ui-* is a SEMANTIC layer resolved PER SURFACE — it references each surface's own base tokens
+     rather than guessing from the OS. The default (`:root`) maps onto the seller app's warm-ivory
+     `--gemboss-*` set; `.gemboss-admin-shell` below remaps onto the dark `--adm-*` set. Literal fallbacks
+     keep the kit usable if a surface's base stylesheet isn't loaded. This is the "unify under --ui-*"
+     backbone — one token spine, no duplicated palette. */
+  --ui-surface: var(--gemboss-surface, #ffffff);
+  --ui-surface-2: var(--gemboss-hover, #eceef2);
+  --ui-text: var(--gemboss-text, #1b1c1e);
+  --ui-text-muted: var(--gemboss-text-muted, #686b71);
+  --ui-border: var(--gemboss-divider, #e5e7ea);
+  --ui-accent: var(--gemboss-primary, #1b1c1e);
+  --ui-accent-hover: var(--gemboss-primary-dark, #000000);
+  --ui-accent-fg: #ffffff;
+  --ui-accent-soft: var(--gemboss-active-bg, #f0f1f4);   /* tinted bg for a selected/active state */
+  --ui-accent-strong: var(--gemboss-active-fg, #1b1c1e); /* readable accent text ON --ui-accent-soft */
+  --ui-text-strong: var(--gemboss-text-strong, #1b1c1e);
+  --ui-focus: var(--gemboss-primary, #1b1c1e);
+  --ui-radius-sm: 6px;
+  --ui-radius-md: 8px;
+  --ui-radius-lg: 12px;
+  --ui-space-1: 4px;
+  --ui-space-2: 8px;
+  --ui-space-3: 12px;
+  --ui-space-4: 16px;
+  --ui-control-h: 34px;
+  --ui-fs-body: 13px;
+  --ui-fs-caption: 12px;
+  /* Content column width for the seller app shell — ONE source of truth for every wide surface
+     right of the 240px sidebar (bare Page, .gemboss-w-dashboard, .gemboss-w-gallery, and the
+     navigation skeleton), so they cannot drift apart again. The /admin console is a SEPARATE
+     surface and still sets its own 1200px in admin/admin-shell.css; it does not read this token.
+     900px. Polaris' own cap is 998px — 41.375rem primary column + 20rem secondary + 1rem gutter,
+     read out of the installed @shopify/polaris stylesheet — and this sits deliberately BELOW it.
+
+     The reason is a measurement, not a preference about Shopify. The previous value was 1080/1040,
+     and moving to Polaris' 998 was the obvious "correct" answer, so that shipped first (#2250). Then
+     it turned out to be invisible: 1040 → 998 is 42px total, which is 21px of extra gutter per side.
+     Screenshotted side by side at 1440 on the same page seconds apart, the two rows were
+     indistinguishable, and Chris — who asked for this — could not see any change at all.
+
+     A cap only does its job if the breathing room it buys is legible. Measured gutters on
+     .Polaris-Page at 1440 beside the 240px sidebar:
+
+       1040px → 75 / 86      (before)
+        998px → 96 / 107     Polaris' number; +21px a side, not perceivable
+        960px → 115 / 126
+        900px → 145 / 156    +70px a side, roughly double the old gutter
+
+     900 is the first value where the column visibly stops leaning on the rail. The one cost, and it
+     was measured rather than guessed: card descriptions gain a line (Cart drawer 2 → 3). The 3-up
+     grid holds, and no width from 320 to 1920 overflows.
+
+     Still fixed px, no percentage, for the reason Polaris uses px: a % cap grows the reading measure
+     with the monitor (80% of 2560 is 2048px of line length). Responsiveness belongs to the padding
+     and to the secondary column dropping, not to the cap.
+
+     .gemboss-w-form stays 662px — that IS `.Polaris-Page--narrowWidth`, the primary column alone,
+     and a form is the one surface where Polaris' measure is about the input, not the page. */
+  --ui-content-max: 900px;
+}
+
+/* Admin console bridge: the black chrome defines `--adm-*`; remap `--ui-*` onto them so every
+   <Button>/<Select>/<Tag>/<Modal> inside .gemboss-admin-shell adopts the dark palette automatically. */
+.gemboss-admin-shell {
+  --ui-surface: var(--adm-surface);
+  --ui-surface-2: var(--adm-surface-2);
+  --ui-text: var(--adm-text);
+  --ui-text-muted: var(--adm-muted);
+  --ui-border: var(--adm-divider);
+  --ui-accent: var(--adm-accent);
+  --ui-accent-hover: var(--gemboss-primary-dark, #000000);
+  --ui-accent-fg: #ffffff;
+  --ui-accent-soft: var(--adm-accent-soft);
+  --ui-accent-strong: var(--adm-accent-fg);
+  --ui-text-strong: var(--adm-text-strong);
+  --ui-focus: var(--adm-accent);
+}
+
+/* ── Button ──────────────────────────────────────────────────────────────────
+   inline-flex + center so a <button> and an <a> render identically (anchors ignore
+   `height` as inline elements — the root cause of the misaligned link-buttons). */
+.ui-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
+  height: var(--ui-control-h); padding: 0 var(--ui-space-4); box-sizing: border-box;
+  line-height: 1; white-space: nowrap; vertical-align: middle;
+  border-radius: var(--ui-radius-md); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 550;
+  cursor: pointer; text-decoration: none; user-select: none;
+  border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text);
+  transition: background .12s ease, border-color .12s ease;
+}
+.ui-btn:hover { background: var(--ui-surface-2); text-decoration: none; }
+.ui-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+.ui-btn--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
+.ui-btn--primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
+.ui-btn--ghost { border-color: transparent; background: transparent; color: var(--ui-text-muted); }
+.ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.ui-btn--sm { height: 28px; padding: 0 var(--ui-space-3); font-size: var(--ui-fs-caption); }
+
+/* ── Card ──────────────────────────────────────────────────────────────────── */
+.ui-card {
+  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
+  padding: var(--ui-space-4); color: var(--ui-text);
+}
+.ui-card__title { font-size: 14px; font-weight: 600; margin: 0 0 var(--ui-space-2); }
+
+/* ── Select ──────────────────────────────────────────────────────────────────
+   Native <select> reskinned; custom caret as an inline SVG data-URI (caret color
+   uses the muted token via %-encoding fallback).
+   Its BOX is the text field's (29/09/2026, Chris): same --gemboss-field-* tokens for ground, line and
+   ink, same hover, same focus ring as `.gemboss-field`. Before, a grey --ui-surface-2 select stood next
+   to a bordered white field in the same form (gempress editor, admin forms), and `:focus` removed the
+   outline and only recoloured the border, so a keyboard user saw almost nothing. Height stays 36px
+   (--ui-control-h), because a select sits in toolbars beside 36px `.ui-btn`s. */
+.ui-select {
+  height: 36px; padding: 0 32px 0 12px; max-width: 100%;
+  background: var(--gemboss-field-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;
+  border: 1px solid var(--gemboss-field-line); border-radius: var(--ui-radius-md);
+  color: var(--gemboss-field-ink); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500;
+  appearance: none; -webkit-appearance: none; cursor: pointer;
+}
+.ui-select:hover:not(:disabled) {
+  border-color: var(--gemboss-field-line-hover);
+  background-color: var(--gemboss-field-bg-hover);
+}
+.ui-select:focus { outline: none; }
+.ui-select:focus-visible {
+  outline: 2px solid #005bd3; outline-offset: 1px;
+  border-color: var(--gemboss-field-line-active);
+}
+.ui-select:disabled { opacity: .5; cursor: not-allowed; }
+.ui-select--slim { height: 30px; font-size: var(--ui-fs-caption); }
+
+/* ── Tag / Chip ──────────────────────────────────────────────────────────────
+   Small inline labels. `solid` = filled muted pill (was gemboss-vault-tag); `chip` =
+   bordered mono token (was gemboss-vault-chip). `accent` tone for the highlighted state. */
+.ui-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
+  padding: 1px 6px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
+}
+.ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
+.ui-tag--chip {
+  text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500;
+  padding: 2px 8px; background: transparent; border: 1px solid var(--ui-border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.ui-tag--chip.ui-tag--accent { color: var(--adm-accent-fg, var(--ui-accent)); border-color: var(--ui-accent); background: transparent; }
+
+/* ── Badge ────────────────────────────────────────────────────────────────────
+   Uppercase mono pill for a status/label (was gemboss-admin-storage-badge). */
+.ui-badge {
+  display: inline-flex; align-items: center;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
+  padding: 1px 8px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* ── Modal ────────────────────────────────────────────────────────────────────
+   Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
+   scope and would render light. Kept in-tree so --ui-* resolves to the surface. */
+.ui-overlay {
+  position: fixed; inset: 0; z-index: 500;
+  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
+  display: grid; place-items: center; padding: 20px;
+}
+.ui-modal {
+  width: min(460px, 100%);
+  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px;
+  box-shadow: var(--gemboss-shadow-overlay, 0 20px 60px rgba(0, 0, 0, 0.4)); overflow: hidden;
+}
+/* Head = title + the one close button every modal used to draw for itself. */
+.ui-modal__head {
+  display: flex; align-items: flex-start; gap: 16px;
+  padding: 16px 20px; border-bottom: 1px solid var(--ui-border);
+  font-size: 15px; font-weight: 620; color: var(--ui-text);
+}
+.ui-modal__title { min-width: 0; flex: 1 1 auto; }
+.ui-modal__close {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px; margin: -8px -8px -8px 0;   /* a 44px target that does not grow the head */
+  border: 0; border-radius: var(--ui-radius-md, 8px); background: transparent;
+  color: var(--ui-text-muted); cursor: pointer;
+}
+.ui-modal__close svg { width: 20px; height: 20px; }
+.ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.ui-modal__close:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
+
+/* `size="lg"` — the screen-shaped dialog. Only the HOOK lives here: this sheet is imported by the
+   root layout, so every rule in it is paid on every screen, and the geometry of a dialog with one
+   consumer belongs in that consumer's chunk (see SettingsDialog.module.css). */
+.ui-modal--lg { position: relative; }
+
+.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;
+}
+.ui-textarea:focus { border-color: var(--ui-accent); }
+
+/* ── Segmented control ────────────────────────────────────────────────────────
+   Grouped toggle: icon squares (.ui-seg button) or text tabs (.is-text). The
+   selected segment uses the accent-soft state. */
+.ui-seg { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); overflow: hidden; }
+.ui-seg button {
+  display: inline-grid; place-items: center; width: 36px; height: 36px;
+  border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
+}
+.ui-seg button.is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
+.ui-seg button + button { border-left: 1px solid var(--ui-border); }
+.ui-seg button:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.ui-seg button.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+.ui-seg svg { width: 16px; height: 16px; fill: currentColor; }
+
+/* ── Stat chip ────────────────────────────────────────────────────────────────
+   Count-led pill; clickable ones double as filters (active = accent-soft). */
+.ui-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: 24px; }
+.ui-stat {
+  display: inline-flex; align-items: center; gap: var(--ui-space-2);
+  padding: 6px 12px; border-radius: 999px; font-family: inherit;
+  background: var(--ui-surface); border: 1px solid var(--ui-border);
+  font-size: var(--ui-fs-caption); color: var(--ui-text-muted);
+}
+.ui-stat b { color: var(--ui-text-strong); font-weight: 650; }
+.ui-stat.is-clickable { cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease; }
+.ui-stat.is-clickable:hover { border-color: var(--ui-text-muted); background: var(--ui-surface-2); }
+.ui-stat.is-clickable.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+.ui-stat.is-clickable.active b { color: var(--ui-accent-strong); }
+
+/* ── Toast / notification bar ─────────────────────────────────────────────────
+   App-wide "done / failed" pill for async actions (delete/duplicate/publish…).
+   Polaris-style: dark pill, bottom-center, error variant in critical red. Lives
+   in <ToastProvider> (components/ui/Toast.tsx), portaled to <body>. */
+.gemboss-toast-viewport {
+  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
+  z-index: 2147483000; /* above every overlay/modal/popup */
+  display: flex; flex-direction: column; align-items: center; gap: 12px;
+  width: max-content; max-width: min(560px, calc(100vw - 32px)); pointer-events: none;
+}
+.gemboss-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: 12px;
+  min-width: 220px; max-width: 100%; padding: 12px 12px 12px 16px;
+  background: var(--ui-text-strong, #1a1917); color: #fff; border-radius: 12px;
+  font-size: var(--ui-fs-body, 13px); line-height: 1.4; font-weight: 500;
+  box-shadow: var(--gemboss-shadow-overlay, 0 8px 28px rgba(0, 0, 0, 0.24));
+  animation: gemboss-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.gemboss-toast.is-error { background: var(--gemboss-danger, #d72c0d); }
+.gemboss-toast-text { flex: 1 1 auto; min-width: 0; }
+.gemboss-toast-action {
+  flex: 0 0 auto; border: 0; background: transparent; color: #fff; cursor: pointer;
+  padding: 4px 8px; border-radius: 8px; font: inherit; font-weight: 650;
+  text-decoration: underline; text-underline-offset: 2px;
+  transition: background 0.14s ease;
+}
+.gemboss-toast-action:hover { background: rgba(255, 255, 255, 0.16); }
+.gemboss-toast-dismiss {
+  flex: 0 0 auto; display: inline-grid; place-items: center;
+  width: 24px; height: 24px; border: 0; border-radius: 8px; cursor: pointer;
+  background: rgba(255, 255, 255, 0.12); color: #fff;
+  transition: background 0.14s ease;
+}
+.gemboss-toast-dismiss:hover { background: rgba(255, 255, 255, 0.26); }
+.gemboss-toast-action:focus-visible,
+.gemboss-toast-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+@keyframes gemboss-toast-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) { .gemboss-toast { animation: none; } }
+
+/* ── The kit's controls under a thumb ─────────────────────────────────────────────────────────
+ * Measured by hit test on /admin/{theme-kernel,media,style-packs} at 390 and 1366 with a coarse
+ * pointer: segmented buttons 36x36, selects 30-36 tall, clickable stat tiles 29, the asset row's
+ * note button 30x30. §9.1 puts every one of them in the CONTROL tier (44px).
+ *
+ * HERE rather than in each surface's stylesheet, because this is the shared primitive layer — the
+ * same reason the kit exists at all. The admin console and the seller app both read it.
+ *
+ * `pointer: coarse` only: a mouse keeps the density these surfaces were designed at. Growing a box
+ * for every pointer is what #2147 did to a working width.
+ */
+@media (pointer: coarse) {
+  /* NOT `.ui-textarea`: it already declares `min-height: 96px` earlier in this file, so adding it to
+     a 44px group LOWERS it — same specificity, later line. The note dialog's box would have gone from
+     96 to ~58 on every touch device, inside a block whose whole point is bigger targets.
+     NOT `.ui-btn--sm` either: `min-height` always beats `height`, so a 44px floor voids the compact
+     variant — including four of them on the seller's own /app/settings/store. A density variant is a
+     decision, not an oversight; it gets its own measurement pass or none. */
+  .ui-btn:not(.ui-btn--sm),
+  .ui-stat.is-clickable,
+  .ui-seg button { min-height: 44px; }
+  /* A clickable stat whose label is one short token ("7d" on /admin/gem-intelligence) measured 40x44
+     in the 13/09/2026 sweep: the height floor held, the width did not. */
+  .ui-stat.is-clickable { min-width: 44px; justify-content: center; }
+  /* `--slim` is a second single class and lands later in this file, so it would win on order over a
+     bare `.ui-select`. Doubled here to decide it on specificity instead. */
+  .ui-select.ui-select,
+  .ui-select--slim.ui-select--slim { min-height: 44px; }
+  /* The icon-only segment is 36 WIDE as well — a target is an area. */
+  .ui-seg button { min-width: 44px; }
+}
+
+/* ── Skeleton ─────────────────────────────────────────────────────────────────
+   Vạch xám giữ chỗ cho nội dung chưa về. Ánh sáng chạy qua là gợi ý "đang chờ", không phải trang
+   trí — nên nó tắt hẳn với `prefers-reduced-motion`, giữ nguyên vạch tĩnh. */
+.ui-skeleton { display: flex; flex-direction: column; gap: var(--ui-space-2); }
+.ui-skeleton__line {
+  display: block; height: 12px; border-radius: 6px;
+  background: linear-gradient(90deg, var(--ui-surface-2) 25%, var(--ui-border) 37%, var(--ui-surface-2) 63%);
+  background-size: 400% 100%;
+  animation: ui-skeleton-sheen 1.4s ease-in-out infinite;
+}
+@keyframes ui-skeleton-sheen { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
+@media (prefers-reduced-motion: reduce) {
+  .ui-skeleton__line { animation: none; background: var(--ui-surface-2); }
+}
+/* Nhãn cho trình đọc màn hình — thứ `<p>Loading…</p>` cũ vốn có và một khối hình thuần sẽ mất. */
+.ui-sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+
+}
+
+/* ── Tabs · Table · Empty state ───────────────────────────────────────────────
+   Plain-CSS primitives for surfaces that are NOT React (gemcare's vanilla dashboard reads this
+   file through `npm run export:ui-css`). The React app has Polaris <Tabs>/<DataTable>/<EmptyState>
+   for these; nothing in apps/admin uses the classes below, and they restyle no existing component.
+   Only `--ui-*` / `--gemboss-*` tokens, so the dark `.gemboss-admin-shell` bridge applies too.
+
+   Tabs: `<div class="ui-tabs" role="tablist"><button role="tab" aria-selected="true">…` — the
+   selected state IS `aria-selected`, so what a screen reader announces and what is painted cannot
+   disagree. 44px under EVERY pointer (§9.1 control tier), not only coarse: tabs sit 4px apart, and
+   that gap is only acceptable between targets that are already 44px. */
+.ui-tabs {
+  display: flex; gap: var(--ui-space-1); border-bottom: 1px solid var(--ui-border);
+  overflow-x: auto; scrollbar-width: none;
+}
+.ui-tabs > button {
+  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ui-space-2);
+  min-height: 44px; padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
+  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
+  font-family: inherit; font-size: var(--gemboss-fs-body); font-weight: 500; white-space: nowrap;
+  color: var(--ui-text-muted);
+  transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
+}
+.ui-tabs > button:hover { color: var(--ui-text); background: var(--ui-surface-2); }
+.ui-tabs > button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); font-weight: 600; }
+.ui-tabs > button[aria-selected="true"]::after {
+  content: ""; position: absolute; left: var(--ui-space-3); right: var(--ui-space-3); bottom: 0;
+  height: 2px; border-radius: var(--gemboss-radius-full); background: var(--ui-accent);
+}
+.ui-tabs > button:disabled { opacity: .5; cursor: not-allowed; }
+
+/* Table: wrap it — `<div class="ui-table-wrap"><table class="ui-table">` — so a wide table scrolls
+   inside its card instead of pushing the page sideways at 320px. Numeric cells take `.is-num`:
+   right-aligned tabular figures, so a column of numbers lines up digit for digit. */
+.ui-table-wrap {
+  overflow-x: auto; max-width: 100%;
+  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
+}
+.ui-table { width: 100%; border-collapse: collapse; font-size: var(--gemboss-fs-body); color: var(--ui-text); }
+.ui-table th,
+.ui-table td {
+  padding: var(--ui-space-2) var(--ui-space-3); text-align: left; vertical-align: middle;
+  border-bottom: 1px solid var(--ui-border);
+}
+.ui-table th {
+  font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-text-muted); white-space: nowrap;
+}
+.ui-table tbody tr:last-child > td { border-bottom: 0; }
+.ui-table tbody tr:hover { background: var(--ui-surface-2); }
+.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* Empty state: `<div class="ui-empty"><p class="ui-empty__title">…</p><p class="ui-empty__body">…</p>
+   <button class="ui-btn">…</button></div>`. Says what is missing and what to do next. */
+.ui-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-2);
+  padding: var(--ui-space-4); padding-block: 40px; text-align: center;
+  color: var(--ui-text-muted); font-size: var(--gemboss-fs-body);
+}
+.ui-empty__title { margin: 0; font-size: var(--gemboss-fs-h3); font-weight: 600; color: var(--ui-text-strong); }
+.ui-empty__body { margin: 0; max-width: 48ch; line-height: 1.5; }
+.ui-empty > .ui-btn { margin-top: var(--ui-space-2); }
+
+/* ═══ gemboss-field.css ═══ */
+/* THE ONE TEXT FIELD, in a file of its own.
+ *
+ * It lives apart from gemboss-shell.css because the shell sheet is loaded ONLY by `app/app/layout.tsx`
+ * — the /app subtree — while `/login` and `/try` are deliberately lean pages outside it. Adding the
+ * class on either changed NOTHING, because neither loads the shell. Measured on prod 23/09/2026 (the
+ * build before the change): /login drew its own field family in styled-jsx — 44px, radius 8, 14px,
+ * border rgb(201,204,207) — and /try's textarea was the native box, radius 0. An earlier version of
+ * this comment said both stayed "21px, unrounded, native border"; that was one field on /try written
+ * up as if it described both pages. A few hundred bytes of field rules can go where the shell cannot.
+ */
+/* ── ONE text field for every hand-written <input>/<select> in the admin ─────────────────────────
+   Measured 22/09/2026 across every /app route: the 21 Polaris fields were one shape (32px, radius 8,
+   the input-border token, 13px → 16px on a phone), and the 13 hand-written ones were FIVE shapes —
+   heights 33/36/38/42/44, radii 8/9/10, one warm off-token border, and every one of them still 13-14px
+   on a phone, which is the size iOS Safari ZOOMS the page for the moment you tap the field. This is the
+   Polaris field, written once: a custom field wears `gemboss-field` and nothing else decides its look.
+   Its touch height lives in the pointer:coarse block with the Polaris rule it mirrors. */
+/* …and the same box on a PRESSABLE control. Three buttons wore `gemboss-field` itself — the campaign
+   compare's "↻ Refresh", which sits in a row between two selects that wear it, and the inspector's ✕
+   and ＋ — because what they wanted was this box, lined up with the fields beside them. But a button
+   is not a text field, and the class that MEANS "text field" should not be what says so: it makes the
+   ratchet count a button as a converted field, and it invites the next person to put it on anything
+   box-shaped. One box, two names, declared together so they can never drift apart. */
+.gemboss-field,
+.gemboss-control {
+  box-sizing: border-box; height: 32px; min-width: 0; padding: 0 12px;
+  font: inherit; font-size: 13px; line-height: 20px;
+  color: var(--gemboss-field-ink);
+  background-color: var(--gemboss-field-bg);
+  border: 1px solid var(--gemboss-field-line);
+  border-radius: 8px;
+}
+.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:
+   clientWidth 38, scrollWidth 58 for "120"). Same box, tighter lane. */
+/* A field that is a 44px target at EVERY width, not only on a phone. Some surfaces asked for that in
+   their own inline style (a popup's `minHeight: 44`), and that intent is theirs to keep — it moves here
+   so the look still comes from one place. */
+.gemboss-field--tall { min-height: 44px; }
+.gemboss-field--narrow { padding: 0 6px; appearance: textfield; -moz-appearance: textfield; }
+/* …and no spinner: the arrows eat ~11px of a 40px box, so "120" was still cut with the tighter
+   padding (measured: clientWidth 38, scrollWidth 49). The value is typed here, not stepped. */
+.gemboss-field--narrow::-webkit-outer-spin-button,
+.gemboss-field--narrow::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.gemboss-field:hover:not(:disabled),
+.gemboss-control:hover:not(:disabled) { border-color: var(--gemboss-field-line-hover); background-color: var(--gemboss-field-bg-hover); }
+.gemboss-field:focus-visible,
+.gemboss-control:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
+.gemboss-field:disabled,
+.gemboss-control:disabled { opacity: 0.5; cursor: not-allowed; }
+/* Polaris' own breakpoint for the same switch: under it a field reads 16px, so iOS does not zoom. */
+/* On a PHONE-WIDTH screen a field is 16px (iOS does not zoom) and 44px tall (§9.1) — by WIDTH, not by
+   pointer. A desktop browser resized to 320px still reports `pointer: fine`, and the page-revision
+   gate measures the publication select's height at 320px: dropping that panel's own `min-height: 44px`
+   in favour of the shared class left it 32px there, and the gate went red (CI of #3201). */
+/* Cả hai tên nhận CÙNG hai thứ ở khổ điện thoại. Bản đầu chỉ cho `--control` chiều cao, không cho
+   cỡ chữ — và 16px ở đây KHÔNG phải để chặn iOS zoom (một cái nút không zoom) mà để một hàng
+   control đọc ra MỘT họ: nút Refresh của compare view ngồi giữa hai select, và ở 13px giữa hai
+   ô 16px thì nó là một cỡ chữ thứ hai trong cùng một hàng (/code-review, 23/09/2026). */
+@media (max-width: 47.9975em) { .gemboss-field, .gemboss-control { font-size: 16px; min-height: 44px; } }
+/* A multi-line field: Polaris' multiline TextField — the same box, its height from `rows`. */
+textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
+/* A field made of parts — a fixed prefix ("/pages/") or a colour swatch beside the text. The WRAPPER
+   wears `gemboss-field gemboss-field--group` and is the box; the text inside wears `gemboss-field__bare`
+   and draws nothing of its own, taking the box's font size (13px, 16px on a phone) by inheritance. */
+/* The GROUP grows to whatever it holds: `gemboss-field` fixes a 32px height, and a panel that asks
+   for 44px targets (the section content panel does, and `page-saved-continuation-fixture` measures
+   EVERY control there) puts a 44px input inside this box. Fixing the group at 32 and shrinking the
+   input to fit clipped it and broke that gate; the box follows its content instead. */
+.gemboss-field--group { display: flex; align-items: center; gap: 6px; height: auto; min-height: 32px; padding-right: 0; overflow: hidden; }
+/* The phone floor again, for the GROUP. `min-height: 32px` above is the same specificity as the
+   `.gemboss-field` rule in the media query and comes LATER in the file, so it won the cascade at
+   phone width and quietly took the group back down to 32px — the URL-handle and background-colour
+   rows, the two places a field is made of parts. A media query does not outrank anything; source
+   order decided it, and the fix is to say it again after. (/code-review, 23/09/2026.) */
+@media (max-width: 47.9975em) { .gemboss-field--group { min-height: 44px; } }
+.gemboss-field--group:focus-within { outline: 2px solid #005bd3; outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
+/* The colour swatch in a group: FLUSH to the group's left edge and full height — it covers the group's
+   1px border top and bottom and its 12px left padding, so it is the whole 44px target the panel's rule
+   asks for, rounded by the group's own corner (overflow: hidden), and never clipped. A 44px swatch
+   INSIDE the 42px the border leaves was cut by a pixel top and bottom (/code-review #3201). */
+.gemboss-field--group input[type="color"] { flex: none; align-self: stretch; width: 44px; min-width: 44px; height: auto; min-height: 0; margin: -1px 0 -1px -12px; padding: 0; border: 0; border-right: 1px solid var(--gemboss-field-line); border-radius: 0; background: none; cursor: pointer; }
+/* ↑ the right edge is what keeps a WHITE swatch visible: without it the block melted into the field (measured). */
+.gemboss-field--group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+.gemboss-field--group input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
+.gemboss-field__bare { flex: 1; min-width: 0; align-self: stretch; padding: 0 12px 0 0; border: 0; border-radius: 0; outline: none; background: transparent; color: inherit; font: inherit; }
+/* …and the placeholder, which "draws nothing" does not cover: the surfaces that used to declare
+   their own (the /admin search rows, the settings and palette rows) stopped when they stopped
+   owning the box, and without this every bare field would fall back to the browser's grey. */
+.gemboss-field__bare::placeholder { color: var(--gemboss-field-placeholder); }
+
+/* Under a thumb the field is 44px, the same height this app gives a Polaris field there. It sits in
+   THIS file, not in the shell's pointer:coarse block, so /login and /try — which load only this
+   sheet — get it too. */
+@media (pointer: coarse) { .gemboss-field, .gemboss-control { height: auto; min-height: 44px; } }
+/* A control is pressable; a field is not. That is the whole difference. */
+.gemboss-control { cursor: pointer; }
+/* An ICON control — the repeater's ✕ — is square and narrow beside its row. It was pinned to
+   `width: 32` in an inline style, which no media query can reach, so under a thumb it was a
+   32x44 target: tall enough, too narrow (§9.1 asks 44 in BOTH dimensions for a control).
+   The width lives here now, and grows with the pointer. (/code-review, 23/09/2026.) */
+/* Hai class trên cùng phần tử, có chủ ý: `.gemboss-ei-inp` đặt `width: 100%` ở cùng trọng số và
+   nằm SAU trong thứ tự nạp (shell @import file này ở đầu), nên một selector đơn thua nó — đo
+   được: nút ✕ giãn ra 472px. Bề rộng vốn là inline style nên trước đây nó thắng mọi thứ; đưa
+   vào CSS thì phải mang theo trọng số của chính nó. */
+.gemboss-control.gemboss-control--icon { width: 32px; flex: 0 0 auto; padding: 0; }
+@media (pointer: coarse) { .gemboss-control.gemboss-control--icon { width: 44px; min-width: 44px; } }
+
+/* ═══ shell.css — the shared shell (rail + topbar + main + the assistant's thread rail) ═══ */
+.gemboss-popover-surface {
+  background: var(--gemboss-surface);
+  background: color-mix(in srgb, var(--gemboss-surface) 93%, transparent);
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid var(--gemboss-divider);
+  border-radius: var(--gemboss-radius-lg);
+  box-shadow: var(--gemboss-shadow-raised);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .gemboss-popover-surface {
+    background: var(--gemboss-surface);
+  }
+}
+.icon-nav {
+  position: fixed;
+  top: 56px;
+  left: 0;
+  z-index: 200;
+  width: 72px;
+  height: calc(100dvh - 56px);
+  background: var(--gemboss-rail-bg);
+  border-right: 1px solid var(--gemboss-divider);
+  display: flex;
+  flex-direction: column;
+  padding-top: 8px;
+  overflow: hidden;
+}
+.gemboss-account-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 220px;
+  z-index: 320;
+  overflow: hidden;
+}
+.gemboss-account-menu-item {
+  display: block;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px 16px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: var(--gemboss-text);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--gemboss-transition-fast) ease, color var(--gemboss-transition-fast) ease;
+}
+.gemboss-account-menu-item:hover {
+  background: var(--gemboss-hover);
+}
+.gemboss-account-menu-item:focus-visible {
+  outline: 2px solid var(--gemboss-primary);
+  outline-offset: -2px;
+  background: var(--gemboss-hover);
+}
+.gemboss-account-menu-item.danger {
+  color: var(--gemboss-danger-strong);
+}
+.gemboss-account-chip {
+  width: 30px;
+  height: 30px;
+  border: 1px solid #cfd6ce;
+  border-radius: var(--gemboss-radius-full);
+  background: #f5f7f4;
+  color: #303633;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.gemboss-platform-main {
+  box-sizing: border-box;
+  min-height: 100dvh;
+  margin-left: 72px;
+  padding-top: 56px;
+  background: var(--gemboss-app-bg);
+}
+.icon-nav {
+  top: 56px;
+  height: calc(100dvh - 56px);
+  background: var(--gemboss-nav-bg);
+  border-right-color: var(--gemboss-divider);
+}
+@media (max-width: 1040px) {
+  .gemboss-platform-topbar {
+    grid-template-columns: minmax(120px, 1fr) minmax(220px, 520px) minmax(120px, 1fr);
+  }
+}
+@media (max-width: 760px) {
+  .gemboss-platform-main {
+    margin-left: 0;
+  }
+}
+.gemboss-account-chip {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--gemboss-primary);
+  color: #fff;
+  font-weight: 600;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  transition: transform var(--gemboss-transition-base) ease;
+}
+.gemboss-account-chip:hover {
+  transform: scale(1.05);
+}
+.gemboss-account-chip:focus-visible {
+  outline: 2px solid var(--gemboss-primary);
+  outline-offset: 2px;
+}
+.gemboss-platform-main {
+  margin-top: 56px;
+  margin-left: 72px;
+  min-height: calc(100vh - 56px);
+  padding: 24px;
+  background: #fafafb;
+}
+@media (max-width: 768px) {
+  .gemboss-platform-main {
+    margin-left: 0;
+    padding: 16px;
+  }
+}
+.gemboss-platform-shell {
+  display: block;
+  min-height: 100vh;
+  background: var(--gemboss-app-bg);
+}
+.gemboss-platform-topbar {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 300;
+  height: 56px;
+  border-bottom: 1px solid var(--gemboss-divider);
+  background: var(--gemboss-topbar-bg);
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) minmax(280px, 560px) minmax(200px, 1fr);
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  box-shadow: var(--gemboss-shadow-resting);
+}
+.gemboss-account-chip {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--gemboss-chip-line);
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-surface);
+  color: var(--gemboss-chip-ink);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color var(--gemboss-transition-base) ease, background-color var(--gemboss-transition-base) ease;
+}
+.gemboss-account-chip:hover {
+  border-color: var(--gemboss-chip-line-hover);
+  background: var(--gemboss-chip-bg-hover);
+  transform: none;
+}
+.icon-nav {
+  position: fixed;
+  top: 56px;
+  left: 0;
+  z-index: 200;
+  width: 72px;
+  height: calc(100dvh - 56px);
+  border-right: 1px solid var(--gemboss-divider);
+  background: var(--gemboss-nav-bg);
+  padding-top: 12px;
+}
+.gemboss-platform-main {
+  min-height: calc(100vh - 56px);
+  margin-top: 56px;
+  margin-left: 72px;
+  background: var(--gemboss-app-bg);
+  padding: 24px;
+}
+@media (max-width: 1120px) {
+  .gemboss-platform-topbar {
+    grid-template-columns: 220px minmax(220px, 1fr) auto;
+    gap: 12px;
+  }
+}
+@media (max-width: 760px) {
+  .gemboss-platform-topbar {
+    height: auto;
+    min-height: 56px;
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: 12px 12px;
+  }
+  .gemboss-account-chip {
+    display: none;
+  }
+  .icon-nav {
+    display: none;
+  }
+  .gemboss-platform-main {
+    margin-left: 0;
+    padding: 16px;
+    padding-top: 104px;
+  }
+}
+.gnav-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(31,30,29,0.22) transparent;
+}
+.gemboss-assistant-railfoot.is-button {
+  width: 100%;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  border-radius: 8px;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.gemboss-assistant-railfoot.is-button:hover {
+  background: var(--gemboss-primary-soft);
+  color: var(--gemboss-primary-dark);
+}
+.gemboss-assistant-empty {
+  padding: 24px 20px;
+  color: var(--gemboss-text-muted);
+  font-size: 13px;
+}
+@media (max-width: 760px) {
+  .gemboss-platform-topbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 56px;
+    min-height: 56px;
+    padding: 0 12px;
+  }
+  .gemboss-account-chip {
+    display: inline-flex;
+  }
+  .gemboss-platform-main {
+    padding-top: 56px;
+    padding-bottom: calc(56px + env(safe-area-inset-bottom));
+  }
+}
+@media (pointer: coarse) {
+  .gemboss-account-chip {
+    width: 44px;
+    height: 44px;
+  }
+  .gnav-item {
+    min-height: 44px;
+  }
+  .gemboss-assistant-collapse,
+  .gemboss-assistant-newchat {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+.icon-nav {
+  width: 240px;
+  padding: 12px 12px 0;
+  overflow: hidden;
+  background: var(--gemboss-nav-bg);
+  display: flex;
+  flex-direction: column;
+}
+.gnav-scroll {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.gnav-bottom {
+  padding-bottom: 12px;
+}
+.gnav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 12px;
+  margin: 1px 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--gemboss-radius-md);
+  text-decoration: none;
+  font-family: inherit;
+  color: var(--gemboss-text);
+  font-size: var(--gemboss-fs-body);
+  font-weight: 500;
+  line-height: 1.2;
+  transition: background-color var(--gemboss-transition-fast) ease, color var(--gemboss-transition-fast) ease;
+}
+.gnav-item:hover {
+  background: var(--gemboss-nav-hover);
+}
+.gnav-item.active {
+  color: var(--gemboss-active-fg);
+  font-weight: 600;
+}
+.gnav-group:not(.has-active-child) > .gnav-item.active {
+  background: var(--gemboss-active-bg);
+}
+.gnav-group:not(.has-active-child) > .gnav-item.active:hover {
+  background: var(--gemboss-active-bg);
+}
+.gnav-group.has-active-child > .gnav-item.active:hover {
+  background: var(--gemboss-nav-hover);
+}
+.gnav-ico {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+}
+.gnav-ico svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+.gnav-label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gnav-sub {
+  list-style: none;
+  margin: 1px 0 6px;
+  padding: 0;
+}
+.gnav-subitem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 12px 6px 44px;
+  margin: 1px 0;
+  border-radius: var(--gemboss-radius-sm);
+  color: var(--gemboss-text-muted);
+  font-size: 13px;
+  line-height: 1.2;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background-color var(--gemboss-transition-fast) ease, color var(--gemboss-transition-fast) ease;
+}
+@media (pointer: coarse) {
+  .gnav-subitem {
+    min-height: 44px;
+  }
+}
+.gnav-subitem:hover {
+  background: var(--gemboss-nav-hover);
+  color: var(--gemboss-text);
+}
+.gnav-subitem.active {
+  color: var(--gemboss-active-fg);
+  font-weight: 600;
+  background: var(--gemboss-active-bg);
+}
+.gnav-subitem.active:hover {
+  background: var(--gemboss-active-bg);
+  color: var(--gemboss-active-fg);
+}
+.gnav-subitem.active::before {
+  content: "";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 15px;
+  border-radius: 2px;
+  background: var(--gemboss-primary);
+}
+.gnav-subitem.is-soon {
+  opacity: 0.5;
+  cursor: default;
+}
+.gnav-subitem em {
+  font-style: normal;
+  font-size: var(--gemboss-fs-micro);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border: 1px solid var(--gemboss-divider);
+  border-radius: var(--gemboss-radius-sm);
+  padding: 1px 6px;
+}
+.gnav-sep {
+  height: 1px;
+  background: var(--gemboss-divider);
+  margin: 8px 6px;
+}
+.gnav-item.gnav-assistant {
+  color: var(--gemboss-primary-dark);
+  font-weight: 600;
+  background: color-mix(in srgb, var(--gemboss-primary) 8%, #fff);
+}
+.gnav-item.gnav-assistant .gnav-ico svg {
+  fill: var(--gemboss-primary);
+}
+.gnav-item.gnav-assistant:hover {
+  background: color-mix(in srgb, var(--gemboss-primary) 15%, #fff);
+}
+.gnav-item.gnav-assistant.active {
+  background: var(--gemboss-active-bg);
+  color: var(--gemboss-active-fg);
+}
+.gnav-item.gnav-assistant.active .gnav-ico svg {
+  fill: var(--gemboss-active-fg);
+}
+.gemboss-platform-main {
+  margin-left: 240px;
+}
+.gemboss-mobile-menu-btn {
+  display: none;
+}
+.gemboss-mobile-nav-backdrop {
+  display: none;
+}
+@media (max-width: 760px) {
+  .gemboss-platform-main {
+    margin-left: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .gemboss-mobile-menu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 38px;
+    height: 38px;
+    margin-left: -2px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--gemboss-text);
+  }
+  .gemboss-mobile-menu-btn:active {
+    background: var(--gemboss-hover);
+  }
+  .icon-nav {
+    display: flex;
+    width: min(82vw, 300px);
+    transform: translateX(-100%);
+    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1000;
+    box-shadow: 2px 0 26px rgba(31, 30, 29, 0.20);
+  }
+  .gemboss-platform-shell.is-mobile-nav-open .icon-nav {
+    transform: translateX(0);
+  }
+  .gemboss-mobile-nav-backdrop {
+    display: block;
+    position: fixed;
+    inset: 56px 0 0 0;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    background: rgba(20, 19, 18, 0.38);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.22s ease;
+    z-index: 999;
+  }
+  .gemboss-platform-shell.is-mobile-nav-open .gemboss-mobile-nav-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (max-width: 305.98px) {
+  .gemboss-platform-topbar {
+    padding: 0 8px;
+  }
+}
+@media (min-width: 306px) and (max-width: 460px) {
+  .gemboss-platform-topbar {
+    padding: 0 8px;
+  }
+  .gemboss-mobile-menu-btn {
+    width: 44px;
+    height: 44px;
+  }
+  .gemboss-account-chip {
+    width: 44px;
+    height: 44px;
+  }
+}
+.gemboss-assistant-chatslot {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+.gemboss-assistant-chatslot[hidden] {
+  display: none;
+}
+.gemboss-assistant-page > .gemboss-assistant-tabs {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.gemboss-assistant-tabs::-webkit-scrollbar {
+  display: none;
+}
+.gemboss-assistant-tab {
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 190px;
+  border: 1px solid var(--gemboss-divider);
+  border-radius: var(--gemboss-radius-md);
+  background: transparent;
+}
+.gemboss-assistant-tab.active {
+  background: var(--gemboss-active-bg);
+  border-color: var(--gemboss-active-bg);
+}
+.gemboss-assistant-tab-main {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  min-height: 44px;
+  padding: 0 4px 0 8px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: var(--gemboss-fs-caption);
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+}
+.gemboss-assistant-tab.active .gemboss-assistant-tab-main {
+  color: var(--gemboss-text-strong);
+}
+.gemboss-assistant-tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gemboss-assistant-tab-dot {
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-divider);
+}
+.gemboss-assistant-tab-dot.is-running {
+  background: var(--gemboss-primary);
+  animation: gemboss-assistant-pulse 1.4s ease-in-out infinite;
+}
+.gemboss-assistant-tab-close {
+  flex: 0 0 auto;
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+  padding: 0;
+}
+.gemboss-assistant-tab-close:hover {
+  color: var(--gemboss-text-strong);
+}
+.gemboss-assistant-tab-close svg {
+  width: 14px;
+  height: 14px;
+}
+.gemboss-assistant-sronly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.gemboss-assistant-thread-running {
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-primary);
+  animation: gemboss-assistant-pulse 1.4s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .gemboss-assistant-tab-dot.is-running,
+  .gemboss-assistant-thread-running {
+    animation: none;
+  }
+}
+.gemboss-assistant-route-claim {
+  display: block;
+  height: 100%;
+}
+.gemboss-assistant-layout.is-dock {
+  height: auto;
+  min-height: 0;
+}
+.gemboss-assistant-layout.is-dock .gemboss-assistant-page {
+  height: auto;
+  max-width: none;
+  padding: 4px 0 8px;
+}
+.gnav-item.gnav-assistant {
+  position: relative;
+}
+body.gemboss-assistant-busy .gnav-item.gnav-assistant::after,
+body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
+  content: "";
+  position: absolute;
+  top: 6px;
+  left: 26px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid var(--gemboss-surface);
+}
+body.gemboss-assistant-busy .gnav-item.gnav-assistant::after {
+  background: var(--gemboss-primary);
+  animation: gemboss-assistant-pulse 1.4s ease-in-out infinite;
+}
+body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
+  background: var(--gemboss-success-strong);
+}
+@media (prefers-reduced-motion: reduce) {
+  body.gemboss-assistant-busy .gnav-item.gnav-assistant::after {
+    animation: none;
+  }
+}
+.gemboss-assistant-layout {
+  display: flex;
+  height: calc(100dvh - 56px);
+  width: 100%;
+  min-height: 0;
+}
+.gemboss-assistant-rail {
+  flex: 0 0 264px;
+  width: 264px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--gemboss-divider);
+  background: transparent;
+  padding: 16px 12px 12px;
+  gap: 12px;
+  transition: flex-basis 180ms ease, width 180ms ease;
+}
+.gemboss-assistant-rail-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.gemboss-assistant-newchat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 12px 12px;
+  border: 1px solid var(--gemboss-divider);
+  border-radius: 12px;
+  background: transparent;
+  color: var(--gemboss-text);
+  font-size: var(--gemboss-fs-body);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.gemboss-assistant-newchat:hover {
+  background: rgba(0,0,0,0.035);
+  border-color: var(--gemboss-text-muted);
+}
+.gemboss-assistant-newchat svg {
+  width: 17px;
+  height: 17px;
+  fill: currentColor;
+  flex: 0 0 auto;
+}
+.gemboss-assistant-newchat span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+}
+.gemboss-assistant-kbd {
+  flex: 0 0 auto;
+  font-size: var(--gemboss-fs-micro);
+  font-weight: 600;
+  line-height: 1;
+  padding: 4px 6px;
+  border: 1px solid var(--gemboss-divider);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.gemboss-assistant-search:focus-within .gemboss-assistant-kbd {
+  display: none;
+}
+.gemboss-assistant-collapse {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.gemboss-assistant-collapse:hover {
+  background: rgba(0,0,0,0.05);
+  color: var(--gemboss-text);
+}
+.gemboss-assistant-collapse svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+.gemboss-assistant-search {
+  gap: 6px;
+}
+.gemboss-assistant-search > svg {
+  width: 15px;
+  height: 15px;
+  fill: var(--gemboss-text-muted);
+  flex: 0 0 auto;
+}
+.gemboss-assistant-search-clear {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+}
+.gemboss-assistant-search-clear:hover {
+  background: rgba(0,0,0,0.07);
+  color: var(--gemboss-text);
+}
+.gemboss-assistant-search-clear svg {
+  width: 13px;
+  height: 13px;
+  fill: currentColor;
+}
+.gemboss-assistant-railfoot {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 2px;
+  border-top: 1px solid var(--gemboss-divider);
+  margin-top: 4px;
+  color: var(--gemboss-text-muted);
+  font-size: var(--gemboss-fs-caption);
+  line-height: 1.35;
+}
+.gemboss-assistant-railfoot svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  fill: currentColor;
+  opacity: 0.8;
+}
+.gemboss-assistant-threads {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.gemboss-assistant-threads-empty {
+  padding: 16px 8px;
+  color: var(--gemboss-text-muted);
+  font-size: var(--gemboss-fs-caption);
+}
+.gemboss-assistant-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.gemboss-assistant-group + .gemboss-assistant-group {
+  margin-top: 12px;
+}
+.gemboss-assistant-group-label {
+  padding: 4px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--gemboss-text-muted);
+  text-transform: uppercase;
+}
+.gemboss-assistant-thread {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  transition: background 120ms ease;
+}
+.gemboss-assistant-thread:hover {
+  background: var(--gemboss-hover, rgba(0,0,0,0.04));
+}
+.gemboss-assistant-thread.active {
+  background: rgba(0,0,0,0.07);
+}
+.gemboss-assistant-thread-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.gemboss-assistant-thread-titlerow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+.gemboss-assistant-pin-dot {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  fill: var(--gemboss-text-muted);
+}
+.gemboss-assistant-thread-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--gemboss-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gemboss-assistant-thread-meta {
+  font-size: var(--gemboss-fs-caption);
+  color: var(--gemboss-text-muted);
+}
+.gemboss-assistant-thread.menu-open {
+  background: rgba(0,0,0,0.07);
+}
+.gemboss-assistant-thread.menu-open .gemboss-assistant-thread-actions {
+  opacity: 1;
+}
+.gemboss-assistant-menu {
+  z-index: 60;
+  width: 184px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+}
+.gemboss-assistant-menu-confirm {
+  padding: 8px 12px 6px;
+  font-size: var(--gemboss-fs-caption);
+  font-weight: 600;
+  color: var(--gemboss-text);
+}
+.gemboss-assistant-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  color: var(--gemboss-text);
+  cursor: pointer;
+}
+.gemboss-assistant-menu button:hover {
+  background: var(--gemboss-hover, rgba(0,0,0,0.05));
+}
+.gemboss-assistant-menu button.danger {
+  color: var(--gemboss-danger-strong);
+}
+.gemboss-assistant-menu button svg {
+  width: 15px;
+  height: 15px;
+  fill: currentColor;
+  flex: 0 0 auto;
+}
+.gemboss-assistant-thread-actions {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+.gemboss-assistant-thread:hover .gemboss-assistant-thread-actions,
+.gemboss-assistant-thread:focus-within .gemboss-assistant-thread-actions {
+  opacity: 1;
+}
+.gemboss-assistant-thread-act {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.gemboss-assistant-thread-act:hover {
+  background: rgba(0,0,0,0.07);
+  color: var(--gemboss-text);
+}
+.gemboss-assistant-thread-act.danger:hover {
+  color: var(--gemboss-danger-strong);
+}
+.gemboss-assistant-thread-act svg {
+  width: 15px;
+  height: 15px;
+  fill: currentColor;
+}
+.gemboss-assistant-thread.editing {
+  background: rgba(0,0,0,0.07);
+}
+.gemboss-assistant-thread-edit {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  padding: 6px 6px;
+}
+.gemboss-assistant-thread-edit input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.gemboss-assistant-layout .gemboss-assistant-page {
+  height: 100%;
+  max-width: 820px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-top: 16px;
+}
+.gemboss-assistant-layout .gemboss-assistant-page.is-switching {
+  opacity: 0.55;
+  transition: opacity 120ms ease;
+  pointer-events: none;
+}
+.gemboss-assistant-rail.is-collapsed {
+  flex-basis: 60px;
+  width: 60px;
+  padding: 16px 8px 12px;
+}
+.gemboss-assistant-rail.is-collapsed .gemboss-assistant-rail-top {
+  flex-direction: column;
+  gap: 8px;
+}
+.gemboss-assistant-rail.is-collapsed .gemboss-assistant-newchat {
+  justify-content: center;
+  padding: 8px;
+  flex: 0 0 auto;
+}
+.gemboss-assistant-rail.is-collapsed .gemboss-assistant-newchat span,
+.gemboss-assistant-rail.is-collapsed .gemboss-assistant-search,
+.gemboss-assistant-rail.is-collapsed .gemboss-assistant-railfoot,
+.gemboss-assistant-rail.is-collapsed .gemboss-assistant-threads {
+  display: none;
+}
+@media (max-width: 760px) {
+  .gemboss-assistant-rail {
+    flex-basis: 60px;
+    width: 60px;
+    padding: 16px 8px 12px;
+  }
+  .gemboss-assistant-rail .gemboss-assistant-rail-top {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .gemboss-assistant-newchat {
+    justify-content: center;
+    padding: 8px;
+    flex: 0 0 auto;
+  }
+  .gemboss-assistant-newchat span,
+  .gemboss-assistant-search,
+  .gemboss-assistant-railfoot,
+  .gemboss-assistant-threads,
+  .gemboss-assistant-collapse {
+    display: none;
+  }
+}
+.gemboss-assistant-page {
+  height: calc(100dvh - 56px);
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 24px 0 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.gemboss-assistant-page > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.gemboss-assistant-empty {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  color: var(--gemboss-text-muted);
+  font-size: 14px;
+}
+.gemboss-platform-shell {
+  display: flow-root;
+}
+.gemboss-platform-main {
+  padding-bottom: calc(24px + var(--gemboss-invite-h, 0px));
+}
+.gb-account {
+  position: relative;
+}
+.gb-account > summary {
+  list-style: none;
+}
+.gb-account > summary::-webkit-details-marker {
+  display: none;
+}
+.gb-account-head {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--gemboss-divider);
+}
+.gb-account-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gemboss-text-strong);
+}
+.gb-account-email {
+  font-size: 12px;
+  color: var(--gemboss-text-muted);
+}
+.gb-account-role {
+  display: inline-block;
+  margin-top: 4px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--gemboss-active-fg);
+  background: var(--gemboss-active-bg);
+}
+.gb-account-form {
+  margin: 0;
+}
+.gnav-scroll::-webkit-scrollbar {
+  width: 9px;
+}
+.gnav-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.gnav-scroll::-webkit-scrollbar-thumb {
+  background: rgba(31,30,29,0.2);
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+@keyframes gemboss-assistant-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+/* ═══ @gemboss/ui src/app-shell.css ═══ */
+/* Styles for the parts of the shell the PACKAGE owns — `AppShell`'s three topbar slots,
+ * `RailHeading`, `RailCount`. Everything else (rail, topbar, drawer, tokens, kit) is the admin's
+ * own CSS, exported by apps/admin/scripts/export-ui-css.mjs and concatenated ahead of this file into
+ * `gemboss-ui.css`. The admin does not load this file: it composes the shell itself and has no
+ * slots, headings or pills of this kind.
+ *
+ * Built only from --gemboss-* tokens, so a palette change in gemboss-tokens.css reaches it. */
+
+/* The base font. The admin's comes from Polaris, which no other surface loads, so without this rule
+ * every surface on gemboss-ui.css rendered in the browser's default serif. Same elements Polaris
+ * sets (html, body, button), same stack (--gemboss-font-sans resolves to Polaris's
+ * --p-font-family-sans fallback). `:where()` keeps it at (0,0,0): any rule a surface writes for
+ * these elements wins, wherever it sits in the cascade. Re-theme with the token, not a body rule.
+ * The admin does not load this file, so its own rendering is untouched. */
+:where(html, body, button) { font-family: var(--gemboss-font-sans); }
+
+.gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }
+.gemboss-topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
+@media (max-width: 760px) {
+  /* The topbar is one flex row here: the middle slot takes what is left. */
+  .gemboss-topbar-center { flex: 1 1 auto; justify-content: flex-start; }
+}
+
+.gnav-heading {
+  padding: 10px 12px 4px;
+  font-size: var(--gemboss-fs-micro); font-weight: 600; line-height: 1.2;
+  letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--gemboss-text-muted);
+}
+.gnav-scroll > .gnav-heading:first-child { padding-top: 2px; }
+
+.gnav-count {
+  margin-left: auto; flex: 0 0 auto; min-width: 20px; padding: 0 6px;
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-hover); color: var(--gemboss-text-muted);
+  font-size: var(--gemboss-fs-micro); font-weight: 700; line-height: 18px;
+  text-align: center; font-variant-numeric: tabular-nums;
+}
+.gnav-item.active .gnav-count { background: var(--gemboss-primary); color: var(--gemboss-on-primary); }
+
+/* ── BrandLockup (./brand.tsx) ─────────────────────────────────────────────────────────────────
+ * The admin's `.gemboss-brand-lockup` box (40px tall, 8px padding, hover wash) around the wordmark's
+ * own proportions. Not that class itself: its ≤460px rule swaps in a background image at an
+ * admin-only path, which every other host would 404. Ink is the logo file's #14151a. */
+.gb-brand {
+  min-width: 0; height: 40px; margin: 0; padding: 0 8px;
+  border-radius: var(--gemboss-radius-md);
+  display: inline-flex; align-items: center; gap: 4.5px;
+  color: var(--gb-brand-ink, #14151a); text-decoration: none;
+  transition: background-color var(--gemboss-transition-base) ease;
+}
+.gb-brand:hover { background: var(--gemboss-hover); }
+.gb-brand:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
+.gb-brand-gem { display: block; flex: 0 0 auto; }
+.gb-brand-name {
+  font-family: Inter, var(--gemboss-font-sans); font-size: 13.3px; font-weight: 700;
+  letter-spacing: -0.13px; line-height: 1; white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; min-width: 0;
+}
+/* The admin shows only its mark below 460px; so does this. */
+@media (max-width: 460px) { .gb-brand-name { display: none; } }
+
+/* ── AccountMenu (./account.tsx): its rules live in shell.css since 29/09/2026, because the admin
+ * renders AccountMenu too now and loads shell.css, not this file. */
+
+/* ═══ @gemboss/ui src/auth.css ═══ */
+/* The GemBoss sign-in screen — @gemboss/ui (28/09/2026).
+ *
+ * Moved here VERBATIM from the admin's styled-jsx block (apps/admin/src/app/login/LoginClient.tsx),
+ * which was the original every other sign-in copied by hand: gemcommunity's .auth-wrap,
+ * content-radar's and gemwatcher's login.css, gemcare's inbox, partner-radar. Class names took a
+ * `gb-auth` prefix (gemcare and gempress already have a `.login-card` of their own); the panel's
+ * colours became tokens; nothing else changed. The admin's /login was screenshot at nine sizes in
+ * both themes before and after the move and compared pixel for pixel.
+ *
+ * Rendered by AuthLayout / AuthForm / PasswordField (auth.tsx). What only the admin has — the Google
+ * button, the "or" divider — stays in the admin.
+ */
+
+/* dvh, not vh: on a phone 100vh is the height with the URL bar HIDDEN, so a centred card sat
+   under the toolbar. The card centres with margin:auto rather than align-items:center — auto
+   margins collapse to 0 when the content is taller than the screen, so the top of the card
+   can never be pushed above the fold (short landscape phone, keyboard open). */
+/* FLUID, not stepped. Every vertical gap is clamp(compact, N cqh, roomy): N is picked so the roomy
+   value lands at ~800px of height, and the compact floor at ~400px. Between the two the page
+   breathes in proportion to the screen instead of jumping at a breakpoint — the stepped version
+   snapped its card from 379px to 469px between 640 and 680 tall, and still overflowed below
+   400. Controls never scale: inputs and buttons keep min-height 44px at every size, only the
+   AIR between them gives. cqh is the SHELL's height, which is the visible height — URL bar and
+   on-screen keyboard included (see --vvh above the return). */
+/* The shell is exactly the visible height and is the size container every rule below measures
+   (cqh, @container gb-auth). It scrolls itself if even the shed layout does not fit (< ~260px). */
+/* ONE PALETTE, TWO REPOS. Every colour on this screen is a --gb-* token, and gemcommunity's
+   sign-in (app/globals.css, the block scoped to .auth-wrap) declares the SAME names with the
+   SAME values. That is what keeps the two sign-in screens identical: a colour changed in one
+   place is a colour that can be changed in the other, by name, instead of two piles of hex
+   drifting apart — which is what they had been doing (card 380 vs 400, radius 14 vs 12,
+   wordmark 22 vs 24, and this screen with no dark mode at all while that one had it).
+   Dark follows the OS. There is no toggle here, unlike gemcommunity: that app persists a
+   data-theme the admin has no reader for, and a switch that only half-works is worse than
+   none. The [data-theme] hook is still honoured so a person who set it over there, in the
+   same browser, is not thrown back to white when they land here. */
+.gb-auth {
+  --gb-surface: #ffffff;
+  /* The admin's own near-black, by name — the colour guard asks for the token and it is the
+     right answer here anyway: light mode IS the admin's palette, and only the dark block
+     below has values the admin has no token for. */
+  --gb-ink: var(--gemboss-text-strong, #1b1c1e);
+  --gb-muted: #6d7175;
+  --gb-line: #e1e3e5;
+  --gb-field-line: #c9cccf;
+  --gb-field-bg: #ffffff;
+  --gb-field-hover: #fafafa;
+  --gb-placeholder: #868b94;
+  --gb-accent: #5661f5;
+  --gb-btn: linear-gradient(120deg, #1b1c1e 0%, #000000 100%);
+  --gb-btn-ink: #ffffff;
+  --gb-wordmark: linear-gradient(120deg, #1b1c1e 0%, #000000 100%);
+  --gb-hover: #f7f7f5;
+  --gb-hover-line: #b9bbc0;
+  --gb-err-bg: #fee2e2;
+  --gb-err-ink: #b91c1c;
+  --gb-err-line: transparent;
+  --gb-card-shadow: 0 24px 64px rgba(15, 23, 42, 0.08);
+  --gb-mark-bg: #0b0b0c;
+  /* The brand's own facet geometry as a texture for the panel, rather than a stock diagonal
+     hatch: it is the same path the mark draws, blown up and held at 7% opacity. Inline so it
+     costs no request on the screen that must render before anything else exists. */
+  --gb-facet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.45' stroke-linejoin='round'%3E%3Cpath d='M26,14 74,14 96,50 50,110 4,50Z'/%3E%3Cpath d='M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110'/%3E%3C/g%3E%3C/svg%3E");
+  /* The composition is the gemboss one and stays the gemboss one in dark: ink wash top-left,
+     iris wash bottom-right, flat paper underneath. Only the three colours flip. */
+  --gb-page:
+    radial-gradient(1200px 600px at 20% 10%, rgba(27, 28, 30, 0.05), transparent 60%),
+    radial-gradient(1000px 500px at 80% 90%, rgba(86, 97, 245, 0.06), transparent 60%),
+    #fafafb;
+  --gb-page-flat: #ffffff;
+  /* The brand panel, as tokens (28/09/2026, @gemboss/ui): the admin's is INK with iris used
+     sparingly, because its mark is an outline on ink. A surface whose mark is filled with iris
+     (gemcommunity, content-radar) redefines these five on its own root; nothing else changes. */
+  --gb-panel-bg:
+    radial-gradient(900px 520px at 78% 12%, rgba(86, 97, 245, 0.26), transparent 62%),
+    radial-gradient(700px 480px at 12% 96%, rgba(86, 97, 245, 0.12), transparent 60%),
+    #0b0b0c;
+  --gb-panel-ink: #f4f4f2;
+  --gb-panel-muted: rgba(244, 244, 242, 0.72);
+  --gb-panel-eyebrow: #8a93ff;
+  --gb-panel-facet-o: 0.05;
+  color-scheme: light dark;
+  position: fixed;
+  top: var(--vvt, 0px);
+  left: 0;
+  right: 0;
+  height: 100vh;
+  height: var(--vvh, 100dvh);
+  container: gb-auth / size;
+  overflow-y: auto;
+  /* The recolor swapped the lower wash to iris but missed this one, which was
+     rgba(194,65,12,.08) — retired coral — so the sign-in screen kept a peach cast in the
+     top-left corner. Ink for depth, iris for the single accent: B&W ground, one colour. */
+  background: var(--gb-page);
+  color: var(--gb-ink);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+/* ONE COLUMN BY DEFAULT. The split is opt-IN, at a size where a second column is a gift
+   rather than a squeeze — and the form column keeps every clamp and shed step it had, so
+   nothing about the phone or the short-landscape case changes. */
+.gb-auth-split {
+  display: grid;
+  grid-template-columns: 1fr;
+  min-height: 100%;
+}
+.gb-auth-stage {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100%;
+  padding: clamp(12px, 3cqh, 24px) clamp(16px, 4vw, 24px);
+}
+.gb-auth-panel-in {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 520px;
+  padding: 48px clamp(32px, 5vw, 64px);
+}
+/* The eyebrow is the one place a monospace face earns its keep here: it labels the panel
+   without competing with the headline, and the letterspacing does the work the size would
+   otherwise have to. */
+.gb-auth-eyebrow {
+  margin: 0 0 20px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--gb-panel-eyebrow);
+}
+.gb-auth-panel-h {
+  margin: 0 0 16px;
+  font-size: clamp(28px, 3.2vw, 40px);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+  color: var(--gb-panel-ink);
+}
+.gb-auth-panel-p {
+  /* This used to be 0 0 32px, the gap down to the CTA. The button is gone, so that 32px was
+     dangling off the panel's last line with nothing to balance it. */
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+  /* 0.72 of #f4f4f2 on #0b0b0c measures 8.9:1 — well past AA, and quiet enough that the
+     headline still leads. */
+  color: var(--gb-panel-muted);
+}
+/* THE PANEL IS OFF UNTIL EARNED. Hidden by default rather than shown-then-hidden: a panel
+   that paints first and disappears at a breakpoint is a panel that flashes on every phone. */
+.gb-auth-panel {
+  display: none;
+}
+/* Wide AND tall. Width alone is not enough — a 1440x420 window is a wide letterbox, and a
+   column of headline plus button in 420px of height is the crush this whole screen spent its
+   shed ladder avoiding. 900 wide is where 380px of card plus a readable second column stop
+   fighting.
+   520 tall, not 620 (26/09/2026): a 1366x768 laptop with a bookmarks bar leaves under 620px
+   of viewport, so the most common laptop never saw this column. Its content measures 286px
+   padding included, so 520 still leaves over 200px spare. The form sheds on height whether
+   or not the panel is there, so the panel costs it nothing. Same number as the gemcommunity
+   sign-in (app/globals.css); change both or neither. */
+@container gb-auth (min-width: 900px) and (min-height: 520px) {
+  .gb-auth-split {
+    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.05fr);
+  }
+  /* The column IS the structure now, so the card stops drawing a second one. A border and
+     a 64px shadow around a form that already sits in its own half of the screen is chrome
+     about chrome. The card keeps every bit of this below 900px, where it is the only thing
+     giving the form an edge. */
+  /* SCOPED UNDER .gb-auth-split ON PURPOSE — (0,2,0) against the base rules' (0,1,0), so this
+     wins wherever it is written. The first version of these two relied on coming LATER in
+     the sheet than the card's own rule, and it did not: a container query carries the specificity
+     of the selectors inside it, nothing more, and the tie went to the rule written first.
+     Measured then: card still 380 wide with its border and 64px shadow intact. */
+  .gb-auth-split .gb-auth-stage {
+    background: var(--gb-surface);
+  }
+  .gb-auth-split .gb-auth-card {
+    border: none;
+    box-shadow: none;
+    max-width: 400px;
+  }
+  .gb-auth-panel {
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    /* INK-DOMINANT, because the gemboss mark is an OUTLINE on ink. Iris appears twice on
+       this panel and both times it is small: the eyebrow and the button. */
+    background: var(--gb-panel-bg);
+    color: var(--gb-panel-ink);
+  }
+  /* The facet lines of the mark, blown up and laid over the ground — the brand's own geometry
+     instead of a stock diagonal hatch. Tiny opacity on purpose: at 1920 it should read as
+     texture you notice second, not a pattern you notice first. */
+  .gb-auth-panel::before {
+    content: "";
+    position: absolute;
+    /* Deliberately OVERSIZED and pushed off two edges, so what lands on the panel is a few
+       facet lines crossing it — texture. Sized to fit, it read as a big grey triangle in the
+       corner: a picture of a logo rather than a ground for one. */
+    inset: -45% -38% auto auto;
+    width: 132%;
+    aspect-ratio: 1;
+    background-image: var(--gb-facet);
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity: var(--gb-panel-facet-o);
+    pointer-events: none;
+  }
+}
+.gb-auth-card {
+  width: 100%;
+  max-width: 380px;
+  margin: auto;
+  background: var(--gb-surface);
+  border: 1px solid var(--gb-line);
+  border-radius: 14px;
+  padding: clamp(18px, 3.5cqh, 28px) 28px;
+  box-shadow: var(--gb-card-shadow);
+}
+.gb-auth-header {
+  text-align: center;
+  margin-bottom: clamp(12px, 3cqh, 24px);
+}
+/* The header gives up height LAST, with no layout switch: the tagline goes in ONE step under
+   600px of height, then the mark shrinks from 56px at 560 to 32px at 480.
+   The tagline used to fold CONTINUOUSLY (max-height ramping from 20px at 600 to 0 at 560), which
+   meant every height in that band showed the line cut through the middle: 4px of a 16px line at
+   320x568, the iPhone SE size, flagged text_clipped by scripts/visual-gate on 28/09/2026. A line of
+   text has no useful partial state, so it is shown whole or not at all (content-radar's copy of this
+   screen had already made the same fix, 27/09/2026). The mark CAN shrink, so it still does.
+   A mark has a floor: shrunk continuously to zero it passed through an 11px smudge that read as
+   a rendering bug (screenshot at 390x480). So under 480 it goes in one step (~38px) and a
+   landscape phone gets the wordmark and the form. The old breakpoint moved the mark beside the
+   name and made the card jump 60px between two heights 40px apart. */
+.gb-auth-mark {
+  display: inline-flex;
+  margin-bottom: clamp(6px, calc(6px + (100cqh - 480px) * 0.075), 12px);
+}
+/* `img` too (29/09/2026): a surface whose CSP forbids inline `style` (gemcare: `style-src 'self'`)
+   cannot use GemMark, which paints its tile with style="fill:var(--gb-mark-bg)". It passes its
+   vendored gemboss-mark.svg as an <img> through `mark`, and that must shrink on a short screen too. */
+.gb-auth-mark svg,
+.gb-auth-mark img {
+  width: clamp(32px, calc(32px + (100cqh - 480px) * 0.3), 56px);
+  height: clamp(32px, calc(32px + (100cqh - 480px) * 0.3), 56px);
+}
+@container gb-auth (max-height: 479.98px) {
+  .gb-auth-mark {
+    display: none;
+  }
+}
+.gb-auth-header h1 {
+  font-size: clamp(19px, 2.75cqh, 22px);
+  font-weight: 700;
+  margin: 0 0 clamp(0px, calc((100cqh - 560px) * 0.1), 4px);
+  background: var(--gb-wordmark);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.gb-auth-header p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--gb-muted);
+}
+/* Out of sight, not out of the page: the same visually-hidden pattern the header uses under 400,
+   so a screen reader still hears the tagline, as it did when the fold took it to 0px. */
+@container gb-auth (max-height: 599.98px) {
+  .gb-auth-header p {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+.gb-auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(8px, 1.5cqh, 12px);
+}
+.gb-auth-form label {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(4px, 0.75cqh, 6px);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--gb-ink);
+}
+/* 38px → 44px. §9.1 wants a CONTROL at 44 (Apple HIG / WCAG 2.5.5 AAA); measured on the
+   live page 2026-09-09 these were 38, the sign-in button 40, the Google button 42, the
+   password toggle 13 and the Google connect link 15. All five were pre-existing, on the
+   first screen a merchant sees — and now the screen the MCP connect flow sends strangers to,
+   which is why they are fixed here rather than filed. min-height, not height, so a
+   browser that needs more room for the text still gets it. */
+/* THE FIELD'S SHAPE. In the admin it is the shared `gemboss-field gemboss-field--tall` class
+   (packages/ui/src/gemboss-field.css), which the admin's inputs keep wearing. Every other
+   surface has no such sheet, so `PasswordField`/`AuthField` default to `gb-auth-input`: the same
+   numbers, resolved from that file's Polaris fallbacks — 32px box raised to a 44px floor, 12px
+   side padding, 13px on 20px, radius 8, 1px border; 16px text under 768px (iOS zooms any field
+   under 16px on focus and does not zoom back); height:auto under a coarse pointer. */
+.gb-auth-input {
+  box-sizing: border-box; height: 32px; min-height: 44px; min-width: 0; padding: 0 12px;
+  font: inherit; font-size: 13px; line-height: 20px;
+  border: 1px solid; border-radius: 8px;
+}
+@media (max-width: 47.9975em) { .gb-auth-input { font-size: 16px; } }
+@media (pointer: coarse) { .gb-auth-input { height: auto; } }
+/* Colour only, over whichever class drew the shape. */
+.gb-auth-form input {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--gb-field-bg);
+  border-color: var(--gb-field-line);
+  color: var(--gb-ink);
+}
+.gb-auth-form input::placeholder {
+  color: var(--gb-placeholder);
+}
+/* HOVER AND FOCUS HAVE TO BE RESTATED HERE, and finding that out is the reason this block
+   exists. gemboss-field.css owns them, at (0,3,0) for the hover; the rule above out-specifies
+   the class — (0,3,1) when it lived in the admin's styled-jsx, (0,1,1) here, still above
+   (0,1,0) — so it took the hover background with it and the field stopped reacting to the
+   pointer (measured then: rest and hover identical in both themes). A token that wins the
+   cascade silently takes the states with it.
+   The focus ring is restated for a different reason: gemboss-field.css paints it Polaris
+   blue (#005bd3), which is not a colour this screen uses anywhere. This screen is B&W plus
+   iris, deliberately outside Polaris, and its own password toggle already rings in near-
+   black. Ink, in both themes, and the same ink gemcommunity's sign-in rings in. */
+.gb-auth-form input:hover:not(:disabled) {
+  background-color: var(--gb-field-hover);
+  border-color: var(--gb-hover-line);
+}
+.gb-auth-form input:focus-visible {
+  outline: 2px solid var(--gb-ink);
+  outline-offset: 1px;
+  border-color: var(--gb-ink);
+}
+/* Same shape as a .gb-auth-form label, for the one field whose input had to leave the label.
+   Declared rather than reused so a change to labels cannot silently un-match this one. */
+.gb-auth-field {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(4px, 0.75cqh, 6px);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--gb-ink);
+}
+.gb-auth-pw {
+  position: relative;
+  display: flex;
+}
+.gb-auth-pw input {
+  width: 100%;
+  /* Room for the button. Without it the last characters of a revealed password sit UNDER the
+     eye — which is only visible in the one state the button exists to produce. */
+  padding-right: 48px;
+}
+.gb-auth-pw-toggle {
+  /* min-WIDTH as well as height. #2144 gave this 44px of height and stopped, because the
+     script I checked it with only read heights — the repo's own gate reads both and caught
+     it at 41.22px wide, one check away from shipping "fixed" twice. */
+  min-height: 44px;
+  min-width: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--gb-muted);
+  transition: none;
+}
+.gb-auth-pw-toggle:hover {
+  color: var(--gb-ink);
+}
+/* focus-visible, not focus: a mouse click on the eye should not leave a ring sitting inside
+   the field. §9.2 wants the state to exist, not to fire for pointer users. */
+.gb-auth-pw-toggle:focus-visible {
+  outline: 2px solid var(--gemboss-primary, #1b1c1e);
+  outline-offset: -2px;
+}
+.gb-auth-error {
+  background: var(--gb-err-bg);
+  border: 1px solid var(--gb-err-line);
+  color: var(--gb-err-ink);
+  padding: 8px 10px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+/* Scoped to the submit button BY ITS OWN CLASS, NOT a bare "button". This rule paints a filled
+   black pill, and as ".login-form button" it was specificity 0,1,1 against ".pw-toggle" at 0,1,0 —
+   so the eye INSIDE the password field was painted as a second Sign-in button: black
+   gradient, white icon, and a 6px margin-top that pushed it out of the input. Measured in a
+   production build at all six widths (SS9.1): backgroundImage=GRADIENT,
+   color=rgb(255,255,255), marginTop=6px.
+   Second time in this repo — composer-owns-only-its-own-buttons.test.ts bans the same shape
+   in the chat composer. SS9.3: one visual owner, and the owner names its own element. */
+.gb-auth-form > .gb-auth-submit {
+  margin-top: clamp(2px, 0.75cqh, 6px);
+  min-height: 44px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: var(--gb-btn);
+  color: var(--gb-btn-ink);
+  cursor: pointer;
+  font-family: inherit;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.gb-auth-form > .gb-auth-submit:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+.gb-auth-form > .gb-auth-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/* The signup line. 24px of target, not 44: WCAG 2.5.8 is the threshold that has a standard
+   behind it for a LINK in a line of text, and inline-block is what makes the padding a target
+   at all — on an inline element it paints and measures nothing. */
+.gb-auth-foot {
+  margin: clamp(10px, 2cqh, 16px) 0 0;
+  font-size: 13px;
+  color: var(--gb-muted);
+  text-align: center;
+  line-height: 1.5;
+}
+.gb-auth-foot a {
+  display: inline-block;
+  min-height: 24px;
+  line-height: 24px;
+  padding: 0 2px;
+  color: var(--gb-accent);
+  font-weight: 600;
+  text-decoration: none;
+}
+.gb-auth-foot a:hover,
+.gb-auth-foot a:focus-visible {
+  text-decoration: underline;
+}
+.gb-auth-card .gb-auth-help {
+  margin: clamp(8px, 1.75cqh, 14px) 0 0;
+  font-size: 12px;
+  color: var(--gb-muted);
+  text-align: center;
+  line-height: 1.5;
+}
+/* The "trouble getting in?" line. min-height 24px: WCAG 2.5.8 for a link. */
+.gb-auth-card .gb-auth-help a {
+  display: inline-block;
+  min-height: 24px;
+  line-height: 24px;
+  /* The page's link colour, not the grey of the text around it (#3129): the reader of this line
+     is stuck and scanning for a way out. #5661f5 on white is 4.75:1, above the 4.5:1 12px needs. */
+  color: var(--gb-accent);
+  font-weight: 600;
+  text-decoration: none;
+}
+.gb-auth-card .gb-auth-help a:hover,
+.gb-auth-card .gb-auth-help a:focus-visible {
+  text-decoration: underline;
+}
+/* PHONE: the card IS the page. A floating card inside a 16px gutter spends ~90px of a 320px
+   screen on border, shadow and double padding for nothing — the pattern every major sign-in
+   page (Google, Apple, Shopify, Stripe) uses below tablet width is a full-bleed white sheet.
+   Inputs go to 16px because iOS Safari zooms the page on focus into any field under 16px,
+   and the zoom does not undo itself after sign-in. Safe-area padding keeps the form out of
+   the notch/home indicator in the desktop-app and standalone webviews. LAST in the sheet on
+   purpose: a short phone matches the max-height block too, and this one must win the padding. */
+@media (max-width: 480px) {
+  .gb-auth {
+    background: var(--gb-page-flat);
+  }
+  .gb-auth-stage {
+    padding: max(clamp(10px, 3cqh, 20px), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
+      max(clamp(10px, 3cqh, 20px), env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+  }
+  .gb-auth-card {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+  }
+  /* (no font-size here: the field's shape class — gemboss-field in the admin, gb-auth-input
+     elsewhere — reads 16px under this same breakpoint, which is what stops iOS zooming.) */
+}
+/* ALWAYS INSIDE THE VIEWPORT. Once the clamps above are at their floors, the only height left
+   is in what can go. Shed in order of what a person trying to sign in needs least, each step
+   at the height where the one before stopped fitting (measured, 390 and 1280 wide):
+     < 440  the "or" divider — the Google button is self-explanatory without it
+     < 400  the GemBoss wordmark — kept for screen readers, it is still the page heading
+     < 360  the signup and help lines, and the desktop card trims its padding
+   Never shed: email, password, Sign in, Google. Those are the page. The signup line survives
+   to 360 rather than going with the wordmark at 400: a stranger with no account is exactly
+   who this screen strands, and below 360 there is a scrollbar to reach it with. LAST in the sheet so
+   it wins over the phone block above. */
+@container gb-auth (max-height: 399.98px) {
+  .gb-auth-header {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}
+@container gb-auth (max-height: 359.98px) {
+  .gb-auth-card .gb-auth-help,
+  .gb-auth-foot {
+    display: none;
+  }
+  .gb-auth-stage {
+    padding-top: max(8px, env(safe-area-inset-top));
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+}
+/* The card only has padding to trim where it IS a card; on a phone it is already 0. */
+@container gb-auth (max-height: 359.98px) and (min-width: 481px) {
+  .gb-auth-card {
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+}
+/* DARK — a pure token flip. Not one rule above changes; every colour on this screen reads a
+   --gb-* token, so the whole screen inverts by redefining eighteen values here. The same
+   eighteen, with the same values, are what gemcommunity's .auth-wrap block declares.
+   Two selectors on purpose: the OS ask, ignored when a data-theme of light is set, and an
+   explicit data-theme of dark. LAST in the sheet so it beats the phone block, which sets a
+   flat page colour of its own.
+   When this sheet lived in the admin's styled-jsx, the root part needed :global() — styled-jsx
+   glued its scope class onto ":root", no html element carries one, and the whole dark block
+   matched nothing (measured 23/09/2026: --gb-surface still #ffffff on a dark-OS browser, with
+   typecheck and the text-reading tests all green). As a plain stylesheet it needs nothing; the
+   dark screenshots taken for the move are what show it still applies.
+   WHAT IT IS NOT: a dark mode for the admin. Nothing behind /login has one yet, so signing in
+   moves a dark-OS person to a light app. That is the same handoff gemcommunity has shipped
+   since its auth skin landed, and the alternative was leaving this screen the one white
+   rectangle on a dark machine. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gb-auth {
+    --gb-surface: #141517;
+    --gb-ink: #f4f4f3;
+    --gb-muted: #969c97;
+    --gb-line: rgba(255, 255, 255, 0.11);
+    --gb-field-line: rgba(255, 255, 255, 0.17);
+    --gb-field-bg: #1b1c1f;
+    --gb-field-hover: #212226;
+    --gb-placeholder: #7f838c;
+    --gb-accent: #8a93ff;
+    --gb-btn: linear-gradient(120deg, #f4f4f3 0%, #dfe0e4 100%);
+    --gb-btn-ink: #0b0b0c;
+    --gb-wordmark: linear-gradient(120deg, #f4f4f3 0%, #c9cbd2 100%);
+    --gb-hover: rgba(255, 255, 255, 0.06);
+    --gb-hover-line: rgba(255, 255, 255, 0.28);
+    --gb-err-bg: rgba(215, 44, 13, 0.16);
+    --gb-err-ink: #ff9d88;
+    --gb-err-line: rgba(245, 120, 95, 0.4);
+    --gb-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+    --gb-mark-bg: #202127;
+    --gb-page:
+      radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, 0.05), transparent 60%),
+      radial-gradient(1000px 500px at 80% 90%, rgba(138, 147, 255, 0.1), transparent 60%),
+      #0b0b0c;
+    --gb-page-flat: #0b0b0c;
+  }
+}
+:root[data-theme="dark"] .gb-auth {
+  --gb-surface: #141517;
+  --gb-ink: #f4f4f3;
+  --gb-muted: #969c97;
+  --gb-line: rgba(255, 255, 255, 0.11);
+  --gb-field-line: rgba(255, 255, 255, 0.17);
+  --gb-field-bg: #1b1c1f;
+  --gb-field-hover: #212226;
+  --gb-placeholder: #7f838c;
+  --gb-accent: #8a93ff;
+  --gb-btn: linear-gradient(120deg, #f4f4f3 0%, #dfe0e4 100%);
+  --gb-btn-ink: #0b0b0c;
+  --gb-wordmark: linear-gradient(120deg, #f4f4f3 0%, #c9cbd2 100%);
+  --gb-hover: rgba(255, 255, 255, 0.06);
+  --gb-hover-line: rgba(255, 255, 255, 0.28);
+  --gb-err-bg: rgba(215, 44, 13, 0.16);
+  --gb-err-ink: #ff9d88;
+  --gb-err-line: rgba(245, 120, 95, 0.4);
+  --gb-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+  --gb-mark-bg: #202127;
+  --gb-page:
+    radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, 0.05), transparent 60%),
+    radial-gradient(1000px 500px at 80% 90%, rgba(138, 147, 255, 0.1), transparent 60%),
+    #0b0b0c;
+  --gb-page-flat: #0b0b0c;
+}
+
+/* ═══ @gemboss/ui src/assistant.css ═══ */
+/* The assistant's popup / status bar / full-screen host — @gemboss/ui (28/09/2026).
+ *
+ * Moved from gemboss apps/admin/src/components/assistant/AssistantDockHost.module.css, where it was
+ * written for the admin's assistant; gemwatcher's and content-radar's assistants now wear the same
+ * host. Class names took a `gb-dock` prefix instead of CSS-module hashes (a consumer without CSS
+ * modules must be able to load it); every value is unchanged. The geometry assumes the GemBoss shell
+ * (@gemboss/ui AppShell): 56px topbar, 240px rail, drawer below 760px.
+ *
+ * Rendered by AssistantHost (assistant/host.tsx). State and the rules for when it shows are
+ * assistant/dock.ts + assistant/provider.tsx.
+ */
+
+
+.gb-dock {
+  position: fixed;
+  z-index: 320;              /* above the mobile tab bar (300), below the page editor (400) */
+  right: 24px;
+  bottom: 0;
+  /* MEASURED 2026-09-12, not assumed: the rail is 240px at every width above 760 (the shell's own
+     `margin-left: 240px`), and there is NO bottom tab bar — `.gemboss-mobile-nav` is not in the DOM
+     at 320 or 390. An earlier pass here wrote 72px and 56px from a stale comment in AppShell and
+     the popup covered a third of the rail, swallowing the menu clicks this feature exists to free.
+     240 (rail) + 24 (right gutter) + 24 (left gap) = 288. */
+  /* 460 is the app's own modal width (`.ui-modal`), so the assistant reads as part of the same
+     family instead of a wider one-off. 600 was a guess; this one already exists. */
+  width: min(460px, calc(100vw - 288px));
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  /* Frosted, the way the settings dialog reads — translucent surface over a small blur, so the page
+     underneath shows through as texture rather than detail.
+     NOT a full-screen scrim, though that is what settings uses. A scrim would block the page, and a
+     popup you cannot work behind is just the assistant page in a smaller box: the whole point of
+     this surface is that the screen under it stays usable. */
+  /* 93%, AND THE 5 POINTS THIS GAINED ON 25/09/2026 ARE A CONTRAST MEASUREMENT.
+     A translucent surface is `a·white + (1−a)·backdrop`, so the darkest it can ever go is `a·white`.
+     At 88% that floor was #E0E0E0, and `--gemboss-text-muted` (#686b71) measures 4.05:1 there —
+     UNDER AA. That is not a hypothetical corner of this component: `.header` and `.miniBar` both
+     declare `background: transparent` on purpose (see the note beside them), so `.headerStatus`
+     12px, `.miniStatus` 12px and `.booting` 14px all sit DIRECTLY on this surface in that colour.
+     93% puts the floor at #EDEDED and muted at 4.56:1. Chosen with, and kept equal to,
+     `.gemboss-popover-surface` in app/gemboss-shell.css — `one-popover-surface-four-wearers.test.ts`
+     fails if the two numbers ever stop agreeing. Change them THERE too.
+
+     TWO BACKGROUNDS, and the first is not decoration. `color-mix` and `backdrop-filter` ship on
+     DIFFERENT schedules — Firefox 103–112 and Safari 15.4–16.1 have the blur and not the mix — and
+     a declaration the parser rejects is DROPPED, not defaulted. Without the plain line, the dock had
+     NO background at all in those browsers: the page running straight through the chat. It shipped
+     that way on 12/09/2026 and nobody could see it from here. NOT a custom property: `background:
+     var(--some-mix-token)` would fail at computed-value time instead, which falls back to `unset`
+     rather than to the line above — worse than the bug it would be trying to share. */
+  background: var(--gemboss-surface);
+  background: color-mix(in srgb, var(--gemboss-surface) 93%, transparent);
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid var(--gemboss-divider);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.05), 0 24px 64px rgba(15, 23, 42, 0.18);
+  overflow: hidden;
+
+  /* ── Arriving ────────────────────────────────────────────────────────────────────────────────
+     Short and plain: 140ms, ease-out, a small rise and a fade. Long enough to read as "it came
+     from somewhere", short enough that nobody waits for it — a popup a seller opens twenty times
+     a day must not perform.
+
+     TRANSFORM AND OPACITY ONLY. Height and horizontal offset are set from a pointer, and a
+     transition on those means the box trails the finger instead of following it. Those two stay
+     instant by construction, not by luck. */
+  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 140ms ease-out;
+}
+/* The entry itself. `@starting-style` is what lets an element animate the frame it appears in
+   (Chrome 117+/Safari 17.5+; the desktop app is Chromium 132). Anywhere older simply appears —
+   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; }
+}
+/* Nothing animates while a pointer is setting the numbers — see `dragging` in the host. */
+.gb-dock-dragging, .gb-dock-dragging * { transition: none !important; }
+/* Where `backdrop-filter` is missing there is no blur to smear the page, and 93% opaque over sharp
+   body text is a chat you read through. Back to a solid surface — what this dock wore before it was
+   frosted. Same reasoning, same shape, as `.gemboss-popover-surface`. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .gb-dock { background: var(--gemboss-surface); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gb-dock { transition: none; }
+}
+
+/* The floating popup IS the base geometry above; this class exists so the DOM names the state —
+   `styles[mode]` was `undefined` for it, which is invisible in a screenshot and unnameable in a test. */
+.gb-dock-dock { }
+
+/* Still mounted — that is what keeps a run alive — just not on screen. */
+.gb-dock-hidden { display: none; }
+
+/* ── Full: exactly the area `main` occupies, so the dedicated page looks untouched ── */
+.gb-dock-full {
+  /* BELOW `.gemboss-route-shell` (z-index 5), which covers this exact rectangle while the next route
+     loads. At the popup's 320 the assistant stayed painted over the holding screen, so leaving this
+     page looked like nothing happened — and the screen's click-catcher was defeated, so clicks
+     during the wait landed on chat controls. Fixed position still puts it over `main`'s content. */
+  z-index: 4;
+  top: 56px;
+  left: 240px;             /* the rail, measured — see the note on .host */
+  right: 0;
+  bottom: 0;
+  width: auto;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--gemboss-app-bg);
+}
+
+/* ── 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. */
+.gb-dock-fullchrome {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  z-index: 1;
+  display: flex;
+  gap: 8px;
+}
+.gb-dock-shrink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 44px;          /* §9.1 control tier */
+  padding: 0 12px;
+  border: 1px solid var(--gemboss-divider);
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-surface);
+  color: var(--gemboss-text-muted);
+  font: inherit;
+  font-size: var(--gemboss-fs-caption);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.gb-dock-shrink:hover { background: var(--gemboss-hover); color: var(--gemboss-text); }
+.gb-dock-shrink:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
+.gb-dock-shrink svg { width: 16px; height: 16px; flex: 0 0 auto; }
+/* On a phone the label would crowd the chat header; the icon carries it there. */
+@media (max-width: 560px) {
+  .gb-dock-shrink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .gb-dock-shrink { padding: 0; width: 44px; justify-content: center; }
+  /* Except the way to a person: a head-and-shoulders icon alone does not say "a human answers". */
+  .gb-dock-shrink-keep span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
+  .gb-dock-shrink-keep { padding: 0 12px; width: auto; }
+  /* Two controls do not fit in the empty half of the chat header at phone width — floated, they sat
+     on the title ("Ask th…", measured at 320 and 390). In the flow they cost one short strip here,
+     and only here. */
+  .gb-dock-fullchrome { position: static; justify-content: flex-end; padding: 8px 12px 0; }
+}
+
+/* ── Mini: a status bar, not a window ── */
+.gb-dock-mini {
+  height: auto;
+  width: min(320px, calc(100vw - 288px));
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);   /* Safari; the host above carries the rest */
+  backdrop-filter: blur(14px) saturate(1.4);
+  border-radius: 12px 12px 0 0;
+}
+.gb-dock-mini .gb-dock-body { display: none; }
+.gb-dock-minirow { display: flex; align-items: center; padding-right: 4px; }
+.gb-dock-minirow .gb-dock-minibar { flex: 1 1 auto; min-width: 0; }
+/* `width: 44px` is a BASIS, not a floor: the default `flex-shrink: 1` let this button give ground to
+   the row beside it, so the × measured under 44 at all six widths while the rule above read as done.
+   MEASURED 2026-09-12 — the same trap as every other "the declaration is there" bug today. */
+.gb-dock-minirow .gb-dock-icon { flex: 0 0 auto; }
+
+.gb-dock-minibar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 12px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: var(--gemboss-text-strong);
+  cursor: pointer;
+  text-align: left;
+}
+.gb-dock-minibar:hover { background: var(--gemboss-hover); }
+.gb-dock-minibar strong { font-size: 13px; font-weight: 600; flex: 0 0 auto; }
+.gb-dock-ministatus {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--gemboss-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gb-dock-minichevron { font-size: 10px; color: var(--gemboss-text-muted); }
+
+/* ── Resize grip (dock only) ── */
+.gb-dock-grip {
+  /* OVERLAID on the header's top edge, not stacked above it. As its own 14px row it pushed the
+     title down and the header read as top-heavy — Chris: "header hơi lệch do padding top hơi nhiều".
+     The drag area is unchanged; it simply no longer costs vertical space. */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 14px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  cursor: ns-resize;
+  touch-action: none;
+  background: transparent;
+}
+.gb-dock-grip > span {
+  display: block;
+  width: 44px;          /* a mouse target wide enough to find without aiming */
+  height: 4px;
+  border-radius: 2px;
+  background: var(--gemboss-divider);
+}
+.gb-dock-grip:hover > span, .gb-dock-grip:focus-visible > span { background: var(--gemboss-text-muted); }
+.gb-dock-grip:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; }
+
+/* ── Dock header ── */
+.gb-dock-header {
+  flex: 0 0 auto;
+  cursor: grab;              /* the strip itself drags the popup sideways */
+  touch-action: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px 0 16px;
+  min-height: 48px;
+  border-bottom: 1px solid var(--gemboss-divider);
+  background: transparent;   /* the frosted host shows through; a second fill would double it */
+}
+.gb-dock-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gemboss-text-strong);
+  white-space: nowrap;
+  /* Let the NAME absorb a squeeze. Adding the ＋ button pushed the header to 290px inside a 277px
+     popup at 320 — a nowrap title with no min-width cannot give ground, so the row overflowed
+     instead. Measured 2026-09-12. */
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gb-dock-status {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--gemboss-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gb-dock-header:active { cursor: grabbing; }
+.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; }
+/* 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
+   describing. The 📌 that used to sit in the middle of them is gone entirely — see lib/assistant-dock. */
+.gb-dock-action { margin-right: 8px; }
+
+.gb-dock-icon {
+  /* 44px control target — Apple HIG / WCAG 2.5.5. The icon inside stays 18px. */
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  cursor: pointer;
+  padding: 0;
+}
+.gb-dock-icon:hover { background: var(--gemboss-hover); color: var(--gemboss-text-strong); }
+.gb-dock-icon:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; }
+.gb-dock-icon svg { width: 18px; height: 18px; }
+.gb-dock-icon-on { color: var(--gemboss-active-fg); background: var(--gemboss-active-bg); }
+
+.gb-dock-dot {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gemboss-divider);
+}
+.gb-dock-dot-busy { background: var(--gemboss-primary); animation: gb-dock-pulse 1.4s ease-in-out infinite; }
+.gb-dock-dot-unread { background: var(--gemboss-success-strong); }
+@keyframes gb-dock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .gb-dock-dot-busy { animation: none; } }
+
+/* ── Tabs: the assistant, or a person on the Gem team (dock only) ──────────────────────────────
+   Their own row under the header rather than inside it: at 320px the header already spends 176px
+   on four 44px controls, and two text tabs do not fit in what is left. */
+.gb-dock-tabs {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 4px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--gemboss-divider);
+}
+.gb-dock-tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 44px;          /* §9.1 control tier */
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--gemboss-text-muted);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.gb-dock-tab:hover { color: var(--gemboss-text-strong); }
+.gb-dock-tab[aria-selected="true"] { color: var(--gemboss-text-strong); font-weight: 600; border-bottom-color: var(--gemboss-primary); }
+.gb-dock-tab:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; }
+.gb-dock-badge {
+  min-width: 18px;
+  padding: 0 6px;
+  border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-primary);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+
+/* ── Body: the assistant itself ── */
+.gb-dock-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  min-width: 0;
+}
+.gb-dock-body > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+/* Each tab's pane. A hidden pane stays MOUNTED — `display:none`, never unmount (see the host). */
+.gb-dock-pane { display: flex; min-width: 0; min-height: 0; }
+.gb-dock-pane > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+/* The package's own workspace (AssistantWorkspaceLayout) sizes itself to the viewport on its own page;
+   inside the host it fills the host instead. Moved here from the admin's assistant-dock-admin.css
+   (28/09/2026): every surface that puts the layout in the host needs it, or the layout keeps
+   `height: calc(100dvh - 56px)` inside a popup a few hundred pixels tall. */
+.gb-dock-body .gemboss-assistant-layout,
+.gb-dock-body .gemboss-assistant-page { height: auto; min-height: 0; }
+.gb-dock-pane[hidden] { display: none; }
+
+.gb-dock-booting {
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: var(--gemboss-text-muted);
+  font-size: 14px;
+}
+
+.gb-dock-sr {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Phone: the popup spans the screen above the bottom tab bar; full mode loses the rail gutter ── */
+/* ── Narrow: five 44px controls + a title do not fit ────────────────────────────────────────
+   MEASURED 2026-09-12 at 320px: the header row wanted 342px inside a 291px popup. 5 × 44 = 220
+   leaves 71px for a title and a status line. So the two controls that are about BROWSING WHILE IT
+   RUNS — the pin, and the word for what the dot already says — stand down; new chat, full screen,
+   minimize and close stay. Dropping a control beats letting the row overflow off the edge. */
+@media (max-width: 420px) {
+  .gb-dock-status { display: none; }
+}
+
+/* ── Phone: the rail is an off-canvas drawer, so both geometries reclaim the full width ── */
+@media (max-width: 760px) {
+  .gb-dock {
+    right: 8px;
+    left: 8px;
+    width: auto;
+    padding-bottom: env(safe-area-inset-bottom);
+    border-radius: 12px 12px 0 0;
+  }
+  .gb-dock-mini { width: auto; }
+  .gb-dock-full {
+    left: 0;
+    right: 0;
+    top: 56px;
+    bottom: 0;
+    border-radius: 0;
+  }
+}