anentrypoint-design 0.0.414 → 0.0.415

package/dist/src/kits/os/theme.css

@@ -1,26 +1,45 @@
+/* Fonts are declared once in the canonical theme (colors_and_type.css /
+   vendor/fonts.css), which every .ds-247420 consumer loads first. No @import
+   here — a second Inter-only import risked a weight-set FOUT mismatch. */
+
+/* The OS shell namespaces its surfaces as --os-* but those are pure ALIASES of
+   the canonical semantic tokens from colors_and_type.css. colors_and_type.css
+   is always loaded before this sheet for any .ds-247420 consumer, so the
+   canonical tokens are guaranteed present and the alias fallbacks are dropped —
+   a fallback here would silently re-introduce theme drift (a baked light value
+   that ignores [data-theme="ink"]). One theme drives both token namespaces. */
 :root {
-    --os-accent: var(--panel-accent, #3F8A4A);
-    --os-accent-2: var(--panel-accent-2, #2B6B36);
-    --os-accent-soft: var(--panel-select, #D8ECCB);
-    --os-bg-0: var(--panel-0, #F5F0E4);
-    --os-bg-1: var(--panel-1, #FBF6EB);
-    --os-bg-2: var(--panel-2, #F0E9DA);
-    --os-bg-3: var(--panel-3, #E3DAC7);
-    --os-fg: var(--panel-text, #1F1B16);
-    --os-fg-2: var(--panel-text-2, #5A5246);
-    --os-fg-3: var(--panel-text-3, #857B6C);
-    --os-red: var(--warn, #FF6B4A);
-    --os-amber: var(--sun, #FFD86B);
-    --os-green: var(--green, #3F8A4A);
-    --os-radius: var(--r-2, 10px);
-    --os-radius-sm: var(--r-1, 6px);
+    /* --ff-ui is the OS-shell alias for the canonical body font; --ff-display
+       and --ff-mono are already canonical (colors_and_type.css), referenced
+       directly below — do not self-redefine them here (cycle). */
+    --ff-ui: var(--ff-body);
+    /* --os-accent is used predominantly as TEXT/icon/border in the OS chrome,
+       so it tracks the readable --accent-ink tone (the electric lead is too
+       light for text on paper). --os-accent-fill is the saturated lead for the
+       rare solid fill; --os-accent-soft is the tint. */
+    --os-accent: var(--accent-ink);
+    --os-accent-fill: var(--accent);
+    --os-accent-2: var(--accent-bright, var(--accent));
+    --os-accent-soft: var(--accent-tint);
+    --os-bg-0: var(--bg);
+    --os-bg-1: var(--bg-2);
+    --os-bg-2: var(--bg-3);
+    --os-bg-3: var(--panel-3);
+    --os-fg: var(--fg);
+    --os-fg-2: var(--fg-2);
+    --os-fg-3: var(--fg-3);
+    --os-red: var(--warn);
+    --os-amber: var(--sun);
+    --os-green: var(--green);
+    --os-radius: var(--r-2);
+    --os-radius-sm: var(--r-1);
     --os-bar-h: 44px;
     --os-bar-h-mobile: 52px;
     --os-rail-w: 64px;
     --os-tap: 44px;
-    --os-font: var(--ff-ui, 'Nunito', sans-serif);
-    --os-display: var(--ff-display, 'Archivo Black', 'Archivo', sans-serif);
-    --os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace);
+    --os-font: var(--ff-ui);
+    --os-display: var(--ff-display);
+    --os-mono: var(--ff-mono);
 }
 
 html, body {
@@ -32,13 +51,15 @@ html, body {
 }
 
 .os-menubar, .os-taskbar {
-    background: var(--os-bg-2);
+    background: color-mix(in oklab, var(--os-bg-2) 88%, transparent);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     border: none;
     color: var(--os-fg);
-    font: 13px var(--os-font);
+    font: var(--fs-tiny) var(--os-font);
     height: var(--os-bar-h);
-    padding: 0 12px;
-    gap: 6px;
+    padding: 0 var(--space-2-75);
+    gap: var(--space-1-75);
     box-shadow: none;
     display: flex;
     align-items: center;
@@ -48,17 +69,22 @@ html, body {
 .os-menubar > *, .os-taskbar > * { flex-shrink: 0; }
 .os-menubar .os-spacer { flex: 1 1 auto; min-width: 0; }
 .os-menubar .os-tray { margin-left: auto; }
+/* Many open windows must scroll within the bar, not overflow it. Mobile
+   already had this; promote it to all widths so a crowded desktop taskbar
+   scrolls horizontally instead of pushing buttons off-screen. */
+.os-taskbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
+.os-taskbar::-webkit-scrollbar { display: none; }
 
 .os-brand {
     color: var(--os-fg);
     font-family: var(--os-display);
     font-weight: 700;
     letter-spacing: -0.01em;
-    font-size: 15px;
+    font-size: var(--fs-sm);
     margin-right: 14px;
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     text-transform: lowercase;
 }
 .os-brand::before {
@@ -77,12 +103,12 @@ html, body {
     cursor: pointer;
     font: inherit;
     font-family: var(--os-font);
-    font-size: 13px;
-    border-radius: 999px;
+    font-size: var(--fs-tiny);
+    border-radius: var(--r-pill, 999px);
     transition: background 80ms ease, color 80ms ease;
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: var(--space-1-75);
     outline: none;
     text-transform: lowercase;
 }
@@ -97,42 +123,59 @@ html, body {
     background: var(--os-bg-1);
     border: none;
     border-radius: var(--r-3, 18px);
-    padding: 8px;
+    padding: var(--space-2, 8px);
     min-width: 220px;
-    top: calc(var(--os-bar-h) + 4px);
-    left: 8px;
-    z-index: 9500;
+    top: calc(var(--os-bar-h) + var(--space-1, 4px));
+    left: var(--space-2, 8px);
+    z-index: var(--z-dropdown);
     display: none;
     flex-direction: column;
-    gap: 2px;
+    gap: var(--space-hair);
     pointer-events: auto;
+    /* Long app registries must scroll, not extend past the viewport. */
+    max-height: calc(100vh - var(--os-bar-h) - 16px);
+    max-height: calc(100dvh - var(--os-bar-h) - env(safe-area-inset-top, 0px) - 16px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
 }
 .os-menu.open { display: flex; }
 .os-menu .os-btn {
     width: 100%;
     text-align: left;
     border-radius: var(--os-radius-sm);
-    padding: 8px 10px;
+    padding: var(--space-2) var(--space-2-5);
     color: var(--os-fg);
     justify-content: flex-start;
 }
 .os-menu .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 
+/* Collapsible "System" apps group inside the apps menu. thebird's os-shell.js
+ * builds the group structurally and toggles only the list's display; the static
+ * layout (column flow + indent + arrow alignment) lives here so no visual rule
+ * leaks back into thebird JS (zero-design-CSS contract). */
+.os-menu-group { display: flex; flex-direction: column; gap: var(--space-hair); }
+.os-menu-system-toggle { display: flex; align-items: center; gap: var(--space-1-75); }
+.os-menu-system-arrow { display: inline-flex; align-items: center; transition: transform 120ms ease; }
+.os-menu-system-arrow .ds-icon { width: 14px; height: 14px; }
+.os-menu-system-list { display: none; flex-direction: column; padding-left: 14px; }
+.os-menu-system-toggle[aria-expanded="true"] + .os-menu-system-list { display: flex; }
+@media (prefers-reduced-motion: reduce) { .os-menu-system-arrow { transition: none; } }
+
 .os-clock {
     color: var(--os-fg-2);
     font-variant-numeric: tabular-nums;
     font-family: var(--os-mono);
-    padding: 0 10px;
-    font-size: 12px;
+    padding: 0 var(--space-2-5);
+    font-size: var(--fs-micro);
 }
 
 .os-task {
     border: none;
     background: var(--os-bg-1);
     color: var(--os-fg-2);
-    border-radius: 999px;
-    padding: 6px 14px;
-    font-size: 12px;
+    border-radius: var(--r-pill, 999px);
+    padding: var(--space-1-75) 14px;
+    font-size: var(--fs-micro);
     font-family: var(--os-font);
     transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
     max-width: 200px;
@@ -143,7 +186,10 @@ html, body {
     text-overflow: ellipsis;
     text-transform: lowercase;
 }
+.os-task { min-height: 28px; }
 .os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
+/* Empty taskbar reads as an intentional strip, not a stray blurred bar. */
+.os-task-empty { font-size: var(--fs-nano); color: var(--os-fg-3); padding: 0 var(--space-2-5); font-family: var(--os-font); }
 .os-task.focused {
     background: var(--panel-select, var(--os-accent-soft));
     color: var(--os-fg);
@@ -151,78 +197,93 @@ html, body {
     box-shadow: inset 4px 0 0 var(--os-accent);
 }
 
-.wm-win {
-    background: var(--os-bg-1) !important;
-    border: none !important;
-    border-radius: var(--r-3, 18px) !important;
-    box-shadow: none !important;
+/* Window-chrome overrides of wm.css.
+ *
+ * wm.css is loaded by the consumer as a SEPARATE raw sheet (it is not part of
+ * the dist bundle), so its load order relative to this file is not guaranteed.
+ * These rules therefore carry the `.ds-247420` scope class: at (0,2,0) they
+ * beat wm.css's bare (0,1,0) `.wm-*` rules on SPECIFICITY, which is order-
+ * independent — replacing the `!important` wall that previously did the same
+ * job by force. Do not un-scope these; the scope IS the override mechanism. */
+.ds-247420 .wm-win {
+    background: var(--os-bg-1);
+    border: none;
+    border-radius: var(--r-3);
+    box-shadow: none;
     overflow: hidden;
 }
-.wm-win.wm-focused {
-    border: none !important;
-    box-shadow: inset 4px 0 0 var(--os-accent) !important;
+.ds-247420 .wm-win.wm-focused {
+    border: none;
+    box-shadow: inset var(--space-1) 0 0 var(--os-accent);
 }
 
-.wm-bar {
-    background: var(--os-bg-2) !important;
-    border: none !important;
-    padding: 8px 12px !important;
-    gap: 10px !important;
+.ds-247420 .wm-bar {
+    background: var(--os-bg-2);
+    border: none;
+    padding: var(--space-2) var(--space-2-75);
+    gap: var(--space-2-5);
 }
-.wm-title {
-    font: 13px var(--os-font) !important;
-    color: var(--os-fg-2) !important;
+.ds-247420 .wm-title {
+    font: var(--fs-tiny) var(--os-font);
+    color: var(--os-fg-2);
     letter-spacing: 0.005em;
     text-align: center;
     font-weight: 600;
     text-transform: lowercase;
 }
-.wm-btns { gap: 6px !important; order: -1; }
-.wm-btn {
-    width: 22px !important;
-    height: 22px !important;
-    border-radius: var(--r-1, 6px) !important;
-    border: none !important;
-    background: var(--os-bg-3) !important;
-    color: var(--os-fg-2) !important;
-    padding: 0 !important;
+.ds-247420 .wm-btns { gap: var(--space-1-75); order: -1; }
+.ds-247420 .wm-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: var(--r-1);
+    border: none;
+    background: var(--os-bg-3);
+    color: var(--os-fg-2);
+    padding: 0;
     cursor: pointer;
-    font: 600 12px var(--os-mono) !important;
-    line-height: 1 !important;
-    display: inline-flex !important;
+    font: 600 var(--fs-micro) var(--os-mono);
+    line-height: 1;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background 100ms ease, color 100ms ease;
 }
-.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)) !important; color: var(--os-fg) !important; }
+.ds-247420 .wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 
-.wm-resize {
-    background: transparent !important;
-    width: 14px !important;
-    height: 14px !important;
+.ds-247420 .wm-resize {
+    background: transparent;
+    width: 14px;
+    height: 14px;
     color: var(--os-fg-3);
     opacity: 0.4;
-    font: 10px var(--os-mono);
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    line-height: 1;
 }
-.wm-resize::after { content: '\25E2'; }
-.wm-body { background: var(--os-bg-1) !important; }
+/* Resize grip via CSS gradient (matches wm.css); no decorative content glyph. */
+.wm-resize::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 8px;
+    height: 8px;
+    background:
+        linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
+        linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
+}
+.ds-247420 .wm-body { background: var(--os-bg-1); }
 
 .os-side-rail {
     position: fixed;
-    left: 0; top: 0; bottom: 0;
-    width: var(--os-rail-w);
+    left: 0; top: var(--os-bar-h); bottom: var(--os-bar-h);
+    padding-left: env(safe-area-inset-left, 0px);
+    width: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px));
     background: var(--os-bg-2);
     border: none;
     display: none;
     flex-direction: column;
     align-items: center;
-    padding: 12px 0;
-    gap: 6px;
-    z-index: 9100;
+    padding: var(--space-2, 8px) 0;
+    gap: var(--space-1, 4px);
+    z-index: var(--z-dock);
     pointer-events: auto;
 }
 .os-rail-btn {
@@ -246,7 +307,7 @@ html, body {
     position: fixed;
     inset: 0;
     background: var(--os-bg-0);
-    z-index: 9700;
+    z-index: var(--z-modal);
     pointer-events: auto;
     display: none;
     flex-direction: column;
@@ -259,13 +320,13 @@ html, body {
 .os-drawer.open { display: flex; opacity: 1; transform: translateY(0); }
 .os-drawer-head {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 16px;
+    padding: var(--space-2, 8px) var(--space-3, 16px);
     border: none;
     height: 56px;
     box-sizing: border-box;
     background: var(--os-bg-2);
 }
-.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
+.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
 .os-drawer-close {
     width: 44px; height: 44px;
     border: none; background: transparent;
@@ -279,20 +340,24 @@ html, body {
 .os-drawer-close .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
 .os-drawer-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-    padding: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(clamp(92px, 24vw, 140px), 1fr));
+    gap: var(--space-3, 16px);
+    padding: var(--space-3, 16px);
     overflow-y: auto;
     flex: 1;
     align-content: start;
+    max-width: 720px;
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
 }
 .os-drawer-tile {
-    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
-    padding: 18px 8px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 8px);
+    padding: var(--space-3, 16px) var(--space-2, 8px);
     background: var(--os-bg-1);
     border: none;
     color: var(--os-fg);
-    font: 13px var(--os-font);
+    font: var(--fs-tiny) var(--os-font);
     min-height: 100px;
     cursor: pointer;
     transition: background 80ms ease;
@@ -307,62 +372,72 @@ html, body {
 .os-drawer-tile .lbl { color: var(--os-fg); font-weight: 600; }
 
 .os-spacer { flex: 1 1 auto; }
-.os-tray { display: flex; align-items: center; gap: 6px; }
-.os-instances { display: flex; gap: 4px; margin-left: 8px; max-width: 280px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 4px; }
+.os-tray { display: flex; align-items: center; gap: var(--space-1-75); }
+.os-instances { display: flex; gap: var(--space-1); margin-left: var(--space-2); flex: 0 1 40vw; max-width: 40vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 var(--space-1); -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); }
 .os-instances::-webkit-scrollbar { height: 4px; }
-.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: 2px 8px; font-family: var(--os-mono); font-size: 11px; }
+.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: var(--space-hair) var(--space-2); font-family: var(--os-mono); font-size: var(--fs-nano); }
 .os-instances .os-btn.active { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); border-color: var(--panel-accent, var(--os-accent)); box-shadow: inset 0 0 0 1px var(--panel-accent, var(--os-accent)); }
 .os-menubar [data-role="home"] { display: none; }
-.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 8000; }
+.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: calc(var(--z-dock) + 2); }
 .os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }
 .os-taskbar { margin-top: auto; }
-.wm-root { top: var(--os-bar-h) !important; bottom: var(--os-bar-h) !important; inset: var(--os-bar-h) 0 var(--os-bar-h) 0 !important; }
-
-.app-pane { padding: 16px 18px; font: 14px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
-.app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
-.app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
-.app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
-.app-pane li { padding: 2px 0; }
-.app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
+/* Desktop default: the window layer sits BETWEEN the menubar and taskbar.
+ * Scoped (0,2,0) to beat wm.css's bare `.wm-root{inset:0}` by specificity
+ * rather than `!important`. The brand "bars overlay" block further below
+ * re-asserts inset:0 for .ds-247420 at equal specificity + later source order. */
+.ds-247420 .wm-root { inset: var(--os-bar-h) 0 var(--os-bar-h) 0; }
+
+.app-pane { padding: var(--space-3, 16px); font: var(--fs-sm, 14px) var(--os-font); color: var(--os-fg); line-height: var(--lh-base, 1.55); overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
+.app-pane h2 { margin: 0 0 var(--space-2, 8px) 0; color: var(--os-fg); font-family: var(--os-display); font-size: var(--fs-xl, 21px); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-snug, 1.2); }
+.app-pane p { margin: 0 0 var(--space-2, 8px) 0; color: var(--os-fg-2); }
+.app-pane ul { padding-left: var(--space-3, 16px); margin: var(--space-1, 4px) 0 var(--space-3, 16px); color: var(--os-fg-2); }
+.app-pane li { padding: var(--space-1, 4px) 0; }
+.app-pane code { font: var(--fs-tiny, 12px) var(--os-mono); background: var(--os-bg-2); padding: 1px var(--space-1-75); border-radius: var(--r-1, 6px); color: var(--os-fg); }
 .app-pane a { color: var(--os-accent); text-decoration: none; }
 .app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
-.app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
-.app-pane.mono { font: 12.5px var(--os-mono); padding: 12px; background: var(--os-bg-1); }
-.app-pane.mono .row { padding: 5px 8px; cursor: pointer; border-radius: var(--r-1, 6px); }
+.app-pane .meta { color: var(--os-fg-3); font-size: var(--fs-tiny, 12px); }
+.app-pane.mono { font: var(--fs-tiny, 12px) var(--os-mono); padding: var(--space-2, 8px); background: var(--os-bg-1); }
+.app-pane.mono[data-component="monitor-app"] { white-space: pre-wrap; line-height: 1.7; }
+.app-pane.mono .row { padding: var(--space-1) var(--space-2); cursor: pointer; border-radius: var(--r-1, 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
-.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
-.app-pane.mono pre { background: var(--os-bg-2); padding: 10px 12px; margin: 8px 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 11.5px var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
-.app-shell-pane { margin: 0; padding: 8px; font: 12px var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
+.app-pane.mono .row.selected { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
+.app-pane.mono .head { color: var(--os-accent); margin-bottom: var(--space-2); padding-bottom: var(--space-2); font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--os-bg-3); }
+.app-pane.mono pre { background: var(--os-bg-2); padding: var(--space-2-5) var(--space-2-75); margin: var(--space-2) 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: var(--fs-nano) var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
+.app-shell-pane { margin: 0; padding: var(--space-2); font: var(--fs-micro) var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
 .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
-.app-canvas.x-display { background: #0b0d10; }
+.app-canvas.x-display { background: #0b0d10; } /* intentional: fake CRT/terminal black screen, not a theme surface */
 .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
 .app-iframe { width: 100%; height: 100%; border: 0; display: block; }
-.app-iframe.web { background: #ffffff; }
-.app-text-cursor { animation: app-cursor-blink 0.5s step-end infinite; }
-@keyframes app-cursor-blink { 50% { opacity: 0; } }
+.app-iframe.web { background: #ffffff; } /* intentional: white canvas for embedded external web content that expects white */
+.app-text-cursor { }
+
+@media (prefers-reduced-motion: no-preference) {
+  .app-text-cursor { animation: app-cursor-blink 0.5s step-end infinite; }
+  @keyframes app-cursor-blink { 50% { opacity: 0; } }
+}
 @media (max-width: 1023px) and (min-width: 768px) {
     .os-side-rail { display: flex; }
-    .wm-root { left: var(--os-rail-w) !important; }
-    .os-menubar { padding-left: calc(var(--os-rail-w) + 8px); }
-    .os-taskbar { padding-left: calc(var(--os-rail-w) + 8px); }
+    .ds-247420 .wm-root { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px)); }
+    .os-menubar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
+    .os-taskbar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
     .os-menubar .os-instances { display: flex; }
-    .os-menu { left: calc(var(--os-rail-w) + 8px); }
+    .os-menu { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
 }
 
 @media (max-width: 767px) {
     :root { --os-bar-h: var(--os-bar-h-mobile); }
     body { overscroll-behavior: none; }
-    .os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 12px; }
+    .os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 var(--space-2-75); }
     .os-menubar [data-role="home"] .ic svg { width: 22px; height: 22px; }
-    .os-menubar { font-size: 14px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
+    .os-menubar { font-size: var(--fs-xs); padding: env(safe-area-inset-top, 0) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
     .os-menubar [data-role="apps"] { display: none; }
-    .os-menubar .os-brand { font-size: 13px; margin-right: 6px; }
+    .os-menubar .os-brand { font-size: var(--fs-tiny); margin-right: var(--space-1-75); }
     .os-menubar [data-role="add"] { display: none; }
     .os-menubar .os-instances { display: none; }
     .os-clock { display: none; }
     .os-taskbar {
-        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
-        gap: 6px;
+        padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0)) max(8px, env(safe-area-inset-left, 0px));
+        gap: var(--space-1-75);
         overflow-x: auto;
         overflow-y: hidden;
         flex-wrap: nowrap;
@@ -376,37 +451,1142 @@ html, body {
         min-width: 120px;
         min-height: 44px;
         max-width: none;
-        padding: 10px 14px;
+        padding: var(--space-2-5) 14px;
         scroll-snap-align: start;
-        font-size: 13px;
+        font-size: var(--fs-tiny);
     }
-    .os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
-    .os-side-rail { display: none !important; }
-    .os-menu { left: 8px; right: 8px; min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + 4px); }
-    .wm-root {
-        top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) !important;
-        bottom: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) !important;
-        inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) 0 calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) 0 !important;
+    .os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset var(--space-1) 0 0 var(--os-accent); }
+    .os-side-rail { display: none; }
+    .os-menu { left: var(--space-2); right: var(--space-2); min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + var(--space-1)); }
+    .ds-247420 .wm-root {
+        inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) 0 calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) 0;
     }
-    .wm-win {
-        position: absolute !important;
-        left: 0 !important; top: 0 !important;
-        width: 100% !important; height: 100% !important;
-        border: none !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
+    /* LOAD-BEARING !important: wm.css's own mobile block declares
+     * `.wm-win{left/top/width/height: ... !important}` (wm.css:157-165). An
+     * !important declaration can only be beaten by another !important one, so
+     * scoping alone cannot win here — these five must keep the flag. The
+     * non-!important properties in this rule do not, and were dropped. */
+    .ds-247420 .wm-win {
+        position: absolute;
+        left: 0 !important;
+        top: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        border: none;
+        /* bare 0, not --r-0 (4px): a full-screen window has square corners.
+         * The radius lint intentionally does not flag unitless zero. */
+        border-radius: 0;
+        box-shadow: none;
     }
-    .wm-bar {
-        padding: 6px 10px !important;
-        height: 36px !important;
-        gap: 6px !important;
-        cursor: default !important;
-        touch-action: pan-y !important;
+    .ds-247420 .wm-bar {
+        padding: var(--space-1-75) var(--space-2-5);
+        height: 36px;
+        gap: var(--space-1-75);
+        cursor: default;
+        touch-action: pan-y;
         pointer-events: none;
     }
-    .wm-bar .wm-title { pointer-events: auto; font-size: 13px !important; }
-    .wm-bar .wm-btns { pointer-events: auto; }
-    .wm-btns .wm-btn:nth-child(1), .wm-btns .wm-btn:nth-child(2) { display: none !important; }
-    .wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: var(--r-1, 6px) !important; background: var(--os-bg-3) !important; color: var(--os-fg) !important; }
-    .wm-resize { display: none !important; }
+    .ds-247420 .wm-bar .wm-title { pointer-events: auto; font-size: var(--fs-tiny); }
+    .ds-247420 .wm-bar .wm-btns { pointer-events: auto; }
+    .ds-247420 .wm-btns .wm-btn:nth-child(1), .ds-247420 .wm-btns .wm-btn:nth-child(2) { display: none; }
+    .ds-247420 .wm-btns .wm-btn:nth-child(3) { width: 44px; height: 44px; border-radius: var(--r-1); background: var(--os-bg-3); color: var(--os-fg); }
+    .ds-247420 .wm-resize, .ds-247420 .wm-edge { display: none; }
+}
+
+/* ---- data-attr theme/accent: deferred to the canonical theme ----
+ * The OS shell no longer redefines surface or accent colors per theme. The
+ * --os-* aliases above consume the canonical semantic tokens (--bg/--fg/
+ * --accent), and colors_and_type.css already drives [data-theme] (paper/ink/
+ * auto, with color-scheme + --danger tuning) and [data-accent] (green/purple/
+ * mascot). Re-declaring the os surface or accent tokens per theme here only
+ * re-introduced drift (ink vs canonical ink; purple vs canonical purple).
+ * Density bar-height is genuinely OS-shell-specific, so it stays;
+ * --os-accent-tint maps to the canonical accent tint. */
+:root { --os-accent-tint: var(--accent-tint); }
+:root[data-density="compact"]     { --os-bar-h: 28px; --os-tile-pad: 6px;  --os-gap: 6px;  }
+:root[data-density="comfortable"] { --os-bar-h: 36px; --os-tile-pad: 10px; --os-gap: 10px; }
+:root[data-density="spacious"]    { --os-bar-h: 44px; --os-tile-pad: 14px; --os-gap: 14px; }
+
+/* ============================================================
+ * thebird brand layer (migrated from thebird's local thebird-brand.css
+ * 2026-05-26). thebird ships ZERO design CSS — every rule below lives here
+ * upstream and is delivered via the published package. Scoped to .ds-247420
+ * (thebird's OS root carries that class). Brand identity: Inter + green accent
+ * + uniform 34px bars + Windows-style right-side window controls.
+ *
+ * NOTE: this no longer globally overrides --paper. A global :root override
+ * silently mutated the base theme for EVERY portfolio consumer (canonical
+ * --paper is #F6F5F1; thebird wanted #F5F0E4). The warm-paper variant is now a
+ * named preset [data-theme="thebird"] a consumer opts into, leaving the base
+ * theme untouched. The [data-theme="thebird"] COLOR preset now lives in the
+ * canonical colors_and_type.css (a first-class swappable theme); only the
+ * OS-shell chrome (bar geometry, typography alias) stays here scoped to
+ * .ds-247420.
+ * ============================================================ */
+.ds-247420 {
+    --ff-ui: var(--ff-body);
+    /* uniform bar height: 22px button + 6px+6px padding = 34px.
+     * LOAD-BEARING !important: `:root[data-density="compact"|"comfortable"|
+     * "spacious"]` (this file, "data-attr theme/accent" block above) redefines
+     * --os-bar-h at (0,2,0) — HIGHER than this rule's (0,1,0) — on the same
+     * <html> element. Without the flag the density presets silently override
+     * the brand's uniform 34px bar geometry. */
+    --os-bar-h: 34px !important;
+    --os-bar-h-mobile: 34px !important;
+    --os-dock-h: 34px !important;
+    /* Brand identity, scoped so it never leaks to other portfolio consumers.
+     * The base theme's auto/paper/ink presets let --accent drift to the bright
+     * --green-2 (#3A9A34) in ink mode; thebird's brand accent is the deep green
+     * #247420 (--green) in EVERY resolved mode, and its paper is the warm
+     * #F5F0E4 variant. Re-assert both here rather than forcing the consumer to
+     * opt into [data-theme="thebird"], which the OS boots past with
+     * data-theme="auto". --accent-bright is pinned too so the ink-mode
+     * --accent: var(--accent-bright, ...) chain still resolves to brand green.
+     * LOAD-BEARING !important: colors_and_type.css defines --accent on
+     * `[data-accent="acid"|"green"|...]` and `[data-theme="ink"]` — attribute
+     * selectors at (0,1,0), the SAME specificity as this `.ds-247420` class
+     * rule, on the same <html> element. colors_and_type.css is always loaded
+     * first, but equal specificity + later source order would still let a
+     * [data-accent] preset win. The flag is the only thing pinning brand green. */
+    --accent: var(--green) !important;
+    --accent-bright: var(--green) !important;
+    --paper: #F5F0E4;
+}
+/* Window titlebar matches the 34px bar height; clamp so menubar/taskbar/titlebar
+ * heights are uniform. */
+.ds-247420 .wm-bar { height: 34px; min-height: 34px; box-sizing: border-box; padding-top: var(--space-1); padding-bottom: var(--space-1); }
+/* Bars overlay windows: .wm-root fills full viewport, menubar/taskbar paint on top.
+ * Tilde key hides them via .bars-hidden on <html>.
+ * Wins over the desktop `.ds-247420 .wm-root{inset:var(--os-bar-h)...}` above by
+ * equal specificity + later source order (both are now (0,2,0)) — no flag needed. */
+.ds-247420 .wm-root { inset: 0; }
+/* With bars overlaying the wm-root, a maximized window's 34px titlebar would
+ * sit exactly under the 34px menubar (untappable) and its body under the
+ * taskbar; keep maximized windows between the bars on desktop/tablet. The
+ * mobile band re-asserts its own contract in the responsive layer below. */
+@media (min-width: 768px) {
+  /* LOAD-BEARING !important: wm.css declares `.wm-win.wm-max{top:0!important;
+   * height:100%!important}` (wm.css:137-143). Only another !important can beat
+   * an !important, regardless of specificity. */
+  .ds-247420 .wm-win.wm-max {
+    top: var(--os-bar-h) !important;
+    height: calc(100% - (var(--os-bar-h) * 2)) !important;
+  }
+}
+/* Instance filtering hides off-instance windows via class, not inline style.
+ * LOAD-BEARING !important: must beat wm.css's `.wm-win.wm-max{...!important}`
+ * geometry and any display set by the window's own state classes — a hidden
+ * window must stay hidden no matter which layout rule matched it. */
+.ds-247420 .wm-win.wm-inst-hidden,
+.wm-win.wm-inst-hidden { display: none !important; }
+/* LOAD-BEARING !important: `.os-menubar`/`.os-taskbar` carry `display:flex`
+ * from rules at equal-or-higher specificity in this sheet and in the responsive
+ * bands below; the tilde-key hide must beat all of them unconditionally. */
+html.bars-hidden .os-menubar,
+html.bars-hidden .os-taskbar { display: none !important; }
+.ds-247420 .os-task { border-radius: var(--r-pill, 999px); }
+.os-brand { font-family: var(--ff-display); font-weight: 700; }
+
+/* thebird windows use Windows/Linux-style right-side controls (upstream theme
+ * sets .wm-btns order:-1 for a macOS look; thebird overrides to natural DOM
+ * order so controls render on the right). */
+.ds-247420 .wm-btns { order: 0; }
+
+/* OS-shell z-index layering: .os-root above .wm-root so its .os-menu dropdowns
+ * paint above windows. */
+.ds-247420 .os-root { z-index: calc(var(--z-dock) + 2); }
+.ds-247420 .os-menubar { z-index: calc(var(--z-dock) + 1); position: relative; }
+.ds-247420 .os-taskbar { z-index: calc(var(--z-dock) + 1); position: relative; }
+.ds-247420 .os-menu { z-index: var(--z-dropdown); }
+.ds-247420 .wm-root { z-index: var(--z-window); }
+.ds-247420 .launcher-dock { z-index: var(--z-dock); }
+
+/* Touch/gesture hardening. */
+html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
+.ds-247420 .os-root, .ds-247420 .wm-root { touch-action: none; }
+.ds-247420 .wm-body { overscroll-behavior: contain; touch-action: auto; }
+.ds-247420 .wm-bar, .ds-247420 .wm-resize { -webkit-touch-callout: none; user-select: none; }
+.ds-247420 .os-menubar, .ds-247420 .os-taskbar, .ds-247420 .launcher-dock { user-select: none; -webkit-user-select: none; }
+
+/* Aero-snap drag preview. */
+.ds-247420 .wm-snap-preview {
+  position: fixed;
+  pointer-events: none;
+  display: none;
+  z-index: calc(var(--z-window) + 1);
+  background: color-mix(in oklab, var(--os-accent) 20%, transparent);
+  border: 2px solid var(--os-accent);
+  border-radius: var(--r-0);
+  /* Animate only geometry, never `all` — `transition: all` animated display/
+   * opacity too, producing a one-frame ghost on show (jank-pass fix). */
+  transition: left 80ms ease, top 80ms ease, width 80ms ease, height 80ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .wm-snap-preview { transition: none; }
+}
+
+/* Alt+Tab window switcher overlay. */
+.ds-247420 .wm-switcher {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: var(--space-3) var(--space-3-5);
+  background: var(--os-bg-2);
+  border: 1px solid var(--os-accent);
+  border-radius: var(--r-0);
+  z-index: var(--z-modal);
+  font-family: var(--ff-ui);
+  color: var(--os-fg);
+  min-width: 280px;
+  box-shadow: var(--shadow-overlay);
+}
+.ds-247420 .wm-switcher-item {
+  padding: var(--space-2) var(--space-2-75);
+  border-radius: var(--r-0);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2-5);
+}
+.ds-247420 .wm-switcher-item.active {
+  background: var(--os-accent);
+  color: var(--paper);
+}
+
+/* freddie-chat font family (upstream still ships Nunito; brand is Inter). */
+.ds-247420 freddie-chat,
+.ds-247420 freddie-chat .chat-bubble,
+.ds-247420 freddie-chat .chat-meta,
+.ds-247420 freddie-chat .chat-head {
+  font-family: var(--ff-ui);
 }
+.ds-247420 freddie-chat .chat-bubble pre,
+.ds-247420 freddie-chat .chat-bubble code {
+  font-family: var(--ff-mono, ui-monospace, Menlo, Consolas, monospace);
+}
+.ds-247420 freddie-chat .chat-head {
+  font-family: var(--ff-display, system-ui, sans-serif);
+  font-weight: 700;
+}
+
+/* Session-switch crossfade. */
+.ds-247420 .wm-win { transition: opacity 140ms ease; }
+.tb-switching .ds-247420 .wm-win { opacity: 0.4; }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .wm-win { transition: none; }
+  .tb-switching .ds-247420 .wm-win { opacity: 1; }
+}
+
+/* ---- Session-UX surfaces: chips + modals + empty state ---- */
+.ds-247420 .os-instances { display: flex; gap: var(--space-1-75); align-items: center; flex: 0 1 auto; min-width: 0; height: var(--os-bar-h, 34px); overflow-x: auto; overflow-y: hidden; padding: 0 var(--space-1); scrollbar-width: none; }
+.ds-247420 .os-instances::-webkit-scrollbar { display: none; }
+
+.ds-247420 .tb-sess-chip {
+  display: inline-flex; align-items: center; gap: var(--space-1-75);
+  height: 22px; padding: 0 var(--space-1-75) 0 var(--space-2);
+  border-radius: var(--r-pill, 999px);
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
+  color: var(--fg);
+  font-family: var(--ff-ui); font-size: var(--fs-nano); font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background 120ms ease, border-color 120ms ease;
+  user-select: none; flex: 0 0 auto;
+}
+.ds-247420 .tb-sess-chip:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); }
+.ds-247420 .tb-sess-chip.active {
+  background: color-mix(in oklab, var(--os-accent) 18%, transparent);
+  border-color: var(--os-accent);
+  color: var(--fg);
+}
+.ds-247420 .tb-sess-chip.active .tb-sess-dot { background: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent) 30%, transparent); }
+.ds-247420 .tb-sess-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 40%, transparent); flex: 0 0 6px; }
+.ds-247420 .tb-sess-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .tb-sess-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 16px; height: 14px; padding: 0 var(--space-1);
+  border-radius: var(--r-0);
+  background: color-mix(in oklab, var(--fg) 14%, transparent);
+  font-size: var(--fs-pico); font-weight: 600; line-height: 1;
+}
+.ds-247420 .tb-sess-chip.active .tb-sess-badge { background: color-mix(in oklab, var(--os-accent) 30%, transparent); }
+.ds-247420 .tb-sess-x {
+  width: 16px; height: 16px; line-height: 14px; text-align: center;
+  border: 0; padding: 0; background: transparent;
+  border-radius: 50%; cursor: pointer; color: inherit;
+  font-size: var(--fs-xs); font-weight: 600;
+  opacity: 0.55; transition: opacity 120ms ease, background 120ms ease;
+}
+.ds-247420 .tb-sess-chip:hover .tb-sess-x { opacity: 1; }
+.ds-247420 .tb-sess-x:hover { background: color-mix(in oklab, var(--danger) 30%, transparent); color: var(--on-color); }
+
+.ds-247420 .tb-sess-add {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  height: 22px; padding: 0 var(--space-2-5);
+  border: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);
+  background: transparent;
+  border-radius: var(--r-pill, 999px);
+  font-family: var(--ff-ui); font-size: var(--fs-nano); font-weight: 500;
+  color: var(--fg);
+  cursor: pointer;
+  margin-left: var(--space-1-75);
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.ds-247420 .tb-sess-add:hover {
+  border-color: var(--os-accent);
+  background: color-mix(in oklab, var(--os-accent) 8%, transparent);
+}
+.ds-247420 .tb-sess-add-plus { font-size: var(--fs-tiny); line-height: 1; }
+.ds-247420 .tb-sess-add-lbl { line-height: 1; }
+
+.tb-sess-overlay {
+  position: fixed; inset: 0; z-index: var(--z-modal);
+  background: var(--scrim);
+  display: flex; align-items: center; justify-content: center;
+  animation: tb-sess-fade 120ms ease;
+}
+@keyframes tb-sess-fade { from { opacity: 0; } to { opacity: 1; } }
+.tb-sess-modal {
+  background: var(--bg);
+  color: var(--fg);
+  border-radius: var(--r-1);
+  box-shadow: var(--shadow-overlay);
+  min-width: 320px; max-width: 480px;
+  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
+  overflow: hidden;
+  font-family: var(--ff-ui);
+}
+.tb-sess-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2-75) var(--space-3); border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.tb-sess-modal-title { font-weight: 600; font-size: var(--fs-xs); }
+.tb-sess-modal-x { background: transparent; border: 0; font-size: var(--fs-xl); line-height: 1; cursor: pointer; color: inherit; padding: 0 var(--space-1); }
+.tb-sess-modal-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
+.tb-sess-modal-lbl { font-size: var(--fs-nano); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
+.tb-sess-modal-input {
+  width: 100%; box-sizing: border-box;
+  height: 32px; padding: 0 var(--space-2-5);
+  border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
+  border-radius: var(--r-0);
+  background: color-mix(in oklab, var(--fg) 6%, var(--bg));
+  color: inherit;
+  font-family: inherit; font-size: var(--fs-tiny);
+}
+.tb-sess-modal-input:focus { outline: none; border-color: var(--os-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--os-accent) 20%, transparent); }
+.tb-sess-modal-hint { font-size: var(--fs-nano); opacity: 0.7; }
+.tb-sess-modal-msg { font-size: var(--fs-tiny); }
+.tb-sess-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2-75) var(--space-3); border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.tb-sess-modal-btn {
+  height: 28px; padding: 0 14px;
+  border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
+  background: transparent; color: inherit;
+  font-family: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.tb-sess-modal-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.tb-sess-modal-btn.primary { background: var(--os-accent); color: var(--on-color); border-color: var(--os-accent); }
+.tb-sess-modal-btn.primary:hover { background: color-mix(in oklab, var(--os-accent) 80%, var(--ink)); }
+.tb-sess-modal-btn.danger { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
+.tb-sess-modal-btn.danger:hover { background: color-mix(in oklab, var(--danger) 80%, var(--ink)); }
+
+.tb-sess-empty {
+  position: fixed; inset: 0; z-index: var(--z-window);
+  display: flex; align-items: center; justify-content: center;
+  pointer-events: none;
+}
+.tb-sess-empty-card {
+  pointer-events: auto;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
+  border-radius: var(--r-2);
+  box-shadow: var(--shadow-3);
+  padding: var(--space-5) 40px; text-align: center;
+  font-family: var(--ff-ui);
+  max-width: 420px;
+}
+.tb-sess-empty-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-1-75); }
+.tb-sess-empty-sub { font-size: var(--fs-tiny); opacity: 0.7; margin-bottom: var(--space-3-5); }
+.tb-sess-empty-cta {
+  height: 40px; padding: 0 var(--space-4);
+  background: var(--os-accent); color: var(--on-color);
+  border: 0; border-radius: var(--r-pill, 999px);
+  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
+  cursor: pointer;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+}
+.tb-sess-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--os-accent) 40%, transparent); }
+
+/* ---- Workspaces app — full-window session manager card grid ---- */
+.ds-247420 .tb-sessions-app { display: flex; flex-direction: column; height: 100%; font-family: var(--ff-ui); color: var(--fg); background: var(--bg); }
+.ds-247420 .tb-sessions-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) 14px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); }
+.ds-247420 .tb-sessions-title { font-weight: 600; font-size: var(--fs-xs); }
+.ds-247420 .tb-sessions-count { font-size: var(--fs-micro); opacity: 0.6; margin-left: var(--space-1); }
+.ds-247420 .tb-sessions-spacer { flex: 1; }
+.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 var(--space-2-75); border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .tb-sessions-btn.primary { background: var(--os-accent); color: var(--on-color); border-color: var(--os-accent); }
+.ds-247420 .tb-sessions-btn.danger { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
+.ds-247420 .tb-sessions-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.ds-247420 .tb-sessions-grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2-75); align-content: start; }
+.ds-247420 .tb-sessions-card { padding: var(--space-2-75); border-radius: var(--r-1, 10px); border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 120ms ease, transform 120ms ease; }
+.ds-247420 .tb-sessions-card:hover { border-color: var(--os-accent); }
+.ds-247420 .tb-sessions-card.active { border-color: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent) 30%, transparent); }
+.ds-247420 .tb-sessions-card-head { display: flex; align-items: center; gap: var(--space-2); }
+.ds-247420 .tb-sessions-card-check { width: 14px; height: 14px; cursor: pointer; flex: 0 0 14px; }
+.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: var(--fs-tiny); flex: 1; outline: none; padding: var(--space-hair) var(--space-1); border-radius: var(--r-0); }
+.ds-247420 .tb-sessions-card-name[contenteditable="true"] { background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .tb-sessions-card-id { font-family: var(--os-mono, monospace); font-size: var(--fs-pico); opacity: 0.5; }
+.ds-247420 .tb-sessions-card-stats { font-size: var(--fs-nano); opacity: 0.7; display: flex; gap: var(--space-2-75); }
+.ds-247420 .tb-sessions-card-actions { display: flex; gap: var(--space-1-75); margin-top: var(--space-1); }
+.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: var(--fs-nano); padding: 0 var(--space-2); border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
+.ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: var(--fs-tiny); }
+
+/* ---- prefers-contrast: more — strengthen borders + focus so the translucent
+   chrome stays legible under forced/high-contrast user settings. ---- */
+@media (prefers-contrast: more) {
+  .ds-247420 .wm-win { border-color: var(--fg); }
+  .ds-247420 .wm-bar { border-bottom: 1px solid var(--fg); }
+  .ds-247420 .os-menubar,
+  .ds-247420 .os-taskbar { border-color: var(--fg); }
+  .ds-247420 .tb-sess-chip,
+  .ds-247420 .tb-sessions-card,
+  .ds-247420 .tb-sessions-btn { border-color: var(--fg); }
+  .ds-247420 :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
+}
+
+/* ---- print: a web-OS desktop has no meaningful print form. Suppress the
+   live chrome so a Ctrl+P does not waste pages on translucent panels. ---- */
+/* LOAD-BEARING !important throughout this block. Print must defeat two things
+ * no selector can outrank: (1) wm.css's `.wm-win.wm-max{left/top/width/height
+ * !important}` and its mobile `.wm-win{...!important}` band, and (2) the
+ * INLINE styles createWM()/renderWindow() write directly onto .wm-win/.wm-canvas
+ * for drag, resize and pan (element style attribute beats every stylesheet
+ * rule). Flattening the desktop to static flow for print is only possible by
+ * force. Do not remove. */
+@media print {
+  .os-menubar, .os-taskbar, .wm-snap-preview,
+  .tb-sess-overlay, .tb-switching, .wm-switcher { display: none !important; }
+  .wm-root, .wm-canvas { position: static !important; transform: none !important; overflow: visible !important; }
+  .wm-win { position: static !important; box-shadow: none !important; border: 1px solid var(--fg) !important; page-break-inside: avoid; margin: 0 0 var(--space-2-75); width: auto !important; height: auto !important; }
+  .wm-win.wm-min { display: none !important; }
+}
+
+/* ============================================================================
+ *  Relocated from thebird (2026-05-30) — moves design CSS out of docs/*.js
+ *  modules to enforce the zero-design-CSS-in-thebird rule.
+ *  Source files: docs/chat-config.js, docs/fsbrowse-app.js, docs/wm.js,
+ *  docs/apps.js (todo-app), docs/freddie-keys.js.
+ * ============================================================================ */
+
+/* ---- chat-config strip (was: docs/chat-config.js ensureStyles) ---- */
+.ds-247420 .wm-body:has(> .freddie-chat-wrap) { display: flex; flex-direction: column; padding: 0; }
+.ds-247420 .freddie-chat-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
+.ds-247420 .freddie-chat-wrap > freddie-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.ds-247420 .cc-strip { flex: 0 0 auto; font-size: var(--fs-micro); border-bottom: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); }
+.ds-247420 .cc-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: .35em .7em; color: var(--fg, inherit); opacity: .75; }
+.ds-247420 .cc-toggle:hover { opacity: 1; }
+.ds-247420 .cc-toggle.cc-open { opacity: 1; font-weight: 600; }
+.ds-247420 .cc-body { padding: .5em .7em .7em; display: flex; flex-direction: column; gap: .5em; max-height: 42vh; max-height: 42dvh; overflow: auto; }
+.ds-247420 .cc-body[hidden] { display: none; }
+.ds-247420 .cc-row { display: flex; gap: .6em; flex-wrap: wrap; }
+.ds-247420 .cc-row > .cc-field { flex: 1 1 140px; min-width: 0; }
+.ds-247420 .cc-field { display: flex; flex-direction: column; gap: .2em; }
+.ds-247420 .cc-field-label { font-size: var(--fs-nano); opacity: .65; text-transform: lowercase; }
+.ds-247420 .cc-strip select,
+.ds-247420 .cc-strip input { font: inherit; font-size: var(--fs-micro); padding: .3em .4em; width: 100%; box-sizing: border-box; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); }
+.ds-247420 .cc-acp-mode-wrap { display: flex; align-items: center; gap: .4em; }
+.ds-247420 .cc-acp-mode-wrap select { flex: 1; }
+.ds-247420 .cc-acp-status { opacity: .5; font-size: var(--fs-tiny); }
+.ds-247420 .cc-acp-status.cc-reachable { opacity: 1; color: var(--os-accent, #247420); }
+.ds-247420 .cc-details > summary { cursor: pointer; opacity: .7; padding: .2em 0; }
+.ds-247420 .cc-skills,
+.ds-247420 .cc-plugins { display: flex; flex-wrap: wrap; gap: .3em .8em; padding: .3em 0; }
+.ds-247420 .cc-check { display: inline-flex; align-items: center; gap: .3em; cursor: pointer; }
+.ds-247420 .cc-check input { width: auto; }
+.ds-247420 .cc-empty { opacity: .5; font-style: italic; }
+
+/* ---- fsbrowse files app (was: docs/fsbrowse-app.js ensureStyles) ---- */
+.ds-247420 .fsb-root { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; font-size: var(--fs-tiny); color: var(--fg, inherit); }
+.ds-247420 .fsb-bar { flex: 0 0 auto; display: flex; align-items: center; gap: .4em; padding: .45em .6em; border-bottom: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); flex-wrap: wrap; }
+.ds-247420 .fsb-crumbs { flex: 1; display: flex; align-items: center; gap: .2em; min-width: 0; overflow: auto; white-space: nowrap; }
+.ds-247420 .fsb-crumb { cursor: pointer; opacity: .75; text-decoration: none; color: inherit; }
+.ds-247420 .fsb-crumb:hover { opacity: 1; text-decoration: underline; }
+.ds-247420 .fsb-crumb-sep { opacity: .4; }
+.ds-247420 .fsb-btn { all: unset; cursor: pointer; padding: .3em .55em; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); opacity: .85; }
+.ds-247420 .fsb-btn:hover { opacity: 1; background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .fsb-list { flex: 1; min-height: 0; overflow: auto; padding: .3em 0; }
+.ds-247420 .fsb-row { display: flex; align-items: center; gap: .6em; padding: .35em .7em; cursor: pointer; border: 0; }
+.ds-247420 .fsb-row:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .fsb-row:focus-visible { outline: 2px solid var(--os-accent); outline-offset: -2px; background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .fsb-icon { width: 1.3em; text-align: center; flex: 0 0 auto; }
+.ds-247420 .fsb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .fsb-size { opacity: .55; font-size: var(--fs-nano); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
+.ds-247420 .fsb-actions { display: flex; gap: .3em; flex: 0 0 auto; opacity: 0; }
+/* Reveal row actions on hover OR keyboard focus-within OR coarse-pointer (touch),
+ * so they aren't hover-only dead controls for keyboard/touch users. */
+.ds-247420 .fsb-row:hover .fsb-actions,
+.ds-247420 .fsb-row:focus-within .fsb-actions { opacity: 1; }
+@media (hover: none) { .ds-247420 .fsb-actions { opacity: 1; } }
+.ds-247420 .fsb-act { all: unset; cursor: pointer; padding: .1em .35em; border-radius: var(--r-0); opacity: .7; font-size: var(--fs-micro); }
+.ds-247420 .fsb-act:hover { opacity: 1; background: color-mix(in oklab, var(--fg) 12%, transparent); }
+.ds-247420 .fsb-empty { opacity: .5; padding: 1.5em; text-align: center; font-style: italic; }
+.ds-247420 .fsb-view { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: .7em; white-space: pre-wrap; word-break: break-word; font: var(--fs-micro)/1.5 var(--os-mono, ui-monospace, monospace); background: var(--panel-1, transparent); }
+.ds-247420 .fsb-dropping { outline: 2px dashed var(--os-accent, #247420); outline-offset: -6px; }
+
+/* ---- wm canvas (infinite zoom/pan surface — was: docs/desktop-camera.js canvas.style.cssText) ----
+ * .wm-root is the fixed clipping viewport; .wm-canvas is the inner transformed
+ * layer that carries translate()/scale() updates per camera tick. Compositor-
+ * promoted via will-change:transform so per-frame pan/zoom does GPU-only work. */
+.ds-247420 .wm-canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
+
+/* ---- wm context menu (was: docs/wm.js showWindowMenu cssText) ---- */
+/* No var() fallbacks here: colors_and_type.css is guaranteed loaded first for
+ * every .ds-247420 consumer (see the file header), and the old `#1a1a1a` /
+ * `#fff` fallbacks were baked DARK values that would have rendered white text
+ * on a near-white panel in paper mode had they ever fired. */
+.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); z-index: var(--z-dropdown); font-family: var(--ff-ui); color: var(--fg); min-width: 140px; box-shadow: 0 var(--space-2) var(--space-5) rgba(0, 0, 0, .35); padding: var(--space-1); }
+.ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px var(--space-2-5); border: none; border-radius: var(--r-0); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: var(--fs-tiny); }
+.ds-247420 .wm-context-menu-item:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
+
+/* ---- todo app (was: docs/apps.js todo-app cssText) ---- */
+.ds-247420 .tb-todo-bar { display: flex; gap: var(--space-1-75); margin-bottom: var(--space-2); }
+.ds-247420 .tb-todo-input { flex: 1; padding: var(--space-1-5) var(--space-2); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); font: inherit; background: var(--panel-1, transparent); color: var(--fg, inherit); }
+.ds-247420 .tb-todo-list { list-style: none; padding: 0; margin: var(--space-1-75) 0; }
+.ds-247420 .tb-todo-footer { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1-75); font-size: var(--fs-nano); }
+.ds-247420 .tb-todo-status { margin-top: var(--space-2-5); font-size: var(--fs-nano); color: color-mix(in oklab, var(--fg) 55%, transparent); padding: var(--space-1-75) var(--space-2); background: var(--panel-1, transparent); border-radius: var(--r-0); min-height: 14px; }
+.ds-247420 .tb-todo-item { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1-5) var(--space-1-75); border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .tb-todo-text { flex: 1; }
+.ds-247420 .tb-todo-text.is-done { text-decoration: line-through; color: color-mix(in oklab, var(--fg) 45%, transparent); }
+.ds-247420 .tb-todo-del { padding: var(--space-hair) var(--space-2); }
+
+/* ---- freddie keys panel (was: docs/freddie-keys.js cssText) ---- */
+.ds-247420 .fk-root { padding: var(--space-2-75); overflow: auto; height: 100%; font-family: var(--os-mono, monospace); font-size: var(--fs-micro); }
+.ds-247420 .fk-status { margin-top: var(--space-2); color: color-mix(in oklab, var(--fg) 60%, transparent); min-height: 1.2em; }
+.ds-247420 .fk-row { display: grid; grid-template-columns: 140px 1fr auto auto; gap: var(--space-1-75); align-items: center; margin: var(--space-hair) 0; }
+.ds-247420 .fk-input { font-family: var(--os-mono, monospace); font-size: var(--fs-nano); padding: var(--space-hair) var(--space-1); }
+.ds-247420 .fk-title { font-weight: 600; margin-bottom: var(--space-2); }
+.ds-247420 .fk-nim-wrap { display: flex; gap: var(--space-1-75); align-items: center; margin: var(--space-1) 0 var(--space-2-5) 0; }
+.ds-247420 .fk-nim-in { font-family: var(--os-mono, monospace); font-size: var(--fs-nano); padding: var(--space-hair) var(--space-1); flex: 1; }
+.ds-247420 .fk-badge { font-size: var(--fs-pico); padding: var(--space-hair) var(--space-1-75); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-hair); color: var(--os-accent, #247420); }
+.ds-247420 .fk-agent-title,
+.ds-247420 .fk-host-title { margin-top: 14px; font-size: var(--fs-nano); color: color-mix(in oklab, var(--fg) 60%, transparent); }
+.ds-247420 .fk-summary { font-size: var(--fs-pico); color: color-mix(in oklab, var(--fg) 60%, transparent); margin: var(--space-1-75) 0; }
+
+/* ============================================================================
+ *  Freddie chat redesign (2026-05-30) — extends ds-chat / freddie-chat with
+ *  agent-loop chrome: tool-call cards, thinking indicator, system/centered
+ *  roles, suggestion chips on empty state, cancel-while-generating button.
+ *  Drives the {role: 'tool'|'system'|'thinking'} + parts:[{kind:'tool'|...}]
+ *  shape that freddie's agent machine now produces.
+ * ============================================================================ */
+
+/* Centered chrome for system/tool/thinking — full row, no avatar column. */
+.ds-247420 .chat-msg.centered { grid-template-columns: 1fr; padding: var(--space-1) 12%; }
+.ds-247420 .chat-msg.centered .chat-stack { align-items: center; }
+.ds-247420 .chat-msg.system .chat-bubble { background: transparent; border: 0; font-style: italic; opacity: 0.65; font-size: var(--fs-micro); padding: var(--space-1) var(--space-2); text-align: center; max-width: 100%; }
+
+/* Tool-call card — collapsible details with status icon + name + label. */
+.ds-247420 .chat-tool { display: block; background: var(--panel-1, color-mix(in oklab, var(--fg) 4%, transparent)); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); padding: 0; max-width: min(640px, 92%); overflow: hidden; font-size: var(--fs-micro); }
+.ds-247420 .chat-tool[open] { background: var(--panel-1, color-mix(in oklab, var(--fg) 6%, transparent)); }
+.ds-247420 .chat-tool.tool-error { border-color: color-mix(in oklab, var(--danger, #c0392b) 60%, transparent); }
+.ds-247420 .chat-tool.tool-done { border-color: color-mix(in oklab, var(--os-accent, #247420) 35%, transparent); }
+.ds-247420 .chat-tool-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-75) var(--space-2-5); cursor: pointer; list-style: none; user-select: none; }
+.ds-247420 .chat-tool-head::-webkit-details-marker { display: none; }
+.ds-247420 .chat-tool-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-family: var(--os-mono, monospace); font-size: var(--fs-micro); opacity: 0.7; }
+.ds-247420 .chat-tool.tool-error .chat-tool-icon { color: var(--danger, #c0392b); opacity: 1; }
+.ds-247420 .chat-tool.tool-done .chat-tool-icon { color: var(--os-accent, #247420); opacity: 1; }
+.ds-247420 .chat-tool.tool-running .chat-tool-icon { animation: chat-spin 1.4s linear infinite; }
+@keyframes chat-spin { to { transform: rotate(360deg); } }
+.ds-247420 .chat-tool-name { font-family: var(--os-mono, monospace); font-weight: 600; font-size: var(--fs-micro); }
+.ds-247420 .chat-tool-label { opacity: 0.7; font-size: var(--fs-nano); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .chat-tool-status { font-size: var(--fs-pico); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.05em; margin-left: auto; }
+.ds-247420 .chat-tool-body { padding: var(--space-1) var(--space-2-5) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-half); }
+.ds-247420 .chat-tool-section-label { font-size: var(--fs-pico); opacity: 0.5; text-transform: lowercase; letter-spacing: 0.05em; }
+.ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-1-75) var(--space-2); background: color-mix(in oklab, var(--fg) 4%, transparent); border-radius: var(--r-0); max-height: 200px; overflow: auto; font: var(--fs-nano)/1.45 var(--os-mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
+.ds-247420 .chat-tool-pre.is-error { color: var(--danger, #c0392b); }
+
+/* Thinking indicator — typing dots + label, transient (assistant-side). */
+.ds-247420 .chat-thinking { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 0; padding: var(--space-1) var(--space-2); opacity: 0.7; font-size: var(--fs-micro); }
+.ds-247420 .chat-thinking-dots { display: inline-flex; gap: var(--space-half); }
+.ds-247420 .chat-thinking-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--fg); opacity: 0.4; animation: chat-thinking-bounce 1.2s infinite ease-in-out; }
+.ds-247420 .chat-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
+.ds-247420 .chat-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes chat-thinking-bounce { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .chat-thinking-dots span { animation: none; opacity: 0.7; }
+  .ds-247420 .chat-tool.tool-running .chat-tool-icon { animation: none; }
+}
+
+/* Empty-state suggestion chips — clickable prompts. */
+.ds-247420 .chat-empty-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-1-75); justify-content: center; margin-top: var(--space-2-75); max-width: 480px; }
+.ds-247420 .chat-empty-suggestion { all: unset; cursor: pointer; font-size: var(--fs-micro); padding: var(--space-1-75) var(--space-2-5); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-pill, 999px); background: var(--panel-1, transparent); transition: background 120ms ease, border-color 120ms ease; }
+.ds-247420 .chat-empty-suggestion:hover { background: color-mix(in oklab, var(--os-accent, #247420) 10%, transparent); border-color: var(--os-accent, #247420); }
+.ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 2px; }
+
+/* Cancel-while-generating button replaces send. */
+.ds-247420 .chat-composer .send.cancel { background: var(--danger); color: var(--on-color); }
+.ds-247420 .chat-composer .send.cancel:hover { background: color-mix(in oklab, var(--danger, #c0392b) 80%, black); }
+
+/* ============================================================================
+ *  Jank pass 2 (2026-05-30) — outer-layer scroll containment + iframe gesture
+ *  blocking + backdrop blur. Compositor-promotion on .wm-win drag/resize was
+ *  already addressed in pass 1 (commit 7e057b6); these are the rules pass 1
+ *  did not surface.
+ * ============================================================================ */
+
+/* Scroll containment on the desktop frame too — pass 1 only set
+ * overscroll-behavior on .wm-body. Touch-trackpad two-finger pan over the
+ * desktop could leak to document.body in some Chromium versions, briefly
+ * rubber-banding the page while the camera also panned. */
+.ds-247420 .wm-root,
+.ds-247420 .wm-canvas { overscroll-behavior: contain; }
+
+/* Block iframe pointer-events while a wm window is being dragged/resized so
+ * mid-gesture cursor crossings into an iframe child don't swallow the drag
+ * (the iframe captures pointerover and the outer wm pointermove stops firing).
+ * .wm-dragging / .wm-resizing classes are toggled by docs/wm.js for gesture
+ * duration only. */
+.ds-247420 .wm-dragging iframe,
+.ds-247420 .wm-resizing iframe,
+.ds-247420 body:has(.wm-win.wm-dragging) iframe,
+.ds-247420 body:has(.wm-win.wm-resizing) iframe { pointer-events: none; }
+
+/* Subtle backdrop blur behind modal overlays — depth cue without compounding
+ * paint cost since the blur layer is GPU-composited. Respect reduced-motion
+ * by falling back to plain dim. */
+.ds-247420 .tb-sess-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .tb-sess-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+
+/* -----------------------------------------------------------------------
+ *  Freddie chat — jank pass 3 (2026-05-31)
+ *  Pins layout, spacing, focus, scrollbar, role-distinct bubbles, focus ring,
+ *  overflow-wrap, empty-state typography, composer chrome, suggestion list.
+ *  Visual code lives in this kit; thebird only wires state.
+ * ----------------------------------------------------------------------- */
+
+.ds-247420 freddie-chat,
+.ds-247420 ds-chat,
+.ds-247420 freddie-chat.chat,
+.ds-247420 ds-chat.chat {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  /* zero the legacy `.chat` card treatment (app-shell.css chat-polish.css,
+     which the bundle scopes to `.ds-247420 .chat` = (0,2,0)) leaking onto the
+     host element, which also carries the `.chat` class. The
+     `freddie-chat.chat` / `ds-chat.chat` compound selectors here are (0,2,1) —
+     strictly higher — so these win on SPECIFICITY alone, independent of which
+     sheet loads first. That is why no !important is needed. */
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  max-width: none;
+  background: transparent;
+  border-radius: 0;
+}
+.ds-247420 freddie-chat > .chat,
+.ds-247420 ds-chat > .chat {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+}
+
+.ds-247420 .chat-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2-75);
+  border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  min-height: 38px;
+  flex: 0 0 auto;
+  background: var(--panel-0, transparent);
+}
+.ds-247420 .chat-head .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--os-accent, #247420);
+  flex-shrink: 0;
+}
+.ds-247420 .chat-head .ds-chat-title {
+  font-size: var(--fs-tiny);
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+.ds-247420 .chat-head .sub {
+  font-size: var(--fs-micro);
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.ds-247420 .chat-head .spread { flex: 0; }
+
+.ds-247420 .chat-thread {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-2-75);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-75);
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--fg) 22%, transparent) transparent;
+  scroll-behavior: smooth;
+  overscroll-behavior: contain;
+}
+.ds-247420 .chat-thread::-webkit-scrollbar { width: 8px; }
+.ds-247420 .chat-thread::-webkit-scrollbar-track { background: transparent; }
+.ds-247420 .chat-thread::-webkit-scrollbar-thumb {
+  background: color-mix(in oklab, var(--fg) 18%, transparent);
+  border-radius: var(--r-0);
+}
+.ds-247420 .chat-thread::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklab, var(--fg) 30%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .chat-thread { scroll-behavior: auto; }
+}
+
+.ds-247420 .chat-msg {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: var(--space-2);
+  align-items: start;
+}
+.ds-247420 .chat-msg.you {
+  grid-template-columns: 1fr 28px;
+  justify-items: end;
+}
+.ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
+.ds-247420 .chat-msg.centered {
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: var(--space-hair) 12%;
+}
+
+.ds-247420 .chat-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: color-mix(in oklab, var(--os-accent, #247420) 18%, transparent);
+  color: var(--fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-micro);
+  font-weight: 600;
+  text-transform: lowercase;
+  flex-shrink: 0;
+  user-select: none;
+}
+.ds-247420 .chat-msg.you .chat-avatar {
+  background: var(--os-accent, #247420);
+  color: var(--on-color);
+}
+
+.ds-247420 .chat-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-half);
+  min-width: 0;
+  align-items: flex-start;
+}
+
+.ds-247420 .chat-bubble {
+  background: var(--panel-1, color-mix(in oklab, var(--fg) 5%, transparent));
+  color: var(--fg);
+  border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
+  border-radius: var(--r-1);
+  padding: var(--space-2) var(--space-2-75);
+  font-size: var(--fs-xs);
+  line-height: 1.5;
+  max-width: min(720px, 86%);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.ds-247420 .chat-msg.you .chat-bubble {
+  background: var(--os-accent, #247420);
+  color: var(--on-color);
+  border-color: color-mix(in oklab, var(--os-accent, #247420) 60%, black);
+  border-bottom-right-radius: 4px;
+}
+.ds-247420 .chat-msg.them .chat-bubble {
+  border-bottom-left-radius: 4px;
+}
+.ds-247420 .chat-bubble + .chat-bubble { margin-top: var(--space-1); }
+.ds-247420 .chat-bubble pre,
+.ds-247420 .chat-bubble code { font-family: var(--os-mono, ui-monospace, monospace); font-size: var(--fs-micro); }
+.ds-247420 .chat-bubble pre {
+  margin: var(--space-1-75) 0 0;
+  padding: var(--space-2) var(--space-2-5);
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
+  border-radius: var(--r-0);
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre;
+  scrollbar-width: thin;
+}
+.ds-247420 .chat-msg.you .chat-bubble pre {
+  background: color-mix(in oklab, black 25%, transparent);
+  color: var(--on-color);
+}
+.ds-247420 .chat-bubble a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  overflow-wrap: anywhere;
+}
+
+.ds-247420 .chat-meta {
+  font-size: var(--fs-nano);
+  opacity: 0.55;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-75);
+  padding: 0 var(--space-1);
+}
+.ds-247420 .chat-msg.you .chat-meta { flex-direction: row-reverse; }
+
+.ds-247420 .chat-empty {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-5) var(--space-4);
+  color: var(--fg);
+  gap: var(--space-1);
+}
+.ds-247420 .chat-empty-title {
+  font-size: var(--fs-lg);
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+.ds-247420 .chat-empty-sub {
+  font-size: var(--fs-tiny);
+  opacity: 0.65;
+  margin: 0;
+  max-width: 420px;
+  line-height: 1.5;
+}
+
+.ds-247420 .chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-75);
+  padding: var(--space-2) var(--space-2-5);
+  border-top: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  background: var(--panel-0, transparent);
+  flex: 0 0 auto;
+}
+.ds-247420 .chat-composer textarea {
+  font: var(--fs-xs)/1.45 var(--os-ui, system-ui), sans-serif;
+  background: var(--panel-1, color-mix(in oklab, var(--fg) 5%, transparent));
+  color: var(--fg);
+  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
+  border-radius: var(--r-0);
+  padding: var(--space-2) var(--space-2-5);
+  resize: none;
+  outline: none;
+  width: 100%;
+  min-height: 40px;
+  max-height: 200px;
+  box-sizing: border-box;
+  transition: border-color 120ms ease;
+}
+.ds-247420 .chat-composer textarea:hover {
+  border-color: color-mix(in oklab, var(--fg) 22%, transparent);
+}
+.ds-247420 .chat-composer textarea:focus-visible {
+  outline: 2px solid var(--os-accent, #247420);
+  outline-offset: 0;
+  border-color: color-mix(in oklab, var(--os-accent, #247420) 60%, transparent);
+}
+.ds-247420 .chat-composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.ds-247420 .composer-btn {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--r-0);
+  color: var(--fg);
+  opacity: 0.65;
+  transition: background-color 120ms ease, opacity 120ms ease;
+}
+.ds-247420 .composer-btn:hover {
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
+  opacity: 1;
+}
+.ds-247420 .composer-btn:focus-visible {
+  outline: 2px solid var(--os-accent, #247420);
+  outline-offset: 2px;
+  opacity: 1;
+}
+.ds-247420 .chat-composer .send {
+  all: unset;
+  cursor: pointer;
+  margin-left: auto;
+  width: 36px;
+  height: 32px;
+  border-radius: var(--r-0);
+  background: var(--os-accent, #247420);
+  color: var(--on-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 120ms ease, transform 60ms ease;
+}
+.ds-247420 .chat-composer .send:hover {
+  background: color-mix(in oklab, var(--os-accent, #247420) 88%, black);
+}
+.ds-247420 .chat-composer .send:active { transform: scale(0.96); }
+.ds-247420 .chat-composer .send:focus-visible {
+  outline: 2px solid var(--os-accent, #247420);
+  outline-offset: 2px;
+}
+.ds-247420 .chat-composer .send:disabled,
+.ds-247420 .chat-composer .send[disabled] {
+  opacity: 0.35;
+  cursor: not-allowed;
+  background: color-mix(in oklab, var(--fg) 25%, transparent);
+}
+.ds-247420 .chat-composer.is-disabled {
+  opacity: .55;
+  pointer-events: none;
+}
+
+.ds-247420 .ds-icon { --ds-icon-stroke: 1.7; }
+
+.ds-247420 .aicat-face {
+  font-family: var(--os-mono, ui-monospace, monospace);
+  font-size: var(--fs-nano);
+  line-height: 1.2;
+  margin: 0;
+}
+
+/* gm memory browser — recall hits rendered as interactive, prunable cards
+   (thebird's gm app, docs/apps.js recall panel). */
+.ds-247420 .gm-recall-hits {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-75);
+  margin: var(--space-2) 0;
+}
+.ds-247420 .gm-recall-hit {
+  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
+  border-radius: var(--r-0);
+  padding: var(--space-2) var(--space-2-5);
+  background: color-mix(in oklab, var(--bg) 92%, var(--fg) 2%);
+}
+.ds-247420 .gm-recall-hit.is-pruned {
+  opacity: 0.45;
+  text-decoration: line-through;
+}
+.ds-247420 .gm-recall-meta {
+  font-family: var(--os-mono, ui-monospace, monospace);
+  font-size: var(--fs-nano);
+  color: color-mix(in oklab, var(--fg) 60%, transparent);
+  margin-bottom: var(--space-1);
+}
+.ds-247420 .gm-recall-text {
+  font-size: var(--fs-tiny);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.ds-247420 .gm-recall-acts {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--space-1-75);
+}
+.ds-247420 .gm-recall-forget {
+  font-size: var(--fs-nano);
+  padding: var(--space-hair) var(--space-2);
+}
+
+/* ============================================================
+ * thebird RESPONSIVE PERFECTION layer (desk / tablet / mobile).
+ * Appended LAST so the .ds-247420-scoped rules here win by SOURCE ORDER at
+ * equal (0,2,0) specificity over the earlier brand overrides
+ * (.ds-247420 .wm-root{inset:0} at the "bars overlay" block,
+ * .ds-247420 .wm-bar{height:34px}, the unconditional
+ * .ds-247420 .os-instances{display:flex}) that were silently defeating the
+ * @media(max-width:767px)/(768-1023px) contracts. Every rule below is a
+ * measured fix for a confirmed responsive-audit finding.
+ *
+ * Because every competing rule is now equally scoped, source order alone
+ * decides — so this layer needs no !important except where it must beat
+ * wm.css's own !important declarations or wm.js's inline styles.
+ *
+ * View classes: desktop >1023px (free-float windows, full menubar);
+ * tablet 768..1023px (side-rail, wm-root left-offset); mobile <=767px AND
+ * short landscape phones (full-screen windows, collapsed menubar, bottom
+ * scroll-snap taskbar). Touch sizing is driven by (pointer:coarse) so it
+ * also covers the landscape-phone band that width-only queries miss.
+ * ============================================================ */
+
+/* --- mobile bar height: the kit intends a touch-friendly 52px; the brand
+ * layer pinned --os-bar-h-mobile to 34px which left no room for 44px tap
+ * targets in the bar. Restore 52px on mobile/touch. --- */
+@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
+  /* LOAD-BEARING !important: same reason as the brand block's --os-bar-h —
+   * `:root[data-density="…"]` redefines --os-bar-h at (0,2,0), higher than
+   * this (0,1,0) class rule on the same <html> element. */
+  .ds-247420 { --os-bar-h-mobile: 52px !important; --os-bar-h: 52px !important; }
+}
+
+/* --- mobile + landscape-phone full-screen windows. The earlier
+ * .ds-247420 .wm-root{inset:0!important} forced windows over the bars so the
+ * titlebar close button landed under the menubar (occluded, untappable) and
+ * window content underlapped the taskbar. Re-assert the bar-inset at scoped
+ * specificity so windows sit BETWEEN the bars. --- */
+@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
+  .ds-247420 .wm-root {
+    inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0px)) 0
+           calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0px)) 0;
+  }
+  /* LOAD-BEARING !important on the geometry four: wm.css's mobile band
+   * (wm.css:157-165) declares left/top/width/height with !important, and
+   * wm.js writes left/top/width/height as INLINE styles during drag/resize.
+   * Neither can be beaten by specificity — only by !important. The remaining
+   * properties here need no flag. */
+  .ds-247420 .wm-win {
+    position: absolute;
+    left: 0 !important; top: 0 !important;
+    width: 100% !important; height: 100% !important;
+    border: none;
+    /* bare 0: full-screen window has square corners (not --r-0's 4px) */
+    border-radius: 0;
+    box-shadow: none;
+  }
+  /* titlebar must host a 44px close button -> 44px bar (beats the 34px brand
+   * clamp by later source order at equal specificity) */
+  .ds-247420 .wm-bar {
+    height: 44px; min-height: 44px;
+    padding: 0 var(--space-2-5); align-items: center;
+    pointer-events: none;
+  }
+  .ds-247420 .wm-bar .wm-title { pointer-events: auto; }
+  .ds-247420 .wm-bar .wm-btns { pointer-events: auto; }
+  /* hide min+max on mobile full-screen; keep close at 44x44 fully inside the bar */
+  .ds-247420 .wm-btns .wm-btn:nth-child(1),
+  .ds-247420 .wm-btns .wm-btn:nth-child(2) { display: none; }
+  /* LOAD-BEARING !important on width/height: wm.css's `@media (pointer:coarse)`
+   * sets `.wm-btn{min-width:44px;min-height:44px}` and this must also beat the
+   * (0,3,0) `.ds-247420 .wm-btns .wm-btn` coarse-pointer rule below, which is
+   * later in source order. Colors/radius need no flag. */
+  .ds-247420 .wm-btns .wm-btn:nth-child(3) {
+    width: 44px !important; height: 44px !important;
+    border-radius: var(--r-1);
+    background: var(--os-bg-3); color: var(--os-fg);
+  }
+  .ds-247420 .wm-resize, .ds-247420 .wm-edge { display: none; }
+  /* collapse the menubar workspace cluster on mobile. `.os-menubar
+   * .os-instances` is (0,3,0) here, beating the unconditional (0,2,0)
+   * `.ds-247420 .os-instances{display:flex}` on specificity. */
+  .ds-247420 .os-menubar .os-instances,
+  .ds-247420 .os-instances { display: none; }
+  .ds-247420 .os-menubar [data-role="add"],
+  .ds-247420 .tb-sess-add { display: none; }
+}
+
+/* --- landscape-phone (short + wide + touch): also hide the side-rail that the
+ * 768-1023 tablet band would otherwise show, and force the mobile menubar. --- */
+@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
+  .ds-247420 .os-side-rail { display: none; }
+}
+
+/* --- tablet (768..1023): the side-rail offset for .wm-root was defeated by
+ * the scoped inset:0; re-asserted here at equal (0,2,0) specificity but later
+ * source order, which is enough now that the earlier rule is also scoped.
+ * `inset` alone carries the left offset — the separate `left` declaration it
+ * used to be paired with was redundant with this shorthand. --- */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .ds-247420 .wm-root {
+    inset: 0 0 0 var(--os-rail-w);
+  }
+}
+
+/* --- universal touch tap-target floor (pointer:coarse covers tablets AND
+ * landscape phones that width-only queries miss). Every interactive control
+ * the audit measured below 44px is lifted to the --os-tap (44px) token. --- */
+@media (pointer: coarse) {
+  /* window chrome */
+  .ds-247420 .wm-btns .wm-btn { min-width: var(--os-tap, 44px); min-height: var(--os-tap, 44px); }
+  .ds-247420 .wm-resize { width: var(--os-tap, 44px); height: var(--os-tap, 44px); }
+  /* taskbar tasks (also widen and snap on the whole touch band, not mobile-only) */
+  .ds-247420 .os-task {
+    min-height: var(--os-tap, 44px); min-width: 120px;
+    padding: var(--space-2-5) 14px; scroll-snap-align: start;
+  }
+  .ds-247420 .os-taskbar { scroll-snap-type: x proximity; }
+  /* menubar workspace controls (when shown on tablet) */
+  .ds-247420 .os-menubar .tb-sess-x { min-width: var(--os-tap, 44px); min-height: var(--os-tap, 44px); }
+  .ds-247420 .tb-sess-chip { min-height: var(--os-tap, 44px); }
+  .ds-247420 .tb-sess-add { min-height: var(--os-tap, 44px); }
+  /* modal controls */
+  .ds-247420 .tb-sess-modal-input { height: var(--os-tap, 44px); min-height: var(--os-tap, 44px); }
+  .ds-247420 .tb-sess-modal-btn { min-height: var(--os-tap, 44px); }
+  .ds-247420 .tb-sess-modal-x { min-width: var(--os-tap, 44px); min-height: var(--os-tap, 44px); }
+  /* files-app rows + per-row actions */
+  .ds-247420 .fsb-row { min-height: var(--os-tap, 44px); }
+  .ds-247420 .fsb-act {
+    min-width: var(--os-tap, 44px); min-height: var(--os-tap, 44px);
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  /* chat composer controls */
+  .ds-247420 .chat-composer .send { width: var(--os-tap, 44px); height: var(--os-tap, 44px); }
+  .ds-247420 .cc-toggle { min-height: var(--os-tap, 44px); }
+}
+
+/* --- files-app row actions must reveal on coarse pointers too (the existing
+ * trigger keyed only on hover:none, which fails on hybrid touch+hover
+ * tablets that also report a hover-capable pointer). --- */
+@media (hover: none), (pointer: coarse) {
+  .ds-247420 .fsb-actions { opacity: 1; }
+}
+
+/* --- modals: a content-tall card had no max-height and the overlay did not
+ * scroll, so the footer (primary action) was stranded off-canvas. Cap the
+ * card to the visible viewport, scroll the body, honor safe-area. --- */
+.ds-247420 .tb-sess-overlay {
+  overflow-y: auto;
+  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
+           max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
+}
+.ds-247420 .tb-sess-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
+.ds-247420 .tb-sess-modal-body { overflow-y: auto; min-height: 0; }
+
+/* --- browser-pane: the generic .app-pane 16px prose padding stranded the
+ * iframe 16px on every side; the browser pane is full-bleed. --- */
+/* (0,3,0) beats the generic `.app-pane` (0,1,0) prose padding on specificity. */
+.ds-247420 .app-pane.browser-app { padding: 0; }