@gemboss/ui 0.12.0 → 0.21.0

package/src/assistant.css

@@ -1,558 +1 @@
-/* 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; }
-  .gb-dock-side { transform: translateX(12px); opacity: 0; }
-}
-/* Nothing animates while a pointer is setting the numbers — see `dragging` in the host. */
-.gb-dock-dragging, .gb-dock-dragging * { transition: none !important; }
-/* 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);
-}
-
-/* ── Side: a full-height panel pinned to the right edge (01/10/2026) ─────────────────────────────
-   The third working shape, beside the popup and full screen: a long conversation next to the screen
-   it is about. Opt-in per surface (`<AssistantHost allowSide>`), because unlike the popup it TAKES
-   ROOM — the page beside it moves over (rule below), so nothing under it is hidden. That is why the
-   surface is solid rather than frosted: nothing sits behind it to show through.
-   Above `.gemboss-route-shell` (5), so the panel stays put while routes change — a sidebar that
-   vanishes on every click is a popup with extra steps. BELOW the topbar (300): the account menu
-   opens down out of the topbar's right end, exactly where this panel starts, and at the popup's 320
-   the menu fell behind the panel (review). 290 still clears the desktop invite (260/280). The host
-   is rendered inside `main` (AppShell's slot), which works because `main` makes no stacking context
-   or containing block; a surface that gives its `main` a transform or z-index must mount it outside. */
-.gb-dock-side {
-  z-index: 290;
-  top: 56px;
-  right: 0;
-  bottom: 0;
-  width: var(--gb-dock-side-w, 400px);
-  background: var(--gemboss-surface);
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-  border: 0;
-  border-left: 1px solid var(--gemboss-divider);
-  border-radius: 0;
-  box-shadow: none;
-  overflow: visible;         /* the seam's touch band reaches 14px past the left edge */
-}
-.gb-dock-side .gb-dock-body, .gb-dock-side .gb-dock-pane { overflow: hidden; }
-/* The header does not drag a panel that is pinned. */
-.gb-dock-side .gb-dock-header { cursor: default; touch-action: auto; }
-/* The word for what the dot already says stands down here, as it does in a popup under 420px: the panel has
-   five controls in its header, and the title needs the room (measured: "Gem assi…" / "Re…" at 400). Visually
-   only — the dot is aria-hidden, so the word is the one place a screen reader hears "Working" (review #3622). */
-.gb-dock-side .gb-dock-status {
-  flex: 0 0 auto; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-}
-.gb-dock-side .gb-dock-header:active { cursor: default; }
-/* The seam: the panel's left edge, the fleet's one `.ui-resizer` (ui.css draws the grip). A 5px strip
-   centred on the border, ABOVE the page beside it. */
-/* `.gb-dock-side >` is not decoration: `.ui-resizer { position: relative }` (ui.css) has the weight of one
-   class too, and which file a bundler loads last would decide whether the seam is a 5px strip or a 0px
-   line nobody can grab. */
-.gb-dock-side > .gb-dock-sidegrip {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -3px;
-  width: 5px;
-  z-index: 3;
-}
-/* The page makes room. `margin-right`, not padding: main's padding is set by four rules in shell.css
-   and a fifth here would fight them. The provider puts the class and the width on <body>; the default
-   `bodyClassPrefix` is `gemboss-assistant` — a surface with another prefix writes its own copy of this
-   one rule. No transition: the seam is set from a pointer, and a page that trails the finger is the
-   bug `.gb-dock` already avoids. */
-@media (min-width: 1100px) {
-  body.gemboss-assistant-side .gemboss-platform-main { margin-right: var(--gb-assistant-side-w, 400px); }
-}
-
-
-/* ── Full: the one control full screen needs — the way back to the popup ──────────────────────
-   Floated over the chat's own header, whose right half is empty, rather than given a bar of its
-   own: a whole strip of chrome for one button would push the conversation down on every screen. */
-.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; }
-/* `margin-left: auto`: the status word was the only thing that stretched, so wherever it stands down (a popup under
-   420px, the side panel) the controls followed the title instead of the right edge — 350px adrift in a 720px panel
-   (review #3622). With the word showing, it still takes the free space first and nothing moves. */
-.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; margin-left: auto; }
-/* One ACTION, then the three WINDOW controls — ordered by how much each changes the window: bigger,
-   smaller, gone. The gap is what says they are two different kinds of button; without it four icons
-   in a row read as one undifferentiated strip, which is what "các icon đang không đồng đều" was
-   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: var(--gemboss-on-primary, #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;
-  }
-  /* No room beside a phone screen: the side panel takes the screen, the way full does, and there is
-     nothing to drag. The page is not pushed (the rule above stops at 761). */
-  .gb-dock-side {
-    left: 0;
-    right: 0;
-    width: auto;
-    border-left: 0;
-    border-radius: 0;        /* the phone .gb-dock rule above rounds the top; this panel is the screen */
-  }
-  .gb-dock-sidegrip { display: none; }
-  /* …so the button that pins it there would only say "full screen" a second time. */
-  .gb-dock-pinside { display: none; }
-}
-
-/* 1100 = rail 240 + the panel's narrowest 380 + the page's narrowest 480 (SIDE_MIN_WIDTH, SIDE_PAGE_MIN in
-   assistant/dock.ts). Below it the two do not fit side by side — MEASURED at 768: pushed, the page kept
-   120px and its table ran under the panel. So between the phone and 1100 the panel covers the content
-   area the way full screen does, nothing is pushed, there is no seam to drag, and the popup does not
-   offer to pin.
-   AT THE END OF THE FILE on purpose: `.gb-dock-icon { display: grid }` comes later than the side
-   section and has the same weight, so placed there this block lost and the pin still showed at 768
-   (measured). */
-@media (min-width: 761px) and (max-width: 1099.98px) {
-  .gb-dock-side { left: 240px; width: auto; }
-  .gb-dock-side .gb-dock-sidegrip, .gb-dock-pinside { display: none; }
-}
-
-/* ── AssistantLauncher: the button that opens the assistant. NOT floating (03/10/2026) ────────────────────────────────
-   0.4.2 floated it bottom-right (z 280). visual-gate on partner-radar prod, 03/10: `content_covered` red at 5 of 6 widths
-   on every page measured (/, /apps, /sources): a fixed button always sits on whatever text scrolls under it, and at
-   scroll 0 that is a table column. GemCommunity had dropped its floating buttons for the same reason (#239). Chris chose
-   "bỏ nút nổi". It now lives where nothing scrolls under it:
-   · `--rail`   wide screens: the last row of the rail (`railBottom`), a full-width primary button. Hidden ≤760px,
-                where the rail is an off-canvas drawer nobody sees until they open it.
-   · `--topbar` phones (≤760px): a 44px icon button in the topbar's `actions`, left of the account chip. Hidden above.
-   The top-right corner stays the ACCOUNT. A surface renders both; exactly one is displayed at any width. */
-.gb-assistant-launcher {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  border: 0;
-  cursor: pointer;
-  font-family: var(--gemboss-font-sans, system-ui, sans-serif);
-}
-.gb-assistant-launcher svg { flex: 0 0 auto; }
-.gb-assistant-launcher:focus-visible { outline: 2px solid var(--gemboss-accent, #5661f5); outline-offset: 2px; }
-.gb-assistant-launcher--rail {
-  width: 100%;
-  min-height: 44px; /* a control, not a list link: §9.1 asks 44 (visual-gate red at 768 with 36) */
-  margin: 8px 0 4px;
-  padding: 0 12px;
-  border-radius: var(--gemboss-radius-md, 8px);
-  /* The SAME iris pill as the admin's rail Assistant (.gnav-item.gnav-assistant, 0.6.8), not a solid near-black button
-     (0.7.1, 04/10/2026): content-radar and partner-radar open their assistant through this launcher, and after 0.6.8 the
-     two drew the one AI front door in two different colours beside the admin. */
-  background: var(--gemboss-accent-soft);
-  color: var(--gemboss-accent-strong);
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1;
-  text-align: left;
-}
-.gb-assistant-launcher--rail:hover { background: color-mix(in srgb, var(--gemboss-accent) 16%, var(--gemboss-surface)); }
-.gb-assistant-launcher--rail .gb-assistant-launcher-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.gb-assistant-launcher-kbd {
-  font: inherit; font-size: 11px; opacity: 0.7;
-  border: 1px solid currentColor; border-radius: 5px; padding: 1px 5px;
-}
-.gb-assistant-launcher--topbar {
-  display: none;
-  position: relative; /* holds the clipped label: an absolute child of a static button escapes to the nearest positioned box */
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  border-radius: var(--gemboss-radius-md, 8px);
-  background: transparent;
-  color: var(--gemboss-text, #1b1c1e);
-}
-.gb-assistant-launcher--topbar:hover, .gb-assistant-launcher--topbar:active { background: var(--gemboss-hover, #eceef2); }
-.gb-assistant-launcher--topbar .gb-assistant-launcher-label, .gb-assistant-launcher--topbar .gb-assistant-launcher-kbd {
-  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
-}
-@media (max-width: 760px) {
-  .gb-assistant-launcher--rail { display: none; }
-  .gb-assistant-launcher--topbar { display: inline-flex; }
-}
+.gb-dock{position:fixed;z-index:320;right:24px;bottom:0;width:min(460px,calc(100vw - 288px));display:flex;flex-direction:column;min-height:0;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 #0f172a0d,0 24px 64px #0f172a2e;overflow:hidden;transition:transform .14s cubic-bezier(.2,.8,.3,1),opacity .14s ease-out}@starting-style{.gb-dock-dock,.gb-dock-mini{transform:translateY(10px);opacity:0}.gb-dock-side{transform:translate(12px);opacity:0}}.gb-dock-dragging,.gb-dock-dragging *{transition:none!important}@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}}.gb-dock-hidden{display:none}.gb-dock-full{z-index:4;inset:56px 0 0 240px;width:auto;border:0;border-radius:0;box-shadow:none;background:var(--gemboss-app-bg)}.gb-dock-side{z-index:290;top:56px;right:0;bottom:0;width:var(--gb-dock-side-w, 400px);background:var(--gemboss-surface);-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-left:1px solid var(--gemboss-divider);border-radius:0;box-shadow:none;overflow:visible}.gb-dock-side .gb-dock-body,.gb-dock-side .gb-dock-pane{overflow:hidden}.gb-dock-side .gb-dock-header{cursor:default;touch-action:auto}.gb-dock-side .gb-dock-status{flex:0 0 auto;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gb-dock-side .gb-dock-header:active{cursor:default}.gb-dock-side>.gb-dock-sidegrip{position:absolute;top:0;bottom:0;left:-3px;width:5px;z-index:3}@media (min-width: 1100px){body.gemboss-assistant-side .gemboss-platform-main{margin-right:var(--gb-assistant-side-w, 400px)}}.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;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}@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}.gb-dock-shrink-keep span{position:static;width:auto;height:auto;overflow:visible;clip:auto}.gb-dock-shrink-keep{padding:0 12px;width:auto}.gb-dock-fullchrome{position:static;justify-content:flex-end;padding:8px 12px 0}}.gb-dock-mini{height:auto;width:min(320px,calc(100vw - 288px));-webkit-backdrop-filter:blur(14px) saturate(1.4);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}.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)}.gb-dock-grip{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;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}.gb-dock-header{flex:0 0 auto;cursor:grab;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}.gb-dock-title{font-size:13px;font-weight:600;color:var(--gemboss-text-strong);white-space:nowrap;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;margin-left:auto}.gb-dock-action{margin-right:8px}.gb-dock-icon{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%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion: reduce){.gb-dock-dot-busy{animation:none}}.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;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:var(--gemboss-on-primary, #fff);font-size:11px;font-weight:700;line-height:18px;text-align:center}.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}.gb-dock-pane{display:flex;min-width:0;min-height:0}.gb-dock-pane>*{flex:1 1 auto;min-width:0;min-height:0}.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}@media (max-width: 420px){.gb-dock-status{display:none}}@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{inset:56px 0 0;border-radius:0}.gb-dock-side{left:0;right:0;width:auto;border-left:0;border-radius:0}.gb-dock-sidegrip,.gb-dock-pinside{display:none}}@media (min-width: 761px) and (max-width: 1099.98px){.gb-dock-side{left:240px;width:auto}.gb-dock-side .gb-dock-sidegrip,.gb-dock-pinside{display:none}}.gb-assistant-launcher{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:var(--gemboss-font-sans, system-ui, sans-serif)}.gb-assistant-launcher svg{flex:0 0 auto}.gb-assistant-launcher:focus-visible{outline:2px solid var(--gemboss-accent, #5661f5);outline-offset:2px}.gb-assistant-launcher--rail{width:100%;min-height:44px;margin:8px 0 4px;padding:0 12px;border-radius:var(--gemboss-radius-md, 8px);background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong);font-size:13px;font-weight:600;line-height:1;text-align:left}.gb-assistant-launcher--rail:hover{background:color-mix(in srgb,var(--gemboss-accent) 16%,var(--gemboss-surface))}.gb-assistant-launcher--rail .gb-assistant-launcher-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-assistant-launcher-kbd{font:inherit;font-size:11px;opacity:.7;border:1px solid currentColor;border-radius:5px;padding:1px 5px}.gb-assistant-launcher--topbar{display:none;position:relative;justify-content:center;flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:var(--gemboss-radius-md, 8px);background:transparent;color:var(--gemboss-text, #1b1c1e)}.gb-assistant-launcher--topbar:hover,.gb-assistant-launcher--topbar:active{background:var(--gemboss-hover, #eceef2)}.gb-assistant-launcher--topbar .gb-assistant-launcher-label,.gb-assistant-launcher--topbar .gb-assistant-launcher-kbd{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (max-width: 760px){.gb-assistant-launcher--rail{display:none}.gb-assistant-launcher--topbar{display:inline-flex}}