agentgui 1.0.1031 → 1.0.1033

package/site/app/vendor/anentrypoint-design/247420.css

@@ -92,7 +92,11 @@
   --accent-fg:   var(--ink);
   --accent-ink:  var(--acid-deep);
   --accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
-  --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
+  /* Blends --accent-ink (the readable/darker ink variant), not the raw
+     --accent fill, so light-theme active states clear contrast against --bg;
+     dark/ink and auto-dark restate the prior --accent-based value explicitly
+     below so this change does not leak into them via inheritance. */
+  --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
 
   /* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
      danger, category chips). Theme-driven so white-on-color never hard-codes
@@ -329,6 +333,9 @@
   --accent-fg: var(--ink);
   --accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
   --accent-bright: var(--acid);
+  /* Preserves the prior --accent-based blend for dark; the :root light-theme
+     value above was retuned to blend --accent-ink instead. */
+  --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
   --danger:    oklch(0.68 0.19 25);
   --flame:     #FF5A1F;
   --amber:     #D9A93A;
@@ -343,6 +350,14 @@
   --code-num:     var(--sun);
 }
 
+/* Restores the pre-existing (weaker) dark-theme selection tint after the
+   light-theme-only bump in app-shell.css's base ::selection rule. */
+.ds-247420[data-theme="ink"] ::selection,
+.ds-247420[data-theme="dark"] ::selection {
+  background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
+  color: var(--fg);
+}
+
 /* NOTE: the [data-theme="auto"] block below mirrors the
    [data-theme="ink"/"dark"] block above token-for-token. 'auto + OS-dark' and
    'explicit dark' are the same visual context and resolve every token —
@@ -370,6 +385,7 @@
     --accent-fg: var(--ink);
     --accent-ink: var(--acid);
     --accent-bright: var(--acid);
+    --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
     --danger:    oklch(0.68 0.19 25);
     --flame:     #FF5A1F;
     --amber:     #D9A93A;
@@ -381,6 +397,10 @@
     --code-str-alt: var(--mascot);
     --code-num:     var(--sun);
   }
+  .ds-247420[data-theme="auto"] ::selection {
+    background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
+    color: var(--fg);
+  }
 }
 
 /* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
@@ -440,6 +460,7 @@
   --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
   --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
   --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
+  --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
   /* A paper island under a dark ancestor must not inherit the dark signal pair. */
   --flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
 }
@@ -546,8 +567,8 @@
 }
 .ds-247420 .skip-link:focus {
   top: 10px;
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 .ds-247420 body {
   background: var(--bg);
@@ -558,7 +579,12 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-.ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); }
+/* Light (paper, the default theme) needs a stronger accent share than dark to
+   clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
+   read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
+   in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
+   scoping a value per theme rather than sharing one across both). */
+.ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
 
 /* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
 .ds-247420 .app, .ds-247420 .ds-stage {
@@ -763,8 +789,8 @@
 }
 .ds-247420 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .app-topbar nav a:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 /* Active tab reads as a subtle tinted pill with an accent underline rather than
    an oversized filled oval that sits taller than its inactive siblings and reads
@@ -799,8 +825,8 @@
   width: 100%;
 }
 .ds-247420 .app-search:focus-within {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 .ds-247420 .app-crumb {
@@ -841,8 +867,8 @@
 }
 .ds-247420 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .app-side a:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 .ds-247420 .app-side a.active {
   color: var(--accent-fg);
@@ -943,6 +969,19 @@
   .ds-247420 .app-status .item:last-of-type:not(:only-of-type) { display: none; }
 }
 
+/* The "dateline" — ASCII bar used at the top of every preview/brand page.
+   3-4 flex slots; a .spread filler pushes the trailing slot to the far
+   edge instead of every span running together with no gap. */
+.ds-247420 .dateline {
+  display: flex; align-items: center; gap: var(--space-3);
+  flex-wrap: nowrap; overflow: hidden;
+  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.2;
+  letter-spacing: 0.02em;
+  color: var(--fg-3);
+}
+.ds-247420 .dateline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.ds-247420 .dateline .spread { flex: 1 1 auto; min-width: var(--space-3); }
+
 /* ============================================================
    Primitives
    ============================================================ */
@@ -1002,7 +1041,7 @@
 .ds-247420 .ds-icon-btn-ghost { background: transparent; }
 .ds-247420 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-247420 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
-.ds-247420 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--bg); }
+.ds-247420 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
 /* warn = destructive ACTION tone; flame stays exclusively error STATUS. */
 .ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
 .ds-247420 .ds-icon-btn-danger:hover { filter: brightness(0.92); }
@@ -1021,19 +1060,27 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-247420 .ds-badge.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
+/* Canonical tone names are tone-success / tone-error / tone-neutral. Every
+   other tone name grouped into the same rule below (tone-green/tone-live,
+   tone-flame, tone-wip, tone-sun/tone-yellow, tone-ok/tone-miss) is a
+   true-synonym legacy alias, kept working but sharing one declaration so the
+   tone-family colors can't drift apart across names. */
+.ds-247420 .ds-badge.tone-green, .ds-247420 .ds-badge.tone-live, .ds-247420 .ds-badge.tone-success {
+  background: var(--green-tint); color: var(--green-deep);
+}
+.ds-247420 .ds-badge.tone-flame, .ds-247420 .ds-badge.tone-error {
+  background: var(--flame); color: var(--on-color);
+}
+.ds-247420 .ds-badge.tone-wip, .ds-247420 .ds-badge.tone-neutral {
+  background: var(--bg-3); color: var(--fg-2);
+}
 .ds-247420 .ds-badge.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
 .ds-247420 .ds-badge.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
-.ds-247420 .ds-badge.tone-sun     { background: var(--sun);         color: var(--ink); }
-.ds-247420 .ds-badge.tone-flame   { background: var(--flame);       color: var(--on-color); }
-.ds-247420 .ds-badge.tone-live    { background: var(--green-tint);  color: var(--green-deep); }
-.ds-247420 .ds-badge.tone-wip     { background: var(--bg-3);        color: var(--fg-2); }
-.ds-247420 .ds-badge.tone-error   { background: var(--flame);       color: var(--on-color); }
-.ds-247420 .ds-badge.tone-success { background: var(--green-tint);  color: var(--green-deep); }
-.ds-247420 .ds-badge.tone-neutral { background: var(--bg-3);        color: var(--fg-2); }
+.ds-247420 .ds-badge.tone-sun, .ds-247420 .ds-badge.tone-yellow {
+  background: var(--sun); color: var(--ink);
+}
 .ds-247420 .ds-badge.tone-blue    { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-247420 .ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
-.ds-247420 .ds-badge.tone-yellow  { background: var(--sun);         color: var(--ink); }
 
 .ds-247420 .chip {
   display: inline-flex; align-items: center; gap: 6px;
@@ -1044,19 +1091,22 @@
   letter-spacing: var(--tr-caps); text-transform: uppercase;
   border-radius: var(--r-pill);
 }
-.ds-247420 .chip.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
+/* Same canonical/legacy-alias grouping as .ds-badge above. */
+.ds-247420 .chip.tone-green, .ds-247420 .chip.tone-live, .ds-247420 .chip.tone-success, .ds-247420 .chip.tone-ok {
+  background: var(--green-tint); color: var(--green-deep);
+}
+.ds-247420 .chip.tone-flame, .ds-247420 .chip.tone-error, .ds-247420 .chip.tone-miss {
+  background: var(--flame); color: var(--on-color);
+}
+.ds-247420 .chip.tone-wip, .ds-247420 .chip.tone-neutral {
+  background: var(--bg-3); color: var(--fg-2);
+}
 .ds-247420 .chip.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
 .ds-247420 .chip.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
-.ds-247420 .chip.tone-sun     { background: var(--sun);         color: var(--ink); }
-.ds-247420 .chip.tone-flame   { background: var(--flame);       color: var(--on-color); }
-.ds-247420 .chip.tone-live    { background: var(--green-tint);  color: var(--green-deep); }
-.ds-247420 .chip.tone-wip     { background: var(--bg-3);        color: var(--fg-2); }
-.ds-247420 .chip.tone-error    { background: var(--flame);       color: var(--on-color); }
-.ds-247420 .chip.tone-success  { background: var(--green-tint);  color: var(--green-deep); }
+.ds-247420 .chip.tone-sun, .ds-247420 .chip.tone-yellow {
+  background: var(--sun); color: var(--ink);
+}
 .ds-247420 .chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
-.ds-247420 .chip.tone-ok       { background: var(--green-tint);  color: var(--green-deep); }
-.ds-247420 .chip.tone-miss     { background: var(--flame);       color: var(--on-color); }
-.ds-247420 .chip.tone-neutral  { background: var(--bg-3);        color: var(--fg-2); }
 .ds-247420 .chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-247420 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
 .ds-247420 .chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
@@ -1088,13 +1138,22 @@
   background: var(--panel-1, var(--bg-2));
   border: var(--bw-hair) solid var(--rule);
   border-radius: var(--r-2);
-  margin: 0 0 var(--space-5);
+  margin: 0 0 var(--space-4);
   padding: var(--space-3);
   position: relative;
   /* Crisp, restrained elevation — a hairline border does the edge definition;
      the shadow only adds a whisper of lift, not a soft glow-card float. */
   box-shadow: var(--shadow-1);
-  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-snap) var(--ease);
+  transition: box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease),
+    transform var(--dur-base) var(--ease-spring);
+}
+/* Vercel-style card lift: any panel sitting inside a density grid (trio/grid)
+   gets a restrained hover escalation — the standalone/full-width panel stays
+   flat so page chrome doesn't jitter on scroll-adjacent hover. */
+.ds-247420 .ds-panel-trio > .panel:hover, .ds-247420 .ds-panel-grid > .panel:hover {
+  box-shadow: var(--shadow-2);
+  border-color: var(--rule-strong);
+  transform: translateY(-2px);
 }
 /* Editorial accent spine — an opt-in printed-ink rule down the left edge that
    reads as a magazine pull-quote bar, not a glow card. */
@@ -1146,9 +1205,16 @@
   /* Only background + the leading rail animate; padding/size never change on
      interaction, so they are deliberately absent (a padding transition here was
      dead and misleading). */
-  transition: background var(--dur-snap) var(--ease);
+  transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring);
 }
 .ds-247420 .row + .row { margin-top: 2px; }
+/* Interactive rows (anchor/button wrappers) get a hairline lift on hover,
+   matching the btn/panel elevation language — non-interactive rows (plain
+   divs used as static list items) are unaffected since the selector needs a
+   real interactive role. */
+.ds-247420 a.row:hover, .ds-247420 button.row:hover, .ds-247420 .row[role="button"]:hover {
+  box-shadow: var(--shadow-1);
+}
 /* `detail` drops to its own full-width line. The row is a grid, so span every
    track (grid-column 1/-1); flex-basis:100% covers the flex-row fallback. */
 .ds-247420 .ds-row-detail {
@@ -1220,6 +1286,9 @@
 .ds-247420[data-typescale="app"] .row { padding: 12px 16px; }
 .ds-247420[data-typescale="app"] .row .title { font-size: var(--fs-sm); font-weight: 500; }
 .ds-247420 .row .sub   { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
+/* Context-pane cwd fact reads as a path (like .ds-dash-cwd/.ds-session-agent/
+   .ds-dash-model) -- scoped to that one row so no other Row .sub is affected. */
+.ds-247420 .ds-context-cwd-row .row .sub { font-family: var(--ff-mono); }
 .ds-247420 .row .meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
 /* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */
 .ds-247420 .ds-works-meta { display: inline-flex; align-items: center; gap: .4em; }
@@ -1239,6 +1308,17 @@
   grid-template-areas: 'title title' 'body aside';
   align-items: start;
   max-width: var(--measure-wide);
+  position: relative; isolation: isolate;
+}
+/* Restrained depth wash, not a marketing glow-gradient: a single very-low-
+   opacity accent-ink radial anchored top-right, sitting under the grain/
+   halftone texture (z-index -1, same isolation trick as .ds-hero-aside::after)
+   so it reads as ambient light rather than a colored blob. Token-only. */
+.ds-247420 .ds-hero::before {
+  content: ''; position: absolute; z-index: -1;
+  top: -10%; right: -10%; width: 60%; height: 140%;
+  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-ink) 10%, transparent), transparent 70%);
+  pointer-events: none;
 }
 .ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
 .ds-247420 .ds-hero-body  { grid-area: body; }
@@ -1477,7 +1557,7 @@
 .ds-247420 table tr.clickable { cursor: pointer; }
 .ds-247420 table tr.clickable:hover td { background: var(--bg-2); }
 .ds-247420 table tr.clickable:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: -2px;
 }
 .ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
@@ -1655,6 +1735,10 @@
     flex: 1 1 100%; margin-left: 0; order: 3; min-width: 0; max-width: 100%;
     display: flex; gap: 2px; flex-wrap: nowrap;
     overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
+    /* Fade the trailing edge so a clipped last item (e.g. "source ->" cut to
+       "sour") reads as scrollable content, not a broken/truncated label. */
+    mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%);
+    -webkit-mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%);
   }
   .ds-247420 .app-topbar nav::-webkit-scrollbar { display: none; }
   .ds-247420 .app-topbar nav a {
@@ -1708,8 +1792,12 @@
     font-size: var(--fs-xs);
   }
   .ds-247420 .ds-file-open { gap: 10px; }
-  /* On mobile, fold meta under the title and keep actions inline. */
-  .ds-247420 .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
+  /* At mobile row widths, a fixed-size meta column (date/size) plus the
+     always-visible action buttons leave the flexible title only a few px —
+     not enough for even one legible character before the two collide. Drop
+     the metadata column here; the title + actions still fully identify and
+     operate on the row, and meta stays available in the file viewer. */
+  .ds-247420 .ds-file-row .ds-file-meta { display: none; }
   .ds-247420 .ds-file-row .ds-file-actions { opacity: 1; }
   /* H4: floor finger-sized controls so file actions/sort/filter/breadcrumb are
      reachable by touch (cohesion sweep). */
@@ -1910,7 +1998,7 @@
   flex-direction: column;
   gap: 4px;
 }
-.ds-247420 .ds-file-grid:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-2); }
+.ds-247420 .ds-file-grid:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-2); }
 
 /* Listing wrapper holds the optional filter + sort header above the grid. */
 .ds-247420 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
@@ -1932,7 +2020,7 @@
 }
 .ds-247420 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
 .ds-247420 .ds-file-sort-btn.active { color: var(--accent-ink); }
-.ds-247420 .ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-file-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Skeleton shimmer rows shown while a directory loads. */
 .ds-247420 .ds-file-row-skeleton { cursor: default; pointer-events: none; }
@@ -1980,7 +2068,7 @@
   color: inherit; font: inherit; text-align: left; cursor: pointer;
 }
 .ds-247420 .ds-file-open[disabled] { cursor: default; }
-.ds-247420 .ds-file-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
+.ds-247420 .ds-file-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
 .ds-247420 .ds-file-row:hover {
   background: var(--bg-2);
   border-color: var(--rule);
@@ -2011,6 +2099,12 @@
 .ds-247420 .ds-file-row .ds-file-meta {
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   color: var(--fg-3); white-space: nowrap;
+  /* Never shrink below content: a flex sibling with white-space:nowrap and
+     the default flex-shrink:1 silently overflows its own box (no ellipsis)
+     when the row runs out of width, painting the date/size over the title
+     and action icons at mobile widths. Fixed-size the meta column instead
+     and let .title (flex:1, min-width:0, ellipsis) absorb the squeeze. */
+  flex-shrink: 0;
 }
 
 /* File icon — glyph chip, tinted per type. */
@@ -2078,7 +2172,7 @@
 }
 .ds-247420 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
 .ds-247420 .ds-file-check.is-marked { color: var(--accent-ink); }
-.ds-247420 .ds-file-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-file-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
 .ds-247420 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
 .ds-247420 .ds-file-selectall {
@@ -2088,7 +2182,7 @@
   padding: var(--space-1); border-radius: var(--r-1);
 }
 .ds-247420 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ds-file-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-file-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
 .ds-247420 .ds-file-controls .spread { flex: 1 1 auto; }
 .ds-247420 .ds-file-controls .ds-file-sort { padding: 0; }
@@ -2126,7 +2220,7 @@
 }
 .ds-247420 .ds-density-btn:hover { color: var(--fg); }
 .ds-247420 .ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
-.ds-247420 .ds-density-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-density-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Compact density — tighter rows for long listings. */
 .ds-247420 .ds-file-grid[data-density="compact"] { gap: 2px; }
@@ -2164,7 +2258,7 @@
   background: none; border: none; cursor: pointer; color: var(--fg);
 }
 .ds-247420 .ds-file-cell-open[disabled] { cursor: default; }
-.ds-247420 .ds-file-cell-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-247420 .ds-file-cell-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; border-radius: var(--r-2); }
 .ds-247420 .ds-file-cell-media {
   display: flex; align-items: center; justify-content: center;
   width: 100%; aspect-ratio: 4 / 3;
@@ -2369,6 +2463,19 @@
   background: var(--accent); border-radius: var(--r-pill);
   transition: width var(--dur-base) var(--ease);
 }
+/* Indeterminate: percent is unknown mid-transfer (fetch gives no chunk-level
+   progress) — a sliding marquee bar reads as "working", not stuck at 0%. */
+.ds-247420 .ds-upload-bar.indeterminate .ds-upload-fill {
+  width: 40%; transition: none;
+  animation: ds-upload-marquee 1.1s ease-in-out infinite;
+}
+@keyframes ds-upload-marquee {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-upload-bar.indeterminate .ds-upload-fill { animation: none; width: 100%; opacity: 0.5; }
+}
 .ds-247420 .ds-upload-pct {
   font-family: var(--ff-mono); font-size: var(--fs-micro);
   color: var(--fg-3); text-align: right;
@@ -2391,7 +2498,7 @@
   color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-247420 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ds-upload-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-upload-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 @media (hover: none), (pointer: coarse) {
   .ds-247420 .ds-upload-act { min-height: 44px; min-width: 44px; }
   /* 44px floor for file controls on ANY touch device, not only narrow ones
@@ -2462,7 +2569,7 @@
   border-radius: var(--r-2); color: var(--fg);
   font-family: inherit; font-size: var(--fs-sm);
 }
-.ds-247420 .ds-modal-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 /* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
 @media (hover: none), (pointer: coarse) {
   .ds-247420 .ds-modal-input { font-size: 16px; min-height: 44px; }
@@ -2649,7 +2756,7 @@
   transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
 .ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
-.ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
   box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
@@ -3095,12 +3202,12 @@
   transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
 }
 .ds-247420 .composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
-.ds-247420 .chat-composer .send:hover { filter: brightness(1.08); }
+.ds-247420 .chat-composer .send:hover { filter: brightness(0.92); }
 .ds-247420 .chat-composer .send:active { filter: brightness(0.94); }
 .ds-247420 .chat-composer .send:focus-visible,
 .ds-247420 .composer-btn:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 .ds-247420 .chat-composer .send:disabled {
   background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
@@ -3453,6 +3560,86 @@
   color: var(--fg-3);
 }
 
+/* Long-form reading voice — quiet sans, generous line-height, capped to a
+   readable measure so a wide viewport never stretches body copy edge to
+   edge. Links use --accent-ink (never the bare fill, which is unreadable
+   as text). */
+.ds-247420 .prose {
+  max-width: var(--measure);
+  font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.6;
+  color: var(--fg);
+}
+.ds-247420 .prose p { margin: 0 0 var(--space-4) 0; }
+.ds-247420 .prose p:last-child { margin-bottom: 0; }
+.ds-247420 .prose a { color: var(--accent-ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
+.ds-247420 .prose a:hover { text-decoration-color: currentColor; }
+
+/* Rubber-stamp motif — a bordered, uppercase, letter-spaced badge with a
+   slight built-in rotation (variants may override via inline transform for
+   a stronger tilt). Max 1 per page per the component's own caption. */
+.ds-247420 .stamp {
+  display: inline-block;
+  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  padding: var(--space-1-5, var(--space-2)) var(--space-3);
+  border: 2px solid var(--fg);
+  border-radius: var(--r-hair);
+  color: var(--fg);
+  transform: rotate(-2deg);
+  white-space: nowrap;
+}
+.ds-247420 .stamp.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
+.ds-247420 .stamp.acid { background: var(--accent); border-color: var(--accent-ink); color: var(--accent-ink); }
+.ds-247420 .stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
+.ds-247420 .stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
+
+/* Same rubber-stamp face, but a real interactive <button> — resets UA button
+   chrome so it isn't blue link text in a browser default box. */
+.ds-247420 .btn-stamp {
+  display: inline-block; cursor: pointer;
+  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  padding: var(--space-1-5, var(--space-2)) var(--space-3);
+  border: 2px solid var(--fg);
+  border-radius: var(--r-hair);
+  background: transparent; color: var(--fg);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .btn-stamp:hover { background: var(--panel-hover); }
+.ds-247420 .btn-stamp.acid { border-color: var(--accent-ink); color: var(--accent-ink); }
+.ds-247420 .btn-stamp.acid:hover { background: var(--accent-tint); }
+.ds-247420 .btn-stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
+.ds-247420 .btn-stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
+
+/* Structural hairlines — "no boxes, no cards, structure comes from rules."
+   Three weights: .rule (default separator), .rule-double (major section
+   break), .rule-dotted (optional/skippable). Applied to a bare <hr>, which
+   otherwise falls back to the browser's default inset groove line. */
+.ds-247420 hr.rule, .ds-247420 hr.rule-double, .ds-247420 hr.rule-dotted {
+  width: 100%; height: 0; border: 0;
+}
+.ds-247420 hr.rule { border-top: 1px solid var(--rule); }
+.ds-247420 hr.rule-double { border-top: 3px double var(--rule-strong); }
+.ds-247420 hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
+
+/* Hairline-only text input — no box, no fill. A single bottom rule that
+   thickens to 2px on focus, matching the row/rule zero-border aesthetic
+   instead of a browser-default boxed field. */
+.ds-247420 .input {
+  display: block; width: 100%; box-sizing: border-box;
+  border: 0; border-bottom: 1px solid var(--rule-strong);
+  border-radius: var(--r-0);
+  background: transparent;
+  padding: var(--space-2) var(--space-1);
+  font: inherit; color: var(--fg);
+}
+.ds-247420 .input::placeholder { color: var(--fg-3); }
+.ds-247420 .input:focus-visible {
+  outline: none;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--accent-ink);
+}
+
 /* -- Field controls: themed base for TextField / Select / SearchInput --
    Root fix: previously only `transition` was set, so themed apps got
    browser-default white boxes in dark mode and labels collided with inputs
@@ -3553,8 +3740,8 @@
 
 /* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
 .ds-247420 :focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Enhanced focus-visible for all interactive elements */
@@ -3563,8 +3750,8 @@
 .ds-247420[role="tab"]:focus-visible,
 .ds-247420 .row:focus-visible,
 .ds-247420 .row[tabindex]:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Skip to main content link */
@@ -3953,7 +4140,7 @@
   border-radius: var(--r-1, 6px);
   cursor: pointer;
 }
-.ds-247420 .app-side-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .app-side-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 @container (max-width: 900px) {
   .ds-247420 .app-side-toggle { display: inline-flex; }
   .ds-247420 .app-topbar .brand { margin-left: 44px; }
@@ -4047,7 +4234,7 @@
 .ds-247420 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: 5; cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
 .ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
 .ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); }
-.ds-247420 .ws-resizer:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ds-247420 .ws-resizer.ws-resizer-rail { grid-column: 1; }
 .ds-247420 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
 .ds-247420 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -4099,7 +4286,7 @@
   border-radius: var(--r-1); cursor: pointer;
 }
 .ds-247420 .ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ws-rail-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
 .ds-247420 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
 .ds-247420 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
@@ -4111,8 +4298,8 @@
   font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
   min-height: 40px; white-space: nowrap; overflow: hidden;
 }
-.ds-247420 .ws-rail-action:hover { filter: brightness(1.08); }
-.ds-247420 .ws-rail-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ws-rail-action:hover { filter: brightness(0.92); }
+.ds-247420 .ws-rail-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ws-rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .ds-247420 .ws-rail-item {
   display: flex; align-items: center; gap: var(--space-2);
@@ -4122,7 +4309,7 @@
   font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
 }
 .ds-247420 .ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ws-rail-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ds-247420 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
 .ds-247420 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
@@ -4195,7 +4382,7 @@
 /* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
 .ds-247420 .ws-desktop-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
 .ds-247420 .ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ws-desktop-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 @media (max-width: 900px) { .ds-247420 .ws-desktop-toggle { display: none; } }
 /* The pane collapse toggle is meaningless once the pane TRACK is dropped (the
    pane becomes a mobile overlay drawer at <=1480px, reached via its own
@@ -4319,7 +4506,7 @@
   .ds-247420 .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
 }
 .ds-247420 .ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ws-drawer-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 @media (prefers-reduced-motion: reduce) {
   .ds-247420 .ws-shell, .ds-247420 .ws-rail, .ds-247420 .ws-pane, .ds-247420 .ws-sessions, .ds-247420 .ws-scrim { transition: none; }
@@ -4344,7 +4531,7 @@
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .row-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .row-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .row-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* FilterPills - a group of pill toggle buttons (aria-pressed). */
 .ds-247420 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@@ -4357,7 +4544,7 @@
 }
 .ds-247420 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
 .ds-247420 .ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-247420 .ds-filter-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-filter-pill:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Touch floor for the new small controls. */
 @media (pointer: coarse) {
@@ -4367,7 +4554,7 @@
 /* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
 .ds-247420 .ds-file-act:disabled { opacity: .45; cursor: default; }
 .ds-247420 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
-.ds-247420 .ds-file-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* ============================================================
    Print — linearize WorkspaceShell so main content prints in full.
@@ -4691,7 +4878,7 @@
    .ds-feature above), so the hover affordance is a lift, matching the same
    translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
 .ds-247420 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
-.ds-247420 .ds-gallery-tile:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
 .ds-247420 .ds-lightbox {
   position: fixed; inset: 0; background: var(--scrim);
@@ -4771,9 +4958,10 @@
   padding: var(--space-2, 8px) var(--space-3, 12px);
   border-radius: var(--r-pill);
   color: var(--fg-2);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease),
+    transform var(--dur-base) var(--ease-spring);
 }
-.ds-247420 .tabs[role="tablist"] a:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .tabs[role="tablist"] a:hover { background: var(--bg-2); color: var(--fg); transform: translateY(-1px); }
 .ds-247420 .tabs[role="tablist"] a.active {
   color: var(--accent-ink);
   background: color-mix(in oklab, var(--accent) 16%, transparent);
@@ -5049,7 +5237,7 @@
   height: 48px;
   border-radius: var(--r-3);
   background: var(--bg-2);
-  color: var(--green-2);
+  color: var(--green);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6654,6 +6842,7 @@
   flex-wrap: wrap;
 }
 .ds-247420 .agentchat-cwd-text {
+  font-family: var(--ff-mono);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -6979,7 +7168,7 @@
 .ds-247420 .ds-session-title { font-size: var(--fs-sm); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-247420 .ds-session-sub { font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-247420 .ds-session-meta { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
-.ds-247420 .ds-session-agent { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
+.ds-247420 .ds-session-agent { font-size: var(--fs-tiny); color: var(--fg-3); }
 /* New-activity cue is a hollow accent RING so it stays shape-distinct from the
    running live disc (a solid pulsing accent dot) for colour-blind / reduced-motion users. */
 .ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--accent); display: inline-block; }
@@ -7011,7 +7200,7 @@
 .ds-247420 .ds-dash-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-2); }
 .ds-247420 .ds-dash-card.is-error { border-color: var(--flame); }
 .ds-247420 .ds-dash-card-head { display: flex; align-items: center; gap: var(--space-2); }
-.ds-247420 .ds-dash-status { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
+.ds-247420 .ds-dash-status { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); }
 /* running tone unified on --accent (the later is-running rule + the live disc all
    use --accent); the dead var(--green) duplicate that lived here was removed. */
 .ds-247420 .ds-dash-status.is-error { color: var(--flame); }
@@ -7339,7 +7528,7 @@
 /* External (observed, not owned) session card: no stop control exists. */
 .ds-247420 .ds-dash-external {
   padding: 1px 6px; border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-pill);
-  font-size: var(--fs-micro); color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em;
+  font-size: var(--fs-micro); color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
 }
 .ds-247420 .ds-dash-card.is-external { border-style: dashed; }
 
@@ -7375,8 +7564,8 @@
    paragraph and the .them tint hugged text flush. Restore reading rhythm + give
    the tinted assistant row inner breathing room so it reads as a card. */
 .ds-247420 .chat-msg-flat .chat-role { margin-bottom: var(--space-2); }
-.ds-247420 .chat-msg-flat .chat-md { line-height: 1.65; }
-.ds-247420 .chat-msg-flat .chat-md p { margin: 8px 0; }
+.ds-247420 .chat-msg-flat .chat-md { line-height: var(--lh-long); }
+.ds-247420 .chat-msg-flat .chat-md p { margin: var(--space-2) 0; }
 .ds-247420 .chat-msg-flat.them { padding-block: calc(var(--space-3) * var(--density, 1) + 2px); }
 /* Inline backtick code (renderInline tags <code class=chat-tick>) - was a dead
    class relying on the generic .chat-bubble code rule, so notices / non-bubble
@@ -7431,7 +7620,7 @@
 .ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .ds-247420 .chat-tool-status {
   margin-left: auto; flex: 0 0 auto;
-  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
+  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-caps);
   color: var(--fg-3);
   padding: 2px var(--space-2); border-radius: var(--r-pill);
   background: color-mix(in oklab, var(--fg) 6%, transparent);
@@ -7463,7 +7652,7 @@
 .ds-247420 .chat-code-lang {
   position: absolute; top: 0; left: 0; z-index: 2;
   padding: 2px var(--space-2); border-bottom-right-radius: var(--r-1);
-  font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
+  font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-caps);
   color: var(--fg-3); background: color-mix(in oklab, var(--fg) 6%, transparent);
   pointer-events: none;
 }
@@ -7531,6 +7720,18 @@
 }
 @keyframes ds-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
+/* Agent-picker list loading skeleton (shares the .ds-skel shimmer base above). */
+.ds-247420 .ds-agent-list-skeleton { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .ds-agent-row-skeleton { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
+.ds-247420 .ds-agent-row-skeleton .ds-skel { background: var(--bg-3); border-radius: var(--r-1); }
+.ds-247420 .ds-agent-row-skeleton .ds-skel-icon { height: 18px; width: 18px; flex: none; border-radius: var(--r-round, 50%); }
+.ds-247420 .ds-agent-row-skeleton .ds-skel-title { height: 12px; width: 40%; }
+.ds-247420 .ds-agent-row-skeleton .ds-skel-meta { height: 9px; width: 25%; margin-left: auto; }
+.ds-247420 .ds-agent-list-skeleton-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-agent-row-skeleton .ds-skel { animation: ds-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%; }
+}
+
 /* File code preview: paint Prism tokens (the bundle scoped them to the chat
    block only) + an optional non-selectable line-number gutter. */
 .ds-247420 .ds-preview-code code { color: var(--fg); }
@@ -8256,11 +8457,11 @@
 .ds-247420 .ds-ep-dialog-btn.kind-primary {
     background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
 }
-.ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(1.08); }
+.ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(0.92); }
 .ds-247420 .ds-ep-dialog-btn.kind-danger {
     background: var(--danger); color: var(--on-accent); border-color: var(--danger);
 }
-.ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(1.1); }
+.ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(0.92); }
 
 /* ---------------------------------------------------------------
    Toast
@@ -9261,7 +9462,8 @@
   border: var(--bw-hair, 1px) solid color-mix(in srgb, var(--fg) 12%, transparent);
 }
 .ds-247420 .health-summary.health-ok .health-chip:first-child {
-  color: var(--accent);
+  color: var(--accent-ink);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
   border-color: color-mix(in srgb, var(--accent) 40%, transparent);
 }
 
@@ -9284,13 +9486,14 @@
 .ds-247420 .cwd-bar-btn:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
 .ds-247420 .cwd-bar-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
-/* History no-session empty state: fill the void with a centered prompt. */
+/* History no-session empty state: natural height, no leftover void below. */
 .ds-247420 .history-empty {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: .4em; text-align: center; min-height: 50vh; color: var(--fg-3);
+  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
+  gap: .4em; text-align: center; padding: var(--space-6, 40px) 0 var(--space-4, 16px); color: var(--fg-3);
 }
 .ds-247420 .history-empty-title { margin: 0; font-size: var(--fs-lg); color: var(--fg-2); }
 .ds-247420 .history-empty-sub { margin: 0; max-width: 42ch; }
+.ds-247420 .history-empty-hints { margin: var(--space-5, 24px) auto 0; max-width: 46ch; text-align: left; }
 
 /* Settings: two-column on wide screens (backend + agents). Grid gap is the
    single source of rhythm between stacked Panels here - .panel's own