@gemboss/ui 0.2.1 → 0.4.0

package/src/chat.css

@@ -0,0 +1,427 @@
+/*
+ * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
+ *
+ * Chris: every surface's AI assistant (gemcare, content-radar, partner-radar, GemCommunity) must be built from the
+ * GemBoss UI framework. Until today only the FRAME was shared (assistant.css: popup / bar / full screen; shell.css:
+ * the thread rail); the body lived in the admin's gemboss-shell.css and the exporter left it out on purpose, so every
+ * surface drew its own bubbles, markdown and composer. These are those rules, moved here VERBATIM (same selectors,
+ * same values, same order) — the admin @imports this file at the top of its shell, so it is still the one owner.
+ *
+ * What is here: the header (`.gemboss-ec-head/title/sub`), the message list (`.gemboss-ec-scroll`), messages and
+ * bubbles (`.gemboss-ec-msg.user|.assistant`, `.gemboss-ec-bubble`), the working indicator and the streaming cursor
+ * (`.gemboss-ec-pending*`, `.gemboss-ec-cursor`), markdown (`.gemboss-md-*`, `.gemboss-ec-md-link`), step narration
+ * (`.gemboss-narr*`), starters and option chips (`.gemboss-ec-starter(s)`, `.gemboss-ec-chip(s)`), and the composer
+ * (`.gemboss-ec-input` with its textarea and submit button).
+ * What is NOT: the panel's geometry (`.gemboss-ec` width, editor columns, tabs), attachments, CTA / action cards,
+ * the engine picker and work mode — those are still the admin's, and a surface brings its own. ONE exception, on
+ * purpose: the chat panel's touch / mouse TARGET blocks (`@media (pointer: coarse|fine)` below) name every control
+ * of the panel, the admin-only ones (tabs, upload, engine picker, work mode, attach, stop) included. They are one
+ * rule per pointer kind; split in two they wrote their declarations twice and the admin's shell budget had no room.
+ * Those selectors match nothing on a surface without those controls. (`.gemboss-ec-workmode`: the click-area
+ * `::before` is here, its label-sizing `::after` stays the admin's.)
+ *
+ * Markup: see the catalog's "Thân chat" section. Behaviour (streaming, stop, keyboard) belongs to the surface.
+ */
+
+.gemboss-ec-head { padding: 16px 16px; border-bottom: 1px solid var(--gemboss-divider); display: flex; flex-direction: column; gap: 2px; }
+.gemboss-ec-title { font-family: var(--gemboss-serif); font-size: 15px; font-weight: 600; }
+.gemboss-ec-sub { font-size: 12px; color: var(--gemboss-text-muted); }
+.gemboss-ec-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; scrollbar-gutter: stable; }
+/* Visible thin scrollbar on the chat message list — the default macOS overlay bar is
+   hidden until you actively scroll, so the list reads as "can't scroll" (esp. on the
+   dedicated Assistant page, a fixed-height chat where the page itself doesn't scroll).
+   A persistent thin bar makes the scroll affordance obvious; matches the composer input. */
+.gemboss-ec-scroll { scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; }
+.gemboss-ec-scroll::-webkit-scrollbar { width: 9px; }
+.gemboss-ec-scroll::-webkit-scrollbar-track { background: transparent; }
+.gemboss-ec-scroll::-webkit-scrollbar-thumb { background: rgba(31,30,29,0.2); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
+.gemboss-ec-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
+.gemboss-ec-msg.user { align-items: flex-end; }
+.gemboss-ec-msg.assistant { align-items: flex-start; }
+.gemboss-ec-bubble {
+  /* Cap reading measure: a chat reply stays at a readable line length, not the bubble's full 90%. */
+  font-size: var(--gemboss-fs-body); line-height: 1.5; padding: 12px 12px; border-radius: 16px; max-width: min(90%, 68ch);
+  white-space: pre-wrap; word-break: break-word;
+}
+.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: #fff; border-bottom-right-radius: 4px; }
+.gemboss-ec-msg.assistant .gemboss-ec-bubble { background: var(--gemboss-surface); color: var(--gemboss-text); border: 1px solid var(--gemboss-divider); border-bottom-left-radius: 4px; }
+.gemboss-ec-input button[type="submit"] svg { width: 18px; height: 18px; fill: currentColor; }
+/* Live "working" heartbeat — the Claude-Code-style running asterisk shown before the first token.
+   Slim, muted, single line so the chat stays clean; the motion (pulsing ✳, crossfading verb, live
+   counter) is what makes the wait feel fast instead of frozen. */
+.gemboss-ec-pending { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
+.gemboss-ec-pending-star { color: var(--gemboss-primary); font-size: 12px; line-height: 1; animation: gemboss-star-pulse 1.1s ease-in-out infinite; }
+.gemboss-ec-pending-verb { color: var(--gemboss-text); animation: gemboss-verb-in 0.4s ease-out; }
+.gemboss-ec-pending-meta { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: var(--gemboss-fs-caption); }
+@keyframes gemboss-star-pulse { 0%,100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } }
+@keyframes gemboss-verb-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+/* Typewriter cursor — a thin blinking bar trailing the answer while tokens stream in. */
+.gemboss-ec-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--gemboss-primary); border-radius: 2px; animation: gemboss-cursor-blink 1s steps(1) infinite; }
+@keyframes gemboss-cursor-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: 0.15; } 100% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .gemboss-ec-pending-star, .gemboss-ec-cursor { animation: none; }
+}
+/* Markdown link inside the answer bubble — a friendly inline link, never a raw path. */
+.gemboss-ec-md-link { color: var(--gemboss-primary-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gemboss-primary) 35%, transparent); cursor: pointer; }
+.gemboss-ec-md-link:hover { border-bottom-color: var(--gemboss-primary); }
+/* Suggestion starters = compact wrapping CHIPS (pills), not stacked full-width boxes —
+   reads as a chat's quick-reply chips and stops one prompt eating a whole row. */
+.gemboss-ec-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
+.gemboss-ec-starter {
+  text-align: left; font-size: 13px; padding: 6px 12px; border-radius: var(--gemboss-radius-full); cursor: pointer;
+  background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); color: var(--gemboss-text);
+  white-space: nowrap; max-width: 100%;
+}
+.gemboss-ec-starter:hover { border-color: var(--gemboss-primary); background: rgba(86, 97, 245, 0.06); }
+/* (removed) dead legacy rail styles — `.icon-nav-assistant` + the hover-flyout submenu
+   (`.icon-nav-flyout*`). The current nav (IconNav.tsx) is a persistent 240px labeled
+   sidebar using `.gnav-*` classes with route-driven sub-nav; there is no 72px icon rail
+   and no hover flyout, so these selectors matched nothing. */
+
+/* Composer = ONE bordered rounded shell (ChatGPT/Claude-style): the textarea sits borderless
+   inside it and the attach (📎) + send (↑) buttons float within the same box — cleaner than the
+   old three-separate-boxes row. The shell is inset from the panel edges (margin) and lifts its
+   border to primary on focus-within, so the whole composer reads as one focused field. */
+/* TWO ROWS when there are chips (ChatComposer): the textarea on its own full-width row, the toolbar
+   under it. The toolbar is where chips of any length live, and when they shared a row with the text
+   box the send button was the thing that gave way — measured 22/09/2026 at 320px, it wrapped to a
+   THIRD line. With no chips at all, ONE row — see `:has` below.
+   8px inside, not 6: at 6 the text sat 13px from the border and the box read as cramped. What the
+   toolbar SAYS at each width is ChatComposer's job (data-density), measured rather than guessed. */
+.gemboss-ec-input {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
+  margin: 12px; padding: 8px;
+  border: 1px solid var(--gemboss-divider); border-radius: 16px;
+  background: var(--gemboss-surface);
+  transition: border-color var(--gemboss-transition-fast) ease, box-shadow var(--gemboss-transition-fast) ease;
+}
+.gemboss-ec-input:focus-within {
+  border-color: var(--gemboss-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gemboss-primary) 12%, transparent);
+}
+.gemboss-ec-input textarea {
+  flex: 1 0 100%; min-width: 0; width: 100%; box-sizing: border-box; resize: none; border-radius: 0; background: transparent;
+  /* The CHIP's box model — a transparent 1px border and 8px of padding — so the first letter typed
+     lines up with the first letter of "Claude Code" below it. It was 6px with no border: the text
+     started 3px left of the chips, measured on every host at every width, and the box read as two
+     columns. (Box model rather than nine pixels of padding: nine is off the spacing scale the CI guard holds.) */
+  border: 1px solid transparent;
+  padding: 6px 8px; font-size: var(--gemboss-fs-body); font-family: inherit;
+  /* Starts at one line; GemChat's auto-grow JS expands it up to ~3 lines (max-height),
+     then scrolls inside (ChatGPT/Gemini-style). overflow-y is hidden until the JS flips
+     it to auto past the cap, so a 1–2 line message never shows a (rounding) scrollbar. */
+  min-height: 0; max-height: 84px; line-height: 1.5; overflow-y: hidden;
+  scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; /* thin, not the OS bar */
+}
+.gemboss-ec-input textarea::-webkit-scrollbar { width: 7px; }
+.gemboss-ec-input textarea::-webkit-scrollbar-track { background: transparent; }
+.gemboss-ec-input textarea::-webkit-scrollbar-thumb { background: rgba(31,30,29,0.2); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
+.gemboss-ec-input textarea:focus { outline: none; }
+/* Send button — a filled primary circle floating at the shell's bottom-right. inline-flex centers
+   the ↑ SVG (the old rule had no flex-centering, so the icon sat high).
+
+   SCOPED TO THE SUBMIT BUTTON, and that word is load-bearing. This rule used to read
+   `.gemboss-ec-input button`, which reached EVERY button in the composer — including whatever a host
+   passes in through `composerLeading`, a slot that exists precisely so hosts can put their own
+   controls here. The 📎 attach button already had to fight it back with a class of its own (see the
+   comment above `.gemboss-ec-attach-btn`), which was the first sign that this selector owns more than
+   it should. The second was the engine picker: a Polaris Button, rendered into the slot, came out as a
+   34px black circle with its label ("Claude Code · Opus") clipped to three characters. Nothing was
+   wrong with the picker — this rule was painting it.
+
+   §9.3: one visual owner per component. The composer owns its own send button and nothing that is
+   handed to it. Guarded by composer-owns-only-its-own-buttons.test.ts.
+
+   44px, not 34: it is a CONTROL (§9.1, Apple HIG / WCAG 2.5.5 AAA). This branch had already raised
+   it — but on the OLD unscoped selector, the very rule main had just narrowed. The two changes were
+   fixing different faults in one declaration, so both are kept: main's scope, this branch's size. */
+.gemboss-ec-input button[type="submit"] {
+  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--gemboss-primary); color: #fff; font-size: 16px; font-weight: 700;
+  transition: background var(--gemboss-transition-fast) ease, filter var(--gemboss-transition-fast) ease;
+}
+.gemboss-ec-input button[type="submit"]:hover:not(:disabled) { background: var(--gemboss-primary-dark); }
+.gemboss-ec-input button[type="submit"]:active:not(:disabled) { background: var(--gemboss-primary-dark); filter: brightness(0.94); }
+.gemboss-ec-input button[type="submit"]:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
+/* Disabled (empty input): a clear neutral grey circle with a muted arrow — reads as
+   "inactive" rather than a washed-out faint-primary blob. */
+.gemboss-ec-input button[type="submit"]:disabled { background: var(--gemboss-divider); color: var(--gemboss-text-muted); opacity: 1; cursor: default; }
+/* ── Narration timeline ── */
+.gemboss-narr { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
+.gemboss-narr-row { display: flex; align-items: center; gap: 8px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
+.gemboss-narr-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 auto; }
+.gemboss-narr-row.ok .gemboss-narr-dot { background: var(--gemboss-active-bg); color: var(--gemboss-active-fg); }
+.gemboss-narr-row.failed .gemboss-narr-dot { background: #fde8e6; color: var(--gemboss-danger); }
+.gemboss-narr-row.running .gemboss-narr-dot { background: transparent; }
+/* THE ENGINE'S MARK, in the dot's slot. No pill behind it: the ✓/✕ dots earn their background by
+   being a glyph in a circle, and a logo in a coloured circle reads as a badge the engine awarded
+   itself. It takes the ROW's colour, so a failed turn's mark goes red with everything else — a mark
+   that stayed brand-coloured over a failure would be the one cheerful thing on a broken row. */
+.gemboss-narr-dot-engine { background: transparent !important; color: inherit; }
+.gemboss-narr-row.ok .gemboss-narr-dot-engine { color: var(--gemboss-text); }
+.gemboss-narr-row.failed .gemboss-narr-dot-engine { color: var(--gemboss-danger); }
+.gemboss-narr-row.ok .gemboss-narr-text, .gemboss-narr-row.failed .gemboss-narr-text { color: var(--gemboss-text); }
+/* A message the seller typed INTO the running turn. It reads as THEIR line, not as a step the agent
+   took: full-strength text (the timeline is muted by default) against the page's own text colour, and
+   a `❯` prompt caret instead of a status dot. It must be legible at a glance while the agent is still
+   writing above it — a seller scanning a long timeline needs to find the moment they interrupted. */
+.gemboss-narr-row.steer .gemboss-narr-dot { background: transparent; color: var(--gemboss-text-muted); }
+/* `anywhere`, not `normal`: a seller correcting a turn pastes URLs and product handles, and one
+   unbroken 60-character token in a 320px chat column is a row that pushes the panel sideways. Measured
+   2026-09-23 — the default `overflow-wrap: normal` on this row does not break such a token. */
+.gemboss-narr-steer { color: var(--gemboss-text); font-weight: 500; overflow-wrap: anywhere; }
+.gemboss-narr-spin { width: 11px; height: 11px; border: 2px solid var(--gemboss-divider-soft); border-top-color: var(--gemboss-primary); border-radius: 50%; animation: gemboss-spin 0.7s linear infinite; }
+@keyframes gemboss-spin { to { transform: rotate(360deg); } }
+/* Live-reasoning ("thinking") row: muted + italic while streaming, collapsible once settled. */
+.gemboss-narr-row.thinking { align-items: flex-start; }
+.gemboss-narr-row.thinking .gemboss-narr-dot { color: var(--gemboss-text-muted); background: transparent; }
+.gemboss-narr-thinking-live { font-style: italic; color: var(--gemboss-text-muted); white-space: pre-wrap; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-thinking { font-size: var(--gemboss-fs-caption); }
+.gemboss-narr-thinking > summary { cursor: pointer; color: var(--gemboss-text-muted); list-style: none; user-select: none; }
+.gemboss-narr-thinking > summary::-webkit-details-marker { display: none; }
+.gemboss-narr-thinking > summary::before { content: "▸ "; }
+.gemboss-narr-thinking[open] > summary::before { content: "▾ "; }
+.gemboss-narr-thinking-body { margin-top: 6px; padding: 8px 8px; border-left: 2px solid var(--gemboss-divider-soft); color: var(--gemboss-text-muted); font-style: italic; white-space: pre-wrap; line-height: 1.5; }
+/* TOOL TRANSCRIPT rows — the Claude-Code shape: a monospace call line, its return value folded
+   behind a disclosure. Muted on purpose: the transcript is evidence you can audit, not the answer. */
+.gemboss-narr-row.trace code { font-family: var(--gemboss-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--gemboss-fs-caption); word-break: break-word; }
+.gemboss-narr-trace-call { color: var(--gemboss-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-trace { font-size: var(--gemboss-fs-caption); min-width: 0; }
+.gemboss-narr-trace > summary { cursor: pointer; color: var(--gemboss-text-muted); list-style: none; user-select: none;
+  /* A tool call with real arguments is long and the chat panel is narrow: a full payload wrapped to five
+     lines buries the rows around it. Clamp while closed; opening the row shows the call in full. */
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-trace[open] > summary { display: block; overflow: visible; }
+.gemboss-narr-trace > summary::-webkit-details-marker { display: none; }
+/* The fold is now the ONLY way to see a payload or a finished thought (both start closed), so its
+   summary is a target: ≥24px tall, the list-link tier of Gems/CLAUDE.md §9.1 (WCAG 2.5.8). Measured
+   21px before, 13/09. */
+.gemboss-narr-trace > summary, .gemboss-narr-thinking > summary { min-height: 24px; box-sizing: border-box; padding-block: 2px; }
+.gemboss-narr-trace > summary::before { content: "▸ "; }
+.gemboss-narr-trace[open] > summary::before { content: "▾ "; }
+.gemboss-narr-trace-body { margin-top: 6px; padding: 8px; border-left: 2px solid var(--gemboss-divider-soft); color: var(--gemboss-text-muted); white-space: pre-wrap; line-height: 1.5; overflow-x: auto; }
+@media (max-width: 640px) {
+  /* Composer auto-grows from one line (see GemChat) — no fixed floor needed here. */
+  .gemboss-ec-input textarea { min-height: 0; }
+  .gemboss-ec-scroll { padding: 12px; }
+}
+/* ── Chat option chips (persona/goal polling) ── */
+.gemboss-ec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
+/* 44px because a chip is a CONTROL, not a link in a list — Apple HIG / WCAG 2.5.5 AAA, Gems CLAUDE.md
+   §9.1. Measured 2026-09-09 at 390px and 1366px: padding alone rendered these at 34px, ten short, and
+   they are the only way to answer a poll or resume an unfinished run on a phone. `min-height` rather
+   than `height` so a wrapped two-line label still grows instead of clipping. */
+.gemboss-ec-chip {
+  background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-full);
+  padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--gemboss-text);
+  min-height: 44px;
+}
+.gemboss-ec-chip:hover { border-color: var(--gemboss-primary); color: var(--gemboss-active-fg); }
+.gemboss-ec-chip:disabled { opacity: 0.5; cursor: default; }
+/* ════ Mouse targets — the same 44px, bought with an overlay instead of a bigger box ═══════
+   §9.1 asks 44px of a CONTROL, and it does not say "on touch only". The chat panel's controls are
+   28-37px under a mouse, which clears WCAG 2.5.8 AA (24px) and not 2.5.5 AAA (44px). The dense look
+   is deliberate and worth keeping, so the TARGET grows and the ink does not — the same trick the
+   editor topbar already uses on its device buttons.
+
+   WHICH ONES, AND WHY NOT THE REST. A target that reaches into a neighbour steals clicks meant for
+   it, which is worse than a small one. So this was decided by measuring the gap between every pair
+   of vertically adjacent controls at 390 / 768 / 1366 and asking whether BOTH could grow into it —
+   a control's own clearance is not enough, because its neighbour is growing too. Measured
+   2026-09-09, three pairs could not:
+
+     starter chips, row to row   gap 8px, both need 7  -> the ROW GAP goes to 16px below, which buys
+                                                          it without changing how the chips look
+     textarea / engine picker    gap 8px, needs 10     -> the textarea does not grow (see below)
+     textarea / send             gap 6px, needs 9      -> same
+
+   THE MESSAGE BOX IS EXCLUDED ON PURPOSE. It is a full-width field 37px tall: its AREA is already
+   enormous, the only dimension short of 44 is its height, and it is the one control here you reach
+   by clicking INTO text rather than at a point. Growing it also collides with both of its
+   neighbours. With it left alone, everything else fits: send needs 5 of the 6px above it, the
+   picker needs 8 of 8.
+
+   Height only. Horizontally these controls are already 34-196px wide, and an overlay that also grew
+   sideways would collide with the chip beside it, which is 8px away. */
+@media (pointer: fine) {
+  .gemboss-ec-starters { row-gap: 16px; }
+  .gemboss-ec-tab,
+  .gemboss-ec-starter,
+  .gemboss-ec-upload,
+  .gemboss-ec-enginepick button,
+  .gemboss-ec-workmode,
+  .gemboss-ec-input .gemboss-ec-attach-btn,
+  .gemboss-ec-stop,
+  /* Shares the toolbar row with Stop, which is already 44px tall — so a 44px overlay here grows into
+     a row that is that tall already, and reaches into nothing above or below it. */
+  .gemboss-ec-stop-send,
+  .gemboss-ec-input button[type="submit"] { position: relative; }
+  .gemboss-ec-tab::after,
+  .gemboss-ec-starter::after,
+  .gemboss-ec-upload::after,
+  .gemboss-ec-enginepick button::after,
+  /* `::before` on the work-mode wrapper: its `::after` is the invisible label that SIZES it, and a
+     second use of the same pseudo-element would silently replace that. */
+  .gemboss-ec-workmode::before,
+  .gemboss-ec-input .gemboss-ec-attach-btn::after,
+  .gemboss-ec-stop::after,
+  .gemboss-ec-stop-send::after,
+  .gemboss-ec-input button[type="submit"]::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 44px;
+    /* No background at all: a pseudo-element is transparent already, and the `background` shorthand
+       is banned in this family because it resets `background-image` — the work-mode caret. My own
+       guard from #2158 caught this line, which is the guard doing exactly what it was written for. */
+    pointer-events: auto;
+    /* Above the panel chrome it overhangs — the chrome is not interactive, so a click landing on the
+       control the overlay belongs to is the point.
+       This does NOT rescue a control sitting flush against the top of `.gemboss-ec-scroll`: an
+       overflow container clips its absolutely-positioned descendants, and z-index cannot cross that.
+       Measured at 768px, where the first row of starter chips begins at the exact pixel the header
+       ends: their target is 37px until the list scrolls, and 44px after. A scroll position, not a
+       layout constant — the same chips measure 44px at 390, 1366 and 1920. Left alone rather than
+       bought with padding on the scroll area, which every seller would see all the time to fix a
+       target in one transient position. */
+    z-index: 1;
+  }
+}
+@media (pointer: coarse) {
+  .gemboss-ec-input button[type="submit"] { width: 44px; height: 44px; font-size: 17px; }
+  .gemboss-ec-starter, .gemboss-ec-opt { min-height: 44px; }
+  .gemboss-ec-input textarea { min-height: 44px; }
+}
+/* ── The answer bubble's markdown ────────────────────────────────────────────────────────────────
+ *
+ * The bubble understood bold, links and line breaks. The models writing into it do not restrict
+ * themselves to three things: a question about pages came back as a markdown TABLE and rendered as
+ * literal pipes down the page. These are the styles for what it actually writes. */
+
+.gemboss-md-p { margin: 0 0 8px; }
+.gemboss-md-p:last-child { margin-bottom: 0; }
+/* Demoted one level in the markup (h1 → h3) because the bubble sits under the page's own headings.
+ * The SIZE hierarchy is kept here, because that is what a reader uses to skim. */
+.gemboss-md-h { margin: 16px 0 6px; font-weight: 650; line-height: 1.3; }
+.gemboss-md-h:first-child { margin-top: 0; }
+/* RESTORED after #3370 deleted these three. MarkdownLite.tsx builds the class by interpolation —
+ * `gemboss-md-h gemboss-md-h${b.level}` — so the literal `gemboss-md-h1` exists in no source file
+ * and in no compiled chunk, and all three of that PR's detection passes read them as dead. The gate
+ * now carries the prefix rule that catches this shape. Do not "clean" these up. */
+.gemboss-md-h1 { font-size: 17px; }
+.gemboss-md-h2 { font-size: 15px; }
+.gemboss-md-h3 { font-size: var(--gemboss-fs-body); color: var(--gemboss-text-subdued, #616161); }
+.gemboss-md-list { margin: 0 0 8px; padding-left: 20px; }
+.gemboss-md-list li { margin: 2px 0; }
+.gemboss-md-quote {
+  margin: 0 0 8px;
+  padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--gemboss-border, #e3e3e3);
+  color: var(--gemboss-text-subdued, #616161);
+}
+.gemboss-md-rule { margin: 12px 0; border: 0; border-top: 1px solid var(--gemboss-border, #e3e3e3); }
+/* Inline code: a chip, so an identifier stops reading as prose. */
+.gemboss-md-code {
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--gemboss-surface-subdued, #f1f1f1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  word-break: break-word;
+}
+/* Tables scroll INSIDE their own box. The chat lives in a 380px sidebar in the theme editor, and a
+ * five-column table there would otherwise push the whole panel sideways — §9.1's rule that wide
+ * content scrolls in its own container, not the page. */
+.gemboss-md-tablewrap { margin: 0 0 12px; overflow-x: auto; }
+.gemboss-md-table { border-collapse: collapse; font-size: var(--gemboss-fs-caption); min-width: 100%; }
+.gemboss-md-table th,
+.gemboss-md-table td {
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.gemboss-md-table th { background: var(--gemboss-surface-subdued, #f7f7f7); font-weight: 600; }
+/* A picture in an answer (only from hosts markdown-blocks.ts trusts). Never wider than the bubble — the
+ * chat can sit in a 380px sidebar — and capped in height so five thumbnails read as a shortlist, not
+ * five screens. The link around it is the tap target: keyboard focus has to be visible on it. */
+.gemboss-md-imglink { display: inline-block; max-width: 100%; margin: 4px 0 8px; border-radius: 8px; line-height: 0; }
+.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-md-img {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+  height: auto;
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  border-radius: 8px;
+  background: var(--gemboss-surface-subdued, #f7f7f7);
+  object-fit: contain;
+}
+/* A code block, with the fold. A 200-line answer should not push everything after it off screen. */
+.gemboss-md-codeblock {
+  position: relative;
+  margin: 0 0 12px;
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  border-radius: 8px;
+  background: var(--gemboss-surface-subdued, #f7f7f7);
+  overflow: hidden;
+}
+.gemboss-md-codelang {
+  display: block;
+  padding: 4px 12px 0;
+  color: var(--gemboss-text-subdued, #8a8a8a);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+}
+.gemboss-md-codeblock pre { margin: 0; padding: 8px 12px; overflow-x: auto; }
+.gemboss-md-codeblock code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+}
+.gemboss-md-codemore {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: 0;
+  border-top: 1px solid var(--gemboss-border, #e3e3e3);
+  background: transparent;
+  color: var(--gemboss-text-subdued, #616161);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.gemboss-md-codemore:hover { background: rgba(0, 0, 0, 0.03); }
+/* ── The payload, live, in the chat ──────────────────────────────────────────────────────────────
+   A trace row said `apply_section_edit(section_id:"hero")` — that something happened, and nothing about
+   what. This is what. Open by default: folding it would put the answer back behind a click. */
+.gemboss-narr-row.source { align-items: flex-start; }
+.gemboss-narr-source { min-width: 0; flex: 1; }
+.gemboss-narr-source-head { font-size: 11px; color: var(--gemboss-text-muted, #686b71); margin-bottom: 4px; }
+.gemboss-narr-source-head code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.gemboss-narr-source-code {
+  margin: 0; padding: 8px 12px; border-radius: 8px; max-height: 220px; overflow: auto;
+  background: var(--gemboss-primary-soft, #f2f3f5); border: 1px solid var(--gemboss-divider, #e5e7ea);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--gemboss-fs-micro); line-height: 17px;
+  white-space: pre; tab-size: 2;
+}
+/* Light-ground syntax colours for the payload rows (the code-highlight.ts `c-*` spans). Contrast checked
+   against #fff: every one clears 4.5:1. (The page editor's Code tab shared them until it was removed, #2651.) */
+.gemboss-narr-source-code .c-com { color: #6a7a86; font-style: italic; }
+.gemboss-narr-source-code .c-str { color: #9a3412; }
+.gemboss-narr-source-code .c-num { color: #1d6fa5; }
+.gemboss-narr-source-code .c-kw  { color: #7c3aed; font-weight: 600; }
+.gemboss-narr-source-code .c-key { color: #0b6b3a; }
+.gemboss-narr-source-code .c-tag { color: #b0197a; }
+.gemboss-narr-source-code .c-attr{ color: #7c3aed; }
+.gemboss-narr-source-code .c-pun { color: #6a6d73; }
+@media (max-width: 520px) {
+  .gemboss-narr-source-code { max-height: 160px; font-size: 11px; }
+}
+/* A checklist row's box IS its marker; the dot column stays for alignment and shows nothing. */
+.gemboss-narr-dot-quiet { visibility: hidden; }

package/src/kit-plain.css

@@ -53,3 +53,164 @@
 @media (pointer: coarse) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; } }
 /* …and at phone WIDTH, as gemboss-field does: a desktop browser at 320px still reports pointer: fine. */
 @media (max-width: 47.9975em) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; min-height: 44px; } }
+
+/* ── Link · Media card (02/10/2026) ──────────────────────────────────────────
+   GemFactory, gemcare and gempress left text links in the browser's default blue-and-purple, and each drew its own
+   thumbnail card. The admin uses Polaris' Link and has no media card, so both live here, not in ui.css.
+
+   Link: `<a class="ui-link" href>` for a link inside text. Iris (--gemboss-accent-strong, 6.2:1 on white), underlined
+   so it is not told by colour alone (WCAG 1.4.1); visited looks the same (these are tools, not articles). Markdown or
+   other generated HTML you cannot add classes to: wrap it in `.ui-prose` and its bare `<a>` get the same look.
+
+   Media card: `<article class="ui-card ui-card--media"><a|button class="ui-card__media"><img alt=""></…>
+   <div class="ui-card__body">…</div><div class="ui-card__foot">…</div></article>`. The picture is 16:10 and
+   cropped to fill; the card has no padding of its own, the body and foot do. */
+.ui-link,
+.ui-prose a:not([class]) {
+  color: var(--gemboss-accent-strong, #3a44de);
+  text-decoration: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 2px;
+}
+.ui-link:visited,
+.ui-prose a:not([class]):visited { color: var(--gemboss-accent-strong, #3a44de); }
+.ui-link:hover,
+.ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
+.ui-link:focus-visible,
+.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: 2px; border-radius: 2px; }
+
+.ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.ui-card__media {
+  display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0; padding: 0; border: 0;
+  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-2); overflow: hidden; color: inherit;
+}
+.ui-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+button.ui-card__media, a.ui-card__media { cursor: pointer; }
+.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: -2px; }
+/* justify-items: start: a tag or a button in the body keeps its own width instead of stretching across the card. */
+.ui-card__body { display: grid; justify-items: start; gap: var(--ui-space-2, 8px); padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); min-width: 0; }
+.ui-card__foot {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2, 8px);
+  margin-top: auto; padding: 0 var(--ui-space-4, 16px) var(--ui-space-3, 12px);
+  color: var(--ui-text-muted); font-size: var(--ui-fs-caption, 13px);
+}
+
+/* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
+   The admin's Modal.tsx pads its own children, so ui.css never styled these; every non-React surface padded them by
+   hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
+.ui-modal__body { padding: 16px 20px; }
+.ui-modal__foot {
+  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
+  padding: 12px 20px; border-top: 1px solid var(--ui-border);
+}
+/* A popup taller than the screen: the body scrolls, the head and foot stay, so the actions are always reachable
+   (320×568 with a long form put Huỷ/Xoá below the fold, unreachable under the locked page; review #3633). */
+.ui-overlay > .ui-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
+.ui-modal > .ui-modal__head, .ui-modal > .ui-modal__foot { flex: none; }
+.ui-modal > .ui-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+
+/* ── Báo cáo: delta · KPI lớn · thanh ngang · biểu đồ cột · chú thích · phễu · lưới · tiêu đề mục ─────────────────
+   Thêm 03/10/2026 cho trang số của gemnews (gemnews.ops.gemboss.ai/admin): nó tự vẽ thanh ngang, biểu đồ theo ngày và
+   lưới hai cột trong admin.css riêng, và bề mặt thứ hai cần báo cáo sẽ chép lại y như vậy. README "promote what a second
+   surface needs". Chỉ CSS: số liệu và tỉ lệ do bề mặt tính, kit chỉ vẽ.
+
+   Màu chuỗi: `--ui-series-1..5`, theo thứ tự dùng. 1 là iris thương hiệu; các màu sau đủ khác nhau cả với người mù màu
+   đỏ-lục (không đặt đỏ cạnh lục). Đặt màu cho một chuỗi bằng `style="--c:var(--ui-series-2)"` trên đúng phần tử. */
+:root {
+  --ui-series-1: var(--gemboss-accent, #5661f5);
+  --ui-series-2: #0f9f8f;
+  --ui-series-3: #d9822b;
+  --ui-series-4: #c2417a;
+  --ui-series-5: #6b7280;
+}
+
+/* Delta: `<span class="ui-delta ui-delta--good"><span aria-hidden="true">↑</span> 12%</span>`. Tốt / xấu là của BỀ MẶT
+   quyết (lượt đọc tăng là tốt, tỉ lệ thoát tăng là xấu), mũi tên là hướng. Không tông = trung tính (không đổi, hoặc
+   "chưa có kỳ trước"). Luôn kèm chữ cho trình đọc màn hình nếu mũi tên là thứ duy nhất nói hướng. */
+.ui-delta { display: inline-flex; align-items: baseline; gap: 2px; font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ui-delta--good { color: var(--ui-success-fg); }
+.ui-delta--bad { color: var(--ui-danger-fg); }
+
+/* KPI lớn trong lưới đều: `<div class="ui-metrics ui-metrics--grid"><div class="ui-metric ui-metric--lg">…`. Lưới
+   auto-fit chia đều hàng, nên 4 ô không bao giờ thành 3 + 1 mồ côi ở khổ rộng; ≤ 520px luôn hai cột. `__foot` là dòng
+   dưới cùng (delta + so với gì). */
+.ui-metrics--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--ui-space-3); margin: 0; }
+.ui-metric--lg { gap: 4px; padding: var(--ui-space-3) var(--ui-space-4); }
+.ui-metric--lg .ui-metric__val { font-size: var(--gemboss-fs-h1, 24px); line-height: 1.1; }
+.ui-metric--lg .ui-metric__lbl { order: -1; font-size: var(--gemboss-fs-body, 14px); }
+.ui-metric__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+@media (max-width: 520px) { .ui-metrics--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* Thanh ngang: `<ol class="ui-barlist"><li><span class="ui-barlist__label">Google</span><span class="ui-barlist__val">60
+   <span class="ui-barlist__share">93,8%</span></span><span class="ui-barlist__bar" style="--v:.94"></span></li></ol>`.
+   `--v` = độ dài 0..1 (thường n / n lớn nhất), `--c` đổi màu. Nhãn và số ở một dòng, thanh ở dòng dưới chạy hết bề
+   ngang: không có cột nhãn cố định nào để bị bóp ở 320px. `__note` = dòng phụ (ví dụ "Đọc hết 30%"). */
+.ui-barlist { display: grid; gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; font-size: var(--ui-fs-body, 13px); }
+.ui-barlist > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px var(--ui-space-3); }
+.ui-barlist__label { min-width: 0; overflow-wrap: anywhere; color: var(--ui-text); }
+.ui-barlist__label a { color: inherit; }
+.ui-barlist__val { font-weight: 600; color: var(--ui-text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
+.ui-barlist__share { margin-left: 6px; font-weight: 400; color: var(--ui-text-muted); }
+.ui-barlist__note { grid-column: 1 / -1; margin-top: -2px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+.ui-barlist__bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 999px; background: var(--ui-surface-2); overflow: hidden; }
+.ui-barlist__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); min-width: 3px; border-radius: inherit; background: var(--c, var(--ui-series-1)); }
+
+/* Biểu đồ cột chồng theo thời gian, thêm (tuỳ chọn) một chuỗi CHẤM:
+   `<figure class="ui-chart"><div class="ui-chart__plot" data-max="80"><div class="ui-chart__col" title="02/10 · …">
+   <span class="ui-chart__seg" style="--v:.4;--c:var(--ui-series-1)"></span><span class="ui-chart__seg" …></span>
+   <span class="ui-chart__dot" style="--v:.5"></span></div>…</div><div class="ui-chart__axis"><span>01/10</span>…</div>
+   <figcaption class="ui-legend">…</figcaption></figure>`. `--v` = giá trị / trục (0..1), chồng từ dưới lên theo thứ tự
+   markup. Cột rộng tối đa 48px và dàn đều hết bề ngang: 4 ngày số liệu không thành 4 khối to. `data-max` in ở góc
+   trên trái làm mốc trục. Đường kẻ ngang ở 25/50/75%. Số thật cho trình đọc màn hình là
+   việc của bề mặt (một bảng `ui-sr-only` cạnh biểu đồ): phần vẽ nên `aria-hidden`. */
+.ui-chart { margin: 0; }
+.ui-chart__plot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 180px; padding-top: 18px; border-bottom: 1px solid var(--ui-border);
+  background: linear-gradient(to top, var(--ui-border) 1px, transparent 1px) 0 0 / 100% 25% repeat-y; background-origin: content-box; background-clip: content-box; }
+.ui-chart__plot[data-max]::before { content: attr(data-max); position: absolute; top: 0; left: 0; font-size: var(--gemboss-fs-micro, 11px); line-height: 1; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
+.ui-chart__col { position: relative; flex: 1 1 0; min-width: 0; max-width: 48px; height: 100%; display: flex; flex-direction: column-reverse; }
+.ui-chart__col:hover { background: color-mix(in srgb, var(--ui-text) 6%, transparent); }
+.ui-chart__seg { display: block; flex: none; height: calc(var(--v, 0) * 100%); background: var(--c, var(--ui-series-1)); }
+.ui-chart__dot { position: absolute; left: 50%; bottom: calc(var(--v, 0) * 100%); width: 8px; height: 8px; margin: 0 0 -4px -4px; box-sizing: border-box; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--c, var(--ui-text-strong, var(--ui-text))); }
+.ui-chart__axis { display: flex; justify-content: space-between; gap: var(--ui-space-2); margin-top: 6px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
+
+/* Chú thích: `<p class="ui-legend"><span class="ui-legend__item"><i style="--c:var(--ui-series-1)"></i>Tiện ích</span>
+   <span class="ui-legend__item ui-legend__item--dot"><i></i>Lượt mở</span></p>`. `--dot` = chuỗi vẽ bằng chấm rỗng. */
+.ui-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: var(--ui-space-2) 0 0; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+.ui-legend__item { display: inline-flex; align-items: center; gap: 6px; }
+.ui-legend__item > i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--ui-series-1)); }
+.ui-legend__item--dot > i { border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--c, var(--ui-text-strong, var(--ui-text))); box-sizing: border-box; }
+
+/* Phễu: `<ol class="ui-funnel"><li><span class="ui-funnel__val">105</span><span class="ui-funnel__lbl">Lời mời hiện
+   </span></li><li><span class="ui-funnel__rate">4,8%</span><span class="ui-funnel__val">5</span>…</li></ol>`. Mỗi bước
+   sau bước đầu mang `__rate` = tỉ lệ đi tiếp từ bước NGAY TRƯỚC (bề mặt tính). Ngang ở khổ rộng, dọc ở ≤ 520px. */
+.ui-funnel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
+.ui-funnel > li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-2); min-width: 0; }
+.ui-funnel__val { font-size: var(--gemboss-fs-h2, 20px); font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
+.ui-funnel__lbl { font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); overflow-wrap: anywhere; }
+.ui-funnel__rate { order: -1; font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-series-1); font-variant-numeric: tabular-nums; }
+@media (max-width: 520px) { .ui-funnel { grid-auto-flow: row; } }
+
+/* Lưới bảng điều khiển: `<div class="ui-grid ui-grid--2">` card cạnh card, xuống một cột ở ≤ 960px (--3: ≤ 1100px hai
+   cột, ≤ 720px một). Card trong lưới không kéo cao theo card bên cạnh. Tiêu đề MỤC trong trang (nhỏ hơn ui-page-head,
+   lớn hơn tiêu đề card): `<div class="ui-section-head"><h2>Nội dung</h2><p>…</p></div>`. */
+.ui-grid { display: grid; gap: var(--ui-space-4); align-items: start; }
+.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+@media (max-width: 1100px) { .ui-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 960px) { .ui-grid--2 { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 720px) { .ui-grid--3 { grid-template-columns: minmax(0, 1fr); } }
+.ui-section-head { margin: var(--ui-space-4) 0 0; }
+.ui-section-head > h2 { margin: 0; font-size: var(--gemboss-fs-h3, 16px); font-weight: 650; color: var(--ui-text); }
+.ui-section-head > p { margin: 2px 0 0; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+
+/* Nhóm nút CHỮ không bao giờ bẻ chữ (03/10/2026, thanh lọc của gemnews ở 390px: "Mọi ngôn ngữ" thành hai dòng, "中文"
+   thành 中 / 文, vì ô cao cố định 36px mà nút được co). Nút giữ đủ bề ngang chữ; cả nhóm rộng hơn chỗ trống thì cuộn
+   ngang trong chính nó, trang không tràn. Ở đây chứ không ở ui.css: ngân sách CSS first-load của admin còn ~0,1 KB. */
+.ui-seg { max-width: 100%; overflow-x: auto; }   /* thanh cuộn KHÔNG ẩn: lựa chọn bị khuất phải có dấu hiệu (review #3630) */
+.ui-seg :is(button, a).is-text { flex: none; white-space: nowrap; }
+/* Ở 320px, bốn nút chữ (Tất cả · Tiếng Việt · English · 中文) thiếu ~10px: bớt padding thay vì bắt người dùng cuộn mới
+   thấy lựa chọn cuối. Nút vẫn cao 36px, chữ vẫn một dòng. */
+@media (max-width: 360px) { .ui-seg :is(button, a).is-text { padding: 0 9px; } }
+/* Tab / nhóm nút là ĐIỀU KHIỂN: ≥ 44px dưới ngón tay (§9.1). Khối coarse của ui.css chỉ bắt `pointer: coarse`; ở khổ điện
+   thoại trình duyệt máy tính vẫn báo `fine`, nên nâng theo khổ như ui-btn--icon ở trên. */
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-seg :is(button, a) { height: 44px; min-height: 44px; } }