agentgui 1.0.940 → 1.0.941

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

@@ -6,7 +6,7 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('../cdn/fonts/fonts.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
 
 .ds-247420 {
   /* Tree view indentation tokens */
@@ -33,6 +33,7 @@
   --mascot:      #E84B8A;
   --mascot-2:    #FF3CA7;
   --mascot-tint: #F5D2DF;
+  --mascot-deep: #B81F63;
 
   /* Signals */
   --sun:         #F5C344;
@@ -53,7 +54,7 @@
 
   --accent:      var(--green);
   --accent-fg:   var(--paper);
-  --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
+  --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
 
   --panel-bg:     var(--bg);
   --panel-bg-2:   var(--bg-2);
@@ -68,18 +69,17 @@
   --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 — one family, used purposefully. Space Grotesk for everything
-     non-mono. The display/narrow aliases stay so consumers that reference
-     them keep working; they just resolve to the body font now. */
-  --ff-display:  'Space Grotesk', system-ui, sans-serif;
-  --ff-narrow:   'Space Grotesk', system-ui, sans-serif;
-  --ff-body:     'Space Grotesk', system-ui, sans-serif;
+  /* Type — Inter for everything non-mono. The display/narrow aliases stay so
+     consumers that reference them keep working; they resolve to the body font. */
+  --ff-display:  'Inter', system-ui, sans-serif;
+  --ff-narrow:   'Inter', system-ui, sans-serif;
+  --ff-body:     'Inter', system-ui, sans-serif;
   --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
 
-  --fs-micro:    11px;
-  --fs-tiny:     12px;
-  --fs-xs:       13px;
-  --fs-sm:       14px;
+  --fs-micro:    12px;
+  --fs-tiny:     13px;
+  --fs-xs:       14px;
+  --fs-sm:       15px;
   --fs-body:     16px;
   --fs-lg:       18px;
   --fs-xl:       21px;
@@ -90,6 +90,15 @@
   --fs-hero:     clamp(42px, 7cqi, 96px);
   --fs-mega:     clamp(56px, 11cqi, 168px);
 
+  /* App/chrome typescale: the default heading scale above is tuned for
+     marketing/hero layouts (h1 up to 64px). Application chrome — page titles,
+     panel headers — needs a compact ceiling so a PageHeader title doesn't
+     dwarf the content. Opt in with `data-typescale="app"` on a container. */
+  --fs-h1-app:   clamp(22px, 2.4cqi, 30px);
+  --fs-h2-app:   clamp(19px, 2cqi, 24px);
+  --fs-h3-app:   clamp(17px, 1.8cqi, 20px);
+  --fs-h4-app:   clamp(15px, 1.6cqi, 17px);
+
   --lh-tight:    1.05;
   --lh-snug:     1.2;
   --lh-base:     1.55;
@@ -195,6 +204,7 @@
 
 .ds-247420[data-theme="ink"],
 .ds-247420[data-theme="dark"] {
+  color-scheme: dark;
   --bg:        var(--ink);
   --bg-2:      var(--ink-2);
   --bg-3:      #464650;
@@ -381,6 +391,12 @@
 .ds-247420 h3, .ds-247420 .t-h3 { font-family: var(--ff-body); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
 .ds-247420 h4, .ds-247420 .t-h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
 
+/* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
+.ds-247420[data-typescale="app"] h1, .ds-247420[data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
+.ds-247420[data-typescale="app"] h2, .ds-247420[data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
+.ds-247420[data-typescale="app"] h3, .ds-247420[data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
+.ds-247420[data-typescale="app"] h4, .ds-247420[data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
+
 .ds-247420 .t-hero    { font-family: var(--ff-body); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 600; margin: 0; }
 .ds-247420 .t-mega    { font-family: var(--ff-body); font-size: var(--fs-mega); line-height: 0.95;            letter-spacing: var(--tr-tighter); font-weight: 600; margin: 0; }
 
@@ -471,6 +487,11 @@
 .ds-247420 .app {
   display: flex; flex-direction: column;
   min-height: 100vh;
+  /* Definite height so the flex column resolves height:100% for descendants
+     (e.g. a full-height chat) at every breakpoint, not just where a desktop
+     media override happened to set explicit heights. dvh tracks mobile chrome. */
+  min-height: 100dvh;
+  height: 100dvh;
   background: var(--bg);
   color: var(--fg);
   /* Notched-device safe area padding (no-op on devices without notches) */
@@ -480,6 +501,15 @@
   padding-right: env(safe-area-inset-right);
 }
 
+/* When the app shell is embedded inside a windowed surface (e.g. the freddie
+   dashboard mounted in a WM window via .fd-root) it is NOT a full-page app:
+   `min-height:100vh` and the absence of an explicit width make it collapse to
+   0 width at desktop, where the responsive single-column @media rules don't
+   apply. Inside .fd-root it must fill its container instead. (At <=767px the
+   grid already linearizes, which is why the bug only showed at desktop width.) */
+.ds-247420 .fd-root .app { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; }
+.ds-247420 .fd-root .app-body { min-width: 0; }
+
 .ds-247420 {
   --app-status-h: var(--size-base);
   --app-topbar-h: var(--size-lg);
@@ -604,6 +634,21 @@
   height: 100%;
 }
 .ds-247420 .app-main > * { min-height: 0; }
+/* The main region scrolls its own overflow at every breakpoint (previously
+   only ≥901px), so a fixed-height .app never clips route content and inner
+   panels don't fight the page scroll. */
+.ds-247420 .app-main { overflow-y: auto; }
+/* Reserve the scrollbar track so routes with/without overflow don't shift
+   the layout horizontally when the bar appears. */
+.ds-247420 .app-main { scrollbar-gutter: stable; }
+/* Jump-target anchors clear the inner-scroll top edge (no chrome overlap,
+   but a little breathing room when deep-linked within .app-main). */
+.ds-247420 .app-main [id] { scroll-margin-top: var(--space-4); }
+/* Full-height route children fill the region instead of scrolling the page. */
+.ds-247420 .app-main > .chat,
+.ds-247420 .app-main > .chat-area,
+.ds-247420 .app-main > .ds-file-stage,
+.ds-247420 .app-main > .grow { flex: 1 1 auto; min-height: 0; }
 .ds-247420 .app-main.narrow { max-width: var(--measure-narrow); margin: 0 auto; }
 
 @media (min-width: 1400px) {
@@ -688,7 +733,7 @@
 .ds-247420 .ds-badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 18px; height: 18px; padding: 0 6px;
-  font-size: 11px; font-weight: 600; line-height: 1;
+  font-size: var(--fs-micro); font-weight: 600; line-height: 1;
   border-radius: 999px;
   background: var(--bg-3); color: var(--fg-2);
 }
@@ -722,6 +767,9 @@
 .ds-247420 .chip.tone-error    { background: var(--flame);       color: var(--paper); }
 .ds-247420 .chip.tone-success  { background: var(--green-tint);  color: var(--green-deep); }
 .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(--paper); }
+.ds-247420 .chip.tone-neutral  { background: var(--bg-3);        color: var(--fg-2); }
 
 .ds-247420 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
@@ -734,9 +782,11 @@
    Panel — soft tonal container, no border decoration
    ============================================================ */
 .ds-247420 .panel {
-  background: var(--bg);
+  background: var(--panel-1, var(--bg-2));
   border-radius: var(--r-3);
   margin: 0 0 var(--space-5);
+  padding: var(--space-3);
+  box-shadow: var(--panel-shadow);
   position: relative;
 }
 .ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
@@ -847,6 +897,27 @@
 }
 .ds-247420 .cli .copy:hover { background: #6A6A70; }
 
+/* Multi-line CLI block: when .cli holds .cli-line / .cli-cmt children
+   (quickstart scripts, multi-command snippets) it stacks as a column
+   instead of the single-line install row. */
+.ds-247420 .cli:has(.cli-line),
+.ds-247420 .cli:has(.cli-cmt) {
+  flex-direction: column; align-items: stretch; gap: 0;
+  font-size: var(--fs-sm); line-height: 1.6;
+}
+.ds-247420 .cli-line {
+  display: flex; gap: 10px;
+  font-family: var(--ff-mono); font-size: 13px; line-height: 1.6;
+  padding: 3px 0;
+}
+.ds-247420 .cli-line .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
+.ds-247420 .cli-line .cmd { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; color: var(--paper); }
+.ds-247420 .cli-cmt {
+  color: var(--fg-3);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.6;
+  padding: 3px 0; white-space: pre-wrap; word-break: break-word;
+}
+
 /* ============================================================
    Receipt — key/value table
    ============================================================ */
@@ -884,6 +955,11 @@
 .ds-247420 table td { padding: 14px 16px; border-top: 1px solid var(--rule); }
 .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);
+  outline-offset: -2px;
+}
+.ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
 
 /* ============================================================
    Changelog
@@ -1004,9 +1080,8 @@
    Mobile Portrait Breakpoint (480px and below)
    ────────────────────────────────────────────────────────────────────── */
 @media (max-width: 480px) {
-  /* App Layout — drawer handled in 900px block below */
-  .ds-247420 .app-body { grid-template-columns: 1fr !important; }
-  .ds-247420 .app-body.no-side { grid-template-columns: 1fr; }
+  /* App Layout: single-column + drawer is handled once in the ≤900px block;
+     no need to re-declare grid-template-columns here (was a redundant !important). */
 
   /* Topbar Navigation */
   .ds-247420 .app-topbar {
@@ -1017,9 +1092,16 @@
     padding: 12px 10px;
     min-height: 44px;
   }
+  /* Keep primary nav reachable on small screens (apps without a sidebar have
+     no other entry point). Compact it and let it scroll horizontally rather
+     than hiding it entirely. */
   .ds-247420 .app-topbar nav {
-    display: none; /* Hide full nav on very small screens */
+    display: flex; gap: 2px;
+    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
+    max-width: 60vw;
   }
+  .ds-247420 .app-topbar nav::-webkit-scrollbar { display: none; }
+  .ds-247420 .app-topbar nav a { padding: 10px 8px; white-space: nowrap; }
   .ds-247420 .brand { font-size: var(--fs-tiny); font-weight: 600; }
 
   /* Search */
@@ -1031,12 +1113,7 @@
   .ds-247420 .app-main { padding: var(--space-4) var(--space-2); }
   .ds-247420 .app-main.narrow { max-width: 100%; margin: 0; }
 
-  /* Typography Scaling */
-  .ds-247420 .t-hero { font-size: clamp(28px, 8vw, 48px); }
-  .ds-247420 .t-mega { font-size: clamp(24px, 6vw, 42px); }
-  .ds-247420 h1, .ds-247420 .t-h1 { font-size: clamp(22px, 6vw, 36px); }
-  .ds-247420 h2, .ds-247420 .t-h2 { font-size: clamp(18px, 5vw, 28px); }
-  .ds-247420 h3, .ds-247420 .t-h3 { font-size: clamp(16px, 4.5vw, 24px); }
+  /* Headings stay on the fluid base clamps (cqi) — no mobile re-clamp. */
 
   /* Panel & Row */
   .ds-247420 .panel { margin: 0 0 var(--space-3); }
@@ -1101,10 +1178,10 @@
   .ds-247420 .row-form input,
   .ds-247420 .row-form textarea { padding: 11px 12px; font-size: var(--fs-sm); }
 
-  /* Hero Section */
+  /* Hero Section — keep fluid base font-size, just unconstrain width on mobile. */
   .ds-247420 .ds-hero { padding: var(--space-6) 0 var(--space-5); }
-  .ds-247420 .ds-hero-title { font-size: clamp(28px, 7vw, 48px); max-width: 100%; }
-  .ds-247420 .ds-hero-body { font-size: var(--fs-lg); max-width: 100%; }
+  .ds-247420 .ds-hero-title { max-width: 100%; }
+  .ds-247420 .ds-hero-body { max-width: 100%; }
 
   /* Table Responsiveness */
   .ds-247420 table { font-size: var(--fs-xs); }
@@ -1169,12 +1246,7 @@
   .ds-247420 .app-main { padding: var(--space-6) var(--space-4); }
   .ds-247420 .app-main.narrow { max-width: 100%; }
 
-  /* Typography */
-  .ds-247420 .t-hero { font-size: clamp(32px, 6.5cqi, 56px); }
-  .ds-247420 .t-mega { font-size: clamp(28px, 5.5cqi, 80px); }
-  .ds-247420 h1, .ds-247420 .t-h1 { font-size: clamp(24px, 5cqi, 48px); }
-  .ds-247420 h2, .ds-247420 .t-h2 { font-size: clamp(20px, 4cqi, 36px); }
-  .ds-247420 h3, .ds-247420 .t-h3 { font-size: clamp(18px, 3.5cqi, 28px); }
+  /* Headings stay on the fluid base clamps (cqi) — no tablet re-clamp. */
 
   /* File list — single column rows on tablet (cards only via data-columns) */
   .ds-247420 .ds-file-row {
@@ -1204,9 +1276,9 @@
   .ds-247420 .panel-head { padding: var(--space-4) var(--space-4); }
   .ds-247420 .panel-body { padding: var(--space-2) var(--space-3); }
 
-  /* Hero */
+  /* Hero — fluid base font-size; only width unconstrained on tablet. */
   .ds-247420 .ds-hero { padding: var(--space-7) 0 var(--space-6); max-width: 100%; }
-  .ds-247420 .ds-hero-title { font-size: clamp(32px, 6cqi, 56px); max-width: 100%; }
+  .ds-247420 .ds-hero-title { max-width: 100%; }
 
   /* Row */
   .ds-247420 .row {
@@ -1640,7 +1712,7 @@
   display: inline-flex; align-items: center; justify-content: center;
   border: var(--bw-hair) solid var(--rule); border-radius: 5px;
   background: var(--bg); color: var(--accent-fg);
-  font-size: 11px; line-height: 1; cursor: pointer;
+  font-size: var(--fs-micro); line-height: 1; cursor: pointer;
   opacity: 0; transition: opacity var(--dur-base) var(--ease), background var(--dur-snap) var(--ease);
 }
 .ds-247420 .ds-file-row:hover .ds-file-check,
@@ -1719,7 +1791,6 @@
 .ds-247420 .chat {
   display: flex; flex-direction: column;
   flex: 1; min-height: 0; gap: var(--space-3);
-  padding-bottom: calc(var(--app-status-h, 42px) + var(--space-2));
 }
 .ds-247420 .chat-head {
   display: flex; align-items: baseline; gap: 8px;
@@ -1730,6 +1801,7 @@
   margin-bottom: var(--space-2);
 }
 .ds-247420 .chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+.ds-247420 .chat-head .ds-chat-title,
 .ds-247420 .chat-head > span:nth-child(2) {
   font-family: var(--ff-body); font-size: var(--fs-h4);
   font-weight: 600; color: var(--fg);
@@ -1743,21 +1815,21 @@
   flex: 1; min-height: 0; overflow-y: auto;
   padding: var(--space-2) 0;
   scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
-  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .chat-thread { scroll-behavior: smooth; }
 }
 .ds-247420 .chat-thread::-webkit-scrollbar { width: 8px; }
 .ds-247420 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
-.ds-247420 .chat-thread:empty::before {
-  content: 'no messages yet\astart the conversation';
-  white-space: pre;
+.ds-247420 .chat-empty {
+  margin: auto;
+  text-align: center;
   color: var(--fg-3);
   font-family: var(--ff-mono);
-  font-size: var(--fs-sm);
-  text-align: center;
-  margin: auto;
-  opacity: 0.6;
   pointer-events: none;
 }
+.ds-247420 .chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
+.ds-247420 .chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .7; }
 
 .ds-247420 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; min-width: 0; }
 .ds-247420 .chat-msg.you { flex-direction: row-reverse; }
@@ -1791,10 +1863,10 @@
 
 .ds-247420 .chat-bubble {
   padding: 10px 14px; background: var(--bg-2); color: var(--fg);
-  border-radius: 14px; line-height: 1.55;
+  max-width: 100%;
+  border-radius: var(--r-2); line-height: 1.55;
   word-wrap: break-word; overflow-wrap: anywhere;
   font-size: var(--fs-sm);
-  max-width: clamp(220px, min(75vw, 28em), 480px);
   min-width: 0;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
@@ -2078,27 +2150,34 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
   outline: none;
 }
-.ds-247420 .chat-composer .send,
-.ds-247420 .chat-composer button {
+.ds-247420 .chat-composer .send {
   width: 44px; height: 44px; border-radius: 50%;
   background: var(--accent); color: var(--accent-fg);
-  border: 0; cursor: pointer; font-size: 18px; font-weight: 700;
+  border: 0; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
-  flex-shrink: 0; font-family: var(--ff-body);
+  flex-shrink: 0;
   transition: background var(--dur-snap, .15s) var(--ease, ease), transform .1s ease;
-  will-change: transform; contain: layout style paint;
 }
-.ds-247420 .chat-composer .send:hover,
-.ds-247420 .chat-composer button:hover { transform: scale(1.04); }
-.ds-247420 .chat-composer .send:active,
-.ds-247420 .chat-composer button:active { transform: scale(0.96); }
+.ds-247420 .chat-composer .send:disabled { opacity: .5; cursor: not-allowed; }
+/* Ghost icon buttons in the toolbar (attach / emoji / more) — NOT the round
+   accent send button. */
+.ds-247420 .composer-btn {
+  width: 40px; height: 40px; border-radius: 50%;
+  background: transparent; color: var(--fg-3);
+  border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  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 { transform: scale(1.04); }
+.ds-247420 .chat-composer .send:active { transform: scale(0.96); }
 .ds-247420 .chat-composer .send:focus-visible,
-.ds-247420 .chat-composer button:focus-visible {
+.ds-247420 .composer-btn:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
-.ds-247420 .chat-composer .send:disabled,
-.ds-247420 .chat-composer button:disabled {
+.ds-247420 .chat-composer .send:disabled {
   background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
 }
 
@@ -2110,7 +2189,8 @@
   border-radius: 50%; flex-shrink: 0;
 }
 .ds-247420 .aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.ds-247420 .aicat-meta .name { color: var(--mascot); font-weight: 600; }
+.ds-247420 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
+.ds-247420[data-theme="dark"] .aicat-meta .name, .ds-247420[data-theme="ink"] .aicat-meta .name { color: var(--mascot); }
 
 /* ============================================================
    Sidebar polish: hide zero-count badges; tonal active state;
@@ -2118,7 +2198,7 @@
    ============================================================ */
 .ds-247420 .app-side .count {
   background: color-mix(in oklab, var(--mascot) 92%, transparent);
-  padding: 1px 8px; font-size: 10px; font-weight: 700;
+  padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
   font-family: var(--ff-mono); letter-spacing: 0.04em;
   min-width: 18px; text-align: center;
 }
@@ -2239,10 +2319,14 @@
   transform: scale(0.98);
 }
 
-/* Enhanced hover transitions */
+/* Enhanced hover transitions — transition only the properties that actually
+   change (not `all`, which animates layout and is a perf trap), and drop the
+   blanket `will-change` (it forces a permanent compositor layer per element). */
 .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost, .ds-247420 button, .ds-247420 a.row, .ds-247420 .row, .ds-247420 .chip, .ds-247420[role="button"], .ds-247420 input[type="checkbox"], .ds-247420 input[type="radio"] {
-  transition: all var(--dur-snap) var(--ease);
-  will-change: background-color, color, transform;
+  transition: background-color var(--dur-snap) var(--ease),
+              color var(--dur-snap) var(--ease),
+              box-shadow var(--dur-snap) var(--ease),
+              transform var(--dur-snap) var(--ease);
 }
 
 /* Prevent double-tap zoom on buttons (iOS) */
@@ -2383,6 +2467,9 @@
 .ds-247420 input[type="email"],
 .ds-247420 input[type="password"],
 .ds-247420 input[type="number"],
+.ds-247420 input[type="search"],
+.ds-247420 input[type="url"],
+.ds-247420 input[type="tel"],
 .ds-247420 textarea,
 .ds-247420 select {
   transition: background var(--dur-snap) var(--ease),
@@ -2394,10 +2481,74 @@
 .ds-247420 input[type="email"]::placeholder,
 .ds-247420 input[type="password"]::placeholder,
 .ds-247420 input[type="number"]::placeholder,
+.ds-247420 input[type="search"]::placeholder,
+.ds-247420 input[type="url"]::placeholder,
 .ds-247420 textarea::placeholder {
   color: var(--fg-3);
 }
 
+/* ── 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
+   because `.ds-field` had no layout. */
+.ds-247420 .ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 6px);
+  align-items: stretch;
+  width: 100%;
+}
+.ds-247420 .ds-field-label {
+  font-size: var(--fs-sm, 14px);
+  color: var(--fg-2);
+  line-height: 1.3;
+}
+.ds-247420 .ds-field-hint {
+  font-size: var(--fs-tiny, 13px);
+  color: var(--fg-3);
+  line-height: 1.35;
+}
+.ds-247420 .ds-field-count {
+  font-size: var(--fs-tiny, 13px);
+  color: var(--fg-3);
+  align-self: flex-end;
+}
+
+.ds-247420 .ds-field input,
+.ds-247420 .ds-field textarea,
+.ds-247420 .ds-field .ds-select,
+.ds-247420 .ds-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--fg);
+  background: var(--bg-2);
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+  border-radius: var(--r-2, 10px);
+  padding: 10px 14px;
+}
+.ds-247420 .ds-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
+.ds-247420 .ds-search-input::placeholder { color: var(--fg-3); }
+
+.ds-247420 .ds-field input:focus-visible,
+.ds-247420 .ds-field textarea:focus-visible,
+.ds-247420 .ds-field .ds-select:focus-visible,
+.ds-247420 .ds-search-input:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+.ds-247420 .ds-field input:disabled,
+.ds-247420 .ds-field textarea:disabled,
+.ds-247420 .ds-field .ds-select:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+.ds-247420 .ds-field input[aria-invalid="true"],
+.ds-247420 .ds-field textarea[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame, #d64545);
+}
+
 /* Clear button for text inputs */
 .ds-247420 input[type="text"]:not(:placeholder-shown) + .input-clear,
 .ds-247420 input[type="email"]:not(:placeholder-shown) + .input-clear,
@@ -2446,9 +2597,10 @@
 }
 .ds-247420 .skip-to-main:focus { top: 10px; }
 
-/* Reduced motion preferences */
+/* Reduced motion preferences — scoped to the DS surface so it doesn't reach
+   into and neutralize the host document's own motion. */
 @media (prefers-reduced-motion: reduce) {
-  .ds-247420 * {
+  .ds-247420 *, .ds-247420 .app * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
@@ -2456,17 +2608,14 @@
 }
 
 /* ────────────────────────────────────────────────────────────
-   Performance: GPU Acceleration & Paint Optimization
+   Performance
    ────────────────────────────────────────────────────────────── */
 
-/* Promote hover-interactive elements to compositing layer */
-.ds-247420 .btn:hover, .ds-247420 .btn-primary:hover, .ds-247420 .btn-ghost:hover, .ds-247420 a:hover, .ds-247420 .row:hover, .ds-247420 button:hover, .ds-247420[role="button"]:hover {
-  transform: translateZ(0);
-}
-
-/* Contain layout repaints on self-contained components */
-.ds-247420 .panel, .ds-247420 .row, .ds-247420 .chip, .ds-247420 .btn, .ds-247420 button {
-  contain: layout style paint;
+/* Limit layout/style containment to self-contained components. `paint` is
+   intentionally omitted — it clips focus rings, tooltips and dropdowns that
+   emanate from a contained .row/.btn. */
+.ds-247420 .panel, .ds-247420 .row {
+  contain: layout style;
 }
 
 /* ────────────────────────────────────────────────────────────
@@ -2475,11 +2624,13 @@
 
 @media (hover: none) and (pointer: coarse) {
   /* Mobile devices: larger touch targets, faster responses */
-  .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost, .ds-247420 button, .ds-247420 a.row, .ds-247420[role="button"] {
+  .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost, .ds-247420 button, .ds-247420 a.row, .ds-247420[role="button"], .ds-247420 .ds-icon-btn, .ds-247420 .composer-btn {
     min-height: 48px;
     min-width: 48px;
     padding: 12px 20px;
   }
+  /* Icon buttons stay square — the padding bump above would distort them. */
+  .ds-247420 .ds-icon-btn, .ds-247420 .composer-btn { padding: 0; }
 
   /* Remove hover effects on touch devices (use active instead) */
   .ds-247420 .btn:hover, .ds-247420 .btn-primary:hover, .ds-247420 .btn-ghost:hover {
@@ -2502,12 +2653,9 @@
    Theme Transition Smoothness
    ────────────────────────────────────────────────────────────── */
 
-.ds-247420 {
-  transition: background-color var(--dur-base) var(--ease),
-              color var(--dur-base) var(--ease);
-}
-
-.ds-247420 body {
+/* Scoped to the DS wrapper so the design system never reaches out and
+   animates the host document's html/body. */
+.ds-247420, .ds-247420 .app {
   transition: background-color var(--dur-base) var(--ease),
               color var(--dur-base) var(--ease);
 }
@@ -2743,12 +2891,17 @@
     padding: 10px 12px;
   }
   .ds-247420 .app-side .group { width: 100%; }
-  .ds-247420 .app-crumb { display: none; }
+  /* Keep the crumb on mobile — apps mount contextual controls (model picker,
+     actions, live status) in crumb-right, so hiding it strands them. Collapse
+     the breadcrumb trail/leaf instead and let the right cluster wrap. */
+  .ds-247420 .app-crumb { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 12px; }
+  .ds-247420 .app-crumb > .sep, .ds-247420 .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
+  .ds-247420 .app-crumb .crumb-right { margin-left: 0; }
   .ds-247420 .chat-head { padding: var(--space-2) var(--space-3) var(--space-2); margin-bottom: var(--space-2); }
   .ds-247420 .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
 }
 
-/* Drawer scrim */
+/* Drawer scrim — lives inside .app-body, shown when drawer open ≤900px */
 .ds-247420 .app-side-scrim {
   display: none;
   position: fixed; inset: 0;
@@ -2756,8 +2909,41 @@
   z-index: 49;
 }
 @media (max-width: 900px) {
-  .ds-247420 .app-body.side-open ~ .app-side-scrim,
-  .ds-247420 .app-side-shell.open ~ .app-side-scrim { display: block; }
+  .ds-247420 .app-body.side-open .app-side-scrim { display: block; }
+}
+
+/* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px */
+.ds-247420 .app-side-toggle {
+  display: none;
+  position: fixed; top: calc((var(--app-topbar-h) - 32px) / 2); left: 10px;
+  z-index: 51;
+  width: 36px; height: 36px;
+  align-items: center; justify-content: center;
+  font-size: 18px; line-height: 1;
+  background: var(--bg-2); color: var(--fg);
+  border: 1px solid var(--rule, color-mix(in oklab, var(--fg) 12%, transparent));
+  border-radius: var(--r-1, 6px);
+  cursor: pointer;
+}
+.ds-247420 .app-side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (max-width: 900px) {
+  .ds-247420 .app-side-toggle { display: inline-flex; }
+  .ds-247420 .app-topbar .brand { margin-left: 44px; }
+}
+
+/* Desktop: the app shell is exactly viewport-height and contains its own
+   scroll, so only .app-main (and the side rail) scroll — never the page too.
+   Pinning .app to 100dvh + overflow:hidden is what prevents the double
+   scrollbar that a min-height:100vh shell + inner overflow:auto produces.
+   .app-body fills the gap between topbar/crumb and status via flex:1 rather
+   than a hand-computed calc() that drifts from the real chrome heights. */
+@media (min-width: 901px) {
+  .ds-247420 .app { height: 100dvh; min-height: 0; overflow: hidden; }
+  /* Embedded shell (freddie WM window) fills its container, not the viewport. */
+  .ds-247420 .fd-root .app { height: 100%; overflow: visible; }
+  .ds-247420 .app-body { min-height: 0; flex: 1 1 auto; }
+  .ds-247420 .app-side-shell { overflow-y: auto; min-height: 0; }
+  .ds-247420 .app-main { overflow-y: auto; min-height: 0; }
 }
 
 /* Mobile (≤480) status bar compact; hide tail item */
@@ -4303,6 +4489,8 @@
 .ds-247420 .fd-chat { display: flex; flex-direction: column; gap: var(--space-2, 10px); height: 100%; min-height: 0; }
 .ds-247420 .fd-chat-thread { flex: 1 1 auto; min-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2, 10px); padding: var(--space-2, 10px); }
 .ds-247420 .fd-page-error { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* Visually-hidden polite live region — announces async busy/done to SR users. */
+.ds-247420 .fd-sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 /* page-level responsive: tighten padding on narrow viewports */
 @media (max-width: 640px) {
   .ds-247420 .fd-page-inner { padding: var(--space-2, 10px); gap: var(--space-2, 10px); }