app-shell.css

/* ============================================================
   247420 design system — component sheet
   Tonal surfaces over borders. Indicator rails over hairlines.
   Friendly rounded sans body; mono only on real code.
   ============================================================ */

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; }

/* ============================================================
   Accessibility — Skip Link
   ============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.skip-link:focus {
  top: 10px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--mascot); color: var(--ink); }

/* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
.app, [class*="kit-"], .ds-stage {
  container-type: inline-size;
  overflow-x: clip;
  min-width: 0;
}
.app *, [class*="kit-"] * { min-width: 0; }

/* ============================================================
   Typography
   ============================================================ */
h1, .t-h1 { font-family: var(--ff-body); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
h2, .t-h2 { font-family: var(--ff-body); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
h3, .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; }
h4, .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. */
[data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
[data-typescale="app"] h2, [data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
[data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
[data-typescale="app"] h4, [data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }

.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; }
.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; }

.t-display { font-family: var(--ff-body); font-weight: 600; letter-spacing: var(--tr-tight); }
.t-mono    { font-family: var(--ff-mono); }
.t-body    { font-family: var(--ff-body); }

.t-label   { font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-label); font-weight: 500; }
.t-micro   { font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
.t-meta    { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg-3); }

.lede, .t-lede {
  font-family: var(--ff-body); font-size: var(--fs-xl);
  line-height: var(--lh-tall); max-width: 38ch; font-weight: 400; color: var(--fg-2);
  margin: 0;
}

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 18px; height: 2px; background: currentColor;
}

.ds-prose {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-long);
  max-width: var(--measure);
  text-wrap: pretty;
}
.ds-prose p  { margin: 0 0 var(--space-4); }
.ds-prose h1 { font-size: clamp(34px, 5.4cqi, 64px); margin-bottom: var(--space-3); }
.ds-prose h2 { margin: var(--space-6) 0 var(--space-3); }
.ds-prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-lg); font-weight: 600; }

.dim { color: var(--fg-3); }

/* Links */
a { color: inherit; text-decoration: none; }
a.ds-link-accent, .ds-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
a.ds-link-accent:hover, .ds-prose a:hover {
  background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent;
}

kbd {
  font-family: var(--ff-mono); font-size: 0.85em;
  background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-1);
}

code {
  font-family: var(--ff-mono); font-size: 0.92em;
  background: var(--bg-2); padding: 0.15em 0.5em; border-radius: var(--r-1);
}

pre {
  font-family: var(--ff-mono);
  background: var(--panel-bg);
  color: var(--panel-text, inherit);
  padding: var(--space-5);
  overflow-x: auto;
  line-height: 1.55;
  font-size: var(--fs-sm);
  margin: 0;
  border-radius: var(--r-3);
}
pre .k { color: var(--mascot); }
pre .s { color: var(--sun); }
pre .c { color: var(--fg-3); }
pre .n { color: var(--green-2); }

/* ============================================================
   AppShell — page frame. The topbar floats above a soft background;
   the body sits inside a rounded inner shell for a friendlier feel.
   ============================================================ */
.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) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  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.) */
.fd-root .app { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; }
.fd-root .app-body { min-width: 0; }

:root {
  --app-status-h: var(--size-base);
  --app-topbar-h: var(--size-lg);
  --app-crumb-h: var(--size-sm);
}

.app-topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-4);
  min-height: var(--app-topbar-h);
  padding: 10px var(--pad-x);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
   in .app-chrome and they share ONE sticky band instead of stacking as two
   bars. The breadcrumb provides the left identity (it already begins with the
   brand), so the topbar's standalone brand is hidden to avoid showing the name
   twice; nav and the crumb's right slot sit together on the right. */
.app-chrome {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: 8px var(--pad-x);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.app-chrome > .app-topbar,
.app-chrome > .app-crumb {
  position: static; background: none; backdrop-filter: none;
  -webkit-backdrop-filter: none; padding: 0; min-height: 0;
  flex: 1 1 auto;
}
.app-chrome > .app-crumb { order: 1; flex: 1 1 auto; }
.app-chrome > .app-topbar { order: 2; flex: 0 0 auto; }
.app-chrome > .app-topbar > .brand { display: none; }
.app-chrome > .app-topbar > nav { margin-left: 0; }
.app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
.app-topbar > .brand { flex: 0 0 auto; }
.app-topbar > .app-search { flex: 1 1 auto; }
.app-topbar > nav { margin-left: auto; }
.app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
.app-topbar nav a { flex: 0 0 auto; }
.app-topbar nav a {
  color: var(--fg-2);
  padding: 12px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--r-pill);
  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
}
.app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
.app-topbar nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.app-topbar nav a.active {
  color: var(--accent-fg);
  background: var(--accent);
  font-weight: 600;
}

.brand {
  font-family: var(--ff-body);
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: -0.01em;
}
.brand .slash { color: var(--fg-3); font-weight: 400; margin: 0 2px; }

.app-search {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; background: var(--bg-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--fg-3);
  max-width: 360px;
}
.app-search .icon { opacity: 0.6; }
.app-search input {
  border: 0; background: transparent;
  font-family: inherit; font-size: inherit; color: var(--fg);
  width: 100%;
}
.app-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-crumb {
  min-height: var(--app-crumb-h);
  padding: 6px var(--pad-x);
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--fg-3);
}
.app-crumb .sep { opacity: 0.5; }
.app-crumb .leaf { color: var(--fg); font-weight: 600; }
.app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); }

.app-side-shell { background: var(--bg); }
.app-body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; align-content: stretch; flex: 1; min-height: 0; }
.app-body.no-side { grid-template-columns: minmax(0, 1fr); }
/* When there is no sidebar, the empty side-shell must not occupy a grid row,
   otherwise main wraps to a second (collapsed) row. Remove it from layout. */
.app-body.no-side .app-side-shell { display: none; }

.app-side {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  font-size: var(--fs-sm);
}
.app-side .group {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--fg-3); padding: 0 var(--space-3);
  margin-bottom: 6px;
}
.app-side a {
  display: grid; grid-template-columns: 18px 1fr auto;
  gap: 10px; align-items: center;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: var(--r-pill);
  color: var(--fg-2);
  margin-bottom: 2px;
}
.app-side a:hover { background: var(--bg-2); color: var(--fg); }
.app-side a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.app-side a.active {
  color: var(--accent-fg);
  background: var(--accent);
  font-weight: 600;
}
.app-side .count {
  background: var(--mascot); color: var(--ink);
  padding: 3px 10px; font-size: var(--fs-micro); font-weight: 700;
  border-radius: var(--r-pill);
}

.app-main {
  padding: var(--space-5) var(--pad-x) 0;
  min-width: 0;
  /* Full-height flex column so a single flex:1 child (e.g. .chat) fills the
     region between crumb and status instead of floating at content height. */
  display: flex; flex-direction: column;
  min-height: 0;
  align-self: stretch;
  height: 100%;
}
.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. */
.app-main { overflow-y: auto; }
/* Reserve the scrollbar track so routes with/without overflow don't shift
   the layout horizontally when the bar appears. */
.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). */
.app-main [id] { scroll-margin-top: var(--space-4); }
/* Full-height route children fill the region instead of scrolling the page. */
.app-main > .chat,
.app-main > .chat-area,
.app-main > .ds-file-stage,
.app-main > .grow { flex: 1 1 auto; min-height: 0; }
.app-main.narrow { max-width: var(--measure-narrow); margin: 0 auto; }

@media (min-width: 1400px) {
  .app { max-width: 1400px; margin-left: auto; margin-right: auto; }
  .app-main .chat,
  .app-main > .chat-area,
  .app-main > .main-content { max-width: none; margin: 0; width: 100%; }
  /* Status bar inherits the .app max-width cap above and stretches edge-to-edge
     within it; no separate width constraint (which previously narrowed it). */
  .app-status { width: 100%; }
}

.app-status {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  min-height: var(--app-status-h);
  padding: 10px var(--pad-x);
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--fg-3);
  border-top: 1px solid var(--rule);
}
.app-status .item { color: inherit; }
.app-status .item:first-of-type { color: var(--accent); }
.app-status .spread { flex: 1; }

/* ============================================================
   Primitives
   ============================================================ */
.btn, .btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  font-family: var(--ff-body);
  font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  border: 0;
  transition: transform var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
}
.btn { background: var(--bg-2); color: var(--fg); }
.btn:hover { background: var(--bg-3); color: var(--fg); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn-ghost:hover { background: var(--bg-2); }
.btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); }
.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   IconButton — square icon-only button
   ============================================================ */
.ds-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; cursor: pointer;
  border-radius: var(--r-1, 6px);
  background: transparent; color: var(--fg);
  width: 32px; height: 32px;
}
.ds-icon-btn-xs { width: 22px; height: 22px; }
.ds-icon-btn-sm { width: 26px; height: 26px; }
.ds-icon-btn-base { width: 32px; height: 32px; }
.ds-icon-btn-lg { width: 40px; height: 40px; }
.ds-icon-btn-xl { width: 48px; height: 48px; }
.ds-icon-btn-ghost { background: transparent; }
.ds-icon-btn-ghost:hover { background: var(--bg-2); }
.ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
.ds-icon-btn-primary:hover { background: var(--fg); color: var(--bg); }
.ds-icon-btn-danger { background: var(--flame); color: var(--paper); }
.ds-icon-btn-danger:hover { filter: brightness(1.1); }
.ds-icon-btn:active { transform: translateY(1px); }
.ds-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-icon-btn:disabled, .ds-icon-btn.is-disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ============================================================
   Badge — small inline count/status pill
   ============================================================ */
.ds-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  font-size: var(--fs-micro); font-weight: 600; line-height: 1;
  border-radius: 999px;
  background: var(--bg-3); color: var(--fg-2);
}
.ds-badge.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
.ds-badge.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
.ds-badge.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
.ds-badge.tone-sun     { background: var(--sun);         color: var(--ink); }
.ds-badge.tone-flame   { background: var(--flame);       color: var(--paper); }
.ds-badge.tone-live    { background: var(--green-tint);  color: var(--green-deep); }
.ds-badge.tone-wip     { background: var(--bg-3);        color: var(--fg-2); }
.ds-badge.tone-error   { background: var(--flame);       color: var(--paper); }
.ds-badge.tone-success { background: var(--green-tint);  color: var(--green-deep); }
.ds-badge.tone-neutral { background: var(--bg-3);        color: var(--fg-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--bg-2); color: var(--fg-2);
  font-family: var(--ff-body);
  font-size: var(--fs-tiny); font-weight: 600;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  border-radius: var(--r-pill);
}
.chip.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
.chip.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
.chip.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
.chip.tone-sun     { background: var(--sun);         color: var(--ink); }
.chip.tone-flame   { background: var(--flame);       color: var(--paper); }
.chip.tone-live    { background: var(--green-tint);  color: var(--green-deep); }
.chip.tone-wip     { background: var(--bg-3);        color: var(--fg-2); }
.chip.tone-error    { background: var(--flame);       color: var(--paper); }
.chip.tone-success  { background: var(--green-tint);  color: var(--green-deep); }
.chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
.chip.tone-ok       { background: var(--green-tint);  color: var(--green-deep); }
.chip.tone-miss     { background: var(--flame);       color: var(--paper); }
.chip.tone-neutral  { background: var(--bg-3);        color: var(--fg-2); }

.glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-family: var(--ff-mono); font-size: 13px;
  opacity: 0.8;
}

/* ============================================================
   Panel — soft tonal container, no border decoration
   ============================================================ */
.panel {
  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;
}
.panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
.panel.panel-wide   { background: transparent; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-3);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--fg-3);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
}
.panel-head > :last-child {
  font-weight: 500; color: var(--fg-3);
  font-family: var(--ff-mono); letter-spacing: 0;
}
.panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.panel.panel-wide .panel-body { padding: 0; }

/* ============================================================
   Row — primary list pattern. Indicator rail on the left,
   no hairlines between rows.
   ============================================================ */
.row {
  display: grid;
  grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: 18px 22px;
  background: var(--bg);
  border-radius: var(--r-2);
  color: var(--fg);
  position: relative;
  transition: background var(--dur-snap) var(--ease), padding var(--dur-base) var(--ease);
}
.row + .row { margin-top: 4px; }
.row::before {
  content: '';
  position: absolute; left: 6px; top: 22%; bottom: 22%; width: 3px;
  background: transparent; border-radius: 3px;
  transition: background var(--dur-snap) var(--ease);
}
.row:hover { background: var(--bg-2); }
.row:hover::before { background: var(--rule-strong); }
.row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
.row.active::before { background: var(--accent); }
.row.row-state-disabled { opacity: 0.5; pointer-events: none; }
.row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
.row.row-state-error::before { background: var(--flame); }
.row-grid { /* explicit grid-template-columns set inline */ }

.row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.row .title { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row .sub   { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
.row .meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; }

a.row { text-decoration: none; }

/* ============================================================
   Hero
   ============================================================ */
.ds-hero {
  padding: var(--space-9) 0 var(--space-8);
  display: grid; gap: var(--space-5);
  max-width: var(--measure-wide);
}
.ds-hero-title {
  font-family: var(--ff-body); font-weight: 600;
  font-size: clamp(34px, 6.4cqi, 80px);
  line-height: 1.05; letter-spacing: var(--tr-tight);
  margin: 0; max-width: 18ch;
}
.ds-hero-body {
  font-family: var(--ff-body); font-size: var(--fs-xl);
  line-height: 1.45; margin: 0; max-width: 52ch;
  color: var(--fg-2);
}
.ds-hero-accent { color: var(--accent); font-weight: 500; }
.ds-hero-actions { display: flex; gap: var(--space-2, 10px); flex-wrap: wrap; margin-top: var(--space-2, 8px); }
.ds-chat-title { margin: 0; font-size: inherit; }

/* ============================================================
   Section grouping
   ============================================================ */
.ds-section { margin: var(--space-8) 0; }
.ds-section > h3 {
  font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h3);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.01em;
}

/* ============================================================
   Install — single CLI command card
   ============================================================ */
.cli {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-3);
  font-family: var(--ff-mono); font-size: var(--fs-lg);
}
.cli .prompt { color: var(--green-2); }
.cli .cmd    { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); }
.cli .copy   {
  padding: 8px 16px; background: transparent; color: var(--paper);
  font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
  border-radius: var(--r-pill);
}
.cli .copy:hover { background: var(--fg-3); }

/* 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. */
.cli:has(.cli-line),
.cli:has(.cli-cmt) {
  flex-direction: column; align-items: stretch; gap: 0;
  font-size: var(--fs-sm); line-height: 1.6;
}
.cli-line {
  display: flex; gap: 10px;
  font-family: var(--ff-mono); font-size: 13px; line-height: 1.6;
  padding: 3px 0;
}
.cli-line .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
.cli-line .cmd { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; color: var(--paper); }
.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
   ============================================================ */
table.kv { width: 100%; border-collapse: collapse; }
table.kv td {
  padding: 8px 0;
  font-family: var(--ff-body); font-size: var(--fs-sm);
}
table.kv tr + tr td { border-top: 1px solid var(--rule); }
table.kv td:first-child {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tr-caps);
  width: 14ch;
}
table.kv td:last-child {
  font-weight: 600;
}

/* ============================================================
   Generic table
   ============================================================ */
table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ff-body); font-size: var(--fs-sm);
  border-radius: var(--r-3); overflow: hidden;
}
table th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
  background: var(--bg-2);
}
table td { padding: 14px 16px; border-top: 1px solid var(--rule); }
table tr.clickable { cursor: pointer; }
table tr.clickable:hover td { background: var(--bg-2); }
table tr.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
table tr.clickable:focus-visible td { background: var(--bg-2); }

/* ============================================================
   Changelog
   ============================================================ */
.ds-changelog-row {
  grid-template-columns: minmax(110px, 14ch) minmax(60px, 9ch) minmax(0, 1fr) !important;
}
.ds-changelog-ver {
  font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm);
}

/* ============================================================
   Works
   ============================================================ */
.work-detail {
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: 4px 0 var(--space-2);
  background: var(--bg-2);
  border-radius: var(--r-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ds-work-body { margin: 0; max-width: 60ch; }
.ds-work-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   Manifesto / pull moment
   ============================================================ */
.ds-manifesto { max-width: 60ch; }
.ds-manifesto-para {
  font-family: var(--ff-body); font-size: var(--fs-lg);
  line-height: var(--lh-long); margin: 0 0 var(--space-3);
}
.ds-manifesto-para.dim { color: var(--fg-3); }

/* ============================================================
   Currently shipping dots
   ============================================================ */
.ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; }
.ds-dot-on  { color: var(--green-2); }
.ds-dot-off { color: var(--fg-3); }
.ds-dot-live { color: var(--green-2); }
.ds-dot-idle { color: var(--fg-3); }

/* ============================================================
   KPI
   ============================================================ */
.kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}
.kpi-card {
  padding: var(--space-5);
  background: var(--bg-2);
  border-radius: var(--r-3);
}
.kpi-card .num {
  font-family: var(--ff-body); font-weight: 600;
  font-size: clamp(30px, 3.6cqi, 48px); line-height: 1;
  letter-spacing: var(--tr-tight);
}
.kpi-card .lbl {
  font-size: var(--fs-xs); color: var(--fg-3);
  font-weight: 600; margin-top: 8px;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
}

/* ============================================================
   Empty state
   ============================================================ */
.empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--fg-3);
  background: var(--bg-2);
  border-radius: var(--r-3);
  font-size: var(--fs-sm);
}

/* ============================================================
   Form
   ============================================================ */
.row-form {
  display: grid; gap: 12px;
  padding: var(--space-5);
  background: var(--bg-2);
  border-radius: var(--r-3);
}
.row-form input,
.row-form textarea {
  font-family: inherit; font-size: var(--fs-sm);
  padding: 12px 16px;
  background: var(--bg); color: var(--fg);
  border: 0; border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.row-form input:focus,
.row-form textarea:focus { box-shadow: inset 0 0 0 2px var(--accent); }

/* Field char counter (TextField maxLength) */
.ds-field-count {
  font-size: var(--fs-tiny, 12px);
  color: var(--fg-3, var(--fg-2));
  text-align: right;
}

/* Multi-column form layout (Form columns prop) */
.row-form[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.row-form[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
  .row-form[data-columns="2"],
  .row-form[data-columns="3"] { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
   ============================================================ */

/* ────────────────────────────────────────────────────────────────────
   Mobile Portrait Breakpoint (480px and below)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 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: stack the nav onto its own full-width row below the
     brand and let it scroll horizontally. The brand stays on the first row;
     nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
  .app-topbar {
    gap: var(--space-2); padding: 12px var(--space-3);
  }
  .app-topbar > nav {
    flex: 1 1 100%; margin-left: 0; order: 3;
    display: flex; gap: 2px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .app-topbar nav::-webkit-scrollbar { display: none; }
  .app-topbar nav a {
    flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
  }
  .brand { font-size: var(--fs-tiny); font-weight: 600; }

  /* Search */
  .app-search {
    display: none; /* Hide search on mobile unless explicitly pinned */
  }

  /* Main Content */
  .app-main { padding: var(--space-4) var(--space-2); }
  .app-main.narrow { max-width: 100%; margin: 0; }

  /* Headings stay on the fluid base clamps (cqi) — no mobile re-clamp. */

  /* Panel & Row */
  .panel { margin: 0 0 var(--space-3); }
  .panel-head { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
  .panel-body { padding: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel-body > table { min-width: 100%; }

  .row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--space-2); padding: 12px 16px;
    row-gap: 4px !important;
  }
  .row .sub { grid-column: 1 / -1; order: 3; }
  .row .title { font-size: var(--fs-sm); }

  /* Buttons */
  .btn, .btn-primary, .btn-ghost {
    padding: 11px 16px; font-size: var(--fs-tiny);
    min-height: 44px; /* Touch target minimum */
  }

  /* File Grid */
  .ds-file-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .ds-file-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px; padding: 10px 12px;
    font-size: var(--fs-xs);
  }
  /* On mobile, fold meta under the title and keep actions inline. */
  .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
  .ds-file-row .ds-file-actions { opacity: 1; }

  /* Chat */
  .chat-stack { max-width: 100%; min-width: 0; }
  .chat-bubble {
    padding: 10px 12px; font-size: var(--fs-sm);
  }
  .chat-avatar { width: 28px; height: 28px; font-size: 11px; }
  .chat-msg:hover { padding: 4px 0; margin: 0; background: transparent; }
  .chat-composer { padding: 8px; gap: 6px; }
  .chat-composer textarea { padding: 10px 12px; font-size: var(--fs-sm); }
  .chat-composer .send,
  .chat-composer button { width: 40px; height: 40px; font-size: 16px; }

  /* KPI Cards */
  .kpi {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-2);
  }
  .kpi-card { padding: var(--space-3); }
  .kpi-card .num { font-size: clamp(22px, 5vw, 32px); }

  /* Empty State */
  .empty { padding: var(--space-5); font-size: var(--fs-xs); }

  /* Form */
  .row-form { gap: 10px; padding: var(--space-3); }
  .row-form input,
  .row-form textarea { padding: 11px 12px; font-size: var(--fs-sm); }

  /* Hero Section — keep fluid base font-size, just unconstrain width on mobile. */
  .ds-hero { padding: var(--space-6) 0 var(--space-5); }
  .ds-hero-title { max-width: 100%; }
  .ds-hero-body { max-width: 100%; }

  /* Table Responsiveness */
  table { font-size: var(--fs-xs); }
  table th,
  table td { padding: 10px 12px; }

  /* CLI Block */
  .cli {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 16px 12px; font-size: var(--fs-xs);
  }
  .cli .copy { padding: 6px 12px; font-size: var(--fs-micro); }
}

/* ────────────────────────────────────────────────────────────────────
   Container Query Responsive (720px and below)
   ────────────────────────────────────────────────────────────────────── */
@container (max-width: 760px) {
  .app-body { grid-template-columns: 1fr !important; }
  .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .app-topbar { grid-template-columns: 1fr auto; }
  .app-topbar nav { font-size: var(--fs-xs); gap: 14px; }
  .row { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px !important; }
  .row .sub { grid-column: 1 / -1; order: 3; }
}

/* ────────────────────────────────────────────────────────────────────
   Tablet Landscape Breakpoint (768px to 1024px)
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 1024px) {
  /* App Layout — side handled by 900px drawer block; restore for 901-1024 */
  .app-side a {
    padding: 12px 12px; gap: 8px;
    grid-template-columns: 16px 1fr auto;
    font-size: var(--fs-xs);
    min-height: 44px;
  }

  /* Topbar Navigation */
  .app-topbar {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3); padding: 12px var(--space-4);
  }
  .app-topbar nav {
    display: flex; gap: 8px; font-size: var(--fs-xs);
    flex-wrap: wrap;
  }
  .app-topbar nav a {
    padding: 12px 12px; font-size: var(--fs-xs);
    min-height: 44px;
  }
  .brand { font-size: var(--fs-sm); }

  /* Search */
  .app-search {
    display: inline-flex;
    max-width: 280px; font-size: var(--fs-xs);
    padding: 8px 14px;
  }

  /* Main Content */
  .app-main { padding: var(--space-6) var(--space-4); }
  .app-main.narrow { max-width: 100%; }

  /* 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-file-row {
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    gap: 12px; padding: 12px 14px;
  }

  /* Chat Bubbles */
  .chat-stack { max-width: min(75%, 420px); }
  .chat-bubble {
    padding: 11px 14px; font-size: var(--fs-sm);
  }
  .chat-avatar { width: 32px; height: 32px; font-size: 12px; }

  /* KPI Cards */
  .kpi {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
  }

  /* Buttons */
  .btn, .btn-primary, .btn-ghost {
    padding: 12px 18px; font-size: var(--fs-sm);
  }

  /* Panel */
  .panel-head { padding: var(--space-4) var(--space-4); }
  .panel-body { padding: var(--space-2) var(--space-3); }

  /* Hero — fluid base font-size; only width unconstrained on tablet. */
  .ds-hero { padding: var(--space-7) 0 var(--space-6); max-width: 100%; }
  .ds-hero-title { max-width: 100%; }

  /* Row */
  .row {
    grid-template-columns: minmax(90px, 12ch) minmax(0, 1fr) auto;
    gap: var(--space-2); padding: 14px 16px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Mid Breakpoint (768px and below) — collapse sidebar + simplify row grid
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar stacks above main rather than sitting beside it */
  .app-body { grid-template-columns: 1fr; }
  .app-side { width: 100%; max-width: none; }

  /* Row drops the leading code column; title + meta share the line */
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }
  .row .code { display: none; }
  .row .sub { grid-column: 1 / -1; }
}

/* ────────────────────────────────────────────────────────────────────
   Desktop Breakpoint Enhancements (1025px and up)
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  /* Chat Bubbles */
  .chat-stack { max-width: min(70%, 480px); }

  /* KPI Cards */
  .kpi {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
  }
}

/* ============================================================
   Chat — minimal styles (placeholder for full chat surface)
   ============================================================ */
.ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
.ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); }
.ds-chat-msg.user { background: var(--accent); color: var(--accent-fg); align-self: flex-end; }
.ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; }
.ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); }
.ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); }
.ds-chat-composer input:focus { box-shadow: inset 0 0 0 2px var(--accent); }

/* ============================================================
   File surface — responsive grid + row layouts
   ============================================================ */

/* Default file grid — a vertical list of rows. Each row lays out its own
   columns internally; the container only stacks them. Card mode (multi-column)
   is opt-in via [data-columns]. */
.ds-file-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* File row — linear layout (icon · title · meta · actions) */
.ds-file-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center;
  padding: 11px 16px; background: var(--bg);
  border: var(--bw-hair) solid transparent;
  border-radius: var(--r-2); color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-snap) var(--ease),
              border-color var(--dur-snap) var(--ease),
              transform var(--dur-snap) var(--ease);
}
.ds-file-row:hover {
  background: var(--bg-2);
  border-color: var(--rule);
}
.ds-file-row:active { transform: translateY(1px); }
.ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
.ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
.ds-file-row[data-file-type="image"]    { border-left-width: 3px; border-left-color: var(--mascot); }
.ds-file-row[data-file-type="video"]    { border-left-width: 3px; border-left-color: var(--purple-2); }
.ds-file-row[data-file-type="audio"]    { border-left-width: 3px; border-left-color: var(--sky); }
.ds-file-row[data-file-type="code"]     { border-left-width: 3px; border-left-color: var(--green-2); }
.ds-file-row[data-file-type="text"]     { border-left-width: 3px; border-left-color: var(--ink-3); }
.ds-file-row[data-file-type="archive"]  { border-left-width: 3px; border-left-color: var(--flame); }
.ds-file-row[data-file-type="document"] { border-left-width: 3px; border-left-color: var(--sun); }
.ds-file-row[data-file-type="symlink"]  { border-left-width: 3px; border-left-color: var(--purple); }
.ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--fg-3); }

/* Row internals — these are the classes FileRow actually renders. */
.ds-file-row .title {
  font-weight: 500; font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.ds-file-row .code {
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  color: var(--fg-3);
}
.ds-file-row .ds-file-meta {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--fg-3); white-space: nowrap;
}

/* File icon — glyph chip, tinted per type. */
.ds-file-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: 15px; line-height: 1;
  color: var(--fg-2);
}
.ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent); }
.ds-file-row[data-file-type="image"]    .ds-file-icon { color: var(--mascot); }
.ds-file-row[data-file-type="video"]    .ds-file-icon { color: var(--purple-2); }
.ds-file-row[data-file-type="audio"]    .ds-file-icon { color: var(--sky); }
.ds-file-row[data-file-type="code"]     .ds-file-icon { color: var(--green-2); }
.ds-file-row[data-file-type="archive"]  .ds-file-icon { color: var(--flame); }
.ds-file-row[data-file-type="document"] .ds-file-icon { color: var(--sun); }

/* Row actions — hidden until hover/focus, revealed without layout shift. */
.ds-file-actions {
  display: inline-flex; gap: 2px; align-items: center;
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.ds-file-row:hover .ds-file-actions,
.ds-file-row:focus-within .ds-file-actions { opacity: 1; }
.ds-file-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-1);
  color: var(--fg-3); font-size: 14px; cursor: pointer;
  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
}
.ds-file-act:hover { background: var(--bg-3); color: var(--fg); }
.ds-file-act-warn:hover { background: color-mix(in oklab, var(--warn) 18%, var(--bg)); color: var(--warn); }

/* Card mode — opt-in via data-columns; switches the list to a grid. */
.ds-file-grid[data-columns] { display: grid; gap: var(--space-3); }
.ds-file-grid[data-columns="1"] { grid-template-columns: 1fr; }
.ds-file-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.ds-file-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.ds-file-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   File browser surface — stage, toolbar, breadcrumb, dropzone,
   upload progress, empty state, modals, preview. Authored for
   fsbrowse but lives in the shared kit under .ds-247420 scope.
   ============================================================ */

/* Stage — the scrollable content column. */
.ds-file-stage {
  display: flex; flex-direction: column; gap: var(--space-3);
  width: 100%; max-width: 920px; margin: 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-4);
}
/* When the stage is the app-main child, the shell already supplies top
   padding — collapse the stage's own so content isn't pushed down. */
.app-main > div > .ds-file-stage,
.app-main .ds-file-stage { padding-top: 0; }

/* Breadcrumb path */
.ds-crumb-path {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  font-size: var(--fs-sm);
}
.ds-crumb-seg {
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-1);
  color: var(--fg-3); font-family: inherit; font-size: var(--fs-sm);
  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
}
.ds-crumb-seg:hover { background: var(--bg-2); color: var(--fg); }
.ds-crumb-seg.leaf { color: var(--fg); font-weight: 600; }
.ds-crumb-sep { color: var(--fg-3); opacity: 0.6; user-select: none; }

/* Toolbar */
.ds-file-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
}
.ds-file-toolbar-left,
.ds-file-toolbar-right {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.ds-meta-mono {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--fg-3); letter-spacing: var(--tr-caps);
}

/* Error banner — dismissible toast row. */
.ds-error-banner {
  padding: 10px 14px; border-radius: var(--r-2);
  background: color-mix(in oklab, var(--warn) 14%, var(--bg));
  border: var(--bw-hair) solid color-mix(in oklab, var(--warn) 40%, transparent);
  color: var(--warn); font-size: var(--fs-sm); cursor: pointer;
}
.ds-error-banner:hover { background: color-mix(in oklab, var(--warn) 20%, var(--bg)); }

/* Dropzone */
.ds-dropzone {
  border: var(--bw-rule) dashed var(--rule);
  border-radius: var(--r-3); background: var(--bg);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ds-dropzone-inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4) var(--space-3); text-align: center;
}
.ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
.ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
.ds-dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-tint);
}
@media (prefers-reduced-motion: no-preference) {
  .ds-dropzone.dragover { animation: ds-dropzone-pulse 1.1s var(--ease) infinite; }
}
.ds-dropzone.dragover .ds-dropzone-glyph,
.ds-dropzone.dragover .ds-dropzone-label { color: var(--accent); }
@keyframes ds-dropzone-pulse {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
}

/* Upload progress */
.ds-upload-progress { display: flex; flex-direction: column; gap: 6px; }
.ds-upload-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px;
  gap: var(--space-2); align-items: center;
  padding: 8px 12px; border-radius: var(--r-2);
  background: var(--bg-2); font-size: var(--fs-xs);
}
.ds-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-upload-bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--bg-3); overflow: hidden;
}
.ds-upload-fill {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: var(--r-pill);
  transition: width var(--dur-base) var(--ease);
}
.ds-upload-pct {
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  color: var(--fg-3); text-align: right;
}
.ds-upload-item.done .ds-upload-fill { background: var(--success); }
.ds-upload-item.done .ds-upload-pct { color: var(--success); }
.ds-upload-item.error .ds-upload-fill { background: var(--warn); }
.ds-upload-item.error .ds-upload-pct { color: var(--warn); }

/* Empty state */
.ds-file-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-6) var(--space-3);
  color: var(--fg-3); text-align: center;
}
.ds-file-empty-glyph { font-size: 34px; opacity: 0.55; }
.ds-file-empty-text { font-size: var(--fs-sm); }

/* ── Modals ───────────────────────────────────────────────── */
.ds-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal, 800);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3);
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
}
@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.ds-modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 460px; max-height: calc(100vh - 2 * var(--space-4));
  background: var(--bg); color: var(--fg);
  border: var(--bw-hair) solid var(--rule);
  border-radius: var(--r-3); box-shadow: var(--shadow-3);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-modal { animation: ds-modal-rise var(--dur-base) var(--ease); }
}
@keyframes ds-modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.ds-modal-small { max-width: 380px; }
.ds-modal-preview { max-width: 880px; }
.ds-modal-head {
  padding: var(--space-3) var(--space-4);
  font-weight: 600; font-size: var(--fs-body);
  border-bottom: var(--bw-hair) solid var(--rule);
}
.ds-modal-body { padding: var(--space-4); overflow: auto; font-size: var(--fs-sm); }
.ds-modal-actions {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: var(--bw-hair) solid var(--rule);
}
.ds-modal-input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
  border-radius: var(--r-2); color: var(--fg);
  font-family: inherit; font-size: var(--fs-sm);
}
.ds-modal-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary.danger {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--on-color);
}

/* ── Preview ──────────────────────────────────────────────── */
.ds-preview-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--bw-hair) solid var(--rule);
}
.ds-preview-name {
  font-weight: 600; font-size: var(--fs-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ds-preview-meta {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--fg-3); white-space: nowrap;
}
.ds-preview-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.ds-preview-body {
  flex: 1; min-height: 0; overflow: auto;
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column;
}
.ds-preview-media {
  max-width: 100%; max-height: 70vh; margin: 0 auto;
  border-radius: var(--r-2); object-fit: contain;
}
.ds-preview-audio { width: 100%; }
.ds-preview-code,
.ds-preview-text {
  margin: 0; flex: 1; min-height: 0; overflow: auto;
  padding: var(--space-3);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-2);
  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: var(--lh-base);
  white-space: pre; tab-size: 2;
}
.ds-preview-text { white-space: pre-wrap; word-break: break-word; }
.ds-preview-code code, .ds-preview-text code { font: inherit; color: inherit; background: none; }
.ds-preview-truncated {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: var(--bw-hair) solid color-mix(in oklab, var(--paper) 20%, transparent);
  color: var(--paper-3); font-size: var(--fs-micro);
}
.ds-preview-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-6); color: var(--fg-3);
}
.ds-preview-glyph { font-size: 34px; opacity: 0.6; }

/* Thin scrollbars inside preview bodies. */
.ds-preview-code, .ds-preview-text, .ds-modal-body, .ds-preview-body {
  scrollbar-width: thin;
}
.ds-preview-code::-webkit-scrollbar,
.ds-preview-text::-webkit-scrollbar,
.ds-preview-body::-webkit-scrollbar,
.ds-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.ds-preview-code::-webkit-scrollbar-thumb,
.ds-preview-text::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--paper) 28%, transparent);
  border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box;
}
.ds-preview-body::-webkit-scrollbar-thumb,
.ds-modal-body::-webkit-scrollbar-thumb {
  background: var(--bg-3); border-radius: var(--r-pill);
}

/* Mobile — modals go near-fullscreen, preview media shrinks. */
@media (max-width: 560px) {
  .ds-modal { max-width: 100%; max-height: calc(100vh - 2 * var(--space-3)); }
  .ds-modal-preview { width: 100%; height: calc(100vh - 2 * var(--space-3)); max-height: none; }
  .ds-preview-media { max-height: 50vh; }
  .ds-file-stage { padding: var(--space-3) var(--space-2); }
}

/* ── File browser UX affordances ──────────────────────────── */
/* Toolbar filter input — compact search box. */
.ds-filter-input {
  width: clamp(120px, 22vw, 220px);
  padding: 7px 12px;
  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
  border-radius: var(--r-pill); color: var(--fg);
  font-family: inherit; font-size: var(--fs-xs);
}
.ds-filter-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Loading skeleton — placeholder rows while a directory loads. */
.ds-file-grid-loading { display: flex; flex-direction: column; gap: 4px; }
.ds-file-skeleton {
  height: 48px; border-radius: var(--r-2);
  background: linear-gradient(90deg,
    var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-file-skeleton { animation: ds-skeleton-shimmer 1.2s var(--ease) infinite; }
}
@keyframes ds-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Drag-to-move drop target highlight on a directory row. */
.ds-file-row.ds-drop-target {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ds-file-row[draggable="true"] { cursor: grab; }
.ds-file-row[draggable="true"]:active { cursor: grabbing; }

/* Multi-select — per-row checkbox overlay + selected state + bulk bar. */
.ds-file-row { position: relative; }
.ds-file-check {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; z-index: 1;
  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: var(--fs-micro); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--dur-base) var(--ease), background var(--dur-snap) var(--ease);
}
.ds-file-row:hover .ds-file-check,
.ds-file-row:focus-within .ds-file-check,
.ds-file-check.on { opacity: 1; }
/* Touch / coarse-pointer devices have no hover — keep checkboxes visible so
   multi-select is reachable without a pointer. */
@media (hover: none), (pointer: coarse) {
  .ds-file-check { opacity: 1; }
}
.ds-file-check.on { background: var(--accent); border-color: var(--accent); }
.ds-file-row.selected {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.ds-file-row.selected:hover { background: color-mix(in oklab, var(--accent) 22%, var(--bg)); }

.ds-bulk-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: 10px 14px; border-radius: var(--r-2);
  background: var(--accent-tint);
  border: var(--bw-hair) solid var(--accent);
  position: sticky; top: var(--space-2); z-index: 2;
}
.ds-bulk-count {
  font-weight: 600; font-size: var(--fs-sm); margin-right: auto;
}

/* Keyboard-shortcuts hint — compact two-column legend. */
.ds-shortcuts-hint {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
  border-radius: var(--r-2); font-size: var(--fs-xs);
}
.ds-shortcut-row { display: flex; align-items: center; gap: var(--space-2); }
.ds-kbd {
  display: inline-block; min-width: 0;
  padding: 2px 7px; border-radius: 6px;
  background: var(--bg); border: var(--bw-hair) solid var(--rule);
  border-bottom-width: 2px;
  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
  white-space: nowrap;
}

/* ============================================================
   Theme toggle (segmented + compact) — bound to src/theme.js
   ============================================================ */
.ds-segmented {
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--bg-2); border-radius: var(--r-pill);
  font-family: var(--ff-mono); font-size: var(--fs-xs);
}
.ds-segmented .ds-seg-btn {
  background: transparent; border: 0; color: var(--fg-3);
  padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ds-segmented .ds-seg-btn:hover { color: var(--fg); }
.ds-segmented .ds-seg-btn.is-on {
  background: var(--bg); color: var(--fg);
  box-shadow: var(--shadow-1);
}
.ds-theme-toggle.btn {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============================================================
   Chat kit polish — styles every class emitted by Chat /
   ChatMessage / ChatComposer / AICat. Before this block the
   chat-* classes had no CSS and rendered as unstyled paragraphs.
   ============================================================ */
.chat {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; gap: var(--space-3);
}
.chat-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: var(--space-3) 0 var(--space-2);
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--fg-3); text-transform: lowercase; letter-spacing: 0.02em;
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  margin-bottom: var(--space-2);
}
.chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.chat-head .ds-chat-title,
.chat-head > span:nth-child(2) {
  font-family: var(--ff-body); font-size: var(--fs-h4);
  font-weight: 600; color: var(--fg);
  text-transform: none; letter-spacing: var(--tr-tight, -0.01em); line-height: 1.2;
}
.chat-head .sub { color: var(--fg-3); }
.chat-head .spread { flex: 1; }

.chat-thread {
  display: flex; flex-direction: column; gap: var(--space-3);
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-2) 0;
  scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-thread { scroll-behavior: smooth; }
}
.chat-thread::-webkit-scrollbar { width: 8px; }
.chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--ff-mono);
  pointer-events: none;
}
.chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
.chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .7; }

.chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; min-width: 0; }
.chat-msg.you { flex-direction: row-reverse; }
.chat-msg.you .chat-stack { align-items: flex-end; }
.chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: 6px 0; margin: 0; border-radius: 8px; transition: background var(--dur-base) var(--ease); }

.chat-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; background: var(--bg-3); color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
  text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
.chat-msg.you .chat-avatar {
  background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
  color: var(--accent);
}
.chat-msg.aicat .chat-avatar {
  background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
  color: var(--mascot);
}

.chat-stack {
  display: flex; flex-direction: column; gap: 4px;
  max-width: min(70%, 56ch); min-width: 0;
  flex: 0 1 auto; overflow: hidden;
}

.chat-bubble {
  padding: 10px 14px; background: var(--bg-2); color: var(--fg);
  max-width: 100%;
  border-radius: var(--r-2); line-height: 1.55;
  word-wrap: break-word; overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  min-width: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
.chat-msg.aicat .chat-bubble {
  background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--mascot) 28%, transparent);
}
.chat-bubble code {
  font-family: var(--ff-mono); font-size: 0.92em;
  background: color-mix(in oklab, var(--fg) 10%, transparent);
  padding: 1px 6px; border-radius: 4px;
}
.chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--accent-fg) 18%, transparent); }
.chat-bubble a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
}
.chat-bubble a:hover { text-decoration-color: currentColor; }
.chat-bubble strong { font-weight: 700; }
.chat-bubble em { font-style: italic; }

.chat-bubble.chat-md { line-height: 1.6; }
.chat-bubble.chat-md > :first-child { margin-top: 0; }
.chat-bubble.chat-md > :last-child { margin-bottom: 0; }
.chat-bubble.chat-md h1,
.chat-bubble.chat-md h2,
.chat-bubble.chat-md h3,
.chat-bubble.chat-md h4 {
  font-family: var(--ff-body); font-weight: 600;
  margin: 12px 0 6px; line-height: 1.3;
}
.chat-bubble.chat-md h1 { font-size: 1.15em; }
.chat-bubble.chat-md h2 { font-size: 1.08em; }
.chat-bubble.chat-md h3 { font-size: 1.04em; }
.chat-bubble.chat-md p { margin: 6px 0; }
.chat-bubble.chat-md ul,
.chat-bubble.chat-md ol { margin: 6px 0; padding-left: 22px; }
.chat-bubble.chat-md li { margin: 3px 0; }
.chat-bubble.chat-md blockquote {
  margin: 8px 0; padding: 4px 12px;
  border-left: 3px solid color-mix(in oklab, currentColor 30%, transparent);
  color: color-mix(in oklab, currentColor 75%, transparent); font-style: italic;
}
.chat-bubble.chat-md pre {
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  padding: 10px 12px; border-radius: 6px; overflow-x: auto;
  font-family: var(--ff-mono); font-size: 0.9em; margin: 8px 0;
}

.chat-msg .chat-bubble.chat-code,
.chat-msg.you .chat-bubble.chat-code,
.chat-bubble.chat-code {
  padding: 0; background: var(--bg);
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  overflow: hidden; max-width: 100%; min-width: 0;
}
.chat-bubble.chat-code pre,
.chat-bubble pre,
.chat-msg pre {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}
.chat-bubble pre code,
.chat-msg pre code {
  display: block;
  white-space: pre;
  min-width: 0;
}
.chat-code-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: color-mix(in oklab, var(--fg) 6%, var(--bg-2));
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
}
.chat-code-head .lang { text-transform: uppercase; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
.chat-code-head .filename,
.chat-code-head .name { color: var(--fg-2); font-weight: 500; }
.chat-code-head .spread { flex: 1; }
.chat-bubble.chat-code pre {
  margin: 0; padding: 12px 16px; background: transparent;
  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.55;
  overflow-x: auto; color: var(--fg); border-radius: 0;
}
.chat-bubble.chat-code code { background: transparent; padding: 0; font-size: inherit; }
.chat-bubble.chat-code .token.keyword,
.chat-bubble.chat-code .token.atrule,
.chat-bubble.chat-code .token.selector { color: var(--accent); }
.chat-bubble.chat-code .token.string,
.chat-bubble.chat-code .token.attr-value { color: var(--mascot); }
.chat-bubble.chat-code .token.comment { color: var(--fg-3); font-style: italic; }
.chat-bubble.chat-code .token.number,
.chat-bubble.chat-code .token.boolean { color: var(--sun); }
.chat-bubble.chat-code .token.punctuation { color: var(--fg-2); }
.chat-bubble.chat-code .token.property,
.chat-bubble.chat-code .token.attr-name { color: var(--sky); }

.chat-msg.you .chat-image,
.chat-msg .chat-image,
.chat-image {
  display: inline-block; border-radius: 12px; overflow: hidden;
  max-width: min(100%, 480px); background: var(--bg-2);
  text-decoration: none; color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.chat-msg:hover .chat-image,
.chat-image:hover {
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 12%, transparent);
}
.chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.chat-image .cap,
.chat-image .caption { display: block; padding: 8px 12px; font-size: var(--fs-xs); color: var(--fg-3); font-family: var(--ff-mono); }

.chat-msg.you .chat-file,
.chat-msg .chat-file,
.chat-file {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: 12px; text-decoration: none; color: var(--fg);
  max-width: min(100%, 360px);
  transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
}
.chat-file:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.chat-file .glyph {
  font-size: 22px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
}
.chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-file .name {
  font-weight: 600; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.chat-file .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chat-file .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.chat-file .go { font-family: var(--ff-mono); font-size: 16px; color: var(--fg-3); flex-shrink: 0; }
.chat-file:hover .go { color: var(--accent); }

.chat-msg.you .chat-pdf,
.chat-msg .chat-pdf,
.chat-pdf {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); }
.chat-pdf-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
}
.chat-pdf-head .glyph { font-size: 18px; color: var(--mascot); flex-shrink: 0; }
.chat-pdf-head .name { flex: 1; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-pdf-head .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.chat-pdf-head a { color: var(--accent); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
.chat-pdf embed,
.chat-pdf iframe,
.chat-pdf object { width: 100%; height: 360px; border: 0; display: block; }

.chat-msg.you .chat-link,
.chat-msg .chat-link,
.chat-link {
  display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 10px;
  background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: 12px; text-decoration: none; color: var(--fg);
  max-width: min(100%, 480px);
  transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
}
.chat-msg:hover .chat-link,
.chat-link:hover {
  background: var(--bg-3);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
}
.chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
.chat-link .thumb,
.chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
.chat-link .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-link .host { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-transform: lowercase; }
.chat-link .title { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-link .desc { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.chat-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
  padding: 0 6px; letter-spacing: 0.02em;
}
.chat-meta .who { font-weight: 600; color: var(--fg-2); }
.chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
.chat-meta .t { color: var(--fg-3); }
.chat-meta .tick { color: var(--fg-3); margin-left: 2px; letter-spacing: -2px; font-family: var(--ff-mono); }
.chat-meta .tick.read { color: var(--accent); }

.chat-reactions {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
}
.chat-reactions .rxn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: 999px; font-size: var(--fs-xs);
  cursor: pointer; user-select: none;
  transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
  position: relative;
}
.chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
.chat-reactions .rxn.you {
  background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--accent);
}
.chat-reactions .rxn .e { font-size: 14px; line-height: 1; }
.chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: 11px; color: var(--fg-2); }
.chat-reactions .rxn.you .n { color: var(--accent); }

.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
}

@media (prefers-reduced-motion: no-preference) {
  .chat-typing span {
    animation: chat-typing-bounce 1.4s infinite ease-in-out;
  }
  .chat-typing span:nth-child(1) { animation-delay: 0s; }
  .chat-typing span:nth-child(2) { animation-delay: 0.18s; }
  .chat-typing span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30% { transform: translateY(-5px); opacity: 1; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes chat-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .chat-msg {
    animation: chat-fade-in 0.3s ease-out forwards;
  }
  .chat-msg:nth-child(1) { animation-delay: 0s; }
  .chat-msg:nth-child(2) { animation-delay: 0.05s; }
  .chat-msg:nth-child(3) { animation-delay: 0.1s; }
  .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
}

.chat-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: var(--space-3) 0 0;
  border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  flex-shrink: 0;
}
.chat-composer textarea {
  flex: 1; padding: 12px 16px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: inherit; font-size: var(--fs-sm);
  line-height: 1.4; resize: none;
  min-height: 44px; max-height: 200px;
  box-sizing: border-box; overflow-y: auto;
  scrollbar-width: thin;
}
.chat-composer textarea::placeholder { color: var(--fg-3); }
.chat-composer textarea:focus {
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
  outline: none;
}
.chat-composer .send {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  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), transform .1s ease;
}
.chat-composer .send:disabled { opacity: .5; cursor: not-allowed; }
/* Ghost icon buttons in the toolbar (attach / emoji / more) — NOT the round
   accent send button. */
.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);
}
.composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
.chat-composer .send:hover { transform: scale(1.04); }
.chat-composer .send:active { transform: scale(0.96); }
.chat-composer .send:focus-visible,
.composer-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-composer .send:disabled {
  background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
}

.aicat-portrait { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; }
.aicat-face {
  width: 32px; height: 32px; font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--mascot) 22%, var(--bg-2));
  border-radius: 50%; flex-shrink: 0;
}
.aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
[data-theme="dark"] .aicat-meta .name, [data-theme="ink"] .aicat-meta .name { color: var(--mascot); }

/* ============================================================
   Sidebar polish: hide zero-count badges; tonal active state;
   monospace count chips.
   ============================================================ */
.app-side .count {
  background: color-mix(in oklab, var(--mascot) 92%, transparent);
  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;
}
.app-side a:has(> .count:empty) > .count,
.app-side .count:empty { display: none; }
.app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
.app-side a.active .glyph { color: var(--accent); }

/* ── select primitive ─────────────────────────────────────────────────── */
.ds-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 0;
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--fg);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
        linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.ds-select:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.ds-select:hover { background-color: var(--bg-3); }

/* ── chat composer autogrow polish ────────────────────────────────────── */
.chat-composer textarea {
    resize: none;
    overflow-y: auto;
    transition: height var(--dur-snap) var(--ease);
    line-height: 1.5;
}
.chat-composer textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── mobile responsive: chat ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .chat-stack { max-width: 100%; }
    .chat-msg { padding: 4px 0; }
    .chat-msg:hover { padding: 4px 0; margin: 0; border-radius: 0; background: transparent; }
    .chat-bubble { font-size: var(--fs-sm); padding: 10px 14px; }
    .chat-avatar { width: 28px; height: 28px; font-size: 12px; }
    .chat-composer { padding: 8px; }
    .chat-composer textarea { padding: 10px 12px; }
}

/* ── landscape orientation: reduce vertical space for composer ──────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .chat-composer { padding: 6px 0; }
    .chat-composer textarea { min-height: 36px; max-height: 120px; }
    .chat-composer .send, .chat-composer button { width: 36px; height: 36px; font-size: 14px; }
}

/* ============================================================
   Enhanced UX: Component States, Drag-and-Drop, Context Menus
   Comprehensive improvements for perfect UX across all surfaces
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Component States — Disabled, Loading, Error, Success
   ────────────────────────────────────────────────────────────── */

/* Disabled state for all interactive elements */
.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
button:disabled, [disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state — spinning indicator */
@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading { position: relative; }
.loading::after {
  content: '';
  position: absolute; top: 50%; right: 12px;
  width: 16px; height: 16px;
  border: 2px solid var(--bg-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

/* Error state */
.error, [data-state="error"],
.row.error, input.error,
textarea.error {
  border-color: var(--warn) !important;
  background-color: color-mix(in oklab, var(--warn) 6%, var(--bg));
}
.error::placeholder { color: color-mix(in oklab, var(--warn) 60%, var(--fg-3)); }

/* Success state */
.success, [data-state="success"],
.row.success { background-color: color-mix(in oklab, var(--green-2) 6%, var(--bg)); }

/* Readonly state */
[readonly], .readonly {
  background: var(--bg-2);
  cursor: default;
  opacity: 0.8;
}

/* ────────────────────────────────────────────────────────────
   Enhanced Button Micro-Interactions
   ────────────────────────────────────────────────────────────── */

/* Button scale feedback on active */
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-ghost:active:not(:disabled),
button:active:not(:disabled) {
  transform: scale(0.98);
}

/* 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). */
.btn, .btn-primary, .btn-ghost,
button, a.row, .row,
.chip, [role="button"],
input[type="checkbox"], input[type="radio"] {
  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) */
.btn, .btn-primary, .btn-ghost, button {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ────────────────────────────────────────────────────────────
   Drag-and-Drop Styles
   ────────────────────────────────────────────────────────────── */

/* Draggable element */
[draggable="true"], .draggable {
  cursor: grab;
  user-select: none;
}
[draggable="true"]:active { cursor: grabbing; }

/* Drag-over state */
.drag-over {
  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
  border: 2px dashed var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Drag-ghost (semi-transparent dragging element) */
.drag-ghost {
  opacity: 0.5;
  transform: rotate(2deg) scale(0.95);
}

/* Drop-zone indicator */
.drop-zone {
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-2);
  padding: var(--space-4);
  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--fg-3);
  transition: all var(--dur-snap) var(--ease);
}
.drop-zone.active {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
  color: var(--accent);
}

/* List item reorder indicator */
.list-item.dragging { opacity: 0.5; }
.list-item.drag-before::before,
.list-item.drag-after::after {
  content: '';
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: var(--accent);
  animation: pulse-line 0.6s ease-in-out infinite;
}
.list-item.drag-before::before { top: -2px; }
.list-item.drag-after::after { bottom: -2px; }

@keyframes pulse-line {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────
   Context Menu Styles
   ────────────────────────────────────────────────────────────── */

.ds-context-menu {
  position: absolute;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
  min-width: 160px;
  z-index: calc(var(--z-overlay, 1000) + 1);
  padding: 4px 0;
  animation: context-menu-in 0.15s ease-out;
}

@keyframes context-menu-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ds-context-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--fg);
  font-size: var(--fs-sm);
  transition: background var(--dur-snap) var(--ease);
}
.ds-context-menu-item:hover {
  background: var(--bg-3);
  color: var(--accent);
}
.ds-context-menu-item:active {
  background: color-mix(in oklab, var(--accent) 20%, var(--bg-3));
}
.ds-context-menu-item.danger {
  color: var(--warn);
}
.ds-context-menu-item.danger:hover {
  background: color-mix(in oklab, var(--warn) 12%, var(--bg));
}
.ds-context-menu-divider {
  height: 1px;
  background: var(--rule);
  margin: 4px 0;
}
.ds-context-menu-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Context menu trigger indicator */
[data-has-context-menu] {
  cursor: context-menu;
}

/* ────────────────────────────────────────────────────────────
   Enhanced Form Inputs
   ────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  transition: background var(--dur-snap) var(--ease),
              border-color var(--dur-snap) var(--ease),
              box-shadow var(--dur-snap) var(--ease);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
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-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 6px);
  align-items: stretch;
  width: 100%;
}
.ds-field-label {
  font-size: var(--fs-sm, 14px);
  color: var(--fg-2);
  line-height: 1.3;
}
.ds-field-hint {
  font-size: var(--fs-tiny, 13px);
  color: var(--fg-3);
  line-height: 1.35;
}
.ds-field-count {
  font-size: var(--fs-tiny, 13px);
  color: var(--fg-3);
  align-self: flex-end;
}

.ds-field input,
.ds-field textarea,
.ds-field .ds-select,
.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-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
.ds-search-input::placeholder { color: var(--fg-3); }

.ds-field input:focus-visible,
.ds-field textarea:focus-visible,
.ds-field .ds-select:focus-visible,
.ds-search-input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.ds-field input:disabled,
.ds-field textarea:disabled,
.ds-field .ds-select:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.ds-field input[aria-invalid="true"],
.ds-field textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
}

/* Clear button for text inputs */
input[type="text"]:not(:placeholder-shown) + .input-clear,
input[type="email"]:not(:placeholder-shown) + .input-clear,
input[type="password"]:not(:placeholder-shown) + .input-clear {
  display: inline-flex;
}

.input-clear {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  cursor: pointer;
  color: var(--fg-3);
  background: transparent;
  border: 0;
  padding: 0;
  margin-right: 8px;
  border-radius: var(--r-1);
  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
}
.input-clear:hover {
  background: var(--bg-2);
  color: var(--fg);
}

/* ────────────────────────────────────────────────────────────
   Accessibility Enhancements
   ────────────────────────────────────────────────────────────── */

/* Enhanced focus-visible for all interactive elements */
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
.row:focus-visible,
.row[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: var(--accent-fg);
  padding: 8px 16px; border-radius: var(--r-1);
  text-decoration: none; z-index: var(--z-overlay, 1000);
}
.skip-to-main:focus { top: 10px; }

/* 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 *, .app * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Performance
   ────────────────────────────────────────────────────────────── */

/* 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. */
.panel, .row {
  contain: layout style;
}

/* ────────────────────────────────────────────────────────────
   Mobile Touch Optimizations
   ────────────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
  /* Mobile devices: larger touch targets, faster responses */
  .btn, .btn-primary, .btn-ghost,
  button, a.row, [role="button"],
  .ds-icon-btn, .composer-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 20px;
  }
  /* Icon buttons stay square — the padding bump above would distort them. */
  .ds-icon-btn, .composer-btn { padding: 0; }

  /* Remove hover effects on touch devices (use active instead) */
  .btn:hover, .btn-primary:hover, .btn-ghost:hover {
    background-color: inherit;
  }

  /* Momentum scrolling for iOS */
  .app-side, .panel, .row {
    -webkit-overflow-scrolling: touch;
  }

  /* Long-press feedback for drag-enabled items */
  [draggable="true"], .draggable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ────────────────────────────────────────────────────────────
   Theme Transition Smoothness
   ────────────────────────────────────────────────────────────── */

/* Scoped to the DS wrapper so the design system never reaches out and
   animates the host document's html/body. */
.ds-247420, .app {
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}

/* ────────────────────────────────────────────────────────────
   Empty State & Loading States
   ────────────────────────────────────────────────────────────── */

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-8) var(--space-4);
  text-align: center; color: var(--fg-3);
}
.empty-state-icon {
  font-size: 48px; opacity: 0.4;
}
.empty-state-title {
  font-size: var(--fs-lg); font-weight: 600; color: var(--fg-2);
}
.empty-state-body {
  font-size: var(--fs-sm); max-width: 40ch;
}

/* Skeleton loading state */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    var(--bg-3) 50%,
    var(--bg-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-load 1.5s infinite;
  border-radius: var(--r-2);
}

@keyframes skeleton-load {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line { height: 12px; margin-bottom: 12px; }
.skeleton-title { height: 24px; margin-bottom: 16px; width: 60%; }

/* ────────────────────────────────────────────────────────────
   Toast Notification Styles
   ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--space-3) var(--space-4);
  max-width: 320px;
  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
  animation: toast-slide-in 0.3s ease-out;
  z-index: calc(var(--z-overlay, 1000) + 10);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast.error { border-color: var(--warn); }
.toast.success { border-color: var(--green-2); }
.toast.warning { border-color: var(--sun); }

@media (max-width: 480px) {
  .toast {
    bottom: 16px; right: 16px; left: 16px;
    max-width: none;
  }
}

/* ============================================================
   Spinner — animated loading indicator
   ============================================================ */
.ds-spinner {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 16px;
}
.ds-spinner span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: ds-bounce 1.4s infinite ease-in-out;
}
.ds-spinner span:nth-child(1) { animation-delay: 0s; }
.ds-spinner span:nth-child(2) { animation-delay: 0.18s; }
.ds-spinner span:nth-child(3) { animation-delay: 0.36s; }

.ds-spinner-lg { height: 24px; gap: 6px; }
.ds-spinner-lg span { width: 6px; height: 6px; }

.ds-spinner-sm { height: 12px; gap: 2px; }
.ds-spinner-sm span { width: 2px; height: 2px; }

.ds-spinner-xs { height: 8px; gap: 1px; }
.ds-spinner-xs span { width: 1.5px; height: 1.5px; }

.ds-spinner-xl { height: 32px; gap: 8px; }
.ds-spinner-xl span { width: 8px; height: 8px; }

@keyframes ds-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}

/* ============================================================
   Skeleton — animated loading placeholder
   ============================================================ */
.ds-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s infinite;
  border-radius: var(--r-1);
}

@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Alert — contextual message banner
   ============================================================ */
.ds-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-1);
  background: var(--panel-1);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
}

.ds-alert-info { --alert-tone: var(--sky); }
.ds-alert-success { --alert-tone: var(--green); }
.ds-alert-warn { --alert-tone: var(--sun); }
.ds-alert-error { --alert-tone: var(--warn); }

.ds-alert-icon {
  flex-shrink: 0;
  color: var(--alert-tone);
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.ds-alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-alert-title {
  font-weight: 500;
  font-size: var(--fs-sm);
}

.ds-alert-message {
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.ds-alert-retry { margin-top: var(--space-2); }

.ds-alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-3);
  padding: 0;
  font-size: 14px;
  line-height: 1;
  min-width: 20px;
  text-align: center;
  transition: color var(--dur-snap) var(--ease);
}
.ds-alert-dismiss:hover { color: var(--fg); }

/* ============================================================
   Responsive Perfection — Drawer rail, ultrawide cap, mobile compact
   ============================================================ */

/* Tablet + Mobile: side rail becomes off-canvas drawer (≤900px) */
@media (max-width: 900px) {
  .app-body,
  .app-body.no-side { grid-template-columns: 1fr !important; }
  .app-side-shell {
    position: fixed;
    left: 0; top: var(--app-topbar-h);
    height: calc(100vh - var(--app-topbar-h) - var(--app-status-h));
    width: 280px; max-width: 80vw;
    transform: translateX(-100%);
    transition: transform var(--dur-base, 240ms) var(--ease, ease);
    z-index: 50;
    background: var(--bg);
    border-right: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
    overflow-y: auto;
  }
  .app-side-shell.open,
  .app-side.open,
  .app-body.side-open .app-side-shell { transform: translateX(0); }
  .app-side {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: var(--space-2);
    padding: var(--space-3);
    font-size: var(--fs-sm);
  }
  .app-side a {
    flex: 0 0 auto; min-width: 0;
    grid-template-columns: 18px 1fr auto;
    padding: 10px 12px;
  }
  .app-side .group { width: 100%; }
  /* 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. */
  .app-crumb { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 12px; }
  .app-crumb > .sep, .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
  .app-crumb .crumb-right { margin-left: 0; }
  .chat-head { padding: var(--space-2) var(--space-3) var(--space-2); margin-bottom: var(--space-2); }
  .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* Drawer scrim — lives inside .app-body, shown when drawer open ≤900px */
.app-side-scrim {
  display: none;
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  z-index: 49;
}
@media (max-width: 900px) {
  .app-body.side-open .app-side-scrim { display: block; }
}

/* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px */
.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;
}
.app-side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .app-side-toggle { display: inline-flex; }
  .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) {
  .app { height: 100dvh; min-height: 0; overflow: hidden; }
  /* Embedded shell (freddie WM window) fills its container, not the viewport. */
  .fd-root .app { height: 100%; overflow: visible; }
  .app-body { min-height: 0; flex: 1 1 auto; }
  .app-side-shell { overflow-y: auto; min-height: 0; }
  .app-main { overflow-y: auto; min-height: 0; }
}

/* Mobile (≤480) status bar compact; hide tail item */
@media (max-width: 480px) {
  .app-status {
    font-size: var(--fs-micro);
    padding: 4px var(--space-2);
    gap: var(--space-2);
  }
  .app-status > :last-child:not(:only-child) { display: none; }
}

/* Tiny phone (≤360) topbar compact */
@media (max-width: 360px) {
  .app-topbar {
    padding: 8px var(--space-2);
    font-size: var(--fs-xs);
    gap: var(--space-2);
  }
  .app-topbar nav,
  .app-topbar > :last-child { display: none; }
  .brand { font-size: var(--fs-tiny); }
}