@songsid/agend 2.2.1 → 2.2.6

package/dist/ui/shared/app.css

@@ -112,7 +112,43 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
 .av.av-emoji { background: transparent; font-size: 18px; font-weight: normal; }
 .av.av-emoji img { width: 22px; height: 22px; border-radius: 0; object-fit: contain; }
-.av.ring { box-shadow: 0 0 0 2px var(--ring, transparent); }
+/* #1958: an instance's identity colour — both modes' values set on the row through the CSSOM (identity-color.js), the
+   page's mode picks one (the same selectors as tokens.css). Places: .id-ring (the avatar's ring, every face), .id-bar (a
+   bar at the row's left edge), .id-name (the name, in a shade readable on the page and the sidebar). */
+.idc { --id: var(--id-dark); --id-name: var(--id-name-dark); }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .idc { --id: var(--id-light); --id-name: var(--id-name-light); } }
+:root[data-theme="light"] .idc { --id: var(--id-light); --id-name: var(--id-name-light); }
+.idc.id-ring .av { box-shadow: 0 0 0 2px var(--id); }
+/* #2056: the bar is a plain straight line inside the row: no caps following the row's rounded corners (an inset shadow
+   did), and short of the corners, so the hover and selected highlight's radius is never crossed. */
+.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); }
+.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; }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .idc-swatch { --sw: var(--sw-light); } }
+:root[data-theme="light"] .idc-swatch { --sw: var(--sw-light); }
+.idc-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
+.idc-custom { display: inline-flex; gap: 6px; align-items: center; }
+.idc-custom input[type="color"] { width: 32px; height: 28px; padding: 0; border: 0; background: none; }
+.idc-hex { width: 9ch; font-family: var(--font-mono, monospace); }
+.dlg-actions .dlg-spacer { flex: 1 1 auto; }
+.idc-preview { padding: 6px; border-radius: 10px; background: var(--bg-sidebar); max-width: 260px; }
+/* #2056 B: Settings → Web appearance — plain group headings, a "?" per card to its docs section, and the colour card's sample row. */
+.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); }
+/* 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. */
+:lang(zh-Hant) .card h3 { text-transform: none; letter-spacing: 0; }
+.s-learn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-full); border: 1px solid var(--border);
+  color: var(--text-3); font-size: 11px; text-decoration: none; text-transform: none; letter-spacing: 0; line-height: 1; }
+.s-learn:hover, .s-learn:focus-visible { color: var(--text); border-color: var(--text-3); }
+.s-colors-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
+.s-colors-row .idc-places { margin-bottom: 0; flex: 1 1 220px; }
+.s-colors-sample { flex: 0 1 220px; min-width: 0; }
 .av-text { overflow: hidden; }
 .av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
 /* #1722: the CLI as a letter on the avatar's top-left corner — monochrome (the #1630 ring keeps the colour), cut out like the dot */
@@ -138,11 +174,20 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 /* #1604: one row — Settings and Session (the anonymous View reader: Sign in and the theme/language popover). Their
    pop-ups open over the whole footer's width. */
-.side-foot { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2); position: relative; }
+/* #1922: a divider above the footer, with the filter block's bottom padding and the footer's top padding trimmed to
+   --s-1: the gap reads as a section break, not an empty ~20 px band (the two --s-2 paddings used to stack). */
+.side-foot { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2) var(--s-2); border-top: 1px solid var(--border); position: relative; }
 .side-foot > .side-row, .side-foot > .session { flex: 1; min-width: 0; }
 .side-foot > .session { position: static; }
 .side-foot .side-row span:not(.dot):not(.meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .side-foot .session .meta { display: none; }
+/* #1920 phase 3: a guest's page says who it is signed in as, beside its session. */
+.guest-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 6px var(--s-2); border-radius: var(--r-sm);
+  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); }
+.guest-chip .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Its own row: a name and a platform do not fit beside the session at sidebar widths. */
+.guest .side-foot { flex-wrap: wrap; }
+.guest .side-foot > .guest-chip { flex-basis: 100%; }
 .prefs-pop > summary { list-style: none; cursor: pointer; }
 .prefs-pop > summary::-webkit-details-marker { display: none; }
 .prefs.labelled { flex-direction: column; gap: var(--s-2); padding: 0; }
@@ -201,11 +246,15 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 .panel-head .sb-open { display: none; }
 .sb-collapsed .panel-head .sb-open { display: inline-flex; }
+/* #2074: a collapsed sidebar's "New agent", beside its ☰ (a phone opens the drawer, which has the row). */
+.panel-head .sb-new { margin-left: calc(-1 * var(--s-1)); }
 /* One row of --header-h on every page (a phone's instance tabs wrap below it): the title, its status and badges on one centre line. */
 .panel-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--header-h) - 2 * var(--s-1)); }
 .panel-title h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; outline: none; }
 .panel-sub { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .status { display: inline-flex; align-items: center; gap: 6px; }
+/* #2015: the largest processes, after the host memory chip's text. */
+.host-mem-top { margin-left: var(--s-2); opacity: 0.8; overflow-wrap: anywhere; }
 .panel-actions { display: flex; align-items: center; gap: var(--s-1); }
 /* #1523 N2: the instance view switch — beside the title on a wide screen; on a phone, a row of tabs under the header. */
 .inst-switch.seg { padding: 0; margin: 0; width: auto; max-width: none; flex-shrink: 0; }
@@ -324,6 +373,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .field input:focus, .field select:focus, .field textarea:focus, .field-row input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); }
 .field input:disabled { opacity: 0.6; }
 .field-row { display: flex; gap: var(--s-1); align-items: center; }
+/* #2072: a model field — the list, and the text box "Other…" opens under it. */
+.model-pick { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
+.model-pick > select, .model-pick > input { width: 100%; }
 .note { font-size: var(--fs-xs); color: var(--text-3); }
 .checks { display: flex; flex-direction: column; gap: var(--s-1); max-height: 180px; overflow-y: auto; }
 .check { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
@@ -346,6 +398,8 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .seg-item { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-full); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
 .seg-item:hover { background: var(--surface); color: var(--text); }
 .seg-item.active { background: var(--surface-2); color: var(--text); font-weight: var(--fw-semibold); }
+/* #1629: Settings has eight sections (Appearance added): they wrap to a second row rather than hide behind a scroll. */
+.p-settings .seg { flex-wrap: wrap; row-gap: var(--s-1); overflow-x: visible; }
 .list-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
 .rows { display: flex; flex-direction: column; gap: var(--s-1); }
 .row-item { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
@@ -369,7 +423,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); }
@@ -399,6 +453,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). */
@@ -501,6 +558,34 @@ html.lb-open .scroller { overflow: hidden; }
    CSSOM), a full-screen sheet on a narrow one. The frame is the card's (preview.js), sized by the panel here. */
 .chat-split { flex: 1; min-height: 0; display: flex; }
 .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). */
+.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, var(--font-emoji); }
+.p-chat.th-font-mono .thread, .p-chat.th-font-mono .composer textarea { 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); }
+.chat-main.has-th-bg { position: relative; }
+.chat-main.has-th-bg > :not(.th-bg) { position: relative; z-index: 1; }
+.th-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--th-bg-opacity, 1); pointer-events: none; z-index: 0; user-select: none; }
+.th-bg-cover { object-fit: cover; }
+.th-bg-contain { object-fit: contain; }
+/* #2117: an agent's ambient effect (chat-ambient.js). The loop sits behind the thread (z 0, under the scroller and the
+   dock at z 1); a burst follows the dock in the tree at z 1, so it shows over the messages and under the header (z 2).
+   Neither ever takes a pointer, focus or selection; positions and sizes are set through the CSSOM. */
+.chat-main.has-amb { position: relative; }
+.chat-main.has-amb > .amb-layer, .chat-main.has-amb > .amb-burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; contain: strict; }
+.chat-main.has-amb > .amb-layer { z-index: 0; }
+.chat-main.has-amb > .amb-burst { z-index: 1; }
+.amb-p { position: absolute; left: 0; top: 0; line-height: 1; color: var(--accent); pointer-events: none; will-change: transform, opacity; }
+img.amb-p { object-fit: contain; }
+.s-mod-glyph { width: 24px; height: 24px; object-fit: contain; }
+/* #2117: the one-time "reduced motion; effects are on" note, a strip above the thread. */
+.chat-main > .amb-note { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) var(--s-3) 0; padding: var(--s-1) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font-size: 13px; }
+.chat-main > .amb-note .amb-note-off { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; min-height: 32px; }
+.chat-main > .amb-note .amb-note-x { margin-left: auto; min-width: 32px; min-height: 32px; border: 0; background: none; color: var(--text-2); cursor: pointer; }
 .pv-divider { flex: 0 0 8px; cursor: col-resize; background: var(--bg); border-left: 1px solid var(--border); touch-action: none; position: relative; }
 .pv-divider::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 32px; margin-top: -16px; border-radius: 2px; background: var(--border-strong); }
 .pv-divider:hover::after, .pv-divider:focus-visible::after, .chat-split.resizing .pv-divider::after { background: var(--accent); }
@@ -556,8 +641,12 @@ html.lb-open .scroller { overflow: hidden; }
 .pv-menu[open] { z-index: 6; background: var(--surface); border-radius: var(--r-sm); padding: var(--s-1); box-shadow: var(--shadow-2); }
 .pv-menu[open] > .chip-btn { display: block; text-align: left; width: max-content; max-width: 260px; white-space: normal; }
 
+/* #2087: the pill takes no room in the thread — it was a sticky box in the flow, 38 px at the end of the scroll, so
+   hiding it 48 px from the bottom took that room away under a reader still scrolling — the wheel's last step was cut
+   short, or the view clamped back. Its dock is sticky and 0 px tall; the pill floats above it. */
+.jump-dock { position: sticky; bottom: 0; height: 0; z-index: 5; }
 .jump-latest {
-  position: sticky; bottom: var(--s-3); left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: var(--s-1);
+  position: absolute; bottom: var(--s-3); left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-1);
   background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-full); box-shadow: var(--shadow-2);
   padding: 6px var(--s-4); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer;
 }
@@ -567,6 +656,9 @@ html.lb-open .scroller { overflow: hidden; }
 .prompt { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--warn-bg); border: 1px solid var(--warn-line); }
 .prompt.done { background: transparent; border-style: dashed; color: var(--text-2); }
 .prompt .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* #1990: a name in a status line or a prompt that opens that instance in the app. */
+.st-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.st-link:hover { text-decoration-thickness: 2px; }
 .prompt .acts { display: flex; gap: var(--s-2); margin-top: var(--s-2); align-items: center; flex-wrap: wrap; }
 .prompt .wait { font-size: var(--fs-xs); color: var(--text-3); }
 .work-bar { display: flex; gap: var(--s-2); align-items: center; padding: 0 var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
@@ -593,6 +685,26 @@ html.lb-open .scroller { overflow: hidden; }
 @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; }
+/* #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); }
+.s-guests .guest-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.s-guests .guest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-guests .guest-row { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.s-guests .guest-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
+.s-guests .guest-narrow-edit { margin-top: var(--s-2); }
+.s-guests .guest-away { color: var(--text-3); }
+/* #1939 S2b: this browser's authorization, under the composer and in the session menu (one compact line). */
+.webauth-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: var(--s-1) 0 0; font-size: var(--fs-xs); }
+.webauth-chip .webauth-ok { color: var(--ok); }
+.webauth-chip .btn-sm { min-height: 24px; }
+/* #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; }
+.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; }
 .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; }
@@ -610,6 +722,58 @@ html.lb-open .scroller { overflow: hidden; }
 .drop-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--accent); font-weight: var(--fw-semibold); }
 
 /* ── Toasts ── */
+/* #1629 r4 §3: Settings → Appearance (owner CSS). */
+.s-css-text, .s-widget-text { font-family: var(--font-mono); font-size: var(--fs-sm); width: 100%; min-height: 12rem; resize: vertical; tab-size: 2; }
+.s-widget-preview { max-width: 320px; }
+/* #1629 r4-5: Settings → Appearance → Mods — the plan is shown in full before anything is applied. */
+.s-mod-plan { display: flex; flex-direction: column; gap: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); }
+.s-mod-plan h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.s-mod-plan h4 .muted { font-size: var(--fs-sm); font-weight: var(--fw-regular); }
+.s-mod-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
+.s-mod-item { display: flex; flex-direction: column; gap: var(--s-1); }
+.s-mod-detail { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-left: 1.75rem; color: var(--text-2); font-size: var(--fs-sm); min-width: 0; }
+.s-mod-widget { display: block; max-width: min(360px, 100%); }
+.s-mod-theme { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; width: 100%; }
+.s-mod-kv { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; min-width: 0; }
+.s-mod-kv .k { color: var(--text-3); font-size: var(--fs-xs); min-width: 9em; }
+.s-mod-kv .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
+.s-mod-sws { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
+.s-mod-sw { display: inline-flex; align-items: center; gap: var(--s-1); }
+.s-mod-sw-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--sw, transparent); }
+.s-mod-pic { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.s-mod-pic img { width: 64px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }
+.s-mod-raw summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); }
+.s-mod-widget .aw-chat_header { border-width: 1px; border-radius: var(--r-md); }
+.s-mod-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.s-mod-warn { color: var(--warn); font-size: var(--fs-sm); padding-left: 1.75rem; }
+.s-mod-css-text { margin: 0 0 0 1.75rem; max-height: 240px; overflow: auto; padding: var(--s-2); border-radius: var(--r-sm); background: var(--code-bg); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
+.s-mod-err { white-space: pre-line; }
+.s-mod-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-mod-list li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
+.s-mod-list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.s-mod-proposals { display: flex; flex-direction: column; gap: var(--s-2); }
+.s-mod-proposals h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
+.s-mod-export summary { cursor: pointer; font-weight: var(--fw-medium); }
+.s-mod-export[open] { display: flex; flex-direction: column; gap: var(--s-2); }
+.s-mod-boxes { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
+.s-css-actions, .s-widget-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
+.s-css-status { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
+.s-css-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.s-css-list li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
+.s-css-list code { overflow-wrap: anywhere; }
+.s-owner-css h4 { margin: var(--s-2) 0 0; font-size: var(--fs-sm); }
+/* #1629 r4 §3: keep-or-revert after saving custom CSS — on every page, above everything but dialogs' scrim. */
+.oc-keep { position: fixed; top: var(--s-3); left: 50%; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: var(--s-2);
+  flex-wrap: wrap; max-width: calc(100vw - 32px); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface);
+  color: var(--text-1); border: 1px solid var(--border); box-shadow: var(--shadow-2); font-size: var(--fs-sm); }
+.oc-keep-text { display: inline-flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.oc-keep-q { font-weight: var(--fw-medium); }
+.oc-keep-left { color: var(--text-3); font-variant-numeric: tabular-nums; }
+/* A phone: one row across the top — the question over the seconds left, then Keep and Revert. */
+@media (max-width: 479px) {
+  .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; }
+}
 .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); }
@@ -633,6 +797,7 @@ html.lb-open .scroller { overflow: hidden; }
   .sb-open .sidebar { transform: none; visibility: visible; }
   .sb-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 39; }
   .panel-head .sb-open { display: inline-flex; }
+  .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); }
@@ -675,6 +840,9 @@ html.lb-open .scroller { overflow: hidden; }
   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); }
@@ -691,6 +859,9 @@ html.lb-open .scroller { overflow: hidden; }
 .inst-star.on { color: var(--warn); }
 .inst-star.on svg, .fav-mark { fill: currentColor; }
 .fav-head { cursor: default; }
+/* #1936: the open instance, pinned on top while a filter is on — its header reads "Current", a line under it. */
+.pinned-head { cursor: default; }
+.v-pinned { border-bottom: 1px solid var(--border); padding-bottom: var(--s-2); margin-bottom: var(--s-1); }
 .fav-mark { color: var(--warn); }
 .inst-nav:not(.fav-editing) .inst-star:not(.on) { visibility: hidden; }
 /* As specific as the rule that hides it (and later), so hover and focus win. */
@@ -701,6 +872,35 @@ html.lb-open .scroller { overflow: hidden; }
 @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)); }
@@ -710,7 +910,7 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .dragging { opacity: 0.4; }
 .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
 .drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
-.v-filter { flex: none; padding: var(--s-2) var(--s-3) var(--s-2); border-top: 1px solid var(--border); }
+.v-filter { flex: none; padding: var(--s-2) var(--s-3) var(--s-1); border-top: 1px solid var(--border); }
 .v-filter-box { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1) 0 var(--s-3); border-radius: var(--r-sm); background: var(--surface); color: var(--text-3); }
 .v-filter-box:focus-within { box-shadow: 0 0 0 2px var(--focus); }
 .v-filter-box input { flex: 1; min-width: 0; height: 34px; border: 0; background: transparent; color: var(--text); font-size: var(--fs-sm); outline: none; }
@@ -773,6 +973,10 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 /* #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; }
+/* #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; }
+.dlg .u-profile { white-space: normal; overflow-wrap: anywhere; }
 .u-order { margin-left: auto; display: flex; gap: 2px; flex: none; }
 .u-order .icon-btn { width: 28px; height: 28px; }
 .u-order .icon-btn:disabled { opacity: 0.3; }
@@ -1023,6 +1227,123 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
     content: ""; position: absolute; top: var(--s-5); left: calc(-1 * var(--s-4) - 2px); width: var(--s-4); height: 2px; background: var(--border-strong); }
   .org-link { min-height: var(--tap); }
 }
+/* ── #1918: the org chart as a canvas (fleet-canvas.js). SVG with classes only: per-card values are SVG attributes, the
+   view's transform one attribute on .oc-world (#1300). The stage fills the panel's height; touch gestures are the
+   canvas's own (touch-action: none on it only), the page around it still scrolls. ── */
+.oc-bar { flex-wrap: wrap; row-gap: var(--s-2); }
+.oc-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.oc-find { flex: 0 1 260px; min-width: 150px; position: relative; }
+.oc-find input { height: 32px; padding-right: 72px; }
+.oc-found { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; pointer-events: none; }
+.oc-stage { position: relative; height: clamp(420px, calc(100dvh - 240px), 960px); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
+.oc-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
+.oc-svg:active { cursor: grabbing; }
+.oc-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.oc-tree path { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
+.oc-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
+.oc-team.loose .oc-box { stroke-dasharray: 5 4; }
+.oc-box.match { stroke: var(--focus); stroke-width: 2.5; }
+.oc-head { fill: var(--surface-2); }
+.oc-hit { fill: transparent; }
+.oc-toggle:not(.empty) { cursor: pointer; }
+.oc-toggle:focus { outline: none; }
+.oc-toggle:focus-visible .oc-hit { stroke: var(--focus); stroke-width: 2; }
+.oc-caret { fill: var(--text-2); font-size: 12px; }
+.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, .oc-team-head.dim { opacity: 0.55; }
+.oc-node.dim { opacity: 0.4; }
+.oc-node { cursor: pointer; }
+.oc-node[role="img"] { cursor: default; }
+.oc-node:focus { outline: none; }
+.oc-card { fill: var(--bg); stroke: var(--border); stroke-width: 1; }
+.oc-node.lead .oc-card { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
+.oc-node:hover .oc-card { stroke: var(--border-strong); }
+.oc-node:focus-visible .oc-card, .oc-node.match .oc-card, .oc-node.match:hover .oc-card { stroke: var(--focus); stroke-width: 2.5; }
+.oc-node.st-missing { opacity: 0.7; }
+.oc-av { fill: var(--surface-2); stroke: var(--surface); stroke-width: 2; }
+.oc-node.idc.id-ring .oc-av { stroke: var(--id); stroke-width: 2.5; }
+.oc-idbar { display: none; }
+.oc-node.idc.id-bar .oc-idbar { display: inline; fill: var(--id); }
+.oc-face.emoji .oc-av { fill: transparent; }
+.oc-av-t { fill: var(--text-2); font-size: 12px; font-weight: 600; }
+.oc-face.emoji .oc-av-t { font-size: 18px; font-weight: normal; }
+.oc-name { fill: var(--text); font-size: 13.5px; font-weight: 600; }
+.oc-node.lead .oc-name { font-size: 15px; }
+.oc-node.idc.id-name .oc-name { fill: var(--id-name); }
+.oc-sub { font-size: 12px; }
+.oc-st { fill: var(--text-2); }
+.oc-st.st-working { fill: var(--ok); } .oc-st.st-needs, .oc-st.st-stuck { fill: var(--warn); } .oc-st.st-crashed { fill: var(--danger); }
+.oc-dot { fill: var(--text-3); stroke: var(--bg); stroke-width: 2; }
+.oc-dot.st-working, .oc-dot.st-idle { fill: var(--ok); } .oc-dot.st-needs, .oc-dot.st-stuck { fill: var(--warn); } .oc-dot.st-crashed { fill: var(--danger); }
+.oc-dot.st-paused { fill: var(--bg); stroke: var(--text-3); stroke-width: 1.5; }
+.oc-zoom { position: absolute; right: var(--s-3); top: var(--s-3); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
+.oc-zoom .icon-btn { width: 36px; height: 34px; border-radius: 0; font-size: 18px; }
+.oc-zoom .icon-btn + .icon-btn { border-top: 1px solid var(--border); }
+.oc-mini { position: absolute; right: var(--s-3); bottom: var(--s-3); width: 180px; height: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
+.oc-mini-team { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 6; }
+.oc-mini-team.needs { fill: var(--warn-bg); stroke: var(--warn); }
+.oc-mini-top { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 6; }
+.oc-mini-team.match { stroke: var(--focus); stroke-width: 14; }
+.oc-mini-hit { fill: var(--focus); }
+.oc-mini-view { fill: none; stroke: var(--focus); stroke-width: 10; }
+/* #1918 phase 3: live traffic. Kind hues kept apart from the state colours (ok = working/idle, warn = needs you, danger). */
+.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; }
+.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.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 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; stroke-width: 3; animation: oc-dash 2.4s linear infinite; }
+.oc-flow.ph-return { stroke-width: 3; 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); }
+.oc-pulse.h-broadcast { fill: var(--fx-broadcast); } .oc-pulse.h-team { fill: var(--fx-team); }
+.oc-fl.dim { opacity: 0.18; }
+.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; } }
+/* #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); }
+.org-sending { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
+.org-send.k-task { color: var(--fx-task); } .org-send.k-report { color: var(--fx-report); } .org-send.k-broadcast { color: var(--fx-broadcast); }
+.org-send.k-send, .org-send.k-query, .org-send.k-update { color: var(--fx-send); }
+@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; }
+  /* #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; }
+}
 /* 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) {
   .p-fleet .seg-item:not(.active) > span, .p-settings .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@@ -1064,6 +1385,73 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .ch-bar .btn { min-height: var(--tap); }
 }
 
+/* ── #2122: Fleet → Usage. A categorical palette kept apart from the state colours (Okabe–Ito hues, tuned per mode for
+   contrast); every series also has a text label, so colour is never the only cue. ── */
+.us { --us-0: #56b4e9; --us-1: #e69f00; --us-2: #2bc48a; --us-3: #f0e442; --us-4: #e78ac3; --us-5: #94a3b8; --us-heat: #56b4e9;
+  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .us { --us-0: #0072b2; --us-1: #c25400; --us-2: #007a5a; --us-3: #8a6d00; --us-4: #b0457a; --us-5: #64748b; --us-heat: #0072b2; } }
+:root[data-theme="light"] .us { --us-0: #0072b2; --us-1: #c25400; --us-2: #007a5a; --us-3: #8a6d00; --us-4: #b0457a; --us-5: #64748b; --us-heat: #0072b2; }
+.us-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
+.us-group { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
+.us-group select, .us-custom input { min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
+.us-group select:focus, .us-custom input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }
+.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-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-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; }
+.us-totals .ch-metric dd { font-size: var(--fs-lg); }
+.us-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
+.us-table th, .us-table td { padding: var(--s-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
+.us-table thead th { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-3); }
+.us-table .num { text-align: right; white-space: nowrap; }
+.us-name { min-width: 0; max-width: 360px; font-weight: var(--fw-regular); }
+.us-name .mono { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.us-bar { display: block; width: 100%; height: 6px; margin: 4px 0; }
+.us-bar-bg { fill: var(--surface-2); } .us-bar-fg { fill: var(--us-0); }
+.us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
+.us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
+.us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
+.us-scroll { overflow-x: auto; max-width: 100%; }
+.us-chart, .us-heatmap { display: block; }
+.us-axis { font-size: 9px; fill: var(--text-3); }
+.us-s0 { fill: var(--us-0); background: var(--us-0); } .us-s1 { fill: var(--us-1); background: var(--us-1); } .us-s2 { fill: var(--us-2); background: var(--us-2); }
+.us-s3 { fill: var(--us-3); background: var(--us-3); } .us-s4 { fill: var(--us-4); background: var(--us-4); } .us-s5 { fill: var(--us-5); background: var(--us-5); }
+.us-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); }
+.us-legend li { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
+.us-sw, .us-h-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
+.us-h { fill: var(--us-heat); }
+.us-h.l1, .us-h-sw.l1 { opacity: 0.45; } .us-h.l2 { opacity: 0.65; } .us-h.l3 { opacity: 0.85; } .us-h.l4, .us-h-sw.l4 { opacity: 1; }
+.us-h-sw.l4 { background: var(--us-heat); }
+/* Read with nothing used: a solid grey cell. Not collected: an empty dashed outline. */
+.us-h.idle { fill: var(--text-3); opacity: 0.35; }
+.us-h-sw.idle { background: var(--text-3); opacity: 0.35; }
+.us-h.gap { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 2; }
+.us-h-sw.gap { border: 1px dashed var(--text-3); }
+.us-grid, .us-base { stroke: var(--border); stroke-width: 1; }
+.us-grid { stroke-dasharray: 3 3; }
+.us-scale, .us-earlier { font-size: var(--fs-xs); }
+.us-heat-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); }
+.us-rest .row-item { font-size: var(--fs-xs); }
+.u-by-agent { margin-left: auto; }
+@media (max-width: 699px) {
+  .us-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .us-csv { margin-left: 0; }
+  .us-bar-top .btn { min-height: var(--tap); }
+  /* Rows become cards: each value with its label. */
+  .us-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .us-table, .us-table tbody, .us-table tr, .us-table th, .us-table td { display: block; width: 100%; }
+  .us-table tr { margin-bottom: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
+  .us-table th, .us-table td { border: 0; padding: 2px 0; max-width: none; }
+  .us-table td { display: flex; justify-content: space-between; gap: var(--s-3); }
+  .us-table td::before { content: attr(data-label); color: var(--text-3); text-align: left; }
+}
+
 /* ── Chat commands and quick actions (#1269) ── */
 .hd-chip { margin-left: var(--s-2); padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-full); background: transparent; color: var(--text-2);
   font-size: var(--fs-xs); line-height: 20px; cursor: pointer; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
@@ -1096,6 +1484,179 @@ 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; }
+
+/* #1629 r4 §1 / r4.1 Q3 (a): the identity card (identity-card.js). The size is a class token; its heights are here
+   (S 160 / M 240 / L 360 px, on a phone 120 / 180 / 240). Never a style attribute.
+   #2038: the banner's height follows the card's width — S 4:1, M 3:1, L 2.25:1 — between a floor and a ceiling per size,
+   so it is never a strip across a wide chat and never a wall on a phone; the picture fills it, cropped about its middle.
+   The chat header's card (card-c) follows the same size choice (card-c bs-<size>). */
+.id-card { --id-feather: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); --id-h: 240px; --id-ar: 3 / 1; --id-bmin: 140px; --id-bmax: 240px; margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
+.id-card.card-s { --id-h: 160px; --id-ar: 4 / 1; --id-bmin: 100px; --id-bmax: 160px; }
+.id-card.card-l { --id-h: 360px; --id-ar: 9 / 4; --id-bmin: 200px; --id-bmax: 360px; }
+.id-card.card-c { --id-h: 96px; --id-bmin: 120px; --id-bmax: 200px; margin: 0; border: 0; border-radius: 0; background: none; }
+.id-card.card-c.bs-s { --id-ar: 4 / 1; --id-bmin: 96px; --id-bmax: 150px; }
+.id-card.card-c.bs-l { --id-ar: 9 / 4; --id-bmin: 150px; --id-bmax: 220px; }
+/* #2086: the banner at its focus (--id-focus, set per card), never wider than 5 : 1 — its width is capped at five times its
+   size's tallest height, so the band shown everywhere is (picture aspect ÷ 5) of its height. Beyond that it is centred
+   over a blurred copy of itself. */
+.id-banner-box { position: relative; overflow: hidden; container: idbanner / inline-size; }
+/* #2089 review: and never narrower than 9 : 4 — its height never more than its box's width ÷ 2.25 (a size's floor yields
+   to it on a narrow column: a wide sidebar, the usage rail), so the promised safe area holds on every layout. */
+.id-banner { position: relative; display: block; width: 100%; max-width: calc(var(--id-bmax) * 5); margin-inline: auto; height: auto; aspect-ratio: var(--id-ar);
+  min-height: min(var(--id-bmin), calc(100cqw / 2.25)); max-height: min(var(--id-bmax), calc(100cqw / 2.25)); object-fit: cover; object-position: 50% var(--id-focus, 50%); }
+/* #2086: Edit profile's banner focus — the picture whole, the band every screen shows (dashed, outside it shaded) and a phone's. */
+.bf-wrap { position: relative; max-width: 440px; overflow: hidden; border-radius: var(--r-sm); }
+.bf-pic { display: block; width: 100%; height: auto; }
+.bf-band { position: absolute; pointer-events: none; box-sizing: border-box; }
+.bf-band span { position: absolute; right: 4px; top: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
+.bf-safe { border: 2px dashed #fff; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); }
+/* The phone's band over the shade, in its own colour (its label at its own top-left, never in the shaded part). */
+.bf-phone { z-index: 1; border: 2px solid #ffd54a; }
+.bf-phone span { right: auto; left: 8px; top: 5px; color: #ffd54a; }
+.bf-field input[type=range] { width: 100%; max-width: 440px; }
+.id-banner-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--id-focus, 50%); filter: blur(24px) saturate(0.75) brightness(0.7); transform: scale(1.4); opacity: .9; pointer-events: none; }
+/* Wider than the banner's cap (5 × the size's tallest height): its sides feather into the fill, so the sharp centre
+   leads without a seam. One threshold per size (a container query cannot read a custom property). */
+@container idbanner (min-width: 750px) { .id-card.card-c.bs-s .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 800px) { .id-card.card-s .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1000px) { .id-card.card-c:not(.bs-s):not(.bs-l) .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1100px) { .id-card.card-c.bs-l .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1200px) { .id-card:not(.card-s):not(.card-l):not(.card-c) .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+@container idbanner (min-width: 1800px) { .id-card.card-l .id-banner { -webkit-mask-image: var(--id-feather); mask-image: var(--id-feather); } }
+.id-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
+.id-portrait { display: block; flex-shrink: 0; height: var(--id-h); width: auto; max-width: min(calc(var(--id-h) * 0.75), 100%); object-fit: cover; border-radius: var(--r-sm); }
+.id-text { flex: 1; min-width: 0; }
+.id-tagline { margin: 0 0 var(--s-1); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.id-bio { margin: 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
+.card-size { display: flex; flex-shrink: 0; gap: var(--s-1); }
+.card-size .seg-item { min-height: 28px; padding: 0 var(--s-2); border: 1px solid transparent; background: none; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
+.card-size .seg-item.active { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
+.chat-card { flex-shrink: 0; border-bottom: 1px solid var(--border); }
+/* #1629 r4-4: widgets — the page's own components, from a declarative spec (agent-widget.js). The host draws the 1px
+   frame and the ✦ chip, outside anything the spec chooses; nothing in a widget takes a click or focus. Colours are the
+   theme's tokens (an agent's chat header sits inside its themed chat), so a person's own CSS can restyle them too. */
+.aw { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; overflow: clip; user-select: text; }
+.aw-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.aw-chip { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.aw-by { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.aw-items { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
+.aw-item { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-sm); }
+.aw-label { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
+.aw-value { color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; min-width: 0; }
+.aw-stat .aw-value { margin-left: auto; font-variant-numeric: tabular-nums; }
+.aw-unit { margin-left: 2px; color: var(--text-2); font-weight: var(--fw-regular); }
+.aw-text .aw-value { font-weight: var(--fw-regular); }
+.aw-bar { flex: 1; min-width: 48px; height: 6px; appearance: none; border: 0; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
+.aw-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-full); }
+.aw-bar::-webkit-progress-value { background: var(--accent); border-radius: var(--r-full); }
+.aw-bar::-moz-progress-bar { background: var(--accent); border-radius: var(--r-full); }
+.aw-progress .aw-value { margin-left: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
+.aw-list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
+.aw-list ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
+.aw-badge { display: inline-block; padding: 1px var(--s-2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
+.aw-tone-ok { background: var(--ok-bg); color: var(--ok); }
+.aw-tone-warn { background: var(--warn-bg); color: var(--warn); }
+.aw-tone-bad { background: var(--danger-bg); color: var(--danger); }
+.aw-tone-info { background: var(--accent-dim); color: var(--accent); }
+.aw-spark { flex: 1; min-width: 48px; height: 24px; }
+.aw-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.aw-spark-item .aw-value { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+/* The chat header strip: one compact row under the card, in that agent's chat only. When it is wider than the chat (a
+   phone), the row scrolls sideways inside its own box — never wraps out of it, never cuts an item. */
+.aw-chat_header { flex-shrink: 0; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--s-4); border-width: 0 0 1px; border-radius: 0; padding: var(--s-1) var(--s-4); min-height: 32px; max-height: 72px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
+.aw-chat_header .aw-head { flex-shrink: 0; }
+.aw-chat_header .aw-items { flex-direction: row; flex: 1 0 auto; gap: var(--s-4); }
+.aw-chat_header .aw-item { flex: 0 0 auto; white-space: nowrap; }
+.aw-chat_header .aw-value { white-space: nowrap; }
+.aw-chat_header .aw-text .aw-value { display: inline-block; max-width: 24em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
+.aw-chat_header .aw-stat .aw-value { margin-left: 0; }
+.aw-chat_header .aw-bar { flex: 0 0 auto; width: 96px; }
+/* On a phone the strip may run past the edge: a fade says there is more to scroll to (the last item scrolls clear of it). */
+@media (max-width: 899px) { .aw-chat_header { padding-right: var(--s-7); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent); } }
+.aw-details { background: var(--surface); margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); }
+.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); }
+/* 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). */
+@media (max-width: 479px) {
+  .id-card.card-s { --id-h: 96px; --id-bmin: 80px; --id-bmax: 120px; }
+  .id-card.card-m { --id-h: 128px; --id-bmin: 100px; --id-bmax: 150px; }
+  .id-card.card-l { --id-h: 168px; --id-bmin: 120px; --id-bmax: 200px; }
+  .id-card.card-c { --id-h: 64px; --id-bmin: 80px; --id-bmax: 110px; }
+  .id-card.card-c.bs-s { --id-bmin: 80px; --id-bmax: 100px; }
+  .id-card.card-c.bs-l { --id-bmin: 96px; --id-bmax: 130px; }
+  .id-row { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); }
+  .card-size { flex-basis: 100%; justify-content: flex-end; }
+  .id-card.card-c .id-tagline, .id-card.card-c .id-bio { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
+  .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); }
+.v-id .id-card { margin: 0; }
+.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); }
+.s-limit-warnings { margin: var(--s-2) 0; padding-left: var(--s-4); }
+@media (max-width: 479px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
+
+/* #1629 B2: effect library controls. No runtime layer is created by this card. */
+.s-fx-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
+.s-fx-item { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
+.s-fx-item h4 { margin: 0; }
+.s-fx-poster { display: block; max-width: min(240px, 100%); max-height: 160px; object-fit: contain; border-radius: var(--r-sm); }
+
+.s-fx-chat, .s-fx-params label:not(.check) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
+.s-fx-chat { margin: var(--s-2) 0; }
+.s-fx-params { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0; max-width: 100%; }
+.s-fx-target, .s-fx-params input:not([type=checkbox]), .s-fx-params select { min-height: 36px; min-width: 0; max-width: 100%; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
+
+/* #1629: stock paint bands. Structural ancestors remain neutral; only bounded content owns level 1.
+   The viewport effect root is a direct body sibling: behind 0 / stock content 1 (header 2) / front 20.
+   Nested menus cannot cross a content stacking context: the unmounted trust guard suspends fronts for overlays. */
+.app-root { z-index: auto; }
+.conn, .panel-head, .chat-card, .aw-chat_header, .chat-main > .scroller, .chat-main > .dock,
+.sidebar > .side-head, .sidebar > .side-nav, .sidebar > .side-section, .sidebar > .side-widget, .sidebar > .side-foot,
+.u-rail > .u-rail-head, .u-rail > .u-rail-body { position: relative; z-index: 1; }
+/* Header menus must stay above the later scroller stacking context. */
+.panel-head { z-index: 2; }
+@media (min-width: 900px) { .chat-split > .pv-divider, .chat-split > .pv-panel { position: relative; z-index: 1; } }
+/* #1629: owner choices share the existing control font floor. */
+.s-fx-owner{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--border)}
+.s-fx-owner-row{display:flex;align-items:end;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
+.s-fx-owner-row>label{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;flex:1}
+
+/* #2044: the effect frame's document declares no colour scheme (light). An iframe whose own colour scheme differs
+   from its document's gets an opaque backdrop, so under the dark theme the frame hid the whole chat: keep them equal. */
+.agend-effect-frame { color-scheme: normal !important; }
+
+/* #1629: host-created static poster IMG; geometry and visibility belong to the trusted CSSOM binding. */
+.agend-effect-poster { object-fit: cover !important; object-position: center !important; user-select: none; }
+
+/* #1629: full-app bounded stock surfaces. Panel roots stay neutral; effects never raise the whole app. */
+.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; }
+/* Keep the existing Apply bar's sticky behavior, in its own bounded stock band. */
+.p-settings > .s-pending { z-index: 1; }
+
+/* #1629: host-owned local Trial panel. Only its canvas frame lives inside the paint-contained stage. */
+.effect-trial-head, .effect-trial-controls, .effect-trial-note { position: relative; z-index: 1; background: var(--bg); padding: var(--s-3); margin: 0; }
+.effect-trial-head { display: flex; align-items: center; gap: var(--s-2); border-bottom: 1px solid var(--border); }
+.effect-trial-head > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.effect-trial-body { flex: 1; min-height: 0; display: flex; padding: var(--s-3); }
+.effect-trial-stage { position: relative; z-index: 0; flex: 1; min-width: 0; min-height: 0; contain: paint; overflow: clip; padding: 0; border: 0; outline: none; box-shadow: none; }
+
+/* #2115: diagnostics remain inside the stock protected panel header, never in an effect plane. */
+.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; }