anentrypoint-design 0.0.301 → 0.0.303

package/app-shell.css

@@ -208,8 +208,7 @@ body.canvas-host { background: transparent !important; }
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
   padding: 10px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 
 /* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
@@ -222,8 +221,7 @@ body.canvas-host { background: transparent !important; }
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
   padding: 8px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 .app-chrome > .app-topbar,
 .app-chrome > .app-crumb {
@@ -610,14 +608,6 @@ body.canvas-host { background: transparent !important; }
   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-panel-trio > .panel:hover, .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. */
 .panel.panel-spine {
@@ -630,7 +620,7 @@ body.canvas-host { background: transparent !important; }
   border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
 }
 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
-.panel.panel-wide   { background: transparent; box-shadow: none; }
+.panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
 .panel-head {
   display: flex; align-items: baseline; justify-content: space-between;
   /* Shares the .panel-body 16px side padding so the caps label and the body
@@ -1091,8 +1081,9 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-barchart-fill {
   height: 100%; width: var(--bar-pct, 0%);
-  background: var(--accent); border-radius: var(--r-pill);
+  background: var(--fg-3); border-radius: var(--r-pill);
 }
+.ds-barchart-fill.is-active { background: var(--accent); }
 .ds-barchart-value {
   font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
   font-variant-numeric: tabular-nums;
@@ -1512,15 +1503,15 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-file-row:active { transform: translateY(1px); }
 .ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
 .ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
-.ds-file-row[data-file-type="image"]    { border-left-width: 3px; border-left-color: var(--mascot); }
-.ds-file-row[data-file-type="video"]    { border-left-width: 3px; border-left-color: var(--purple-2); }
-.ds-file-row[data-file-type="audio"]    { border-left-width: 3px; border-left-color: var(--sky); }
-.ds-file-row[data-file-type="code"]     { border-left-width: 3px; border-left-color: var(--green-2); }
-.ds-file-row[data-file-type="text"]     { border-left-width: 3px; border-left-color: var(--ink-3); }
-.ds-file-row[data-file-type="archive"]  { border-left-width: 3px; border-left-color: var(--flame); }
-.ds-file-row[data-file-type="document"] { border-left-width: 3px; border-left-color: var(--amber, var(--sun)); }
-.ds-file-row[data-file-type="symlink"]  { border-left-width: 3px; border-left-color: var(--purple); }
-.ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--fg-3); }
+.ds-file-row[data-file-type="image"],
+.ds-file-row[data-file-type="video"],
+.ds-file-row[data-file-type="audio"],
+.ds-file-row[data-file-type="code"],
+.ds-file-row[data-file-type="text"],
+.ds-file-row[data-file-type="archive"],
+.ds-file-row[data-file-type="document"],
+.ds-file-row[data-file-type="symlink"],
+.ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--rule); }
 
 /* Row internals — these are the classes FileRow actually renders. */
 .ds-file-row .title {
@@ -1591,13 +1582,13 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
 }
 .is-marked > .ds-check-box,
-[aria-checked="true"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
+[aria-checked="true"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
 .is-marked > .ds-check-box::after,
 [aria-checked="true"] > .ds-check-box::after {
   content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
   border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
 }
-[aria-checked="mixed"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
+[aria-checked="mixed"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
 [aria-checked="mixed"] > .ds-check-box::after {
   content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: var(--r-hair);
 }
@@ -1900,9 +1891,10 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-upload-fill {
   display: block; height: 100%; width: 0;
-  background: var(--accent); border-radius: var(--r-pill);
+  background: var(--fg-3); border-radius: var(--r-pill);
   transition: width var(--dur-base) var(--ease);
 }
+.ds-upload-fill.is-active { background: var(--accent); }
 /* Indeterminate: percent is unknown mid-transfer (fetch gives no chunk-level
    progress) — a sliding marquee bar reads as "working", not stuck at 0%. */
 .ds-upload-bar.indeterminate .ds-upload-fill {
@@ -1967,7 +1959,6 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
   background: color-mix(in oklab, var(--ink) 55%, transparent);
-  backdrop-filter: blur(3px);
 }
 @media (prefers-reduced-motion: no-preference) {
   .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
@@ -2429,7 +2420,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .chat-msg:hover .chat-image,
 .chat-image:hover {
-  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  border-color: var(--rule);
 }
 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
 .chat-image .cap,
@@ -2444,12 +2435,12 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   max-width: min(100%, 360px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
 }
-.chat-file:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
+.chat-file:hover { background: var(--bg-3); }
 .chat-file .glyph {
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
-  background: color-mix(in oklab, var(--accent) 18%, transparent);
-  color: var(--accent-ink); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
+  background: var(--bg-3);
+  color: var(--fg-2); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
 }
 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .chat-file .name {
@@ -2470,7 +2461,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   border-radius: var(--r-1); overflow: hidden; max-width: min(100%, 480px);
   transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
-.chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
+.chat-msg:hover .chat-pdf { border-color: var(--rule); }
 .chat-pdf-head {
   display: flex; align-items: center; gap: 10px; padding: 10px 14px;
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -2497,7 +2488,6 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-msg:hover .chat-link,
 .chat-link:hover {
   background: var(--bg-3);
-  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
 }
 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .chat-link .thumb,
@@ -2530,7 +2520,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
   position: relative;
 }
-.chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
+.chat-reactions .rxn:hover { background: var(--bg-3); transform: scale(1.06); }
 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -2866,9 +2856,7 @@ input[type="checkbox"], input[type="radio"] {
 
 /* Drag-over state */
 .drag-over {
-  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
   border: 2px dashed var(--accent);
-  box-shadow: inset 0 0 0 1px var(--accent);
 }
 
 /* Drag-ghost (semi-transparent dragging element) */
@@ -2924,7 +2912,7 @@ input[type="checkbox"], input[type="radio"] {
   background: var(--bg-2);
   border: 1px solid var(--rule);
   border-radius: var(--r-2);
-  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  box-shadow: var(--shadow-overlay);
   min-width: 160px;
   z-index: calc(var(--z-overlay, 1000) + 1);
   padding: 4px 0;
@@ -3206,7 +3194,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* Skip to main content link */
 .skip-to-main {
   position: absolute; top: -40px; left: 0;
-  background: var(--accent); color: var(--accent-fg);
+  background: var(--fg); color: var(--bg);
   padding: 8px 16px; border-radius: var(--r-1);
   text-decoration: none; z-index: var(--z-overlay, 1000);
 }
@@ -3297,25 +3285,6 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
    Empty State & Loading States
    -------------------------------------------------------------- */
 
-.empty-state {
-  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
-  padding: var(--space-8) var(--space-4);
-  text-align: center; color: var(--fg-3);
-}
-.empty-state--inline {
-  flex-direction: row; align-items: center; gap: var(--space-2);
-  padding: var(--space-2) 0; text-align: left;
-}
-.empty-state-icon {
-  font-size: 48px; opacity: 0.4;
-}
-.empty-state-title {
-  font-size: var(--fs-lg); font-weight: 600; color: var(--fg-2);
-}
-.empty-state-body {
-  font-size: var(--fs-sm); max-width: 40ch;
-}
-
 /* Skeleton loading state */
 .skeleton {
   background: linear-gradient(
@@ -3349,7 +3318,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   border-radius: var(--r-2);
   padding: var(--space-3) var(--space-4);
   max-width: 320px;
-  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  box-shadow: var(--shadow-overlay);
   z-index: calc(var(--z-overlay, 1000) + 10);
 }
 
@@ -4097,7 +4066,8 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
 .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: var(--r-hair); height: 6px; overflow: hidden; }
-.ds-bar-fill { background: var(--accent); height: 100%; border-radius: var(--r-hair); }
+.ds-bar-fill { background: var(--fg-3); height: 100%; border-radius: var(--r-hair); }
+.ds-bar-fill.is-active { background: var(--accent); }
 .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 400px) {
   .ds-bar-row-label { width: 72px; }
@@ -4210,13 +4180,6 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 @media (max-width: 760px) {
   .ds-panel-duo { grid-template-columns: 1fr; }
 }
-/* Wide-viewport density: auto-fit grid so panel COUNT tracks actual children
-   instead of a hardcoded column number — 2 children sit 2-up, 5 wrap to a
-   third row, never an arbitrary 3-card reflex (same auto-fit/minmax pattern
-   as .ds-tile-grid). Panels floor at 280px before wrapping, so ultra-wide
-   screens still get more columns than a fixed repeat(3, ...) ever allowed. */
-.ds-panel-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
-.ds-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
 /* wide dense rows/tables scroll inside their panel, never the page */
 .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
 

package/chat.css

@@ -418,7 +418,7 @@
 .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-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--accent); display: inline-block; }
+.ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); display: inline-block; }
 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-session-state-error { color: var(--flame); }
 
@@ -474,6 +474,17 @@
 .ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-2); }
 .ds-context .row .sub { font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-context-actions { display: flex; gap: var(--space-2); }
+/* Lighter fact groups for secondary context blocks (conversation/last turn/
+   recent files): a small caps label + Row list with no card chrome, so a
+   2-row fact doesn't compete visually with the primary bordered panel above
+   it. Separated from neighbors by a hairline rule, not a border box. */
+.ds-context-group { padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--rule); }
+.ds-context-group-label {
+  font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3);
+  letter-spacing: var(--tr-caps); text-transform: uppercase;
+  padding: 0 0 var(--space-2);
+}
+.ds-context-group .row + .row { margin-top: 2px; }
 
 /* ============================================================================
    Cohesion sweep (gui-cohesion.js): one-product polish across surfaces.

package/dist/247420.css

@@ -744,8 +744,7 @@
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
   padding: 10px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 
 /* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
@@ -758,8 +757,7 @@
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
   padding: 8px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 .ds-247420 .app-chrome > .app-topbar,
 .ds-247420 .app-chrome > .app-crumb {
@@ -1146,14 +1144,6 @@
   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. */
 .ds-247420 .panel.panel-spine {
@@ -1166,7 +1156,7 @@
   border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
 }
 .ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
-.ds-247420 .panel.panel-wide   { background: transparent; box-shadow: none; }
+.ds-247420 .panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
 .ds-247420 .panel-head {
   display: flex; align-items: baseline; justify-content: space-between;
   /* Shares the .panel-body 16px side padding so the caps label and the body
@@ -1627,8 +1617,9 @@
 }
 .ds-247420 .ds-barchart-fill {
   height: 100%; width: var(--bar-pct, 0%);
-  background: var(--accent); border-radius: var(--r-pill);
+  background: var(--fg-3); border-radius: var(--r-pill);
 }
+.ds-247420 .ds-barchart-fill.is-active { background: var(--accent); }
 .ds-247420 .ds-barchart-value {
   font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
   font-variant-numeric: tabular-nums;
@@ -2048,15 +2039,15 @@
 .ds-247420 .ds-file-row:active { transform: translateY(1px); }
 .ds-247420 .ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
 .ds-247420 .ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
-.ds-247420 .ds-file-row[data-file-type="image"]    { border-left-width: 3px; border-left-color: var(--mascot); }
-.ds-247420 .ds-file-row[data-file-type="video"]    { border-left-width: 3px; border-left-color: var(--purple-2); }
-.ds-247420 .ds-file-row[data-file-type="audio"]    { border-left-width: 3px; border-left-color: var(--sky); }
-.ds-247420 .ds-file-row[data-file-type="code"]     { border-left-width: 3px; border-left-color: var(--green-2); }
-.ds-247420 .ds-file-row[data-file-type="text"]     { border-left-width: 3px; border-left-color: var(--ink-3); }
-.ds-247420 .ds-file-row[data-file-type="archive"]  { border-left-width: 3px; border-left-color: var(--flame); }
-.ds-247420 .ds-file-row[data-file-type="document"] { border-left-width: 3px; border-left-color: var(--amber, var(--sun)); }
-.ds-247420 .ds-file-row[data-file-type="symlink"]  { border-left-width: 3px; border-left-color: var(--purple); }
-.ds-247420 .ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--fg-3); }
+.ds-247420 .ds-file-row[data-file-type="image"],
+.ds-247420 .ds-file-row[data-file-type="video"],
+.ds-247420 .ds-file-row[data-file-type="audio"],
+.ds-247420 .ds-file-row[data-file-type="code"],
+.ds-247420 .ds-file-row[data-file-type="text"],
+.ds-247420 .ds-file-row[data-file-type="archive"],
+.ds-247420 .ds-file-row[data-file-type="document"],
+.ds-247420 .ds-file-row[data-file-type="symlink"],
+.ds-247420 .ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--rule); }
 
 /* Row internals — these are the classes FileRow actually renders. */
 .ds-247420 .ds-file-row .title {
@@ -2127,13 +2118,13 @@
   transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
 }
 .ds-247420 .is-marked > .ds-check-box,
-.ds-247420[aria-checked="true"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
+.ds-247420[aria-checked="true"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
 .ds-247420 .is-marked > .ds-check-box::after,
 .ds-247420[aria-checked="true"] > .ds-check-box::after {
   content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
   border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
 }
-.ds-247420[aria-checked="mixed"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
+.ds-247420[aria-checked="mixed"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
 .ds-247420[aria-checked="mixed"] > .ds-check-box::after {
   content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: var(--r-hair);
 }
@@ -2436,9 +2427,10 @@
 }
 .ds-247420 .ds-upload-fill {
   display: block; height: 100%; width: 0;
-  background: var(--accent); border-radius: var(--r-pill);
+  background: var(--fg-3); border-radius: var(--r-pill);
   transition: width var(--dur-base) var(--ease);
 }
+.ds-247420 .ds-upload-fill.is-active { background: var(--accent); }
 /* 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 {
@@ -2503,7 +2495,6 @@
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
   background: color-mix(in oklab, var(--ink) 55%, transparent);
-  backdrop-filter: blur(3px);
 }
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
@@ -2965,7 +2956,7 @@
 }
 .ds-247420 .chat-msg:hover .chat-image,
 .ds-247420 .chat-image:hover {
-  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  border-color: var(--rule);
 }
 .ds-247420 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
 .ds-247420 .chat-image .cap,
@@ -2980,12 +2971,12 @@
   max-width: min(100%, 360px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
 }
-.ds-247420 .chat-file:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
+.ds-247420 .chat-file:hover { background: var(--bg-3); }
 .ds-247420 .chat-file .glyph {
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
-  background: color-mix(in oklab, var(--accent) 18%, transparent);
-  color: var(--accent-ink); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
+  background: var(--bg-3);
+  color: var(--fg-2); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
 }
 .ds-247420 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ds-247420 .chat-file .name {
@@ -3006,7 +2997,7 @@
   border-radius: var(--r-1); overflow: hidden; max-width: min(100%, 480px);
   transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
-.ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
+.ds-247420 .chat-msg:hover .chat-pdf { border-color: var(--rule); }
 .ds-247420 .chat-pdf-head {
   display: flex; align-items: center; gap: 10px; padding: 10px 14px;
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -3033,7 +3024,6 @@
 .ds-247420 .chat-msg:hover .chat-link,
 .ds-247420 .chat-link:hover {
   background: var(--bg-3);
-  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
 }
 .ds-247420 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .ds-247420 .chat-link .thumb,
@@ -3066,7 +3056,7 @@
   transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
   position: relative;
 }
-.ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
+.ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); transform: scale(1.06); }
 .ds-247420 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -3394,9 +3384,7 @@
 
 /* Drag-over state */
 .ds-247420 .drag-over {
-  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
   border: 2px dashed var(--accent);
-  box-shadow: inset 0 0 0 1px var(--accent);
 }
 
 /* Drag-ghost (semi-transparent dragging element) */
@@ -3452,7 +3440,7 @@
   background: var(--bg-2);
   border: 1px solid var(--rule);
   border-radius: var(--r-2);
-  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  box-shadow: var(--shadow-overlay);
   min-width: 160px;
   z-index: calc(var(--z-overlay, 1000) + 1);
   padding: 4px 0;
@@ -3734,7 +3722,7 @@
 /* Skip to main content link */
 .ds-247420 .skip-to-main {
   position: absolute; top: -40px; left: 0;
-  background: var(--accent); color: var(--accent-fg);
+  background: var(--fg); color: var(--bg);
   padding: 8px 16px; border-radius: var(--r-1);
   text-decoration: none; z-index: var(--z-overlay, 1000);
 }
@@ -3822,25 +3810,6 @@
    Empty State & Loading States
    -------------------------------------------------------------- */
 
-.ds-247420 .empty-state {
-  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
-  padding: var(--space-8) var(--space-4);
-  text-align: center; color: var(--fg-3);
-}
-.ds-247420 .empty-state--inline {
-  flex-direction: row; align-items: center; gap: var(--space-2);
-  padding: var(--space-2) 0; text-align: left;
-}
-.ds-247420 .empty-state-icon {
-  font-size: 48px; opacity: 0.4;
-}
-.ds-247420 .empty-state-title {
-  font-size: var(--fs-lg); font-weight: 600; color: var(--fg-2);
-}
-.ds-247420 .empty-state-body {
-  font-size: var(--fs-sm); max-width: 40ch;
-}
-
 /* Skeleton loading state */
 .ds-247420 .skeleton {
   background: linear-gradient(
@@ -3874,7 +3843,7 @@
   border-radius: var(--r-2);
   padding: var(--space-3) var(--space-4);
   max-width: 320px;
-  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  box-shadow: var(--shadow-overlay);
   z-index: calc(var(--z-overlay, 1000) + 10);
 }
 
@@ -4621,7 +4590,8 @@
 .ds-247420 .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
 .ds-247420 .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-247420 .ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: var(--r-hair); height: 6px; overflow: hidden; }
-.ds-247420 .ds-bar-fill { background: var(--accent); height: 100%; border-radius: var(--r-hair); }
+.ds-247420 .ds-bar-fill { background: var(--fg-3); height: 100%; border-radius: var(--r-hair); }
+.ds-247420 .ds-bar-fill.is-active { background: var(--accent); }
 .ds-247420 .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 400px) {
   .ds-247420 .ds-bar-row-label { width: 72px; }
@@ -4734,13 +4704,6 @@
 @media (max-width: 760px) {
   .ds-247420 .ds-panel-duo { grid-template-columns: 1fr; }
 }
-/* Wide-viewport density: auto-fit grid so panel COUNT tracks actual children
-   instead of a hardcoded column number — 2 children sit 2-up, 5 wrap to a
-   third row, never an arbitrary 3-card reflex (same auto-fit/minmax pattern
-   as .ds-tile-grid). Panels floor at 280px before wrapping, so ultra-wide
-   screens still get more columns than a fixed repeat(3, ...) ever allowed. */
-.ds-247420 .ds-panel-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
-.ds-247420 .ds-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
 /* wide dense rows/tables scroll inside their panel, never the page */
 .ds-247420 .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
 
@@ -7148,7 +7111,7 @@
 .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; }
+.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); display: inline-block; }
 .ds-247420 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-session-state-error { color: var(--flame); }
 
@@ -7204,6 +7167,17 @@
 .ds-247420 .ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-2); }
 .ds-247420 .ds-context .row .sub { font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-247420 .ds-context-actions { display: flex; gap: var(--space-2); }
+/* Lighter fact groups for secondary context blocks (conversation/last turn/
+   recent files): a small caps label + Row list with no card chrome, so a
+   2-row fact doesn't compete visually with the primary bordered panel above
+   it. Separated from neighbors by a hairline rule, not a border box. */
+.ds-247420 .ds-context-group { padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--rule); }
+.ds-247420 .ds-context-group-label {
+  font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3);
+  letter-spacing: var(--tr-caps); text-transform: uppercase;
+  padding: 0 0 var(--space-2);
+}
+.ds-247420 .ds-context-group .row + .row { margin-top: 2px; }
 
 /* ============================================================================
    Cohesion sweep (gui-cohesion.js): one-product polish across surfaces.