anentrypoint-design 0.0.240 → 0.0.242

package/chat.css

@@ -144,13 +144,13 @@
   position: absolute; right: 16px; bottom: 12px; z-index: 3;
   display: none; align-items: center; gap: .35em;
   padding: .4em .8em; font: inherit; font-size: var(--fs-tiny); cursor: pointer;
-  border-radius: 999px; border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-pill); border: var(--bw-hair) solid var(--rule);
   background: var(--bg-2); color: var(--fg-2, var(--fg));
   box-shadow: 0 2px 8px color-mix(in srgb, var(--fg) 14%, transparent);
 }
 .agentchat-jump.show { display: inline-flex; }
 .agentchat-jump:hover { background: var(--bg-3); }
-.agentchat-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.agentchat-jump:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 
 /* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
 .chat-stream-caret {
@@ -172,7 +172,7 @@
 }
 .chat-msg-action-label { font-size: var(--fs-tiny); }
 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
-.chat-msg-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.chat-msg-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
 
 /* Empty state: a fresh thread is an invitation, not a void. */
 .agentchat-empty {
@@ -200,7 +200,7 @@
   font: inherit;
   font-size: var(--fs-tiny);
   padding: .4em .8em;
-  border-radius: 999px;
+  border-radius: var(--r-pill);
   border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
   background: color-mix(in srgb, var(--fg) 5%, transparent);
   color: var(--fg-2, var(--fg));
@@ -239,7 +239,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
-.agentchat-install-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.agentchat-install-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .agentchat-install-actions { display: flex; justify-content: flex-start; }
 
 /* Host-supplied transcript export actions riding the controls row. */
@@ -250,7 +250,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
-.agentchat-export-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.agentchat-export-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* "working" tail: a long silent tool call shouldn't read as frozen. */
 .agentchat-working {
@@ -381,7 +381,7 @@
 /* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
    radius/focus-ring); only the rail layout + touch floor live here. */
 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
-.ds-session-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-session-new:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 /* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
 @media (pointer: coarse) {
   .ds-session-new { width: 44px; min-height: 44px; }
@@ -400,10 +400,10 @@
   cursor: pointer; text-align: left; color: var(--fg);
 }
 .ds-session-row:hover { background: var(--bg-2); }
-.ds-session-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-session-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-session-row.rail-green::before, .ds-session-row.rail-purple::before, .ds-session-row.rail-flame::before {
-  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
+  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
 }
 /* Rail tones MUST match .row.rail-* in app-shell.css so the same semantic state
    reads as one colour across the conversation list and content rows. */
@@ -494,7 +494,7 @@
 }
 .chat-code-block:hover .chat-code-copy, .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
-.chat-code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.chat-code-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
 /* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
 .chat-code-head .spread { flex: 1; }
 .chat-code-copy-head { position: static; opacity: 1; }
@@ -583,7 +583,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* --- C3: per-card select checkbox. --- */
 .ds-dash-select {
@@ -593,7 +593,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   font-family: var(--ff-mono); font-size: var(--fs-sm);
 }
 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
-.ds-dash-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-dash-select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
@@ -615,7 +615,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 
 /* --- E1: inline file preview pane (split view, non-modal). --- */
 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
-.ds-preview-pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-preview-pane:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
@@ -632,7 +632,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.ds-file-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-file-more-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 /* --- D3: locked/no-access file row. --- */
 .ds-file-row.is-locked { opacity: .6; }
 
@@ -643,8 +643,9 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   background: none; color: var(--fg-3); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
+.ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
-.ds-roots-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-roots-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
    action rows are made permanently visible and small controls floor to 44px so
@@ -676,7 +677,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 @media (pointer: coarse), (max-width: 640px) {
   .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
 }
@@ -704,7 +705,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 }
 
 /* Drag-over ring: token accent, never a hex. */
-.chat-composer.dragover { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
+.chat-composer.dragover { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
 
 /* Per-bit composer context: only the bit that owns a control is a button. */
 .chat-composer-context-bit {
@@ -744,7 +745,8 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
+.agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 @media (pointer: coarse) {
   .agentchat-earlier-btn { min-height: 44px; }
 }
@@ -852,7 +854,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 }
 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
-.chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -876,7 +878,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
 .chat-tool-copy { position: static; opacity: 0; }
 .chat-tool-section:hover .chat-tool-copy, .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
-.chat-tool-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.chat-tool-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
 .chat-tool-pre.is-error { color: var(--flame); }
 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
@@ -939,10 +941,11 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 .ds-dash-breakdown .seg.is-idle::before { background: transparent; box-shadow: inset 0 0 0 1px var(--stale), inset 0 0 0 3px var(--bg); }
 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
-.ds-dash-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-dash-selectall:hover { color: var(--fg); }
+.ds-dash-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
 .ds-dash-clear:hover { color: var(--fg); }
-.ds-dash-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-1); }
+.ds-dash-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-radius: var(--r-1); }
 
 /* Conversation-rail loading skeleton (cold ccsniff walk). */
 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }

package/colors_and_type.css

@@ -5,20 +5,9 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
-
-/* Metric-matched fallback for the display face. While Bricolage Grotesque
-   loads, text falls back to Arial with size-adjust tuned to its cap-height so
-   the oversized hero does not reflow on swap. Referenced first in --ff-display
-   via the 'Bricolage Grotesque' family; this only kicks in for the fallback
-   glyphs. */
-@font-face {
-  font-family: 'Bricolage Grotesque Fallback';
-  src: local('Arial');
-  size-adjust: 99%;
-  ascent-override: 94%;
-  descent-override: 24%;
-}
+/* System-font stack only — no web-font @import/@font-face. Every --ff-*
+   token below is the same fallback chain that used to sit after the custom
+   family names; removing the custom names just exposes it directly. */
 
 :root {
   /* Tree view indentation tokens */
@@ -130,15 +119,11 @@
   --panel-accent-2: var(--accent-bright, var(--accent));
   --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
 
-  /* Type — Bricolage Grotesque carries display/headings (variable editorial
-     grotesque with real character), Hanken Grotesk carries body and UI,
-     JetBrains carries code. The narrow alias tracks the display face.
-     size-adjust on the fallback keeps the oversized hero from shifting while
-     Bricolage Grotesque loads. */
-  --ff-display:  'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Hanken Grotesk', system-ui, sans-serif;
-  --ff-narrow:   'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Hanken Grotesk', system-ui, sans-serif;
-  --ff-body:     'Hanken Grotesk', system-ui, sans-serif;
-  --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+  /* Type — system-font stack, no custom web fonts loaded. */
+  --ff-display:  system-ui, sans-serif;
+  --ff-narrow:   system-ui, sans-serif;
+  --ff-body:     system-ui, sans-serif;
+  --ff-mono:     ui-monospace, Menlo, Consolas, monospace;
 
   --fs-micro:    12px;
   --fs-tiny:     13px;
@@ -200,10 +185,14 @@
   --rule:        color-mix(in oklab, currentColor 14%, transparent);
   --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
 
+  /* Micro rungs below --r-1 — chips, badges, scrollbar thumbs, tick marks
+     genuinely want a tighter corner than 10px; without these two tokens the
+     component sheets fell back to raw px literals bypassing the scale. */
+  --r-hair:      2px;
+  --r-0:         4px;
   --r-1:         10px;
   --r-2:         14px;
   --r-3:         22px;
-  --r-4:         32px;
   --r-pill:      999px;
 
   --dur-snap:    80ms;
@@ -233,6 +222,10 @@
   --measure:     68ch;
   --measure-wide:   940px;
   --measure-narrow: 760px;
+  /* Page-stage ceiling — independent of --measure-wide (which stays the
+     narrower editorial hero/prose measure). Fluid so ultra-wide viewports
+     actually gain real estate instead of flat-lining at a fixed px cap. */
+  --stage-wide:  min(96vw, 1440px);
 
   --sidebar-width:           220px;
   --sidebar-width-collapsed: 64px;
@@ -247,8 +240,11 @@
   /* Unified focus-ring tokens (single source for the design system). Outset
      rings (the default) tokenize colour+width+offset; bordered text fields use
      the inset variant. Deliberate negative offsets on edge-flush/clipping
-     containers stay literal. */
-  --focus-color:       var(--accent);
+     containers stay literal. --focus-color uses --accent-ink (the readable
+     text/UI-boundary tone), never bare --accent (the lime FILL token, which
+     measures ~1.07:1 against --paper and is nearly invisible as an outline —
+     see AGENTS.md token-split rule). */
+  --focus-color:       var(--accent-ink);
   --focus-w:           2px;
   --focus-offset:      2px;
   --focus-ring-inset:  inset 0 0 0 var(--focus-w) var(--focus-color);
@@ -273,7 +269,7 @@
 /* Link focus-visible */
 a:focus-visible,
 [role="link"]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -281,13 +277,13 @@ a:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
 /* Interactive element focus-visible */
 [tabindex]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 

package/community.css

@@ -100,7 +100,7 @@
   width: 4px;
   height: 8px;
   background: var(--fg);
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--r-0) var(--r-0) 0;
   transition: height var(--dur-base) var(--ease);
 }
 .cm-server-icon:hover .cm-server-pill { height: 20px; }
@@ -156,7 +156,7 @@
   width: 32px;
   height: 2px;
   background: color-mix(in oklab, var(--fg) 12%, transparent);
-  border-radius: 2px;
+  border-radius: var(--r-hair);
   margin: 4px 0;
   flex-shrink: 0;
 }
@@ -217,7 +217,7 @@
 .cm-channel-list::-webkit-scrollbar-track { background: transparent; }
 .cm-channel-list::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--fg) 18%, transparent);
-  border-radius: 4px;
+  border-radius: var(--r-0);
 }
 
 /* ============================================================
@@ -297,7 +297,7 @@
   background: color-mix(in oklab, var(--fg) 8%, transparent);
 }
 .cm-cat-add:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -349,7 +349,7 @@
   bottom: 4px;
   width: 3px;
   background: var(--accent);
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 var(--r-hair) var(--r-hair) 0;
 }
 
 .cm-channel-item.voice-active {
@@ -478,7 +478,7 @@
   background: color-mix(in oklab, var(--fg) 10%, transparent);
 }
 .cm-ch-action-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -817,7 +817,7 @@
 .cm-member-list::-webkit-scrollbar { width: 8px; }
 .cm-member-list::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--fg) 18%, transparent);
-  border-radius: 4px;
+  border-radius: var(--r-0);
 }
 
 .cm-member-category {
@@ -1061,45 +1061,45 @@
 .cm-server-icon:focus-visible,
 .cm-server-back:focus-visible,
 .cm-server-add:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
   border-radius: var(--r-2);
 }
 
 .cm-channel-item:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
   border-radius: var(--r-1);
 }
 
 .cm-server-header:focus-visible,
 .cm-category-header:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
 }
 
 .cm-member-item:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
   border-radius: var(--r-1);
 }
 
 .cm-vs-btn:focus-visible,
 .cm-user-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
   border-radius: var(--r-1);
 }
 
 /* ThreadPanel / Forum / Page interactive elements */
 .cm-tp-item:focus-visible,
-.cm-forum-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-1); }
+.cm-forum-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-1); }
 .cm-tp-new:focus-visible,
 .cm-tp-close:focus-visible,
 .cm-forum-new:focus-visible,
 .cm-forum-sort:focus-visible,
-.cm-page-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
-.cm-forum-search:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
+.cm-page-edit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
+.cm-forum-search:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink); }
 
 /* ---------- mobile header ---------- */
 .cm-mobile-header {
@@ -1127,7 +1127,7 @@
   border-radius: var(--r-1);
 }
 .cm-mh-btn:hover { background: var(--panel-3); }
-.cm-mh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cm-mh-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .cm-mh-title {
   flex: 1 1 auto;
   min-width: 0;
@@ -1172,7 +1172,7 @@
   border-radius: var(--r-1);
 }
 .cm-rb-cancel:hover { background: var(--panel-3); color: var(--fg); }
-.cm-rb-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.cm-rb-cancel:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* ---------- banner ---------- */
 .cm-banner {
@@ -1185,6 +1185,7 @@
   font-weight: 500;
 }
 .cm-banner.clickable { cursor: pointer; }
+.cm-banner.clickable:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
 .cm-banner-msg { flex: 1 1 auto; min-width: 0; }
 .cm-banner-action {
   flex: none;
@@ -1261,6 +1262,7 @@
   touch-action: none;
   transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-snap) var(--ease);
 }
+.vx-ptt:hover { background: color-mix(in oklab, var(--fg) 8%, var(--bg-2)); }
 .vx-ptt:active { transform: scale(0.97); }
 .vx-ptt-icon { font-size: var(--fs-xl); line-height: 1; }
 .vx-ptt-label { font-size: var(--fs-tiny); letter-spacing: var(--tr-label); text-transform: uppercase; }
@@ -1370,6 +1372,7 @@
   cursor: pointer;
   transition: background var(--dur-base) var(--ease);
 }
+.vx-btn:hover { background: var(--bg-4, var(--bg-3)); }
 .vx-btn-on, .vx-btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
 
 .vx-modal-backdrop {
@@ -1400,6 +1403,7 @@
   border: 0; background: transparent; color: var(--fg-3);
   font-size: var(--fs-xl); line-height: 1; cursor: pointer; padding: 0 var(--space-1);
 }
+.vx-modal-x:hover { color: var(--fg); }
 .vx-modal-body { padding: var(--space-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
 .vx-modal-foot {
   display: flex; justify-content: flex-end; gap: var(--space-2);
@@ -1457,6 +1461,7 @@
   cursor: pointer;
   font-size: var(--fs-sm);
 }
+.vx-queue-btn:hover { background: var(--bg-4, var(--bg-2)); }
 .vx-queue-strip {
   display: flex; gap: var(--space-2);
   overflow-x: auto;
@@ -1474,6 +1479,7 @@
   font-size: var(--fs-tiny);
   cursor: pointer;
 }
+.vx-chip:hover { background: var(--bg-4, var(--bg-2)); border-color: var(--rule-strong); }
 .vx-chip-current { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--bg-3)); }
 .vx-chip-live { border-color: var(--green-2); }
 .vx-chip-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--fg-3); flex-shrink: 0; }
@@ -1550,7 +1556,46 @@
 .cm-tp-item-title { font-size: var(--fs-1, 14px); }
 .cm-tp-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
-.cm-tp-empty, .cm-forum-empty, .cm-channel-empty, .cm-member-empty { padding: var(--space-3); text-align: center; color: var(--fg-2, var(--fg)); opacity: .7; font-size: var(--fs-sm); }
+.cm-tp-empty, .cm-forum-empty, .cm-channel-empty, .cm-member-empty {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
+  padding: var(--space-4) var(--space-3); text-align: center;
+  color: var(--fg-2, var(--fg)); opacity: .7; font-size: var(--fs-sm);
+}
+.cm-tp-empty svg, .cm-forum-empty svg, .cm-channel-empty svg, .cm-member-empty svg { opacity: .6; }
+
+/* Loading skeletons — cold-load placeholders for channel/member/thread/forum
+   lists. Same .ds-skel shimmer primitive as sessions.js/files.js so every
+   list surface in the kit uses one shimmer language, never a bare spinner. */
+.cm-channel-item-skeleton, .cm-member-item-skeleton {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2); margin: 2px var(--space-1);
+}
+.cm-channel-item-skeleton .ds-skel-icon, .cm-member-item-skeleton .ds-skel-icon {
+  width: 20px; height: 20px; border-radius: var(--r-round, 50%); flex: none; background: var(--bg-3);
+}
+.cm-channel-item-skeleton .ds-skel-title, .cm-member-item-skeleton .ds-skel-title {
+  height: 12px; width: 60%; border-radius: var(--r-1); background: var(--bg-3);
+}
+.cm-list-item-skeleton {
+  display: flex; flex-direction: column; gap: 6px;
+  padding: var(--space-2) var(--space-3); border-bottom: var(--bw-hair) solid var(--rule);
+}
+.cm-list-item-skeleton .ds-skel-title { height: 12px; width: 55%; border-radius: var(--r-1); background: var(--bg-3); }
+.cm-list-item-skeleton .ds-skel-meta { height: 9px; width: 35%; border-radius: var(--r-1); background: var(--bg-3); }
+/* Self-contained shimmer keyframe: community.css ships standalone (the
+   community-app kit does not also load chat.css), so this cannot depend on
+   chat.css's ds-skel-shimmer definition even though the visual language and
+   token vocabulary match it exactly. */
+@media (prefers-reduced-motion: no-preference) {
+  .cm-channel-item-skeleton .ds-skel-icon, .cm-channel-item-skeleton .ds-skel-title,
+  .cm-member-item-skeleton .ds-skel-icon, .cm-member-item-skeleton .ds-skel-title,
+  .cm-list-item-skeleton .ds-skel-title, .cm-list-item-skeleton .ds-skel-meta {
+    animation: cm-skel-shimmer 1.3s ease-in-out infinite;
+    background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
+    background-size: 200% 100%;
+  }
+}
+@keyframes cm-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
 /* ForumView — cm-forum / cm-forum-* */
 .cm-forum { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-1, var(--bg-2)); color: var(--fg); }