@gemboss/ui 0.1.0

package/src/shell.css

@@ -0,0 +1,1069 @@
+/* @gemboss/ui: the SHELL every GemBoss surface shares (29/09/2026).
+ *
+ * Rail (`.icon-nav` + `.gnav-*`), the fixed 56px topbar, `.gemboss-platform-main`, the mobile drawer,
+ * the assistant's thread rail (`.gemboss-assistant-*`), the shared popover surface, the account chip and
+ * its menu, and the rail's Assistant item. Until 29/09/2026 these rules lived in the admin's
+ * apps/admin/src/app/gemboss-shell.css and apps/admin/scripts/export-ui-css.mjs EXTRACTED them for other
+ * surfaces by an allow-list. Moved here verbatim (comments included, original order kept) so the package
+ * owns them and the admin imports them like every other surface: gemboss-shell.css pulls this file in
+ * with @import on its line 2, which puts these rules exactly where they sat before (a cascade check found
+ * no staying admin rule of equal specificity that shared an element with a moved one).
+ *
+ * The admin's own components stay in gemboss-shell.css. export-ui-css.mjs fails the build if a rule of
+ * these families reappears there: one owner per component (CLAUDE.md §9.3).
+ */
+
+/* ── WHAT AN ANCHORED POPUP IS MADE OF — ONE RECIPE, FOUR WEARERS ─────────────
+ *
+ * The topbar's popups were four copies of the same six declarations. Counted 25/09/2026:
+ * `.gemboss-shop-switcher-menu` and `.gemboss-editor-menu` and `.gemboss-pagepicker-menu` each wrote
+ * `background: var(--gemboss-surface)` + divider border + radius + `--gemboss-shadow-raised` in its
+ * own block, and the account menu wrote the same idea a fourth time as INLINE STYLES with a
+ * hardcoded `#fff` and a hardcoded shadow — so it was the one surface in the family that no token
+ * change could ever reach. Three of the four already agreed on 12px; the account chip's 12 was a
+ * literal that happened to match.
+ *
+ * THIS CLASS IS ONLY THE SURFACE — what the popup is made of. Position, z-index, width, padding and
+ * the entry animation stay with each popup, because those genuinely differ (the switcher hangs off
+ * its trigger at `absolute`, the editor menus are `fixed` at a measured point). Pulling those
+ * together too is how a shared class becomes a thing every wearer has to fight.
+ *
+ * THE FROSTING IS THE POINT, and the blur is the assistant dock's, not a new taste: see
+ * packages/ui/src/assistant.css (the assistant dock, formerly AssistantDockHost.module.css), which has read `blur(14px) saturate(1.4)`
+ * since 12/09/2026. Chris asked for the topbar popups to read the same way — the page under them
+ * stays legible as texture while you scroll, so the popup sits ON the page rather than punching a
+ * hole in it.
+ *
+ * 93%, NOT THE DOCK'S 88% — and the 5 points are a contrast measurement, not a preference.
+ * A translucent surface is `a·white + (1−a)·backdrop`, so the DARKEST it can ever go is `a·white`.
+ * At 88% that floor is #E0E0E0, where `--gemboss-text-muted` (#686b71) measures 4.05:1 — UNDER AA.
+ * That colour is not decoration in this family: it is the switcher's "Your stores" heading, the
+ * editor menu's group labels and the account chip's email line, all at 11–12px, so 4.5:1 is the bar
+ * they have to clear. 93% puts the floor at #EDEDED and muted at 4.56:1; `--gemboss-danger-strong`
+ * ("Sign out") reaches 5.62:1 and body text 14.57:1. A black backdrop is not hypothetical here —
+ * the editor menus open over the preview canvas, which renders whatever hero image the theme has.
+ * (The dock's own 88% has the same floor. It is not this diff's to move, and it is over the admin's
+ * own pale canvas rather than a storefront preview, but it is worth a look.)
+ *
+ * `@supports` IS NOT DECORATION. 93% opaque is readable ONLY because a blur is smearing what is
+ * behind it; where `backdrop-filter` is missing, that same 93% is a sheet of body text showing
+ * straight through the menu labels. The fallback below puts the surface back to fully opaque, which
+ * is exactly what these four wore before this block existed.
+ */
+.gemboss-popover-surface {
+  /* TWO backgrounds, and the first one 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 this line those browsers give
+     the popup no background at all: a fully transparent menu with the page running through the
+     labels, which is worse than either the frosted or the opaque version. The `@supports` block
+     below guards the other axis and cannot cover this one: it asks about backdrop-filter, which
+     those browsers HAVE. Caught by /code-review, 25/09/2026. */
+  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); }
+}
+
+/* ─── 72px IconNav rail ───────────────────────────────────────────────────── */
+.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;
+}
+
+/* Account dropdown (avatar chip). The panel was inline styles on the <div> until 25/09/2026 —
+   including a hardcoded `#fff` and its own `0 12px 32px` shadow, the one surface in this family a
+   token change could not reach. Surface comes from `gemboss-popover-surface` now, so it frosts and
+   re-themes with the other three; the shadow it lost was heavier than `--gemboss-shadow-raised`,
+   which is the point of having one. */
+.gemboss-account-menu {
+  position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; z-index: 320;
+  overflow: hidden;
+}
+
+/* Account dropdown menu items (avatar chip) — CSS-driven hover/focus, replaces inline JS handlers. */
+/* min-height 44 (28/09/2026): 12px padding around a 13px line measured 42.84px — under the 44px control
+   floor (CLAUDE.md §9.1), in the admin's own menu and in every surface wearing it through @gemboss/ui. */
+.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-danger` var(--gemboss-danger) is 4.25:1 on `--gemboss-hover` #eceef2, and this row takes that hover
+   background two lines above — so the one moment the item is under the cursor is the moment its label
+   drops below AA. `--gemboss-danger-strong` #b42318 is 5.66:1 there and 7.30:1 on white. */
+.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) {
+  /* The single-row mobile top-bar layout (logo · search-icon · shop · account) is
+     defined in the appended block at the END of this file so it wins the duplicate
+     base rules. Here we just hide the rail + dev-only MCP chip and zero the rail
+     margin (the bottom-bar clearance + topbar padding also live in that late block). */
+
+  /* .icon-nav is the off-canvas drawer on mobile (appended block at file end) — not hidden. */
+
+  .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;       /* below fixed topbar */
+  margin-left: 72px;      /* right of fixed icon-nav */
+  min-height: calc(100vh - 56px);
+  padding: 24px;
+  background: #fafafb;
+}
+
+@media (max-width: 768px) {
+  .gemboss-platform-main {
+    margin-left: 0;
+    padding: 16px;
+  }
+}
+
+/* ─── Canonical shell pass ─────────────────────────────────────────────────
+ * Keep this block last. Earlier iterations of the shell left multiple topbar
+ * and rail definitions in this file; these rules define the current platform
+ * layout explicitly so the app reads as one organized product surface.
+ */
+.gemboss-platform-shell {
+  display: block;
+  min-height: 100vh;
+  background: var(--gemboss-app-bg); /* unify with main content — was #f6f6f4 beige showing through */
+}
+
+.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;
+  /* THE single `.gemboss-platform-topbar` base rule (two earlier duplicates removed). Symmetric
+     side columns so the centre search bar is TRUE-centred (was `244px … 1fr`, which pushed it
+     ~164px left of centre). Brand sits left in col1, actions right in col3. */
+  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); /* authoritative main-content bg (token = #ffffff); was hardcoded #f6f6f4 gray */
+  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;
+    }
+}
+
+/* Split from the admin rule ".gemboss-pagepicker-list, .gnav-scroll" (29/09/2026): the admin keeps ".gemboss-pagepicker-list". */
+.gnav-scroll { scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; }
+
+/* Rail footer → a real button that opens the memory/knowledge drawer. */
+.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; }
+       /* restore — was hidden ≤760px */
+    .gemboss-platform-main {
+      padding-top: 56px;                              /* single-row topbar (was 104px) */
+      padding-bottom: calc(56px + env(safe-area-inset-bottom));
+    }
+}
+
+@media (pointer: coarse) {
+    /* 44, not 38. The ≤460px block raises this chip for a narrow phone; a touch screen at any width
+       deserves the same target, and both bars were measured with room for it (the seller cluster keeps
+       17px+ of slack above 460, the admin bar far more). */
+    .gemboss-account-chip { width: 44px; height: 44px; }
+    /* Store-checklist card. Measured on a Pixel 5 profile (pointer: coarse, 393px): "Mở" was 20px and
+       "Nhờ Assistant làm" 32px, and probing with elementFromPoint showed no ::after overlay covering
+       the gap — the box WAS the target. Two tiers on purpose (CLAUDE.md §9.1): a link inside a list is
+       24px (WCAG 2.5.8 AA), a control is 44px (2.5.5 AAA). Sizing links to 44 here would push the three
+       rows apart by 72px for no standard that asks for it. */
+    /* The nav drawer's rows and the autonomy dial — the two families left on /app/operator once the
+       topbar (#2177) is taken. Measured 09/09/2026 on a Pixel 5 profile at 393px: `.gnav-item` 36px,
+       `.gemboss-autonomy-dial button` 32px, and elementFromPoint found NO overlay making either up —
+       the dial's own ::after stops at 34px, so somebody started this and did not finish.
+  
+       min-height, not padding or a bigger font: it grows the target without moving the label, so the
+       drawer keeps its rhythm. Touch only — raising these boxes under a MOUSE is what collapsed the
+       topbar cluster at 320px the last time somebody tried it. */
+    .gnav-item { min-height: 44px; }
+    /* /app/assistant — the last screen on this list, and the only one a seller opens to TALK.
+       Measured 23/09/2026 on production with the official gate (`scripts/visual-gate`, hit test, not a
+       hand count): `tap_target_size` failed at 320, 390 AND 768 with five to six controls under the
+       floor, and `tap_target_gap` failed with two pairs closer than 8px. Every other admin screen
+       measured the same day came back clean, so this is not the Polaris rules above missing a case —
+       these three are app-authored buttons that no rule ever covered.
+  
+       The two chrome buttons are simple: `--collapse` declares 34x34 outright, and `--newchat`
+       measured 35x35 because its padding is all it has. A floor on both.
+  
+       THE FEEDBACK BUTTONS ARE THE REAL ONE. 👍/👎 under an answer at 27x23, three in a row 4px apart
+       — the smallest targets in the admin, on the control that tells us whether an answer was any
+       good. Both halves have to move: growing the buttons without the gap leaves two 44px targets
+       4px apart, which §9.1 counts as a different failure for the same reason (a thumb lands between
+       them). `gap: 8px` is the floor, not a taste.
+  
+       Why `min-width` too: a target is an AREA, and these are the width case — 27px wide is the
+       narrower dimension. The comment on the Polaris rule above records the same lesson, learned by
+       shipping a height-only fix first. */
+    .gemboss-assistant-collapse,
+    .gemboss-assistant-newchat { min-height: 44px; min-width: 44px; }
+}
+
+/* ════ Rail → labeled sidebar, Shopify-admin / GemCRM look (240px) ═════════════════
+   Icon+label rows, sub-nav indented under the ACTIVE hub (click to reveal — no hover-
+   flyout, no caret), section separators. `gnav-*` classes, and appended LAST so it
+   out-cascades the three duplicate 72px `.icon-nav` base blocks earlier in this file. (It used to
+   cite `.icon-nav-item` as the thing to avoid; that family has since been deleted, but the duplicate
+   `.icon-nav` blocks are still there and still the reason the order matters.) */
+.icon-nav {
+  width: 240px;
+  padding: 12px 12px 0;
+  overflow: hidden;
+  /* White rail (Shopify/Polaris look) against the warm-ivory content — the 1px right
+     border (from the base rule) gives the clean nav↔content separation. */
+  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; }
+
+/* top-level item — a rounded row (Polaris density): icon + label */
+.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); }
+
+   /* neutral gray on white (Polaris-like) */
+/* Active hub: a full coral pill when you're ON the hub's own page. But when a deeper
+   LEAF is the destination, the hub quiets to coral text only — so the leaf below carries
+   the strong "you are here" and the two don't compete. */
+.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; }
+
+/* sub-nav — indented so the child label aligns EXACTLY under the parent hub's label
+   (no "thò thụt"/jutting): hub label starts at 44px = 12px row padding + 20px icon + 12px
+   gap, so the child's left padding must be 44px too. Shown only for the active hub. */
+.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;
+}
+
+/* NGÓN TAY, chỉ trên cảm ứng. Đo 11/09/2026 ở 768px có `hasTouch`, bắn tia từ tâm: vùng bấm thật là
+   216×28 — `padding: 6px … ; margin: 1px 0` cho ra cao 27,6px và khe 1px giữa hai mục.
+   32px vẫn ĐẠT tầng link-trong-danh-sách (24px, WCAG 2.5.8 AA), nên chiều cao không phải cái hỏng.
+   Cái hỏng là KHE: §9.1 đòi hai target cách nhau ≥8px, và chỉ miễn khi cả hai đã ≥44px. Nâng lên 44
+   trên cảm ứng vừa đưa mục vào tầng điều khiển vừa làm luật khe hết áp dụng — một thay đổi thay vì hai.
+   Chuột không đổi: một sub-nav cao 44px trên desktop sẽ đẩy nội dung xuống mà không ai cần.
+   ĐÃ BẮN TIA TRƯỚC KHI PHÓNG TO. `::after` trả `none`, nên không có lớp phủ nào đang âm thầm cấp
+   target — kiểm này tồn tại vì fleet từng phóng to một control vốn ĐÃ đủ 44px bằng overlay. */
+@media (pointer: coarse) {
+  .gnav-subitem { min-height: 44px; }
+}
+
+.gnav-subitem:hover { background: var(--gemboss-nav-hover); color: var(--gemboss-text); }
+
+/* Active leaf — the strong "you are here": coral pill + a coral accent bar on the tree line. */
+.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;
+}
+
+/* section separator (Assistant · Settings) */
+.gnav-sep { height: 1px; background: var(--gemboss-divider); margin: 8px 6px; }
+
+/* Assistant = the AI front door, not just another row. A coral-tinted pill that stands
+   apart from the neutral hubs above; deepens on hover; becomes the standard active pill
+   when it's the current page. */
+.gnav-item.gnav-assistant {
+  /* Label uses the DARKER coral for WCAG AA (4.77:1 on the 8% pill; the lighter
+     --gemboss-primary was 2.87, failed). Icon + pill keep --gemboss-primary as the accent. */
+  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); }
+
+/* Content clears the 240px sidebar. The assistant OVERLAYS the content (pops up on top) — it
+   must NOT push the content sideways (Chris: "popup lên trên chứ ko đẩy content dịch ra"). Since
+   the popup moved to @gemboss/ui's AssistantHost (a fixed-position host, packages/ui/src/assistant.css)
+   nothing here shifts for it; the old slide-out panel's rules were deleted 28/09/2026. */
+.gemboss-platform-main { margin-left: 240px; }
+
+/* ════ Mobile (Shopify-style): hamburger → left slide-in nav drawer ════════════════
+   Desktop hides the hamburger + backdrop; ≤760px the rail becomes an off-canvas drawer
+   over a dimmed backdrop, and the bottom tab bar is retired. */
+.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); }
+    /* hamburger — leftmost in the top bar, mirrors the account chip's hit size */
+    .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); }
+    /* rail → off-canvas drawer (slides over the content; later source beats the
+       earlier ≤760 `display:none`) */
+    .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; }
+}
+
+/* ════ Assistant THREAD HISTORY rail (GemCRM AIAssistant model) — a left column of saved
+   chat threads + "New chat", with the centered chat column to its right. The layout owns the
+   fixed viewport height; the chat column inside fills it. ════════════════════════════════ */
+/* ── Tab trong popup: nhiều đoạn chat cùng sống ─────────────────────────────────────────────
+   Trước đây chat gắn khoá theo mã phiên, nên bấm ＋ hay đổi thread là React THÁO component, và
+   cleanup của GemChat huỷ luôn lượt đang chạy. Nay mọi đoạn đang mở đều được render; cái không xem
+   thì ẩn bằng `hidden` chứ không tháo. Tab chỉ có ở popup — full mode đã có rail liệt kê thread,
+   thêm một danh sách nữa trong 600px thì không còn chỗ đọc. */
+.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 > *` (specificity 0,1,1) sets `flex: 1 1 auto` on every child and BEATS a
+   bare class. Measured: the tab strip was being stretched and the chat behind it got clipped under
+   the tabs. Matching the parent in the selector is what makes this rule win. */
+.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;              /* §9.1 — một tab là điều khiển, không phải nhãn */
+  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` là điểm xuất phát chứ không phải sàn trong flexbox */
+  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;
+}
+
+/* Rail ở full mode: nhiều thread có thể chạy cùng lúc, phải nói ra cái nào. */
+.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; }
+}
+
+/* ── Trợ lý chạy nền: một mount duy nhất trong shell ─────────────────────────────────────────
+   Trợ lý từng sống trong route /app/assistant, nên bấm sang menu khác là unmount — và cleanup của
+   GemChat abort luôn lượt đang chạy. Nay route chỉ XIN chế độ full; chat nằm ở AssistantDockHost.
+
+   `is-dock` = dạng popup nổi 600px: không có rail lịch sử (264px trong 600px thì không còn chỗ
+   đọc câu trả lời — muốn lịch sử thì bấm nút mở toàn màn hình). */
+.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;
+}
+
+/* Chấm "đang chạy" trên rail: trợ lý vẫn làm việc trong lúc người bán xem màn khác. Đặt bằng class
+   trên <body> (AssistantDockContext) thay vì prop, vì IconNav là memo — re-render cả rail mỗi lần
+   busy đổi thì đắt hơn giá trị của cái chấm. */
+.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;
+  /* Blend with the page (just a hairline divider) — no panel fill, so the sidebar reads light. */
+  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; }
+
+/* Keyboard-shortcut hint badge (new-chat + search). Subtle, muted, monospace digits. */
+.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;
+}
+
+/* hide the "/" hint once the search is focused/typed-in */
+.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; }
+
+/* Search box — filters the thread list (diacritic-insensitive). */
+/* LAYOUT ONLY — the box is `gemboss-field gemboss-field--group` on the same element. */
+.gemboss-assistant-search { gap: 6px; }
+
+/* …and no focus-within: `gemboss-field--group` carries the focus ring for every group. */
+.gemboss-assistant-search > svg { width: 15px; height: 15px; fill: var(--gemboss-text-muted); flex: 0 0 auto; }
+
+/* …and nothing here: the wrapper is `gemboss-field gemboss-field--group` and the input inside wears
+   `gemboss-field__bare`, which is this exact "draw nothing" written once for every such field. */
+.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; }
+
+/* Reassurance footer — durable store memory persists across threads. Muted + light. */
+.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;
+}
+
+/* Row is a CONTAINER now (so it can hold the open-button + per-row actions); the open area
+   is the inner .gemboss-assistant-thread-main button. */
+.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: var(--gemboss-selected, 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); }
+
+/* Row actions menu (kebab → Ghim / Đổi tên / Xuất Markdown / Xóa). */
+.gemboss-assistant-thread.menu-open { background: var(--gemboss-selected, rgba(0,0,0,0.07)); }
+
+.gemboss-assistant-thread.menu-open .gemboss-assistant-thread-actions { opacity: 1; }
+
+.gemboss-assistant-menu {
+  /* position:fixed + top/left set inline (anchored to the kebab) so the overflow:auto
+     thread list can't clip it; flips above the button near the viewport bottom. */
+  z-index: 60;
+  width: 184px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  /* Surface comes from `gemboss-popover-surface` since 25/09/2026. The line it replaced was
+     `background: var(--gemboss-bg, #fff)`, and `--gemboss-bg` is declared NOWHERE — so what actually
+     painted here was the hardcoded `#fff`, and the token was decoration. One fewer entry in the
+     debt `check-tokens-exist` keeps. */
+}
+
+.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; }
+
+/* Per-row actions (rename/delete): hidden until row hover/focus, fading over the meta line. */
+.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; }
+
+/* Inline rename input replacing the row content while editing. */
+.gemboss-assistant-thread.editing { background: var(--gemboss-selected, rgba(0,0,0,0.07)); }
+
+.gemboss-assistant-thread-edit { display: flex; align-items: center; gap: 2px; width: 100%; padding: 6px 6px; }
+
+/* LAYOUT ONLY — `gemboss-field` on the input owns the look. At (0,1,1) this rule outranked the class
+   and kept the rename box in its own family (13px, muted border) right through the conversion. */
+.gemboss-assistant-thread-edit input { flex: 1 1 auto; min-width: 0; }
+
+/* …and no focus rule either: `outline: none` here removed the field's own focus ring (WCAG 2.4.7). */
+/* Inside the history layout the chat column drops its own fixed-height/top-padding (the layout
+   owns the height) and stops centering — it fills the space beside the rail. */
+.gemboss-assistant-layout .gemboss-assistant-page {
+  height: 100%;
+  max-width: 820px;
+  flex: 1 1 auto;
+  /* A flex item's default `min-width: auto` refuses to shrink below its own min-content
+     width. Beside the 60px rail on a phone that left the chat column ~367px wide inside
+     319px of space, and `.is-assistant-route .gemboss-platform-main` is `overflow: hidden`
+     — so the send button, the header line and the composer's right edge were CLIPPED AWAY,
+     not scrollable to. `min-width: 0` lets the column take the width it actually has. */
+  min-width: 0;
+  padding-top: 16px;
+}
+
+/* While a thread's turns load, keep the current chat visible but subtly dimmed (no blank flash). */
+.gemboss-assistant-layout .gemboss-assistant-page.is-switching { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; }
+
+/* Collapsed rail (desktop toggle, persisted) — and the same shape applies on narrow screens. */
+.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; }
+}
+
+/* ════ Assistant — DEDICATED PAGE (Sidekick/GemCRM-style), replaces the slide-out popup.
+   A centered chat column filling the height under the 56px top bar. ════════════════════ */
+/* Fit the viewport exactly (like GemCRM) so ONLY the message list scrolls, not the
+   page. `main`'s page gutter is zeroed on this route (see `.is-assistant-route`
+   below) — which differs desktop (24px) vs mobile (56/0) — so here we only subtract
+   the 56px fixed topbar. No gutter dependency = no stray scrollbar at any width. */
+.gemboss-assistant-page {
+  height: calc(100dvh - 56px);
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+  /* Breathing room so the "Ask the Operator" header isn't jammed under the topbar
+     (GemCRM gives its header a clear top gutter). This padding lives INSIDE the
+     fixed-height column — the flex scroll area shrinks to absorb it, so the page
+     still fits the viewport exactly (no scrollbar). box-sizing:border-box. */
+  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;
+}
+
+/* ════ Kill the phantom 56px page scroll (fixes the assistant page's stray scrollbar).
+   `.gemboss-platform-main` has `margin-top: 56px` (to clear the fixed topbar) and is the
+   shell's only in-flow child, so that top margin COLLAPSES out through the block-level
+   shell — pushing the whole `min-height:100vh` shell down 56px → every page is 56px
+   taller than the viewport. Giving the shell a block formatting context contains the
+   margin: `main` still sits at 56px, but the shell no longer gets shoved down. Visually
+   identical everywhere; just removes the always-on 56px overflow. ════════════════════ */
+.gemboss-platform-shell { display: flow-root; }
+
+/* CHỪA CHỖ CHO THIỆP, thay vì để nó đè lên đuôi trang.
+   `--gemboss-invite-h` do chính DesktopInvite.tsx công bố bằng ResizeObserver, và được GỠ khi thẻ
+   biến mất — nên khi không có thiệp, `var(…, 0px)` cho ra đúng padding cũ.
+
+   VÌ SAO LUẬT NÀY NẰM Ở ĐÂY, CUỐI FILE, CHỨ KHÔNG NẰM CẠNH `.gemboss-platform-main`:
+   selector ấy được khai BỐN LẦN trong file này (dòng 285, 770, 2060, 5285), và bản ở 2060 dùng
+   SHORTHAND `padding: 24px`. Shorthand đặt lại cả bốn cạnh, nên một `padding-bottom` viết ở dòng
+   285 sẽ bị xoá sạch mà không có cảnh báo nào — luật vẫn nằm trong file, diff đọc như đã vá, và
+   trang vẫn bị đè. Đó đúng là hình dạng đã để link "All tests" tụt xuống 16px suốt 9 ngày
+   (xem `a-tap-target-rule-outlived-its-markup.test.ts`). Đặt sau cả bốn là cách duy nhất chắc chắn.
+   24px là giá trị của chính bản 2060; nhắc lại ở đây vì shorthand không cho cộng thêm. */
+.gemboss-platform-main { padding-bottom: calc(24px + var(--gemboss-invite-h, 0px)); }
+
+@keyframes gemboss-assistant-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+/* ── AccountMenu (./account.tsx) ───────────────────────────────────────────────────────────────
+ * The chip, the popover and the rows are the `.gemboss-account-*` rules above. These are the
+ * <details> wrapper the popover positions against, the marker reset, and the head block. Until
+ * 29/09/2026 the admin drew that head with INLINE styles in AccountChip.tsx; these are those values
+ * (12/16 padding, divider rule, 13/600 name, 12 muted email, the 11/600 role pill), and since then the
+ * admin renders AccountMenu itself. Moved here from app-shell.css so the admin, which loads this file
+ * and not that one, gets them. */
+.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; }
+
+/* The rail's WebKit scrollbar (Safari; Chrome follows `scrollbar-width`/`-color` on `.gnav-scroll`).
+ * Split out of the admin's `.gemboss-pagepicker-list, .gnav-scroll` rules on 29/09/2026: #3514 moved
+ * `.gnav-scroll` itself but left these three behind, because the exporter's family matched whole
+ * selectors and these pseudo-element selectors were not on it. Same values as the page picker's. */
+.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; }