@songsid/agend 2.3.0-beta.8 → 2.3.0

package/dist/ui/shared/app.css

@@ -124,6 +124,23 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .idc.id-bar { position: relative; }
 .idc.id-bar::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: 3px; background: var(--id); pointer-events: none; }
 .idc.id-name .inst-name { color: var(--id-name); }
+/* #2330: the same straight bar for every other coloured left edge (a 3px border-left curved into a rounded box's
+   corners). `.lbar` is the utility; the places below join its selector list instead of carrying a class. A place sets
+   --lbar-color (status variants too) and adds the 3px the border took to its own padding-left, so its text stays put.
+   A short box that clips to its corners (.msg-quote) moves the bar in (--lbar-left) and shortens it (--lbar-inset) so
+   the corner never cuts its ends round.
+   tests/web-left-bar-2330.test.ts keeps a coloured border-left off rounded boxes. */
+.lbar, .reply-bar, .msg-quote, .p-log .log-item.k-error, .p-log .log-item.s-failed, .org-node, .us-basis, .us-partial, .cmd-card.bad, .tb-tile,
+.search-row.on, .search-recent-item:hover, .search-recent-item:focus-visible, .search-ctx-line.here, .tw-line:hover, .tw-line:focus-visible,
+.u-crow:focus-visible { position: relative; }
+.lbar::before, .reply-bar::before, .msg-quote::before, .p-log .log-item.k-error::before, .p-log .log-item.s-failed::before, .org-node::before,
+.us-basis::before, .us-partial::before, .cmd-card.bad::before, .tb-tile::before,
+/* #2478 item 7 (the user's fixed template): a selected, hovered or keyboard-focused row is the straight bar and a flat
+   background at most — never a rounded fill, a curved inset edge or a rounded ring. */
+.search-row.on::before, .search-recent-item:hover::before, .search-recent-item:focus-visible::before, .search-ctx-line.here::before,
+.tw-line:hover::before, .tw-line:focus-visible::before, .u-crow:focus-visible::before {
+  content: ""; position: absolute; left: var(--lbar-left, 0); top: var(--lbar-inset, var(--s-2)); bottom: var(--lbar-inset, var(--s-2)); width: 3px;
+  background: var(--lbar-color, var(--accent)); pointer-events: none; }
 .idc-swatches, .idc-places { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .idc-swatches legend, .idc-places legend { font-weight: var(--fw-semibold); margin-bottom: 6px; width: 100%; }
 .idc-swatch { --sw: var(--sw-dark); width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; }
@@ -139,6 +156,14 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .s-ap-group { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); margin: var(--s-4) 0 var(--s-2); }
 .s-ap-group:first-child { margin-top: 0; }
 .s-ap-title { display: flex; align-items: center; gap: var(--s-2); }
+/* #2308: the app icon card — the icon now (home-screen size, and tab size) beside the one chosen, before it is used. */
+.s-app-icon-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); margin: var(--s-2) 0; }
+.s-app-icon-row figure { margin: 0; display: grid; justify-items: center; gap: var(--s-1); }
+.s-app-icon-row figure.s-app-icon-now { grid-template-columns: auto auto; align-items: end; column-gap: var(--s-3); }
+.s-app-icon-row figure.s-app-icon-now figcaption { grid-column: 1 / -1; }
+.s-app-icon-row figcaption { font-size: var(--fs-sm); color: var(--text-2); }
+.s-app-icon-big { width: 96px; height: 96px; border-radius: 22%; border: 1px solid var(--border); background: var(--surface-2); object-fit: cover; }
+.s-app-icon-small { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
 /* The fields' placeholders show the defaults: readable, not the browser's faint grey (dark mode). */
 .s-appearance input::placeholder { color: var(--text-3); opacity: 1; }
 /* A card title in Chinese is never upper-cased ("AGENT 的主題"): the small caps are a Latin convention. */
@@ -284,7 +309,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .p-log .log-item.turn-start { margin-top: var(--s-4); }
 .p-log .log-item.k-user { background: var(--user-bubble); }
 .p-log .log-item.k-turn_end, .p-log .log-item.k-state, .p-log .log-item.k-event { background: transparent; color: var(--text-3); padding-block: 2px; font-size: var(--fs-sm); }
-.p-log .log-item.k-error, .p-log .log-item.s-failed { border-left: 3px solid var(--danger); }
+.p-log .log-item.k-error, .p-log .log-item.s-failed { --lbar-color: var(--danger); padding-left: calc(var(--s-3) + 3px); }
 .p-log .log-head { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
 .p-log .log-icon { flex: none; }
 .p-log .log-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -350,6 +375,10 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--surface-2); outline: none; }
 .menu-item.danger { color: var(--danger); }
 .menu-item:disabled { opacity: 0.45; }
+/* #2196: a group's heading in a menu (Page colours) and its radio items (the chosen one ticked). */
+.menu-heading { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); border-top: 1px solid var(--border); margin-top: var(--s-1); }
+.menu-heading:first-child { border-top: 0; margin-top: 0; }
+.menu-radio .menu-tick { width: 16px; display: inline-flex; color: var(--accent); }
 
 /* ── Dialog: centred on a desktop, a bottom sheet on a phone ── */
 .dlg { border: 0; padding: 0; border-radius: var(--r-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-2); width: min(480px, calc(100vw - 32px)); max-height: 85vh; }
@@ -360,6 +389,17 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .dlg-title { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .dlg-body { padding: var(--s-2) var(--s-5) var(--s-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); }
 .dlg-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); }
+/* A drawer (ui-dialog.js `drawer`): on a desk, the right edge at full height, the page in view beside it. A phone keeps
+   the bottom sheet (the rules below are for 900 px and up only). */
+@media (min-width: 900px) {
+  .dlg.dlg-drawer { width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0;
+    background: var(--bg); box-shadow: var(--shadow-2); animation: dlg-drawer-in 0.18s var(--ease); }
+  .dlg-drawer .dlg-box { height: 100%; max-height: 100dvh; }
+  .dlg-drawer .dlg-head { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
+  .dlg-drawer .dlg-body { flex: 1; padding-top: var(--s-4); padding-bottom: var(--s-8); }
+}
+@keyframes dlg-drawer-in { from { transform: translateX(28px); opacity: 0.6; } }
+@media (prefers-reduced-motion: reduce) { .dlg.dlg-drawer { animation: none; } }
 
 /* ── Forms ── */
 .form { display: flex; flex-direction: column; gap: var(--s-3); }
@@ -423,7 +463,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 
 /* ── Chat ── */
 .p-chat .scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
-.thread { max-width: var(--col); margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-3); display: flex; flex-direction: column; gap: var(--s-6); }
+.thread { max-width: var(--col); margin: var(--thread-snap, 0px) auto 0; padding: var(--s-4) var(--s-5) var(--s-3); display: flex; flex-direction: column; gap: var(--s-6); }
 .msg { font-size: var(--fs-md); line-height: var(--lh-md); overflow-wrap: anywhere; min-width: 0; }
 .msg .meta { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s-1); }
 .msg .sender { font-weight: var(--fw-semibold); color: var(--text-2); }
@@ -436,6 +476,36 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    such as 「昨天 下午03:58」, ticks) — and a block body would stretch to it; fit-content keeps a short message short, on
    the right under its meta, and a long one still wraps at the message's max-width. */
 .msg.user .body { background: var(--user-bubble); border-radius: var(--r-xl); padding: 10px var(--s-4); width: fit-content; max-width: 100%; margin-left: auto; }
+/* A message this page is sending (chat-thread.js outgoingHtml): shown at once, its text dimmed with "Sending…" until the
+   server takes it; failed, a straight red bar with Retry and Delete. Each file: a picture as itself (or a document mark),
+   its name, a square-ended bar and its percentage, moved in place. */
+.msg.user.out .meta { align-items: center; gap: var(--s-2); }
+.msg.out.out-queued .body, .msg.out.out-sending .body { color: var(--text-3); }
+.msg.out.out-queued .body .md, .msg.out.out-sending .body .md { opacity: .72; }
+.out-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
+.out-spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: out-spin .8s linear infinite; }
+@keyframes out-spin { to { transform: rotate(360deg); } }
+.out-files { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
+.msg.out .body .out-files:first-child { margin-top: 0; }
+.out-file { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.out-pic { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); flex: none; background: var(--surface-2); }
+.msg.out.out-queued .out-pic, .msg.out.out-sending .out-pic { opacity: .7; }
+.out-doc { width: 32px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
+.out-file-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s-2); min-width: 0; flex: 1; min-width: 140px; }
+.out-name { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.out-pct { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
+.out-bar { grid-column: 1 / -1; height: 3px; background: var(--border); overflow: hidden; }
+.out-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
+.out-file[data-state="done"] .out-bar, .out-file[data-state="done"] .out-pct { visibility: hidden; }
+.out-file[data-state="failed"] .out-fill { background: var(--danger); }
+.out-file[data-state="failed"] .out-pct { color: var(--danger); }
+.msg.out.out-sent .out-file .out-bar, .msg.out.out-sent .out-file .out-pct { visibility: hidden; }
+/* Hugs its words under the bubble's right edge, as the bubble does: the bar stays beside them, never across the row. */
+.out-note { --lbar-color: var(--danger); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); width: fit-content; max-width: 100%;
+  margin: var(--s-2) 0 0 auto; padding: var(--s-1) 0 var(--s-1) calc(var(--s-2) + 3px); font-size: var(--fs-xs); color: var(--danger); }
+.out-error { overflow-wrap: anywhere; }
+.out-actions { display: inline-flex; gap: var(--s-1); }
+@media (prefers-reduced-motion: reduce) { .out-spin { animation: none; border-right-color: currentColor; opacity: .6; } .out-fill { transition: none; } }
 /* A person's click on a reply button: the bubble shows 🔘 and the button's label (never the value the agent was given);
    live, the label is a button that shows the reply its buttons were on. */
 .click-chip { display: flex; }
@@ -453,6 +523,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .msg.status-line .st-more { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs); padding: var(--s-1) 0 0 var(--s-3); }
 .msg.status-line .st-more:hover { color: var(--text); }
 .msg-tools { display: flex; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity var(--t-fast); }
+/* #2147: bounded stock toolbar paint, including fixed descendants. Padding preserves focus outlines. */
+.shell .thread .msg-tools { contain: paint; overflow: clip; overflow-clip-margin: 0px; padding: 4px; margin: 0 -4px -4px; }
+.shell .thread .codeblock > .cb-head { contain: paint; overflow: clip; overflow-clip-margin: 0px; }
 .msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
 @media (hover: none) { .msg-tools { opacity: 1; } }
 /* Delivery ticks: always visible, in colour, with their label on hover and for screen readers (rough edge 10). */
@@ -488,8 +561,19 @@ html.lb-open .scroller { overflow: hidden; }
 .lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
   background: rgba(0, 0, 0, 0.95); color: #fff; overflow: hidden; overscroll-behavior: contain; }
 .lb::backdrop { background: rgba(0, 0, 0, 0.6); }
-.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box; }
-.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
+.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box;
+  overflow: hidden; touch-action: none; }
+/* #2333: the picture at its own size, placed and scaled by a CSSOM transform from its top-left corner (image-zoom.js);
+   hidden until it has loaded and been fitted. One that fails to load is shown where the browser puts a broken one. */
+.lb-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; display: block; transform-origin: 0 0; will-change: transform;
+  visibility: hidden; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
+.lb-img.lb-ready { visibility: visible; }
+.lb-img.lb-err { position: static; max-width: 100%; max-height: 100%; visibility: visible; transform: none; cursor: default; }
+.lb-stage.lb-zoomed .lb-img { cursor: grab; }
+.lb-stage.lb-zoomed .lb-img:active { cursor: grabbing; }
+.lb-zoom { display: inline-flex; align-items: center; gap: 2px; }
+.lb .lb-level { min-width: 4.5em; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums; }
+.lb .lb-fit-width.on { background: rgba(255, 255, 255, 0.22); }
 .lb-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
   background: rgba(0, 0, 0, 0.75); }
 .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
@@ -557,10 +641,18 @@ html.lb-open .scroller { overflow: hidden; }
 .chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
 /* #1629: an agent's theme on its own chat surface — custom properties set on .p-chat through the CSSOM, choices as
    these tokens. The surface paints its own background (the page's body is not its). */
+/*
+ * #2196: an agent's colours on the whole page (app-themes.js applyPageTheme, on .shell): the shell paints its own
+ * background then, under the sidebar, the header, the usage rail and a phone's tabs. The header follows the page, not
+ * the chat: it takes the shell's colours back (--chrome-*: resolved on .shell, so the page's theme or the page's own).
+ */
+.shell.th-page { background: var(--bg); color: var(--text); }
+.shell { --chrome-bg: var(--bg); --chrome-surface: var(--surface); --chrome-text: var(--text); --chrome-text-2: var(--text-2); --chrome-accent: var(--accent); }
+.p-chat > .panel-head { --bg: var(--chrome-bg); --surface: var(--chrome-surface); --text: var(--chrome-text); --text-2: var(--chrome-text-2); --accent: var(--chrome-accent); background: var(--bg); color: var(--text); }
 .p-chat.th { background: var(--bg); color: var(--text); }
 .p-chat.th .msg.user .body { border-radius: var(--bubble-radius, var(--r-xl)); }
-.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
-.p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea { font-family: var(--font-mono); }
+.p-chat.th-font-system .thread, .p-chat.th-font-system .composer textarea, .p-chat.th-font-system .composer-ph { font-family: system-ui, -apple-system, "Segoe UI", sans-serif, var(--font-emoji); }
+.p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea, .p-chat.th-font-mono .composer-ph { font-family: var(--font-mono); }
 .p-chat.th-bubble-thin .msg.user .body { box-shadow: inset 0 0 0 1px var(--border); }
 .p-chat.th-bubble-accent .msg.user .body { box-shadow: inset 0 0 0 1px var(--accent); }
 .p-chat.th-agent-bubble .msg.agent .body { background: var(--agent-bubble); border-radius: var(--bubble-radius, var(--r-xl)); padding: 10px var(--s-4); }
@@ -611,6 +703,24 @@ img.amb-p { object-fit: contain; }
 .pv-code { flex: 1; min-height: 0; margin: 0; overflow: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
   background: var(--surface); border-radius: var(--r-sm); padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
 .msg.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); transition: outline-color var(--t-med); }
+/* #2272: a message's reply action (top right, on hover or focus), the quote a reply shows, the message menu, a swipe. */
+.msg[data-key] { position: relative; }
+.msg[data-key]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
+.msg-actions { position: absolute; top: -6px; right: 0; z-index: 2; display: flex; gap: var(--s-1); padding: 2px; border-radius: var(--r-sm);
+  background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
+.msg:hover > .msg-actions, .msg:focus-within > .msg-actions { opacity: 1; pointer-events: auto; }
+@media (hover: none) { .msg-actions { display: none; } }
+.msg-quote { display: flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 4px; padding: 2px var(--s-2) 2px calc(var(--s-2) + 3px); border: 0;
+  --lbar-color: var(--border-strong, var(--border)); --lbar-inset: 4px; --lbar-left: 2px; border-radius: var(--r-sm); background: transparent; color: var(--text-3);
+  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; overflow: hidden; }
+.msg.user .msg-quote { margin-left: auto; }
+.msg-quote:hover, .msg-quote:focus-visible { color: var(--text-2); background: var(--surface-2); outline: none; }
+.msg-quote .quote-sender { font-weight: var(--fw-semibold); white-space: nowrap; }
+.msg-quote .quote-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-menu { position: fixed; z-index: 60; min-width: 180px; padding: var(--s-1); border-radius: var(--r-md); background: var(--surface);
+  box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
+.msg[data-key] { transition: transform var(--t-fast); }
+.msg.swipe-ready { box-shadow: 3px 0 0 var(--accent); border-radius: var(--r-sm); }   /* let go now: a reply */
 @media (max-width: 899px) {
   .only-wide { display: none; }
   .pv-divider { display: none; }
@@ -676,12 +786,40 @@ img.amb-p { object-fit: contain; }
   font-size: var(--fs-md); line-height: var(--lh-md); resize: none; min-height: 24px; max-height: 240px; overflow-y: auto;
 }
 .composer textarea::placeholder { color: var(--text-3); }
+/* #2478: the placeholder, drawn over the empty box at its text's place: one line ending in "…" (a textarea's own is
+   clipped, never ellipsized). The same size and line as the box's text; it never takes a tap. */
+.composer-field { position: relative; flex: 1; min-width: 0; display: flex; }
+.composer-ph { position: absolute; left: var(--s-1); right: var(--s-1); top: 7px; pointer-events: none; color: var(--text-3);
+  font-size: var(--fs-md); line-height: var(--lh-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .btn-send { width: 36px; padding: 0; }
 .btn-send .send-label { display: none; }
 /* A narrow phone: Stop reply beside Send leaves the message box no room — the label is for screen readers there. */
 @media (max-width: 479px) { .btn-stop .stop-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
 .btn-stop { background: var(--bg); }
-.hint { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
+.hint { font-size: var(--fs-xs); color: var(--text-3); }
+/* #2215 (the user's request, 2026-10-19): one row under the composer, at the bottom left — this browser's web authority, then
+   the key hint. Its height is kept even before the authority is read (#2184: switching chats never moves the composer). */
+.composer-row { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 20px; margin-top: calc(-1 * var(--s-1));
+  font-size: var(--fs-xs); line-height: 1.4; color: var(--text-3); white-space: nowrap; }
+.composer-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.composer-row > .hint { flex-shrink: 1000; }
+.composer-row > :not(.hint) + .hint::before { content: "·"; margin-right: var(--s-2); }
+/* A guest's note and the public link's sentence are kept whole: on a narrow screen they wrap rather than lose words. */
+.composer-row .guest-note, .composer-row .webauth-row[data-state="public"] { margin: 0; text-align: left; white-space: normal; flex-shrink: 1; }
+.webauth-row { display: inline-flex; align-items: center; gap: var(--s-1); }
+.webauth-row .webauth-ok, .webauth-row .webauth-ask { font: inherit; padding: 0 2px; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
+.webauth-row .webauth-ok { color: var(--ok); }
+.webauth-row .webauth-ask { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.webauth-row .webauth-ok:focus-visible, .webauth-row .webauth-ask:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+/* What pressing Authorize answered is said in the row, in the hint's place: nothing is laid over the composer. */
+.webauth-row .webauth-notice { white-space: normal; color: var(--text-2); }
+.webauth-row .webauth-notice::before { content: "·"; margin-right: var(--s-2); color: var(--text-3); }
+.composer-row:has(.webauth-notice) > .hint { display: none; }
+/* When "✓ Verified" ends, on a tap (touch has no hover): a bubble above the row while it has focus. */
+.webauth-tip { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; max-width: min(420px, calc(100vw - 32px)); white-space: normal;
+  padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
+  box-shadow: var(--shadow-2); }
+.webauth-tip[hidden] { display: none; }
 /* #1920 phase 3: Settings → Web → Guests. */
 .s-guests .guest-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px var(--s-3); max-height: 220px; overflow: auto;
   padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
@@ -698,11 +836,20 @@ img.amb-p { object-fit: contain; }
 /* #1939 S2a: Settings → Web → Web authority. */
 .s-web-authority .s-va-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
 .s-web-authority .s-va-sessions li { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; }
+/* #2453: "over your named link" stays one phrase (the list item may break anywhere, CJK included). */
+.s-web-authority .s-va-named { white-space: nowrap; }
 .s-web-authority .s-va-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
 .s-web-authority .save-row { flex-wrap: wrap; }
 /* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
 .guest-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
 .pending-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
+/* #2272: replying — the bar above the composer (who and what is answered; ✕ / Esc cancels). */
+.reply-bar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: var(--s-2) var(--s-2) 0; padding: 4px var(--s-2) 4px calc(var(--s-3) + 3px);
+  --lbar-color: var(--accent); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
+.reply-bar .reply-mark { color: var(--accent); }
+.reply-bar .reply-label { font-weight: var(--fw-semibold); white-space: nowrap; }
+.reply-bar .reply-text { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.reply-bar .reply-cancel { flex: none; width: 28px; height: 28px; }
 .file-chip { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 4px var(--s-2); border-radius: var(--r-md); background: var(--bg); max-width: 320px; }
 .file-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
 .file-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -771,6 +918,9 @@ img.amb-p { object-fit: contain; }
   .oc-keep { left: var(--s-2); right: var(--s-2); transform: none; max-width: none; flex-wrap: nowrap; }
   .oc-keep-text { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; }
 }
+/* #2299: the toasts are a manual popover (ui-toast.js), so they stand in the top layer above an open dialog's backdrop;
+   the popover's own box (inset 0, margin, border, background) is undone here, before any placement below. */
+:where(.toasts) { inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; width: auto; height: auto; }
 .toasts { position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); pointer-events: none; }
 .toast { padding: 10px var(--s-4); max-width: min(420px, calc(100vw - 32px)); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--shadow-2); background: var(--accent-fill); color: var(--on-accent); animation: toast-in var(--t-med) var(--ease); }
 .toast.err { background: var(--danger-fill); color: var(--on-danger); }
@@ -797,7 +947,12 @@ img.amb-p { object-fit: contain; }
   .panel-head .sb-new { display: none; }
   .only-narrow { display: inline-flex; }
   .thread { padding: var(--s-3) var(--s-3) var(--s-2); gap: var(--s-5); }
-  .col { padding: var(--s-3) var(--s-3) var(--s-8); }
+  /* #2299: a phone's side gutter is 16 px — the content column, the header and the toasts alike. */
+  .col { padding: var(--s-3) var(--s-4) var(--s-8); }
+  .panel-head { padding: max(var(--s-1), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) var(--s-1) max(var(--s-4), env(safe-area-inset-left)); }
+  /* #2299: the header's controls are a full touch target (its row is 52 px: 44 px plus its padding). */
+  .panel-head .icon-btn { min-width: var(--tap); min-height: var(--tap); }
+  .panel-head .btn, .panel-head .seg-item, .panel-head select { min-height: var(--tap); }
   .dock { padding: 0 max(var(--s-2), env(safe-area-inset-right)) var(--s-2) max(var(--s-2), env(safe-area-inset-left)); }
   .hint { display: none; }
   .msg.user { max-width: 88%; }
@@ -808,12 +963,14 @@ img.amb-p { object-fit: contain; }
     padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
   .kb-open .tabs { display: none; }
+  /* #2478: with the keyboard up the line under the composer goes too — the box sits on the keyboard; back on blur. */
+  .kb-open .composer-row { display: none; }
   .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; justify-content: center; font-size: 11px; color: var(--text-2); position: relative; }
   .tab.active { color: var(--text); font-weight: var(--fw-semibold); }
   .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--danger-fill); color: var(--on-danger); font-size: 10px; line-height: 16px; text-align: center; }
   .main { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
   .kb-open .main { padding-bottom: 0; }
-  .toasts { top: calc(60px + env(safe-area-inset-top)); bottom: auto; left: var(--s-3); right: var(--s-3); align-items: stretch; }
+  .toasts { top: calc(60px + env(safe-area-inset-top)); bottom: auto; left: var(--s-4); right: var(--s-4); align-items: stretch; }
   .tour { left: var(--s-4); right: var(--s-4); width: auto; top: calc(64px + env(safe-area-inset-top)); }
   .dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 90vh; }
   .dlg-box { max-height: 90vh; }
@@ -837,6 +994,9 @@ img.amb-p { object-fit: contain; }
   color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; text-align: left;
 }
 .v-group-head:hover { color: var(--text); }
+/* #2172: what a group is — a team's icon, or "#" before a tag — muted, before its name (sidebar and Settings). */
+.v-group-kind { display: inline-flex; align-items: center; flex: none; color: var(--text-3); font-weight: var(--fw-medium); }
+.v-group-kind.tag { min-width: 0.7em; justify-content: center; }
 .v-group-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .v-group-head .count { font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; padding: 0 var(--s-2); border-radius: var(--r-full); background: var(--surface-2); }
 .caret { transition: transform var(--t-fast) var(--ease); }
@@ -866,6 +1026,35 @@ img.amb-p { object-fit: contain; }
 @media (max-width: 899px) { .fav-editing .inst-star, .fav-editing .inst-move { width: 36px; height: 36px; } }
 .v-inst .dot { margin-top: 0; }
 .v-meta { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+.v-meta { flex: none; }
+/* #2179 (B5, the user's pick): the name and its % on the first line; the other name and the last reply's time on the
+   second, the time at its end — one column of times down the list. The ★ beside a two-line row sits on the first line. */
+.inst-line { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.inst-line > .inst-name, .inst-line2 > .inst-alt { flex: 1; min-width: 0; }
+.inst-when { flex: none; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.inst-when.fresh { color: var(--accent); font-weight: var(--fw-semibold); }
+.v-li.two-line > .inst-star, .v-li.two-line > .inst-move { align-self: flex-start; margin-top: 6px; }
+/* A fresh reply: an accent tint that fades with --reply-a (1 → 0 over ten minutes, set on the row), never over the open
+   or a hovered row; one under a minute old pulses once — not under reduced motion. Nothing to click or clear. */
+.inst.replied:not(.active):not(:hover) { background: color-mix(in srgb, var(--accent) calc(var(--reply-a, 0) * 22%), transparent); }
+.inst.just:not(.active) { animation: inst-just 2.4s ease-out 1; }
+@keyframes inst-just { from { box-shadow: inset 0 0 0 1.5px var(--accent); } to { box-shadow: inset 0 0 0 1.5px transparent; } }
+@media (prefers-reduced-motion: reduce) { .inst.just:not(.active) { animation: none; } }   /* as specific as the rule it stops */
+/* #2179: how the list sorts — the button says it (the accent while "Recent replies" is on); its menu under it. */
+.inst-head { position: relative; }
+.nav-sort { position: static; flex: none; }   /* the menu spans the header's width, under it — never past the sidebar's edge */
+.nav-sort-btn { display: inline-flex; align-items: center; gap: 4px; }
+.nav-sort-btn.on { color: var(--accent); }
+.nav-sort-static { cursor: default; }
+.nav-sort-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; padding: var(--s-3);
+  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+  display: flex; flex-direction: column; gap: var(--s-3); }
+.nav-sort-menu fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.nav-sort-menu legend { padding: 0 0 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.nav-sort-opt { display: flex; align-items: flex-start; gap: var(--s-2); min-height: 36px; padding: 4px 2px; font-size: var(--fs-sm); cursor: pointer; }
+.nav-sort-opt input { margin-top: 3px; flex: none; }
+.nav-sort-hint { display: block; font-size: var(--fs-xs); color: var(--text-3); }
+.recent-head { cursor: default; }
 /* #1722: the sidebar's width — a separator on its right edge (drag, arrows, Home/End, double-click resets); not on a phone */
 .side-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; z-index: 5; cursor: col-resize; touch-action: none; }
 .side-resize:hover, .side-resize:focus-visible, .side-resize.dragging { background: var(--accent-dim, var(--border-strong)); }
@@ -888,7 +1077,21 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
    down, never the count; the count is as tall as a header, so the row does not grow. */
 .nav-facets { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-1) 0; }
 .nav-facet-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); flex: 1 1 auto; min-width: 0; }
-.nav-facets .nav-shown { flex: none; margin: 0 0 0 auto; padding: 2px 0; white-space: nowrap; }
+/* #2401: the count, "shown" under it and Clear under that. The word's width is held by ::before (its text from
+   data-reserve) and idle Clear's by the button itself, both at no height, unseen and out of reach (visibility): the column —
+   and the headers' box beside it — is as wide with a facet set as without. */
+.nav-facet-end { flex: none; margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
+.nav-facets .nav-shown { margin: 0; padding: 2px 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
+.nav-shown-word { display: block; }
+.nav-facet-end::before { content: attr(data-reserve); display: block; height: 0; overflow: hidden; visibility: hidden; font-size: var(--fs-xs); white-space: nowrap; }
+.nav-facet-end .is-idle { visibility: hidden; height: 0; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; overflow: hidden; }
+/* No open list beside it (.compact): one cell of one line, as wide as the count or Clear; a facet set, Clear in the count's
+   place (the count transparent, still read; the word for a screen reader only, so its width is not held here). */
+.nav-facets.compact .nav-facet-end { display: grid; justify-items: end; align-items: center; }
+.nav-facets.compact .nav-facet-end > * { grid-area: 1 / 1; margin: 0; }
+.nav-facets.compact .nav-facet-end::before { display: none; }
+.nav-facets.compact .nav-shown.is-set { opacity: 0; pointer-events: none; }
+.nav-facets.compact .nav-shown-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 .nav-facet { font-size: var(--fs-xs); color: var(--text-2); min-width: 0; max-width: 100%; }
 /* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
 .nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
@@ -897,10 +1100,15 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
 .nav-facet-head .caret { color: var(--text-3); flex: none; }
 .nav-facet-sum { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
+/* #2401: the summary takes only the room its line has left — never counted when the headers wrap (contain: inline-size,
+   its gap taken back), so a facet set never sends a header to a line of its own; the header holding it grows into the rest. */
+.nav-facet.has-sum { flex-grow: 1; }
+.nav-facet.has-sum .nav-facet-head { width: 100%; }
+.nav-facet-sum { contain: inline-size; flex: 1 1 0; margin-left: calc(-1 * var(--s-1)); padding-left: var(--s-1); }
 .nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
 .nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
 .nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
-.nav-facet-reset { font-size: var(--fs-xs); }
+.nav-facet-reset { font-size: var(--fs-xs); flex: none; white-space: nowrap; margin-top: 2px; padding: 2px var(--s-1); }
 
 /* One gap on every page (View's, #1448): the header's controls are the same size on every tab. */
 .panel-actions .btn { gap: var(--s-1); }
@@ -918,26 +1126,17 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .v-pre .ansi[data-dim] { opacity: .5; }
 .v-term-note { position: absolute; left: var(--s-3); right: var(--s-3); top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--warn-bg); border: 1px solid var(--warn-line); color: #f0f0f0; font-size: var(--fs-sm); }
 .v-probe { position: absolute; visibility: hidden; white-space: pre; left: -9999px; top: 0; font-size: 100px; }
-.v-card { flex-shrink: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--bg); padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }
-.v-card.open { align-items: flex-start; padding-top: var(--s-3); padding-bottom: var(--s-3); }
-.v-avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
-.v-card.open .v-avatar { width: 48px; height: 48px; }
-.v-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.v-initial { color: var(--text-2); font-weight: var(--fw-semibold); text-transform: uppercase; }
-.v-card-body { flex: 1; min-width: 0; }
-.v-card-line { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-sm); min-width: 0; }
-.v-card-line strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.v-role { color: var(--accent); font-size: var(--fs-xs); white-space: nowrap; }
-.v-card-meta { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.v-card.open .v-card-meta { white-space: normal; }
-.v-card-desc { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); white-space: pre-wrap; }
 .help-list { list-style: disc; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
 .err { color: var(--danger); font-size: var(--fs-sm); }
 .u-provider { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); }
 .u-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
-/* #1749: one line beside ↑↓ — the name gives way first, then the plan badge (each with an ellipsis); ↑↓ never wrap. */
-.u-head strong { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.u-plan { min-width: 0; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #1749 / #2412: one line beside ↑↓, by flexing alone (no widths assumed: ↑↓ are larger on a phone). The plan badge
+   starts at its minimum (40 px) and grows up to its own width into the room the name and ↑↓ leave, so a long badge ends
+   in an ellipsis (the full name its tooltip) while the name keeps every pixel (#2415 review: a shared shrink, however
+   weighted, still took a fraction of one and painted "Meta Muse Co…"). Only when the name, that minimum badge and ↑↓
+   cannot all fit (a 320 px phone) does the name shrink and end in an ellipsis — nothing leaves the card. */
+.u-head strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-plan { flex: 1 0 40px; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* #2014: a credential profile's row — the provider name beside the plan badge, and the profile on its own full-width
    muted line under the head (one line in the rail, whole in the dialog). */
 .u-profile { margin-top: calc(-1 * var(--s-2) + 2px); color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -956,19 +1155,62 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-meter { height: 10px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
 .u-fill { height: 100%; width: 0; min-width: 3px; border-radius: var(--r-full); background: var(--accent); transition: width 0.3s var(--ease); }
 .u-fill.warn { background: var(--warn); } .u-fill.crit { background: var(--danger); }
+/* Last known numbers (the live read failed): greyed, so they never read as live; the mark says when they were read. */
+.u-provider.is-stale .u-pct, .u-provider.is-stale .u-val, .u-provider.is-stale .u-status { color: var(--text-3); }
+.u-provider.is-stale .u-fill { background: var(--text-3); }
+.u-stale { font-weight: var(--fw-semibold); }
+.u-stale-detail { color: var(--text-3); font-size: var(--fs-xs); }
 .u-sub { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
 .u-err { color: var(--warn); font-size: var(--fs-sm); }
 .u-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 /* #1673: the usage rail beside the page on a wide screen (header-tools.js UsageRail; shown only at min-width 1200px). */
 .u-rail { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg); }
 .u-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
-.u-rail-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+.u-rail-head h2 { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
+/* The usage view's compact mode (usage-dialog.js CompactGroup / CompactRow), the user's pick (2026-10-22): the logins
+   grouped by provider (its name once, in small capitals), each in three short lines — its name and plan with the
+   soonest reset on the right, then each window as a labelled full-width bar and the percent. */
+.dlg-tools { display: inline-flex; align-items: center; flex: none; }
+.u-compact-toggle { flex: none; }
+/* flex: none — a group never shrinks to fit the rail (it would clip its accounts): the rail scrolls instead. */
+.u-cgroup { flex: none; display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.u-cg-head { display: flex; align-items: baseline; gap: 4px; padding: 7px var(--s-3) 3px; font-size: 11px; font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
+.u-cg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-cg-count { flex: none; }
+.u-crow { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; padding: 6px var(--s-3); border: 0; border-top: 1px solid var(--border);
+  background: transparent; color: inherit; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
+.u-cg-head + .u-crow { border-top: 0; }
+.u-crow:hover { background: var(--surface-2); }
+/* #2478 (Prism r1): the compact rows sit in .u-cgroup, rounded and clipping (overflow: hidden) — the bar keeps clear of
+   its 12 px corners (4 px in, 6 px off the row's ends) and there is no full-width underline to be rounded at the ends:
+   the bar is the focus mark (hover has none). */
+.u-crow:focus-visible { outline: none; background: var(--surface-2); --lbar-left: var(--s-1); --lbar-inset: 6px; }
+/* The name never gives way to the plan (#2415); the reset keeps its room on the right. */
+.u-crow-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); }
+.u-crow-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text); }
+.u-crow .u-plan { flex: 0 100 auto; min-width: 22px; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  padding-block: 0; line-height: 16px; font-size: 10.5px; }
+.u-crow-reset { margin-left: auto; flex: none; padding-left: 6px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.u-cm { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 3.4em; align-items: center; gap: 7px; min-width: 0; }
+.u-cm-tag { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* #2240: an account of several pools (agy) names each pool's line: a wider label, ending in an ellipsis if it must. */
+.u-crow.is-pooled .u-cm { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3.4em; }
+.u-cm-bar { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
+.u-cm-fill { display: block; height: 100%; width: 0; min-width: 2px; border-radius: var(--r-full); background: var(--accent); }
+.u-cm-fill.warn { background: var(--warn); } .u-cm-fill.crit { background: var(--danger); }
+.u-cm-pct { text-align: right; font-size: 13px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); }
+.u-cm-pct.warn { color: var(--warn); } .u-cm-pct.crit { color: var(--danger); }
+.u-crow-note { font-size: var(--fs-xs); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.u-crow-note.is-alert::before { content: "●"; margin-right: 5px; color: var(--danger); }
+.u-crow.is-stale .u-crow-note.is-alert::before { color: var(--warn); }
+@media (prefers-reduced-motion: no-preference) { .u-crow { transition: background-color 0.15s var(--ease); } }
 .u-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
 @media (max-width: 1199px) { .u-rail { display: none; } }
 @media (max-width: 899px) {
   .hide-narrow { display: none; }
-  .v-card { padding-left: var(--s-3); padding-right: var(--s-3); }
-  .v-card .btn { min-height: var(--tap); }
+  .v-id { padding-left: var(--s-3); padding-right: var(--s-3); }
+  .v-id-actions .btn { min-height: var(--tap); }
 }
 
 /* ── Settings (#1408 step 3): lists, forms, the pending bar, the Apply in hand ── */
@@ -1060,8 +1302,6 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
   .s-dev-bar .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   /* An agent's row: name and model on the first line, its tags and buttons from the second, on every row alike. */
   .s-br { display: block; flex-basis: 100%; height: 0; }
-  /* View: the profile line wraps to two lines instead of hiding the model and context. */
-  .v-card-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   /* A text button in Needs you lines up with the text above it, first in its row or wrapped onto a line of its own;
      a row's trailing Delete sits at the right. */
   .n-actions > .btn-ghost { padding-left: 0; padding-right: 0; margin-left: -1px; }
@@ -1111,6 +1351,18 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .op-line { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
 .op-line.ok { color: var(--ok); }
 .op-line.bad { color: var(--danger); }
+/* #2233: the backend sign-in dialog and Settings' list */
+.signin-field { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0; }
+.signin-label { color: var(--text-2); font-size: var(--fs-xs); min-width: 6em; }
+.signin-value { font-size: var(--fs-md); letter-spacing: 0.04em; user-select: all; word-break: break-all; }
+.signin-url { color: var(--text-2); font-size: var(--fs-xs); word-break: break-all; }
+.signin-note { color: var(--text-2); font-size: var(--fs-xs); }
+.signin-ok { color: var(--ok); }
+.signin-message { white-space: pre-wrap; }
+.signin-lines { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--text-2); font-size: var(--fs-xs); white-space: pre-wrap; }
+.signin-list { margin-top: var(--s-4); }
+.signin-list code { font-size: var(--fs-xs); word-break: break-all; }
+.signin-list .s-meta { white-space: normal; max-width: none; overflow: visible; }
 @media (max-width: 899px) {
   .grid2 { grid-template-columns: minmax(0, 1fr); }
   .se-row { grid-template-columns: minmax(0, 1fr) auto auto; }
@@ -1161,10 +1413,10 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .org-team-head h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
 .org-team-desc { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
 .org-team-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-xs); }
-.org-node { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border-left: 3px solid transparent; }
-.org-node.st-needs, .org-node.st-stuck { border-left-color: var(--warn); }
-.org-node.st-crashed { border-left-color: var(--danger); }
-.org-node.st-working { border-left-color: var(--ok); }
+.org-node { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 3px); border-radius: var(--r-md); background: var(--surface); --lbar-color: transparent; }
+.org-node.st-needs, .org-node.st-stuck { --lbar-color: var(--warn); }
+.org-node.st-crashed { --lbar-color: var(--danger); }
+.org-node.st-working { --lbar-color: var(--ok); }
 .org-node.st-missing { opacity: 0.7; }
 .org-node-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
 .org-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -1217,7 +1469,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-team-name { fill: var(--text); font-size: 13px; font-weight: 600; }
 .oc-team-meta { fill: var(--text-3); font-size: 11px; }
 .oc-team-sum { fill: var(--text-2); font-size: 11.5px; }
-.oc-team.dim { opacity: 0.55; }
+.oc-team.dim, .oc-team-head.dim { opacity: 0.55; }
 .oc-node.dim { opacity: 0.4; }
 .oc-node { cursor: pointer; }
 .oc-node[role="img"] { cursor: default; }
@@ -1257,13 +1509,18 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc { --fx-task: #b794f6; --fx-send: #2dd4bf; --fx-report: #f472b6; --fx-broadcast: #fb923c; --fx-team: #cbd5e1; }
 @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .oc { --fx-task: #7c3aed; --fx-send: #0f766e; --fx-report: #be185d; --fx-broadcast: #c2410c; --fx-team: #475569; } }
 :root[data-theme="light"] .oc { --fx-task: #7c3aed; --fx-send: #0f766e; --fx-report: #be185d; --fx-broadcast: #c2410c; --fx-team: #475569; }
-.oc-flow { fill: none; stroke-width: 2.5; stroke-linecap: round; }
+/* #2329: a line's stroke width is its own attribute (fleet-traffic.js strokeOf): its head and its trimmed ends are sized from it. */
+.oc-flow { fill: none; stroke-linecap: round; }
 .oc-flow-halo { fill: none; stroke: var(--bg); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
 .oc-flow.h-task { stroke: var(--fx-task); } .oc-flow.h-send { stroke: var(--fx-send); } .oc-flow.h-report { stroke: var(--fx-report); }
-.oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); stroke-width: 3.5; }
+.oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); }
 .oc-flow.ph-live { stroke-dasharray: 7 6; animation: oc-dash 0.9s linear infinite; }
 .oc-flow.ph-queued { stroke-dasharray: 2 5; opacity: 0.8; }
-.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 3s ease-out forwards; }
+.oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 12s ease-out forwards; }
+/* #1918 review: the work — a delegation in progress (a slow dash, kept until its report), its report coming back, none. */
+.oc-flow.ph-work { stroke-dasharray: 10 7; animation: oc-dash 2.4s linear infinite; }
+.oc-flow.ph-return { animation: oc-fade 2.4s ease-out forwards; }
+.oc-flow.ph-stale { stroke: var(--text-3); stroke-dasharray: 3 6; animation: oc-fade 12s ease-out forwards; }
 .oc-ah.h-task { fill: var(--fx-task); } .oc-ah.h-send { fill: var(--fx-send); } .oc-ah.h-report { fill: var(--fx-report); }
 .oc-ah.h-broadcast { fill: var(--fx-broadcast); } .oc-ah.h-team { fill: var(--fx-team); } .oc-ah.h-fading { fill: var(--text-3); }
 .oc-pulse.h-task { fill: var(--fx-task); } .oc-pulse.h-send { fill: var(--fx-send); } .oc-pulse.h-report { fill: var(--fx-report); }
@@ -1272,16 +1529,19 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc-badge rect { fill: var(--surface-2); stroke: var(--border); } .oc-badge text { fill: var(--text-2); font-size: 10.5px; }
 @keyframes oc-dash { to { stroke-dashoffset: -26; } }
 @keyframes oc-fade { from { opacity: 0.8; } to { opacity: 0.15; } }
-.oc-legend { position: absolute; left: var(--s-3); bottom: var(--s-3); max-width: calc(100% - 220px);
-  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px; }
-.oc-legend summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text); }
-.oc-legend[open] summary { margin-bottom: 4px; }
+/* #2052: the key is a strip under the toolbar (its toggle is in the toolbar), never over the canvas. */
+.oc-legend { margin: 0 0 var(--s-2); font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-md); padding: 6px 10px; }
+.oc-key.on { border-color: var(--accent); }
 .oc-lg-rows { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
 .oc-lg { display: inline-flex; align-items: center; gap: 6px; }
 .oc-sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; background: var(--text-3); }
 .oc-sw.h-task { background: var(--fx-task); } .oc-sw.h-send { background: var(--fx-send); } .oc-sw.h-report { background: var(--fx-report); } .oc-sw.h-broadcast { background: var(--fx-broadcast); }
 .oc-sw.ph-queued { background: repeating-linear-gradient(90deg, var(--text-2) 0 3px, transparent 3px 7px); }
 .oc-sw.ph-fading { opacity: 0.5; }
+.oc-sw.ph-work { background: repeating-linear-gradient(90deg, var(--fx-task) 0 6px, transparent 6px 9px); height: 4px; }
+.oc-sw.ph-return { height: 4px; }
+.oc-sw.ph-stale { background: repeating-linear-gradient(90deg, var(--text-3) 0 2px, transparent 2px 6px); }
 .oc-live { gap: 6px; }
 .oc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
 .oc-live.on .oc-live-dot { background: var(--ok); }
@@ -1291,14 +1551,59 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 @media (prefers-reduced-motion: reduce) {
   .oc-flow.ph-live { animation: none; stroke-dasharray: none; }
   .oc-flow.ph-fading { animation: none; opacity: 0.4; }
+  .oc-flow.ph-work { animation: none; }
+  .oc-flow.ph-return, .oc-flow.ph-stale { animation: none; opacity: 0.5; }
   .oc-pulse { display: none; }
 }
 @media (max-width: 640px) {
   .oc-stage { height: calc(100dvh - 248px); min-height: 340px; }
   .oc-find { flex: 1 1 150px; }
-  .oc-tools { margin-left: 0; width: 100%; flex-wrap: nowrap; }
+  /* #2052: Find, Key, Live and Canvas/List are wider than a phone together: the row wraps (nothing is cut off). */
+  .oc-tools { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: var(--s-2); }
   .oc-mini { display: none; }
-  .oc-legend { max-width: calc(100% - 24px); gap: 2px var(--s-2); }
+}
+/* ── Fleet → Org chart → Office (fleet-office.js): the fleet as a pixel office on one <canvas>. Its size is set through
+   the CSSOM (never a style attribute, #1300); the stage scrolls, the page around it too. ── */
+.oo { display: flex; flex-direction: column; gap: var(--s-2); }
+.oo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.oo-pick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
+.oo-pick .tb-select { max-width: 200px; }
+.oo-people { position: relative; }
+/* #2399: the offices' minimal editor (fleet-office-editor.js) — one row per office, its members unfolded under it. */
+.oe-form { border: 0; margin: 0; padding: 0; min-width: 0; }
+/* #2431: after a 409, the two ways on (keep my edits, load theirs), side by side; they wrap on a phone. */
+.oe-conflict { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.oe-list { list-style: none; margin: var(--s-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
+.oe-row { padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); }
+.oe-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
+.oe-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oe-label { font-size: var(--fs-xs); color: var(--text-2); }
+.oe-name { min-width: 0; width: 16em; max-width: 100%; }
+.oe-remove { margin-left: auto; }
+.oe-members { display: flex; flex-wrap: wrap; gap: var(--s-3); }
+.oe-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 12em; max-height: 240px; overflow-y: auto; }
+.oe-group legend { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); padding: 0; margin-bottom: 4px; }
+.oo-people > .btn.on { border-color: var(--accent); }
+.oo-people-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(280px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
+.oo-people-pop input[type="search"] { width: 100%; height: 32px; }
+.oo-people-list { list-style: none; margin: 0; padding: 0; }
+.oo-people-list label { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: var(--fs-xs); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
+.oo-note { font-size: var(--fs-xs); }
+.oo-stage { position: relative; height: clamp(420px, calc(100dvh - 280px), 960px); overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
+.oo-canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
+.oo-canvas.hot { cursor: pointer; }
+.oo-tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 240px; pointer-events: none; padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.4;
+  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow-wrap: anywhere; }
+/* The desks as a list: for a screen reader, and shown (over the stage's corner) while the keyboard is in it. */
+.oo-desks { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; list-style: none; }
+.oo-desks:focus-within { position: sticky; left: var(--s-2); bottom: var(--s-2); width: auto; height: auto; max-height: 40%; margin: 0; padding: var(--s-1); clip: auto; overflow-y: auto;
+  display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 2 * var(--s-2)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); white-space: normal; }
+.oo-desk { font-size: var(--fs-xs); padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg); color: var(--text); border: 1px solid var(--border); }
+.oo-desk:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 -2px 0 var(--focus); }
+@media (max-width: 640px) {
+  .oo-stage { height: calc(100dvh - 300px); min-height: 340px; }
+  .oo-pick .tb-select { max-width: 150px; }
 }
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
@@ -1354,9 +1659,9 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .us-csv { margin-left: auto; }
 .us-custom { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
 .us-custom label { display: inline-flex; flex-direction: column; gap: 2px; color: var(--text-2); }
-.us-basis { font-size: var(--fs-sm); color: var(--text); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--r-sm); }
+.us-basis { font-size: var(--fs-sm); color: var(--text); padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 3px); --lbar-color: var(--accent); background: var(--surface-2); border-radius: var(--r-sm); }
 .us-fresh { font-size: var(--fs-xs); }
-.us-partial { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
+.us-partial { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 3px); --lbar-color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
 .us-unpriced { font-size: var(--fs-xs); }
 .us-scan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
 .us-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
@@ -1422,7 +1727,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .cmd-palette .cmd-arg { color: var(--text-3); }
 .cmd-palette .cmd-none { color: var(--text-3); cursor: default; }
 .cmd-card { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
-.cmd-card.bad { border-left: 3px solid var(--danger); }
+.cmd-card.bad { --lbar-color: var(--danger); padding-left: calc(var(--s-3) + 3px); }
 .cmd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 .cmd-name { font-weight: var(--fw-semibold); }
 .cmd-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); color: var(--text-2); }
@@ -1440,6 +1745,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* #1630: a Discord server emoji in a chat message, the size of the text around it. */
 .md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }
+.md .emoji-text { color: var(--text-2); }
 /* #1682: a mention, as Discord draws one — accent text on a tint of it; the id (or the Telegram handle) on hover. */
 .md .mention { display: inline; padding: 0 0.2em; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-dim);
   font-weight: var(--fw-medium); white-space: nowrap; }
@@ -1536,8 +1842,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .side-widget { padding: 0 var(--s-3) var(--s-2); }
 .aw-sidebar { max-height: 240px; overflow: auto; }
 
-.chat-card-toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 32px; padding: 0 var(--s-4); border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; }
-.chat-card-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
+/* The chat header's card menu button (the user, 2026-10-20: no control on the card): pressed-looking while the card shows. */
+.chat-card-menu > .icon-btn.active { background: var(--accent-dim); color: var(--accent); }
 /* A phone: the portrait stays on the text's row, smaller (the user's ask: never a portrait alone on a line with the text
    under it); the S / M / L control takes the line below. The chat header's card is trimmed further: a smaller portrait
    and banner, and its tagline and bio cut to a few lines (Details and View show them whole). */
@@ -1554,9 +1860,10 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .id-card.card-c .id-tagline { -webkit-line-clamp: 2; line-clamp: 2; }
   .id-card.card-c .id-bio { -webkit-line-clamp: 3; line-clamp: 3; }
 }
-/* #1629 r4 §1: the card in View (above the profile row) and its part of Edit profile. */
-.v-id { flex-shrink: 0; padding: var(--s-2) var(--s-4) 0; background: var(--bg); }
+/* #1629 r4 §1: the identity card in View, with Edit profile under it. */
+.v-id { flex-shrink: 0; padding: var(--s-2) var(--s-4); background: var(--bg); padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }
 .v-id .id-card { margin: 0; }
+.v-id-actions { display: flex; justify-content: flex-end; padding-top: var(--s-2); }
 .form-sub { margin: var(--s-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
 /* #1629 r4.1 Q3 (b): Settings → Appearance, the card's upload limits (three to a row; one on a phone). */
 .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
@@ -1600,7 +1907,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .p-fleet > .seg, .p-settings > .seg,
 .p-fleet > .panel-body, .p-needs > .panel-body, .p-settings > .panel-body,
 .p-log > .panel-body, .p-details > .panel-body, .p-view > .panel-body,
-.p-log > .log-bar, .p-view > .v-term, .p-view > .v-id, .p-view > .v-card { position: relative; z-index: 1; }
+.p-log > .log-bar, .p-view > .v-term, .p-view > .v-id { position: relative; z-index: 1; }
 /* Keep the existing Apply bar's sticky behavior, in its own bounded stock band. */
 .p-settings > .s-pending { z-index: 1; }
 
@@ -1615,3 +1922,323 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .panel-head:has(> .chat-fx-notice) { flex-wrap: wrap; }
 .chat-fx-notice { order: 10; flex: 1 1 100%; min-width: 0; max-width: 100%; font-size: var(--fs-sm); overflow-wrap: anywhere; }
 .chat-fx-notice > span { display: block; }
+
+/* ── #2293: global search — the sidebar row's shortcut, the header's button (collapsed sidebar, phone), the dialog ── */
+/* #2478: a touch screen has no Ctrl/⌘ K — the shortcut's hint is not shown there (the row is). */
+@media (pointer: coarse) { .side-search .kbd-hint { display: none; } }
+.kbd-hint { font: inherit; font-size: var(--fs-xs); color: var(--text-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 var(--s-1); line-height: 18px; white-space: nowrap; }
+.panel-head .sb-search { display: none; }
+.sb-collapsed .panel-head .sb-search { display: inline-flex; }
+.chip-btn.on { color: var(--text); background: var(--surface-2); font-weight: var(--fw-semibold); }
+.dlg.search-dlg { width: min(680px, calc(100vw - 32px)); margin: 10vh auto auto; max-height: 76vh; }
+.search-box { display: flex; flex-direction: column; max-height: 76vh; }
+.search-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-2); }
+.search-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: max(16px, var(--fs-lg)); padding: var(--s-2) 0; }
+.search-input:focus { outline: none; }
+.search-filters-toggle { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
+.search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
+.search-field { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); }
+.search-field select { max-width: 260px; }
+/* The filter chips' "on" state in the accent, so it reads apart from the hover and from the folded toggle. */
+.search-chips .chip-btn.on { background: var(--accent-dim); color: var(--accent); }
+.search-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
+.search-mine { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s-2); color: var(--text-2); cursor: pointer; }
+.search-mine input { margin: 0; accent-color: var(--accent); }
+.search-body { flex: 1; min-height: 140px; overflow-y: auto; padding: var(--s-2); }
+.search-foot { padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-xs); }
+.search-hint, .search-status, .search-note { margin: 0; padding: var(--s-2) var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
+.search-status.bad { color: var(--danger); }
+.search-note { color: var(--warn); }
+.search-recent-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3) 0; color: var(--text-3); font-size: var(--fs-xs); }
+.search-recent ul { list-style: none; margin: 0; padding: 0; }
+.search-recent-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; border: 0; border-radius: 0; --lbar-inset: 4px; background: transparent; color: var(--text); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
+.search-recent-item:hover, .search-recent-item:focus-visible { background: var(--surface-2); }
+/* Keyboard focus: the bar and a straight underline (no rounded ring). */
+.search-recent-item:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--focus); }
+.search-recent-item svg { color: var(--text-3); flex: none; }
+.search-results.stale { opacity: 0.6; }
+.search-group + .search-group { margin-top: var(--s-2); }
+.search-group-head { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.search-count { color: var(--text-3); font-weight: var(--fw-regular); }
+.search-row { padding: var(--s-2) var(--s-3); border-radius: 0; cursor: pointer; }
+.search-row.on { background: var(--surface-2); }
+.search-row-top { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
+.search-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.search-kind { color: var(--text-3); }
+.search-time { color: var(--text-3); white-space: nowrap; }
+.search-badge { flex: none; font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold); padding: 0 6px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); }
+.search-badge.chat { background: var(--accent-dim); color: var(--accent); }
+.search-badge.xmsg { background: var(--warn-bg); color: var(--warn); }
+.search-badge.task { background: var(--ok-bg); color: var(--ok); }
+.search-snippet { margin-top: 2px; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.search-snippet mark, .search-ctx-text mark { background: var(--accent-dim); color: inherit; border-radius: 2px; padding: 0 1px; }
+.search-detail-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-2); font-size: var(--fs-sm); }
+.search-detail-head .chip-btn { display: inline-flex; align-items: center; gap: 4px; }
+.search-ctx { list-style: none; margin: 0; padding: 0 var(--s-1); display: flex; flex-direction: column; gap: var(--s-1); }
+.search-ctx-line { padding: var(--s-2) var(--s-3); border-radius: 0; }
+.search-ctx-line.here { background: var(--surface-2); }
+.search-ctx-text { margin-top: 2px; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
+.search-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-1) var(--s-1); }
+@media (max-width: 899px) {
+  .panel-head .sb-search { display: inline-flex; }
+  .dlg.search-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
+  .search-box { height: 100%; max-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); box-sizing: border-box; }
+  .search-foot { display: none; }
+  .search-row { padding: var(--s-3); }
+  .search-filters-toggle, .search-chips .chip-btn { min-height: var(--tap); }
+}
+/* The task board (Fleet › Tasks: fleet-tasks.js, fleet-task-card.js). Status colours: to do neutral, in progress the
+   accent, blocked danger, waiting for you warn, done ok. Bars are SVG rects (no style attribute: the CSP). */
+.tb { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
+.tb-grow { flex: 1; }
+.tb-head { flex-wrap: wrap; }
+.tb-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.tb-who { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
+.tb-link { color: var(--accent); font-size: var(--fs-xs); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
+.tb-link:hover { text-decoration: underline; }
+.tb-select { min-height: 30px; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font-size: var(--fs-xs); max-width: 100%; }
+.tb-select:disabled, .tb-check input:disabled { opacity: 0.6; cursor: default; }
+.tb-check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
+.tb-check input { width: auto; min-height: 0; margin: 0; }
+.tb-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
+.tb-chev { transition: transform var(--t-fast) var(--ease); transform: rotate(-90deg); }
+.tb-chev.open { transform: rotate(0deg); }
+
+.tb-pill, .tb-tag, .tb-flag { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: var(--fw-semibold); padding: 1px var(--s-2); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
+.tb-pill.st-claimed, .tb-tag.st-claimed { background: var(--accent-dim); color: var(--accent); }
+.tb-pill.st-blocked, .tb-tag.st-blocked, .tb-flag.st-blocked, .tb-tag.p-urgent { background: var(--danger-bg); color: var(--danger); }
+.tb-pill.st-review, .tb-tag.st-review, .tb-flag.st-review, .tb-tag.p-high { background: var(--warn-bg); color: var(--warn); }
+.tb-pill.st-done, .tb-tag.st-done { background: var(--ok-bg); color: var(--ok); }
+.tb-pill.st-cancelled { color: var(--text-3); text-decoration: line-through; }
+.tb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
+.tb-col.st-claimed > .tb-col-head > .tb-dot, .tb-dot.st-claimed { background: var(--accent); }
+.tb-col.st-blocked > .tb-col-head > .tb-dot, .tb-dot.st-blocked { background: var(--danger); }
+.tb-col.st-review > .tb-col-head > .tb-dot, .tb-dot.st-review { background: var(--warn); }
+.tb-col.st-done > .tb-col-head > .tb-dot, .tb-dot.st-done { background: var(--ok); }
+
+.tb-bar { width: 96px; height: 6px; border-radius: var(--r-full); overflow: hidden; flex-shrink: 0; }
+.tb-bar.wide { width: 100%; flex-shrink: 1; }
+.tb-bar-track { fill: var(--surface-2); }
+.tb-seg.st-done { fill: var(--ok); }
+.tb-seg.st-review { fill: var(--warn); }
+.tb-seg.st-claimed { fill: var(--accent); }
+.tb-seg.st-blocked { fill: var(--danger); }
+.tb-pct { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
+
+/* Home: what waits for the person, then the projects. */
+.tb-home { display: flex; flex-direction: column; gap: var(--s-4); }
+/* The public link: the board is shown, not changed. */
+.tb-readonly { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); }
+.tb-home > .list-head { margin: 0; }
+.tb-section-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
+.tb-waiting { padding: var(--s-3); border: 1px solid var(--warn-line); border-radius: var(--r-lg); }
+.tb-wait-row { flex-wrap: wrap; align-items: flex-start; }
+/* #2299: the pill sits on the title's first line (one baseline); the reason, under the title; the actions after. */
+.tb-wait-main { flex: 1 1 320px; min-width: 0; display: flex; align-items: baseline; gap: var(--s-2) var(--s-3); }
+.tb-wait-main > .tb-pill { flex-shrink: 0; min-width: 112px; justify-content: center; }
+.tb-wait-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: auto; }
+.tb-wait-actions .btn { min-width: 88px; padding: 0 var(--s-4); }
+.tb-wait-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); background: none; border: 0; padding: 0; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); }
+.tb-wait-title:hover { text-decoration: underline; }
+.tb-wait-reason { flex-basis: 100%; margin-top: 2px; color: var(--danger); font-size: var(--fs-xs); line-height: var(--lh-xs); overflow-wrap: anywhere; }
+.tb-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
+.tb-project { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
+.tb-project:hover { border-color: var(--border-strong); }
+.tb-project.is-archived { opacity: 0.7; }
+.tb-project-open { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; padding: var(--s-4); padding-right: calc(var(--s-4) + 32px); background: none; border: 0; color: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
+.tb-project-name { font-weight: var(--fw-bold); font-size: var(--fs-md); overflow-wrap: anywhere; }
+.tb-project-desc { color: var(--text-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
+.tb-project-pct { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
+.tb-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
+.tb-project-menu { position: absolute; top: var(--s-2); right: var(--s-2); }
+.tb-archived { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
+.tb-archived > .tb-projects { align-self: stretch; }
+
+.tb-search { position: relative; min-width: 180px; flex: 0 1 280px; }
+.tb-search input { width: 100%; min-height: 34px; padding: 0 var(--s-3) 0 30px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg); color: var(--text); font-size: var(--fs-sm); }
+.tb-search input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
+.tb-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
+.tb-search-results { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; width: min(440px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; margin: 0; padding: var(--s-1); list-style: none; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
+.tb-search-results button { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2); background: none; border: 0; border-radius: var(--r-sm); color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); }
+.tb-search-results li.active button, .tb-search-results button:hover { background: var(--surface-2); }
+.tb-search-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.tb-search-where { flex-basis: 100%; font-size: var(--fs-xs); overflow-wrap: anywhere; }
+.tb-search-none { padding: var(--s-2); font-size: var(--fs-sm); }
+
+/* A project: its header, then one column per status. */
+.tb-bar-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
+.tb-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.tb-title h2 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
+.tb-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
+.tb-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--s-2)); padding: 0 var(--s-2) var(--s-2); }
+/* #2299: 176 px a column fits all five beside the sidebar from 1280 px wide (220 px cut Done off at 1366). */
+.tb-columns { display: grid; grid-template-columns: repeat(5, minmax(176px, 1fr)); gap: var(--s-3); align-items: start; min-width: min-content; }
+.tb-col { display: flex; flex-direction: column; gap: var(--s-2); min-height: 120px; padding: var(--s-2); border-radius: var(--r-lg); background: var(--surface); border: 1px dashed transparent; }
+.tb-col.can-drop { border-color: var(--border); }
+.tb-col.over { border-color: var(--accent); background: var(--accent-dim); }
+.tb-col-head { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-1) var(--s-1) 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
+.tb-col-head .tb-link { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
+.tb-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-3); }
+.tb-drop-line { height: 3px; border-radius: 2px; background: var(--accent); }
+
+.tb-tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-1); --lbar-color: transparent; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tb-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
+/* As taskhall: the shared straight bar (#2330) only while the card is under way (in progress, blocked, waiting for
+   you); none on to do or done, and a done tile is dimmed. */
+.tb-tile.st-claimed { --lbar-color: var(--accent); }
+.tb-tile.st-blocked { --lbar-color: var(--danger); }
+.tb-tile.st-review { --lbar-color: var(--warn); }
+.tb-tile.st-done { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); box-shadow: none; }
+.tb-tile.st-done .tb-tile-title { color: var(--text-2); }
+.tb-tile.dragging { opacity: 0.4; }
+.tb-tile.flash { animation: tb-flash 1.6s var(--ease); }
+@keyframes tb-flash { from { box-shadow: 0 0 0 3px var(--accent-dim); background: var(--accent-dim); } to { box-shadow: none; } }
+.tb-tile-top { display: flex; align-items: center; gap: var(--s-2); }
+.tb-size { padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; font-weight: var(--fw-bold); line-height: 16px; color: var(--text-3); }
+/* The tile's control: its title, a plain-looking button (Enter opens the card, Alt+arrows move it). */
+.tb-tile-title { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; font-weight: var(--fw-semibold); line-height: 1.4; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+.tb-tile-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.tb-tile:has(.tb-tile-title:focus-visible) { border-color: var(--focus); }
+.tb-tile-note { display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
+/* A main task's sub task at work now (its worker in the foot), and what a card waiting for you still lacks. */
+.tb-tile-now { display: flex; align-items: baseline; gap: var(--s-1); min-width: 0; font-size: var(--fs-xs); color: var(--text-2); }
+.tb-now-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tb-now-label { flex-shrink: 0; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-2); }
+.tb-now-label.st-claimed { color: var(--accent); }
+.tb-now-label.st-blocked { color: var(--danger); }
+.tb-now-label.st-review { color: var(--warn); }
+.tb-tag.wrapup { background: var(--warn-bg); color: var(--warn); }
+.tb-wait-reason.wrapup, .tc-hint.wrapup { color: var(--warn); }
+.tb-wait-asked { flex-basis: 100%; font-size: var(--fs-xs); }
+.tc-now { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 0; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); }
+.tc-now:hover .tc-child-title { text-decoration: underline; }
+.tb-tile-note.st-blocked { color: var(--danger); }
+.tb-tile-progress { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 0; background: none; border: 0; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; }
+.tb-tile-progress > span { white-space: nowrap; }
+.tb-tile-progress > .tb-bar { flex: 1; min-width: 40px; }
+.tb-subs { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); padding-top: var(--s-2); }
+.tb-subs button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 2px var(--s-1); background: none; border: 0; border-radius: var(--r-sm); color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-xs); }
+.tb-subs button:hover { background: var(--surface-2); }
+.tb-sub-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tb-sub-blocked { padding-left: 22px; font-size: var(--fs-xs); color: var(--danger); overflow-wrap: anywhere; }
+.tb-sub-more { font-size: var(--fs-xs); padding-left: var(--s-1); }
+.tb-tile-foot { display: flex; align-items: center; gap: var(--s-2); }
+.tb-tile-foot > .tb-who, .tb-tile-foot > .tb-person, .tb-tile-foot > .tb-people { flex: 1; min-width: 0; max-width: none; }
+.tb-people { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
+/* Who (fleet-task-common.js): a round initial — the instance's identity colour when it has one — then the name. */
+.tb-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.tb-person > .tb-who { min-width: 0; }
+.tb-person.none > .tb-who { color: var(--text-3); }
+.tb-av { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
+  background: color-mix(in srgb, var(--id, var(--text-3)) 16%, var(--bg)); color: var(--id-name, var(--text-2)); }
+.tb-tile-stats { display: inline-flex; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); }
+.tb-tile-stats > span { display: inline-flex; align-items: center; gap: 2px; }
+.tb-tile-stats > .all { color: var(--ok); }
+.tb-tile-stats > .reply { color: var(--accent); }
+
+/* #2246 step 3: who works on what (fleet-task-work.js) — the board's Instance drawer and the Details page's block. */
+.tw { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
+.tw-head { margin: 0; font-size: var(--fs-sm); }
+.tw-error { margin: 0; color: var(--danger); font-size: var(--fs-sm); }
+.tw-group { display: flex; flex-direction: column; gap: var(--s-2); }
+.tw-group-head { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.tw-inst { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); min-width: 0; }
+.tw-inst-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.tw-inst-head .av { width: 24px; height: 24px; font-size: 11px; }
+.tw-inst-head .av .av-dot { box-shadow: 0 0 0 2px var(--bg); }
+.tw-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.tw-state { font-size: var(--fs-xs); white-space: nowrap; }
+.tw-alt { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.tw-desc { margin: 0; font-size: var(--fs-xs); overflow-wrap: anywhere; }
+.tw-none { margin: 0; font-size: var(--fs-xs); }
+.tw-lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.tw-line { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 2px var(--s-1); background: none; border: 0; border-radius: 0; --lbar-inset: 2px; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tw-line:hover { background: var(--surface-2); }
+.tw-line:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--focus); }
+.tw-kind { flex-shrink: 0; min-width: 4.5em; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-2); }
+.tw-kind.k-doing { color: var(--accent); }
+.tw-kind.k-blocked, .tw-kind.k-back { color: var(--danger); }
+.tw-kind.k-review { color: var(--warn); }
+.tw-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tw-note { flex-shrink: 0; font-size: var(--fs-xs); white-space: nowrap; }
+.tw-unread { flex-shrink: 0; display: inline-flex; color: var(--accent); }
+.d-board .tw-lines { margin-top: var(--s-1); }
+
+/* One card, in the app's dialog. */
+.tc { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
+.tc-head { display: flex; align-items: center; gap: var(--s-2); }
+.tc-title { flex: 1; min-width: 0; padding: var(--s-1) var(--s-2); margin-left: calc(-1 * var(--s-2)); background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: left; cursor: text; overflow-wrap: anywhere; }
+.tc-title:hover { border-color: var(--border); }
+.tc-title-input { flex: 1; min-width: 0; padding: var(--s-1) var(--s-2); border: 1px solid var(--focus); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font-size: max(16px, var(--fs-lg)); font-weight: var(--fw-semibold); }
+.tc-ver { font-size: var(--fs-xs); }
+.tc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
+.tc-hint { font-size: var(--fs-xs); }
+.tc-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); align-items: center; }
+.tc-meta dt { color: var(--text-2); }
+.tc-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; min-width: 0; }
+.tc-value { color: var(--text); overflow-wrap: anywhere; }
+.tc-dep { padding: 1px var(--s-2); border: 1px solid var(--ok); border-radius: var(--r-full); background: none; color: var(--ok); font-family: var(--font-mono); font-size: var(--fs-xs); cursor: pointer; }
+.tc-dep.waiting { border-color: var(--warn); color: var(--warn); }
+.tc-field h3 { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
+.tc-field.tone-blocked h3 { color: var(--danger); }
+.tc-text { display: block; width: 100%; padding: var(--s-2); background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
+.tc-text:hover { border-color: var(--border); background: var(--surface); }
+.tc-text.empty { color: var(--text-3); }
+.tc-edit textarea, .tc-composer textarea, .tc-quick-add { width: 100%; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font-size: var(--fs-sm); resize: vertical; }
+.tc-edit textarea:focus, .tc-composer textarea:focus, .tc-quick-add:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
+.tc-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-xs); }
+.tc-counter { font-variant-numeric: tabular-nums; color: var(--text-3); }
+.tc-counter.over { color: var(--danger); font-weight: var(--fw-semibold); }
+.tc-checklist { display: flex; flex-direction: column; gap: var(--s-1); margin: 0 0 var(--s-1); padding: 0; list-style: none; }
+.tc-checklist .done { color: var(--text-3); text-decoration: line-through; }
+.tc-children { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--s-2); padding: 0; list-style: none; }
+.tc-children button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-1) var(--s-2); background: none; border: 0; border-radius: var(--r-sm); color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); }
+.tc-children button:hover { background: var(--surface); }
+.tc-child-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.tc-tabs { padding: 0; margin: var(--s-2) 0 0; max-width: none; }
+.tc-feed { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); overflow-wrap: anywhere; }
+.tc-comments { display: flex; flex-direction: column; gap: var(--s-2); }
+.tc-comment { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
+.tc-comment.person { background: var(--accent-dim); }
+.tc-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: 2px; font-size: var(--fs-xs); }
+.tc-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
+.tc-composer { display: flex; gap: var(--s-2); align-items: flex-end; }
+
+@media (max-width: 899px) {
+  /* A phone stacks the columns: no sideways scrolling, and a card moves through its dialog's "Move to…". */
+  .tb-scroll { overflow-x: visible; margin: 0; padding: 0; }
+  .tb-columns { grid-template-columns: minmax(0, 1fr); min-width: 0; }
+  .tb-col { min-height: 0; }
+  .tb-form-row { grid-template-columns: minmax(0, 1fr); }
+  .tb-search { flex: 1 1 100%; }
+  /* The card's sheet keeps its fields full width (the grey block is the desk drawer's). */
+  .tc-meta { padding: 0; background: none; }
+  /* #2299: a phone's waiting row: pill and title on one line, the actions under them (assignee left, buttons right). */
+  .tb-wait-main > .tb-pill { min-width: 0; }
+  .tb-wait-actions { flex-basis: 100%; margin-left: 0; }
+  .tb-wait-actions > .muted { margin-right: auto; }
+  /* #2299: on the board its toasts come in above the tabs, not over its title, search and progress — unless a card's
+     sheet is open (its buttons are at the bottom). */
+  .shell:has(.tb-home, .tb-board-page):not(:has(dialog[open])) .toasts { top: auto; bottom: calc(56px + env(safe-area-inset-bottom) + var(--s-3)); }
+  /* …and they do not pile down the board: an older confirmation gives way to two newer toasts; an error never does. */
+  .shell:has(.tb-home, .tb-board-page) .toasts > .toast.ok:nth-last-child(n+3) { display: none; }
+}
+/* On a desk a project's columns reach the bottom of the page, as taskhall's: a card drops anywhere down a column, and
+   an empty column still reads as one. The page's column, the board and its scroller pass the height down as flex. */
+@media (min-width: 900px) {
+  .col:has(> .tb > .tb-board-page) { display: flex; flex-direction: column; min-height: 100%; }
+  .tb:has(> .tb-board-page) { flex: 1; }
+  .tb-board-page { display: flex; flex-direction: column; flex: 1; }
+  .tb-board-page > .tb-scroll { display: flex; flex-direction: column; flex: 1; }
+  .tb-board-page .tb-columns { flex: 1; align-items: stretch; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tb-tile.flash { animation: none; }
+  .tb-chev { transition: none; }
+}
+
+/* #2305: the agent's reactions to a message (its minimal reply), under the bubble — on the person's side for theirs. */
+.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.msg.user .msg-reactions { justify-content: flex-end; }
+.msg-reactions .reaction { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px;
+  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-family: var(--font-emoji); font-size: 15px; line-height: 1; }