/* GENERATED bundle — do not edit; built from main.css imports */
/* ---- design-system/_fonts.css ---- */
/* ==========================================================================
   FONTS — Inter (self-hosted if present) + system stack
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), local("Inter Variable");
}

/* Prefer system UI when Inter files missing — no FOIT */

/* ---- design-system/_primitives.css ---- */
/* ==========================================================================
   PRIMITIVES — Raw Design Values
   Only referenced by semantic tokens. Never by components.
   ========================================================================== */

:root {
  /* ---- Neutral Scale (OANDA-inspired) ---- */
  --p-white:        #FFFFFF;
  --p-neutral-25:   #E8EDF2;
  /* 50/75/100/150/200/250 (light-mode fix 2026-09-05): the 2026-08-18 "ramp
     repair" interpolated 100→350 and left every step in that range within a
     few luminance points of the others (contrast ratios ~1.03–1.07 between
     adjacent light-theme surfaces — i.e. invisible). These are exclusively
     light-theme surface/border primitives (verified: no dark-theme token
     references 50/100/150/200/250 — only 25/300/350 are dark-theme-shared,
     left untouched below). Re-derived for real perceptual spacing; see
     DESIGN_SPEC.md §10 for the contrast targets these satisfy. */
  --p-neutral-50:   #F1F3F6;
  --p-neutral-75:   #E6EAEF;
  --p-neutral-100:  #DBE1E7;
  --p-neutral-150:  #CFD6DD;
  --p-neutral-200:  #B9C3CD;
  --p-neutral-250:  #8E9AA7;
  --p-neutral-300:  #9CAEC6; /* dark-theme-shared (sidebar text) — do not change */
  --p-neutral-350:  #98ADC9; /* dark-theme-shared (text-secondary) — do not change */
  --p-neutral-400:  #6B7D94;
  --p-neutral-500:  #4A5B6E;
  --p-neutral-600:  #384858;
  --p-neutral-700:  #243444;
  --p-neutral-800:  #1B2937;
  --p-neutral-850:  #182430;
  --p-neutral-900:  #141D28;
  --p-neutral-950:  #131923;
  --p-neutral-975:  #0E1319;
  --p-black:        #0A0E14;

  /* ---- Blue/Teal (Primary — OANDA-inspired) ---- */
  --p-blue-50:    #E6F8FC;
  --p-blue-100:   #B3EBF5;
  --p-blue-200:   #80DEEE;
  --p-blue-300:   #4DD1E6;
  --p-blue-400:   #2EB8DB;
  --p-blue-500:   #2EB8DB;
  --p-blue-600:   #2598B5;
  /* 650 (light-mode fix 2026-09-05): blue-500 (used as the dark-theme
     accent) is only 1.03:1 against the light-theme page background —
     effectively invisible; blue-700 alone was borderline (4.09:1, under
     the 4.5:1 AA text threshold) directly on page. blue-650 clears AA in
     every light-theme context it's used (buttons, links, headings — see
     _semantic.css light block). */
  --p-blue-650:   #166D82;
  --p-blue-700:   #1B7A92;
  --p-blue-800:   #145B6E;
  --p-blue-900:   #0D3D49;

  /* ---- Green (Success — OANDA-inspired) ---- */
  --p-green-50:   #E6FFF4;
  --p-green-100:  #B3FFE0;
  --p-green-400:  #00CE7D;
  --p-green-500:  #00CE7D;
  --p-green-600:  #199D22;
  --p-green-700:  #0D7A1A;

  /* ---- Amber/Orange (Warning — OANDA-inspired) ---- */
  --p-amber-50:   #FFF5EB;
  --p-amber-100:  #FFE5C7;
  --p-amber-400:  #FC9728;
  --p-amber-500:  #FC9728;
  --p-amber-600:  #E07D10;
  --p-amber-700:  #B45309;

  /* ---- Red (Danger — OANDA-inspired) ---- */
  --p-red-50:     #FEF2F2;
  --p-red-100:    #FDE2E2;
  --p-red-400:    #EB4C4C;
  --p-red-500:    #EB4C4C;
  --p-red-600:    #CC3333;
  --p-red-700:    #B91C1C;

  /* ---- Cyan (Info) ---- */
  --p-cyan-50:    #ECFEFF;
  --p-cyan-100:   #CFFAFE;
  --p-cyan-400:   #44C6FD;
  --p-cyan-500:   #06B6D4;
  --p-cyan-600:   #0891B2;

  /* ---- Purple (Accent alt) ---- */
  --p-purple-400: #B47CDE;
  --p-purple-500: #A354E3;
}

/* ---- design-system/_typography.css ---- */
/* ==========================================================================
   TYPOGRAPHY — balanced scale (root 16px)
   Roles map components to a single coherent hierarchy.
   ========================================================================== */

:root {
  --t-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-font-weight-regular: 400;
  --t-font-weight-medium: 500;
  --t-font-weight-semibold: 600;
  --t-font-weight-bold: 600;

  /* Aliases — these spellings are already used across component and module CSS.
     Without a definition every such declaration was dropped by the browser
     (var() with no fallback = invalid at computed-value time), so mono text fell
     back to the body font and "normal" weights inherited a bolder parent. */
  --t-font-weight-normal: var(--t-font-weight-regular);
  --t-font-family-mono: var(--t-font-mono);

  /* Absolute scale @ 16px root
     11 / 12 / 13 / 14 / 15 / 16 / 18 / 22 / 28 / 36 */
  --t-font-size-2xs: 0.6875rem; /* 11 — meta, badges, footer */
  --t-font-size-xs:  0.75rem;   /* 12 — captions, secondary chrome */
  --t-font-size-sm:  0.8125rem; /* 13 — nav labels, compact UI */
  --t-font-size-base: 0.875rem; /* 14 — default UI body */
  --t-font-size-md:  0.9375rem; /* 15 — chat / reading body */
  --t-font-size-lg:  1rem;      /* 16 — section titles */
  --t-font-size-xl:  1.125rem;  /* 18 — page titles */
  --t-font-size-2xl: 1.375rem;  /* 22 */
  --t-font-size-3xl: 1.75rem;   /* 28 */
  --t-font-size-4xl: 2.25rem;   /* 36 */

  --t-line-height-none: 1;
  --t-line-height-tight: 1.25;
  --t-line-height-snug: 1.4;
  --t-line-height-normal: 1.5;
  --t-line-height-relaxed: 1.6;

  --t-tracking-tight: -0.015em;
  --t-tracking-normal: -0.011em;
  --t-tracking-wide: 0.04em;
  --t-tracking-wider: 0.08em;

  /* Semantic roles — use these in components/theme */
  --type-meta: var(--t-font-size-2xs);     /* 11 */
  --type-caption: var(--t-font-size-xs);   /* 12 */
  --type-ui: var(--t-font-size-sm);        /* 13 */
  --type-body: var(--t-font-size-base);    /* 14 */
  --type-read: var(--t-font-size-md);      /* 15 chat */
  --type-title: var(--t-font-size-lg);     /* 16 */
  --type-heading: var(--t-font-size-xl);   /* 18 */
  --type-display: var(--t-font-size-2xl);  /* 22 */
  --type-code: var(--t-font-size-sm);      /* 13 */

  --type-icon-sm: 18px;
  --type-icon: 20px;
  --type-icon-lg: 22px;
}

html {
  font-family: var(--t-font-family);
  font-size: 16px; /* MUST stay 16 — rem scale depends on this */
  line-height: var(--t-line-height-normal);
  letter-spacing: var(--t-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--type-body);
  font-weight: var(--t-font-weight-regular);
  line-height: var(--t-line-height-normal);
  letter-spacing: var(--t-tracking-normal);
  color: var(--s-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: var(--t-tracking-tight);
  line-height: var(--t-line-height-tight);
  color: var(--c-heading-color, var(--s-text-primary));
}

h1 { font-size: var(--type-display); }
h2 { font-size: var(--type-heading); }
h3 { font-size: var(--type-title); }
h4 { font-size: var(--type-body); }
h5, h6 { font-size: var(--type-ui); }

p {
  font-size: inherit;
  line-height: var(--t-line-height-relaxed);
}

small, .text-meta { font-size: var(--type-meta); line-height: var(--t-line-height-snug); }
.text-caption { font-size: var(--type-caption); }
.text-ui { font-size: var(--type-ui); }
.text-body { font-size: var(--type-body); }
.text-read { font-size: var(--type-read); line-height: var(--t-line-height-relaxed); }
.text-title { font-size: var(--type-title); font-weight: var(--t-font-weight-semibold); }
.text-heading { font-size: var(--type-heading); font-weight: var(--t-font-weight-semibold); }

label, .form-label, .field label {
  font-size: var(--type-caption);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: var(--t-tracking-wide);
  line-height: var(--t-line-height-snug);
}

button, input, textarea, select {
  font-family: inherit;
  font-size: var(--type-body);
}

code, pre, kbd, samp {
  font-family: var(--t-font-mono);
  font-size: var(--type-code);
  letter-spacing: 0;
}

.material-icons {
  font-size: var(--type-icon);
  line-height: 1;
  font-weight: 400;
}

/* ---- design-system/_spacing.css ---- */
/* ==========================================================================
   SPACING — Consistent Spacing Scale (4px base)
   ========================================================================== */
:root {
  --sp-0:     0;
  --sp-px:    1px;
  --sp-0-5:   0.125rem;  /* 2px */
  --sp-1:     0.25rem;   /* 4px */
  --sp-1-5:   0.375rem;  /* 6px */
  --sp-2:     0.5rem;    /* 8px */
  --sp-2-5:   0.625rem;  /* 10px */
  --sp-3:     0.75rem;   /* 12px */
  --sp-4:     1rem;      /* 16px */
  --sp-5:     1.25rem;   /* 20px */
  --sp-6:     1.5rem;    /* 24px */
  --sp-8:     2rem;      /* 32px */
  --sp-10:    2.5rem;    /* 40px */
  --sp-12:    3rem;      /* 48px */
  --sp-16:    4rem;      /* 64px */
  --sp-20:    5rem;      /* 80px */
  --sp-24:    6rem;      /* 96px */

  /* Named spacing for common uses */
  --sp-page:        var(--sp-8);
  --sp-nav-height:   56px;
  --sp-card:        var(--sp-8);
  --sp-section-gap: var(--sp-16);
  --sp-inline:      var(--sp-2);
  --sp-stack:       var(--sp-5);
}

/* ---- design-system/_layout.css ---- */
/* ==========================================================================
   LAYOUT — Structural Dimensions
   ========================================================================== */
:root {
  --layout-sidebar-width:           220px;
  --layout-sidebar-width-collapsed: 52px;
  --layout-header-height:           48px;
  --layout-footer-height:           auto;
  --layout-content-max-width:       1400px;
  --layout-content-padding:         var(--sp-6);
  --layout-page-min-height:         var(--zoom-height, 100dvh);
  --layout-modal-width-sm:          400px;
  --layout-modal-width-md:          560px;
  --layout-modal-width-lg:          720px;
  --layout-drawer-width:            280px;
  --layout-toast-width:             360px;
  --layout-sidebar-icon-size:       20px;
  --layout-sidebar-item-height:     40px;
}

/* ---- design-system/_motion.css ---- */
/* ==========================================================================
   MOTION — Transitions & Animations
   ========================================================================== */
:root {
  /* Durations */
  --motion-duration-instant:  75ms;
  --motion-duration-fast:     150ms;
  --motion-duration-normal:   200ms;
  --motion-duration-slow:     300ms;
  --motion-duration-slower:   500ms;

  /* Easings */
  --motion-ease-default:  cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Composed transitions */
  --motion-colors:    color var(--motion-duration-normal) var(--motion-ease-default),
                      background-color var(--motion-duration-normal) var(--motion-ease-default),
                      border-color var(--motion-duration-normal) var(--motion-ease-default),
                      box-shadow var(--motion-duration-normal) var(--motion-ease-default);
  --motion-transform: transform var(--motion-duration-normal) var(--motion-ease-default);
  --motion-opacity:   opacity var(--motion-duration-normal) var(--motion-ease-default);
  --motion-all:       all var(--motion-duration-normal) var(--motion-ease-default);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast:    0ms;
    --motion-duration-normal:  0ms;
    --motion-duration-slow:    0ms;
    --motion-duration-slower:  0ms;
  }
}

/* ---- design-system/_elevation.css ---- */
/* ==========================================================================
   ELEVATION — Z-Index Scale & Border Radius
   ========================================================================== */
:root {
  /* Z-Index */
  --z-base:       0;
  --z-raised:     1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-popover:    500;
  --z-toast:      600;
  --z-tooltip:    700;
  --z-max:        9999;

  /* Border Radius */
  --radius-none:    0;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --radius-2xl:     16px;
  --radius-full:    9999px;

  /* Named radius for components */
  --radius-button:   var(--radius-lg); /* 8px — matches shipped _module-polish button chrome */
  --radius-input:    var(--radius-sm);
  --radius-card:     var(--radius-lg);
  --radius-modal:    var(--radius-xl);
  --radius-badge:    var(--radius-full);
  --radius-tooltip:  var(--radius-md);
  --radius-dropdown: var(--radius-lg);
}

/* ---- design-system/_semantic.css ---- */
/* ==========================================================================
   SEMANTIC TOKENS — Contextual Meaning
   Maps primitives to roles. Flips between light/dark.
   Brand overrides target these via <style id="brand-overrides">.
   ========================================================================== */

/* ---- LIGHT MODE (default) ---- */
/* Light-mode contrast fix (2026-09-05, DESIGN_SPEC §10): the previous
   mapping put --s-bg-page/-surface/-surface-sunken and --s-border all on
   the same clustered 100–350 primitive band (~1.03–1.07:1 contrast between
   them — indistinguishable) and --s-accent on blue-500 (1.03:1 against
   page, 2.33:1 for white-on-accent button labels — both fail WCAG AA).
   Re-verified end to end against real WCAG contrast math, not eyeballed;
   see _primitives.css's neutral-50/75/100/150/200/250 and blue-650 for the
   new values these reference. */
:root, [data-theme="light"] {
  /* Backgrounds */
  --s-bg-page:            var(--p-neutral-75);
  --s-bg-surface:         var(--p-neutral-50);
  --s-bg-surface-raised:  var(--p-white);
  --s-bg-surface-sunken:  var(--p-neutral-100);
  --s-bg-overlay:         var(--p-white);
  --s-bg-sidebar:         var(--p-neutral-900);
  --s-bg-header:          var(--p-neutral-100);
  --s-bg-input:           var(--p-neutral-50);
  --s-bg-hover:           var(--p-neutral-100);
  --s-bg-active:          var(--p-neutral-150);
  --s-bg-selected:        rgba(22, 109, 130, 0.12);
  --s-bg-disabled:        var(--p-neutral-50);

  /* Accent / Primary */
  --s-accent:             var(--p-blue-650);
  --s-accent-hover:       var(--p-blue-800);
  --s-accent-active:      var(--p-blue-900);
  --s-accent-subtle:      rgba(22, 109, 130, 0.12);
  --s-accent-on:          var(--p-white);

  /* Text */
  --s-text-primary:       var(--p-neutral-800);
  --s-text-secondary:     var(--p-neutral-600);
  --s-text-tertiary:      var(--p-neutral-400);
  --s-text-disabled:      var(--p-neutral-300);
  --s-text-inverse:       var(--p-white);
  --s-text-on-accent:     var(--p-white);
  --s-text-link:          var(--p-blue-650);
  --s-text-link-hover:    var(--p-blue-800);

  /* Sidebar (always dark, even in light mode — UniFi pattern) */
  --s-sidebar-text:           var(--p-neutral-300);
  --s-sidebar-text-active:    var(--p-white);
  --s-sidebar-text-muted:     var(--p-neutral-500);
  --s-sidebar-icon:           var(--p-neutral-400);
  --s-sidebar-icon-active:    var(--p-white);
  --s-sidebar-hover:          rgba(255, 255, 255, 0.08);
  --s-sidebar-active:         rgba(255, 255, 255, 0.12);
  --s-sidebar-divider:        rgba(255, 255, 255, 0.1);
  --s-sidebar-accent:         var(--s-accent);

  /* Borders */
  --s-border:             var(--p-neutral-200);
  --s-border-subtle:      var(--p-neutral-150);
  --s-border-strong:      var(--p-neutral-250);
  --s-border-focus:       var(--p-blue-650);
  --s-border-error:       var(--p-red-500);

  /* Hairlines & washes (DESIGN_SPEC §2.2 — dark alpha on light surfaces) */
  --s-hairline:           rgba(0, 0, 0, 0.08);
  --s-hairline-strong:    rgba(0, 0, 0, 0.12);
  --s-hover-wash:         rgba(0, 0, 0, 0.04);
  --s-active-wash:        rgba(0, 0, 0, 0.07);

  /* Status */
  --s-status-success:       var(--p-green-500);
  --s-status-success-bg:    var(--p-green-50);
  --s-status-success-text:  var(--p-green-700);
  --s-status-warning:       var(--p-amber-500);
  --s-status-warning-bg:    var(--p-amber-50);
  --s-status-warning-text:  var(--p-amber-700);
  --s-status-error:         var(--p-red-500);
  --s-status-error-bg:      var(--p-red-50);
  --s-status-error-text:    var(--p-red-700);
  --s-status-info:          var(--p-cyan-500);
  --s-status-info-bg:       var(--p-cyan-50);
  --s-status-info-text:     var(--p-cyan-600);

  /* Shadows — md/lg match shipped _theme-xai overlay chrome; sm stays none (flat module chrome) */
  --s-shadow-xs: none;
  --s-shadow-sm: none;
  --s-shadow-md: 0 12px 32px rgba(0,0,0,0.5);
  --s-shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --s-shadow-xl: none;
  --s-shadow-focus: 0 0 0 3px rgba(22, 109, 130, 0.28);
  --s-shadow-error: 0 0 0 1px var(--s-status-error);
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  /* Backgrounds */
  --s-bg-page:            var(--p-neutral-950);
  --s-bg-surface:         var(--p-neutral-850);
  --s-bg-surface-raised:  var(--p-neutral-800);
  --s-bg-surface-sunken:  var(--p-neutral-950);
  --s-bg-overlay:         var(--p-neutral-800);
  --s-bg-sidebar:         var(--p-neutral-975);
  --s-bg-header:          var(--p-neutral-850);
  --s-bg-input:           var(--p-neutral-800);
  --s-bg-hover:           var(--p-neutral-700);
  --s-bg-active:          var(--p-neutral-600);
  --s-bg-selected:        rgba(46, 184, 219, 0.14);
  --s-bg-disabled:        var(--p-neutral-800);

  /* Accent (lighter for dark backgrounds) */
  --s-accent:             var(--p-blue-400);
  --s-accent-hover:       var(--p-blue-300);
  --s-accent-active:      var(--p-blue-200);
  --s-accent-subtle:      rgba(46, 184, 219, 0.14);
  --s-accent-on:          var(--p-neutral-950);

  /* Text */
  --s-text-primary:       var(--p-neutral-25);
  --s-text-secondary:     var(--p-neutral-350);
  --s-text-tertiary:      var(--p-neutral-500);
  --s-text-disabled:      var(--p-neutral-600);
  --s-text-inverse:       var(--p-neutral-900);
  --s-text-on-accent:     var(--p-neutral-950);
  --s-text-link:          var(--p-blue-400);
  --s-text-link-hover:    var(--p-blue-300);

  /* Sidebar */
  --s-sidebar-text:           var(--p-neutral-300);
  --s-sidebar-text-active:    var(--p-white);
  --s-sidebar-text-muted:     var(--p-neutral-500);
  --s-sidebar-icon:           var(--p-neutral-500);
  --s-sidebar-icon-active:    var(--p-white);
  --s-sidebar-hover:          rgba(255, 255, 255, 0.06);
  --s-sidebar-active:         rgba(255, 255, 255, 0.1);
  --s-sidebar-divider:        rgba(255, 255, 255, 0.08);
  --s-sidebar-accent:         var(--s-accent);

  /* Borders */
  --s-border:             var(--p-neutral-700);
  --s-border-subtle:      var(--p-neutral-800);
  --s-border-strong:      var(--p-neutral-600);
  --s-border-focus:       var(--p-blue-400);
  --s-border-error:       var(--p-red-400);

  /* Hairlines & washes (DESIGN_SPEC §2.2 — canonical monochrome values) */
  --s-hairline:           rgba(255, 255, 255, 0.06);
  --s-hairline-strong:    rgba(255, 255, 255, 0.08);
  --s-hover-wash:         rgba(255, 255, 255, 0.03);
  --s-active-wash:        rgba(255, 255, 255, 0.08);

  /* Status */
  --s-status-success:       var(--p-green-400);
  --s-status-success-bg:    rgba(55, 190, 95, 0.15);
  --s-status-success-text:  var(--p-green-400);
  --s-status-warning:       var(--p-amber-400);
  --s-status-warning-bg:    rgba(245, 166, 35, 0.15);
  --s-status-warning-text:  var(--p-amber-400);
  --s-status-error:         var(--p-red-400);
  --s-status-error-bg:      rgba(240, 58, 62, 0.15);
  --s-status-error-text:    var(--p-red-400);
  --s-status-info:          var(--p-cyan-400);
  --s-status-info-bg:       rgba(68, 198, 253, 0.15);
  --s-status-info-text:     var(--p-cyan-400);

  /* Shadows — md/lg match shipped _theme-xai overlay chrome; sm stays none (flat module chrome) */
  --s-shadow-xs: none;
  --s-shadow-sm: none;
  --s-shadow-md: 0 12px 32px rgba(0,0,0,0.5);
  --s-shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --s-shadow-xl: none;
  --s-shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.06);
  --s-shadow-error: 0 0 0 1px var(--s-status-error);

  /* Component (--c-*) theme overrides live in _components.css (consolidated 2026-08-18) */
}

/* ── Chart Palette ── */
/* 12 distinct colours for data visualisation, derived from platform tokens */
:root {
  --chart-1: var(--s-accent);
  --chart-2: var(--s-status-info);
  --chart-3: var(--s-status-success);
  --chart-4: var(--s-status-warning);
  --chart-5: var(--s-status-error);
  --chart-6: #8b5cf6;
  --chart-7: #06b6d4;
  --chart-8: #ec4899;
  --chart-9: #f97316;
  --chart-10: #14b8a6;
  --chart-11: #a855f7;
  --chart-12: #84cc16;
  /* Soft versions (20% opacity) for fills/backgrounds */
  --chart-1-soft: color-mix(in srgb, var(--chart-1) 20%, transparent);
  --chart-2-soft: color-mix(in srgb, var(--chart-2) 20%, transparent);
  --chart-3-soft: color-mix(in srgb, var(--chart-3) 20%, transparent);
  --chart-4-soft: color-mix(in srgb, var(--chart-4) 20%, transparent);
  --chart-5-soft: color-mix(in srgb, var(--chart-5) 20%, transparent);
  --chart-6-soft: color-mix(in srgb, var(--chart-6) 20%, transparent);
  /* Mid versions (50% opacity) for bars/shapes */
  --chart-1-mid: color-mix(in srgb, var(--chart-1) 55%, transparent);
  --chart-2-mid: color-mix(in srgb, var(--chart-2) 55%, transparent);
  --chart-3-mid: color-mix(in srgb, var(--chart-3) 55%, transparent);
  --chart-4-mid: color-mix(in srgb, var(--chart-4) 55%, transparent);
  --chart-5-mid: color-mix(in srgb, var(--chart-5) 55%, transparent);
  --chart-6-mid: color-mix(in srgb, var(--chart-6) 55%, transparent);
}

/* ---- design-system/_components.css ---- */
/* ==========================================================================
   COMPONENT TOKENS — Specific Component Bindings
   References --s-* semantic tokens. Components reference these --c-* tokens.
   ========================================================================== */
:root {
  /* ===== BUTTON ===== */
  --c-btn-primary-bg:             var(--s-accent);
  --c-btn-primary-bg-hover:       var(--s-accent-hover);
  --c-btn-primary-bg-active:      var(--s-accent-active);
  --c-btn-primary-text:           var(--s-accent-on);
  --c-btn-primary-border:         transparent;
  --c-btn-primary-bg-hover-custom:  var(--c-btn-primary-bg-hover);
  --c-btn-primary-text-hover:       var(--c-btn-primary-text);

  --c-btn-secondary-bg:           transparent;
  --c-btn-secondary-bg-hover:     color-mix(in srgb, var(--s-text-primary) 8%, var(--c-card-bg, var(--s-bg-surface)));
  --c-btn-secondary-bg-active:    var(--s-bg-active);
  --c-btn-secondary-text:         var(--s-text-primary);
  --c-btn-secondary-border:       var(--s-border);

  --c-btn-ghost-bg:               transparent;
  --c-btn-ghost-bg-hover:         var(--s-bg-hover);
  --c-btn-ghost-text:             var(--s-text-secondary);
  --c-btn-ghost-text-hover:       var(--s-text-primary);

  --c-btn-danger-bg:              var(--s-status-error);
  --c-btn-danger-bg-hover:        var(--p-red-600);
  --c-btn-danger-text:            var(--p-white);

  --c-btn-radius:       var(--radius-button);
  --c-btn-font-size:    var(--type-body, var(--t-font-size-base));
  --c-btn-font-weight:  var(--t-font-weight-medium);
  --c-btn-padding-x:    var(--sp-4);
  --c-btn-padding-y:    var(--sp-2);
  --c-btn-height:       34px; /* matches shipped _module-polish .mod-btn */
  --c-btn-height-sm:    30px; /* matches shipped _module-polish .mod-btn-sm */
  --c-btn-height-lg:    44px;
  --c-btn-gap:          var(--sp-2);
  --c-btn-disabled-opacity: 0.5;

  /* ===== INPUT ===== */
  --c-input-bg:                var(--s-bg-input);
  --c-input-bg-hover:          var(--s-bg-hover);
  --c-input-bg-disabled:       var(--s-bg-disabled);
  --c-input-text:              var(--s-text-primary);
  --c-input-text-placeholder:  var(--s-text-tertiary);
  --c-input-border:            var(--s-border);
  --c-input-border-hover:      var(--s-border-strong);
  --c-input-border-focus:      var(--s-border-focus);
  --c-input-border-error:      var(--s-border-error);
  --c-input-radius:            var(--radius-input);
  --c-input-height:            36px;
  --c-input-padding-x:         var(--sp-3);
  --c-input-font-size:         var(--type-body, var(--t-font-size-base));
  --c-input-shadow-focus:      var(--s-shadow-focus);

  /* ===== CARD ===== */
  --c-card-bg:           var(--s-bg-surface);
  --c-card-bg-hover:     var(--s-bg-surface);
  --c-card-border:       var(--s-border);
  --c-card-radius:       var(--radius-card);
  --c-card-shadow:       var(--s-shadow-sm);
  --c-card-border-hover:   var(--s-border-strong);
  --c-card-padding:      var(--sp-card);

  /* ===== SIDEBAR ===== */
  --c-sidebar-bg:                 var(--s-bg-sidebar);
  --c-sidebar-width:              var(--layout-sidebar-width-collapsed);
  --c-sidebar-width-expanded:     var(--layout-sidebar-width);
  --c-sidebar-item-text:          var(--s-sidebar-text);
  --c-sidebar-item-text-active:   var(--s-sidebar-text-active);
  --c-sidebar-item-icon:          var(--s-sidebar-icon);
  --c-sidebar-item-icon-active:   var(--s-sidebar-icon-active);
  --c-sidebar-item-bg-hover:      var(--s-sidebar-hover);
  --c-chat-sidebar-bg:         var(--s-bg-surface);
  --c-chat-sidebar-text:       var(--s-text-primary);
  --c-chat-sidebar-hover:      var(--s-bg-hover);
  --c-chat-sidebar-border:     var(--s-border-subtle);
  --c-sidebar-item-bg-active:     var(--s-sidebar-active);
  --c-sidebar-item-radius:        var(--radius-md);
  --c-sidebar-item-height:        var(--layout-sidebar-item-height);
  --c-sidebar-divider:            var(--s-sidebar-divider);
  --c-sidebar-accent:             var(--s-sidebar-accent);

  /* ===== HEADER ===== */
  --c-header-bg:             var(--s-bg-header);
  --c-header-border:         var(--s-border-subtle);
  --c-header-height:         var(--layout-header-height);
  --c-header-text:           var(--s-text-primary);
  --c-header-text-secondary: var(--s-text-secondary);
  --c-header-title-text:   var(--c-heading-color);

  /* ===== FOOTER ===== */
  --c-footer-bg:             var(--s-bg-surface);

  /* ===== TABLE ===== */
  --c-table-header-bg:         color-mix(in srgb, var(--s-bg-surface) 92%, var(--s-text-primary) 8%);
  --c-table-header-text:       var(--s-text-secondary);
  --c-table-row-bg:            var(--s-bg-surface);
  --c-table-row-bg-alt:        var(--s-hover-wash);
  --c-table-row-bg-hover:      color-mix(in srgb, var(--s-bg-surface) 94%, var(--s-text-primary) 6%);
  --c-table-row-bg-selected:   var(--s-bg-selected);
  --c-table-row-border:        var(--s-border);
  --c-table-cell-padding:      var(--sp-3) var(--sp-4);
  --c-table-font-size:         var(--type-ui, var(--t-font-size-sm));

  /* ===== MODAL ===== */
  --c-modal-bg:        var(--s-bg-overlay);
  --c-modal-border:    var(--s-border-subtle);
  --c-modal-radius:    var(--radius-modal);
  --c-modal-shadow:    var(--s-shadow-lg); /* shipped _theme-xai modal shadow */
  --c-modal-backdrop:  rgba(0, 0, 0, 0.5);
  --c-modal-padding:   var(--sp-6);

  /* ===== DROPDOWN ===== */
  --c-dropdown-bg:              var(--c-card-bg, var(--s-bg-overlay));
  --c-dropdown-border:          var(--s-border);
  --c-dropdown-shadow:          var(--s-shadow-md); /* shipped _theme-xai dropdown shadow */
  --c-dropdown-radius:          var(--radius-dropdown);
  --c-dropdown-item-padding:    var(--sp-2) var(--sp-3);
  --c-dropdown-item-bg-hover:   var(--s-bg-hover);
  --c-dropdown-item-bg-active:  var(--s-bg-active);
  --c-dropdown-item-text:       var(--s-text-primary);

  /* ===== BADGE ===== */
  --c-badge-bg:          var(--s-accent-subtle);
  --c-badge-text:        var(--s-accent);
  --c-badge-radius:      var(--radius-badge);
  --c-badge-font-size:   var(--type-meta, var(--t-font-size-2xs));
  --c-badge-padding:     var(--sp-0-5) var(--sp-2);
  --c-badge-font-weight: var(--t-font-weight-medium);

  /* ===== TOAST ===== */
  --c-toast-bg:       var(--s-bg-surface-raised);
  --c-toast-border:   var(--s-border);
  --c-toast-shadow:   var(--s-shadow-sm); /* theme-xai ships toasts flat (box-shadow: none) */
  --c-toast-radius:   var(--radius-card);
  --c-toast-width:    var(--layout-toast-width);
  --c-toast-padding:  var(--sp-4);

  /* ===== TOOLTIP ===== */
  --c-tooltip-bg:        var(--p-neutral-800);
  --c-tooltip-text:      var(--p-neutral-25);
  --c-tooltip-radius:    var(--radius-tooltip);
  --c-tooltip-font-size: var(--type-caption, var(--t-font-size-xs));
  --c-tooltip-padding:   var(--sp-1) var(--sp-2);

  /* ===== CHAT BUBBLES ===== */
  --c-chat-user-bg:        #FFFFFF;
  --c-chat-user-text:      var(--p-black, #0A0E14);
  --c-chat-assistant-bg:   var(--p-neutral-800);
  --c-chat-assistant-text: var(--p-neutral-25, #FFFFFF);
  --c-chat-bubble-radius:  var(--radius-lg);
  --c-chat-bubble-padding: var(--sp-3) var(--sp-4);
  --c-chat-window-bg:      var(--s-bg-page);
  --c-chat-max-width:      75%;

  /* ===== TOGGLE / SWITCH ===== */
  --c-toggle-bg-off:    var(--s-border-strong);
  --c-toggle-bg-on:     var(--s-accent);
  --c-toggle-knob:      var(--p-white);
  --c-toggle-width:     40px;
  --c-toggle-height:    22px;

  /* ===== SCROLLBAR ===== */
  --c-scrollbar-track:       transparent;
  --c-scrollbar-thumb:       var(--s-border);
  --c-scrollbar-thumb-hover: var(--s-border-strong);
  --c-scrollbar-width:       6px;

  /* ===== TABS (inline, inside content area) ===== */
  --c-tab-text:         var(--s-text-secondary);
  --c-tab-text-active:  var(--s-accent);
  --c-tab-indicator:    var(--s-accent);
  --c-tab-bg-hover:     var(--s-bg-hover);
  --c-tab-border:       var(--s-border-subtle);

  /* ===== SKELETON LOADING ===== */
  --c-skeleton-bg:      var(--s-bg-surface-sunken);
  --c-skeleton-shimmer: var(--s-bg-hover);

  /* ===== HEADINGS ===== */
  --c-heading-color:       var(--s-text-primary);
  --c-heading-size:        var(--type-title, 1rem);
  --c-heading-weight:      600;

  --c-subheading-color:    var(--c-heading-color);
  --c-subheading-size:     var(--type-ui, 0.8125rem);
  --c-subheading-weight:   500;

  --c-label-color:         var(--s-text-secondary);
  --c-label-size:          var(--type-caption, 0.75rem);
  --c-label-weight:        400;

  --c-hint-color:          var(--s-text-tertiary);
  --c-hint-size:           var(--type-caption, 0.75rem);


  /* ===== PILL NAV (tab-like navigation pills) ===== */
  --c-pill-bg:            transparent;
  --c-pill-bg-active:     var(--s-accent-subtle);
  --c-pill-bg-hover:      var(--s-bg-hover);
  --c-pill-text:          var(--s-text-secondary);
  --c-pill-text-active:   var(--s-accent);
  --c-pill-font-size:     var(--type-body, 0.875rem);
  --c-pill-padding:       8px 16px;
  --c-pill-radius:        var(--radius-full);
  --c-pill-font-weight:   var(--t-font-weight-medium);

}

/* ---- Component theme defaults (charcoal brand, not pure black) ----
   Single home for ALL --c-* theme overrides (consolidated from _semantic.css
   2026-08-18 — where the two files conflicted, this file's values already won
   in the cascade and are kept unchanged). */
[data-theme="dark"] {
  --c-chat-user-bg: #FFFFFF;
  --c-chat-user-text: var(--p-black, #0A0E14);
  --c-chat-assistant-bg: var(--p-neutral-800);
  --c-chat-assistant-text: var(--p-neutral-25, #FFFFFF);
  --c-chat-window-bg: var(--s-bg-page);
  --c-chat-user-code-bg: rgba(0, 0, 0, 0.2);
  --c-heading-color: var(--s-accent);
  --c-subheading-color: var(--s-text-secondary);
  --c-btn-primary-bg: var(--s-accent);
  --c-btn-primary-text: var(--s-accent-on);
  --c-btn-primary-bg-hover: var(--s-accent-hover);
  --c-btn-secondary-bg: transparent;
  --c-btn-secondary-text: var(--s-text-primary);
  --c-btn-secondary-border: var(--s-border);
  --c-header-title-text: var(--s-accent);
  --c-card-bg: var(--s-bg-surface);
  --c-card-border: var(--s-border);
  --c-input-bg: var(--s-bg-input);
  --c-input-border: var(--s-border);
  --c-header-bg: var(--s-bg-header);
  --c-footer-bg: var(--s-bg-surface);
  --c-sidebar-bg: var(--s-bg-sidebar);
  --c-table-header-bg: color-mix(in srgb, var(--s-bg-surface) 92%, var(--s-text-primary) 8%);
  --c-table-row-bg: var(--s-bg-surface);
  --c-table-row-border: var(--s-border);
  --c-modal-backdrop: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] {
  --c-chat-user-bg: var(--p-black, #0A0E14);
  --c-chat-user-text: #FFFFFF;
  --c-chat-assistant-bg: var(--p-neutral-100, #F5F5F5);
  --c-chat-assistant-text: var(--p-black, #0A0E14);
  --c-chat-window-bg: var(--s-bg-page);
  --c-heading-color: var(--s-accent);
  --c-btn-primary-bg: var(--s-accent);
  --c-btn-primary-text: var(--s-accent-on);
  --c-btn-primary-bg-hover: var(--s-accent-hover);
}

/* ---- design-system/index.css ---- */
/* ==========================================================================
   MIRA DESIGN SYSTEM — Single Import Entry Point
   Import order matters: primitives → cross-cutting → semantic → components
   ========================================================================== */

/* ---- layout/_app-shell.css ---- */
/* ==========================================================================
   APP SHELL — Top-level layout structure
   Header + Body (sidebar + content) + Footer, column direction.
   Higher specificity (.voice-app) used to override legacy voice-base.css
   which loads later in the cascade and would otherwise win.
   ========================================================================== */

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--s-text-primary);
  background: var(--s-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden; /* Prevents scrollbar when zoom compensation makes layout taller than viewport */
}

body {
  /* Track the zoom compensation zoom-init.js writes on <html>; falls back to
     100dvh at 100% zoom, where --zoom-height is never set. */
  height: var(--layout-page-min-height, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* App shell: sidebar rail | content column (header + main)
   .voice-app raises specificity above voice-base.css ".app" */
.app.voice-app {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Header: content column only — no brand spacer over the rail */
.app.voice-app .app-header,
.app.voice-app .app-header.chat-only-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height, 48px);
  min-height: var(--header-height, 48px);
  padding: 0;
  background: var(--c-header-bg, var(--s-bg-surface));
  border-bottom: 1px solid var(--s-border);
  z-index: calc(var(--z-sticky, 100) + 2);
  box-sizing: border-box;
}

/* Chat header — inside app-content, not direct child of .app */
.chat-only-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  padding: 0;
  background: var(--c-header-bg, var(--s-bg-surface));
  border-bottom: 1px solid var(--s-border);
}

.chat-only-header .header-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--s-text-secondary);
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
}

.chat-only-header .header-action-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

/* Body: header + content, beside the full-height sidebar */
.app.voice-app > .app-body,
.app-body {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Chat has no title bar — the transcript fills that band. */
.app.voice-app[data-active-tab="chat"] > .app-body > #chatHeader {
  display: none !important;
}

/* Content column: everything except sidebar, inside app-body */
.app-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Footer: full-width, fixed height */
.app-footer {
  display: flex;
  align-items: center;
  height: 32px;
  flex-shrink: 0;
  padding: 0 var(--sp-4);
  background: var(--c-footer-bg, var(--s-bg-surface));
  border-top: 1px solid var(--s-border);
  font-size: var(--t-font-size-xs);
  color: var(--s-accent);
}

.footer-text {
  white-space: nowrap;
}

.footer-spacer {
  flex: 1;
}

.footer-link {
  color: var(--s-accent);
  text-decoration: none;
  font-size: var(--t-font-size-xs);
  transition: color var(--motion-duration-fast, 150ms) var(--motion-ease-default);
}

.footer-link:hover {
  color: var(--s-text-primary);
}

/* Main area: scrollable content between header and controls
   Must be flex column so tab-panel children fill height */
.app.voice-app .main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: var(--s-bg-page);
}

/* Tab panels — sole vertical scroller for module pages (scrollbar at content
   column edge / browser right). Chat is excluded below. */
.app.voice-app .tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
  /* keep scrollbar gutter stable so layout doesn't jump */
  scrollbar-gutter: stable;
}

.app.voice-app .tab-panel.active {
  display: flex;
}

/* Chat panel is special — no padding, transcript scrolls internally */
.app.voice-app #chat-panel {
  padding: 0;
  overflow-y: hidden;
  scrollbar-gutter: auto;
}

/* Controls styling moved to _controls.css */

/* ---- Responsive ---- */

/* Mobile: sidebar hidden, hamburger visible */
@media (max-width: 768px) {
  .app-body {
    /* Still row direction — sidebar overlays */
  }

  .nav-sidebar {
    position: fixed;
    left: 0;
    top: var(--header-height, 48px); /* sit under full-width header */
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: var(--z-overlay);
    left: -100%;
    transform: none;
    transition: left var(--motion-duration-slow) var(--motion-ease-out);
    overscroll-behavior: contain;
  }

  .nav-sidebar.open,
  .nav-sidebar.is-dragging {
    left: 0;
    transform: none;
  }

  .nav-sidebar.is-dragging {
    transition: none !important;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height, 48px);
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--c-modal-backdrop);
    z-index: calc(var(--z-overlay) - 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-overlay.visible {
    display: block;
  }

  /* Reduce tab panel padding on mobile */
  .app.voice-app .tab-panel {
    padding: 0;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .nav-sidebar {
    width: 85vw;
    max-width: 300px;
  }

  .app.voice-app .tab-panel {
    padding: 0;
  }
}



/* Footer navigation chevron — mobile only */
.footer-nav-btn {
  display: none;
}

@media (max-width: 768px) {
  .footer-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--s-accent);
    padding: 0;
    margin-right: var(--sp-2);
  }
  .footer-nav-btn .material-icons {
    font-size: 20px;
  }
  .footer-nav-btn:active {
    color: var(--s-accent);
  }
}

@media (max-width: 768px) {
  .chat-only-header {
    height: 40px;
    padding: 0 var(--sp-3);
  }
}

/* ---- layout/_sidebar.css ---- */
/* ==========================================================================
   SIDEBAR -- Icon navigation
   Desktop collapsed (27 Sep 2026): width 0. No icons, no mark.
   Only the mid-edge chevron remains, matching the threads tab.
   Expanded: 220px, wordmark + labels. Phone drawer is unchanged.
   Full-height rail — sibling of .app-body, not under the header.
   ========================================================================== */

.nav-sidebar {
  width: var(--layout-sidebar-width-collapsed, 52px);
  background: var(--c-sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  height: auto;
  overflow: hidden;
  position: relative;
  transition: width var(--motion-duration-normal, 0.3s) var(--motion-ease-default, ease);
  z-index: var(--z-sticky);
}

.nav-sidebar.expanded {
  width: var(--layout-sidebar-width, 220px);
}

/* Brand slot removed (2026-08-16) — nav starts at the first tab. */
.sidebar-brand,
.sidebar-brand-full,
.sidebar-brand-mark {
  display: none !important;
}

/* ---- Scrollable nav area ---- */
.sidebar-nav {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-1, 4px) 0;
  scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
}

.sidebar-section-label {
  display: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--s-sidebar-text-muted, rgba(255, 255, 255, 0.35));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-2, 8px) var(--sp-4, 16px) var(--sp-1, 4px);
}

.nav-sidebar.expanded .sidebar-section-label {
  display: block;
}

/* ---- Nav items ---- */
.nav-sidebar .sidebar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: auto;
  margin: 1px 6px;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: var(--c-sidebar-item-radius, var(--radius-md, 6px));
  background: transparent;
  color: var(--s-sidebar-text, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  transition: color var(--motion-duration-fast, 150ms) var(--motion-ease-default),
              background-color var(--motion-duration-fast, 150ms) var(--motion-ease-default);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
  position: relative;
}

.nav-sidebar .sidebar-item:hover {
  color: var(--s-sidebar-text-active, rgba(255, 255, 255, 0.85));
  background: var(--c-sidebar-item-bg-hover, rgba(255, 255, 255, 0.08));
}

.nav-sidebar .sidebar-item:focus-visible {
  outline: 2px solid var(--s-accent, #FFFFFF);
  outline-offset: -2px;
}

.nav-sidebar .sidebar-item:hover .sidebar-item-icon {
  color: var(--s-sidebar-icon-active, rgba(255, 255, 255, 0.85));
}

/* Active state */
.nav-sidebar .sidebar-item.active {
  color: var(--s-sidebar-text-active, #fff);
  background: var(--c-sidebar-item-bg-active, rgba(255, 255, 255, 0.12));
}

.nav-sidebar .sidebar-item.active .sidebar-item-icon {
  color: var(--c-sidebar-accent, var(--s-accent));
}

.nav-sidebar .sidebar-item.active .sidebar-item-label {
  color: var(--s-sidebar-text-active, #fff);
}

/* Expanded: left-align with padding */
.nav-sidebar.expanded .sidebar-item {
  justify-content: flex-start;
  padding: 0 var(--sp-3, 12px);
  gap: var(--sp-3, 12px);
}

/* ---- Icon ---- */
.sidebar-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-sidebar-item-icon, rgba(255, 255, 255, 0.5));
  font-size: 20px;
  transition: color var(--motion-duration-fast, 150ms) var(--motion-ease-default);
}

/* ---- Label (hidden when collapsed) ---- */
.sidebar-item-label {
  display: none;
  font-size: 15px;
  color: var(--s-sidebar-text, rgba(255, 255, 255, 0.5));
  transition: color var(--motion-duration-fast, 150ms) var(--motion-ease-default);
}

.nav-sidebar.expanded .sidebar-item-label {
  display: block;
}

/* ---- Badge dot ---- */
.sidebar-item-badge {
  width: 6px;
  height: 6px;
  background: var(--s-status-error);
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 12px;
}

/* ---- Tooltip (collapsed state hover) ---- */
.sidebar-tooltip {
  position: fixed;
  left: auto; /* JS sets left from item rect */
  background: var(--c-tooltip-bg, #1a1a1a);
  color: var(--c-tooltip-text, #fff);
  font-size: var(--c-tooltip-font-size, 12px);
  padding: var(--c-tooltip-padding, 4px 10px);
  border-radius: var(--c-tooltip-radius, var(--radius-sm, 4px));
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--motion-duration-fast, 100ms) var(--motion-ease-default);
  box-shadow: none;
}

.sidebar-tooltip.visible {
  opacity: 1;
}

/* Hide tooltips when sidebar is expanded */
.nav-sidebar.expanded ~ .sidebar-tooltip,
.nav-sidebar.expanded .sidebar-tooltip {
  display: none;
}

/* ---- Drag-and-drop reorder ---- */
.sidebar-item[draggable="true"] {
  cursor: grab;
}

.sidebar-item[draggable="true"]:active {
  cursor: grabbing;
}

.sidebar-item.dragging {
  opacity: 0.4;
}

/* Top-of-rail Expand/Collapse row retired — control is mid-edge chevron */
.sidebar-toggle-area {
  display: none !important;
}

/* ---- Client logo at bottom of sidebar ---- */
.sidebar-logo-area {
  margin-top: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-full {
  max-width: 100%;
  display: none;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.nav-sidebar.expanded .sidebar-logo-full {
  display: block;
}

.nav-sidebar.expanded .sidebar-logo-icon {
  display: none;
}




.nav-sidebar.expanded .sidebar-logo-area {
  justify-content: flex-start;
  padding-left: 44px;
}

/* ---- Sidebar group headers & dividers ---- */
/* Category headings and spacing separate navigation groups. Keep the chrome
   nodes for layout editing, but omit their extra rules (desktop and mobile). */
#navMainSection > .sidebar-divider {
  display: none;
}

.sidebar-divider {
  height: 1px;
  background: var(--s-border, rgba(255,255,255,0.08));
  margin: var(--sp-2, 8px) var(--sp-3, 12px);
  flex-shrink: 0;
}

.sidebar-group-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-sidebar-item-icon, rgba(255,255,255,0.4));
  padding: var(--sp-1, 4px) var(--sp-4, 16px) var(--sp-1, 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--motion-duration-normal, 0.3s);
  pointer-events: none;
  height: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-sidebar.expanded .sidebar-group-header {
  opacity: 1;
  height: auto;
  padding: var(--sp-1, 4px) var(--sp-4, 16px) 2px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
}

.nav-sidebar.expanded .sidebar-group-header[data-editing="1"] {
  cursor: text;
  user-select: text;
}

.sidebar-group-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-group-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  opacity: 0;
  margin-left: auto;
  transition: opacity var(--motion-duration-fast, 0.15s);
}

.nav-sidebar.expanded .sidebar-group-header:hover .sidebar-group-actions,
.nav-sidebar.expanded .sidebar-group-header:focus-within .sidebar-group-actions,
.nav-sidebar.expanded .sidebar-group-header[data-editing="1"] .sidebar-group-actions {
  opacity: 1;
}

.sidebar-group-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  opacity: 0.55;
  border-radius: var(--radius-sm, 4px);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.sidebar-group-btn:hover {
  opacity: 1;
  background: var(--c-sidebar-item-bg-hover, rgba(255, 255, 255, 0.08));
}

.sidebar-group-rename {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--s-border, rgba(255, 255, 255, 0.22));
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: text;
}

.sidebar-group-add-row {
  display: none;
  flex-shrink: 0;
  padding: 2px var(--sp-4, 16px) var(--sp-2, 8px);
}

.nav-sidebar.expanded .sidebar-group-add-row {
  display: block;
}

.sidebar-group-add-footer {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--c-sidebar-item-icon, rgba(255, 255, 255, 0.4));
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 0;
  opacity: 0;
  transition: opacity var(--motion-duration-fast, 0.15s);
}

.nav-sidebar.expanded:hover .sidebar-group-add-footer,
.nav-sidebar.expanded .sidebar-group-add-footer:focus {
  opacity: 0.7;
}

.sidebar-group-add-footer:hover {
  opacity: 1;
}

.nav-sidebar .sidebar-group-header.u-drag-active,
.nav-sidebar .sidebar-item.u-drag-active {
  opacity: 0.45;
}

.nav-sidebar.expanded .sidebar-group-header.is-drop-target {
  color: var(--s-sidebar-text-active, #fff);
  background: var(--c-sidebar-item-bg-hover, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
}

/* ---- Tab notification badge ---- */
.tab-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-sidebar-accent, #FFFFFF);
  pointer-events: none;
  animation: tab-badge-pulse 2s ease-in-out infinite;
}

.sidebar-item {
  position: relative;
}

@keyframes tab-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.nav-sidebar.expanded .tab-badge {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

/* Hide divider when sidebar is collapsed — just show spacing */
.nav-sidebar:not(.expanded) .sidebar-divider {
  background: transparent;
  margin: var(--sp-1, 4px) 0;
}

/* Mid-right-edge chevron — no label, vertically centered on the rail */
.sidebar-rail-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
  width: 20px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 4px);
  background: var(--c-sidebar-bg, #0a0a0a);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  box-shadow: none;
}
/* 20x44 visual is under the 24px target minimum. Grow the hit area leftwards
   into the rail only — .nav-sidebar is overflow:hidden and would clip right.
   -6px is the smallest growth that reaches 24px: the .sidebar-item centred on
   the rail sits directly under this box, so any wider steals its icon. */
.sidebar-rail-toggle::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -6px;
  right: 0;
}
.sidebar-rail-toggle:hover {
  color: var(--s-sidebar-text-active, #fff);
  background: var(--c-sidebar-item-bg-hover, rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.14);
}
.sidebar-rail-toggle:focus-visible {
  outline: 2px solid var(--s-accent, #fff);
  outline-offset: 2px;
}
.sidebar-rail-toggle .material-icons {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--motion-duration-normal, 0.3s) var(--motion-ease-default, ease);
}
.nav-sidebar.expanded .sidebar-rail-toggle .material-icons {
  transform: rotate(180deg);
}

/* Keep nav content clipped to the rail width */
.nav-sidebar .sidebar-nav {
  overflow-x: hidden;
}

/* Right-edge threads handle — mirror of the left rail chevron.
   Lives on the content edge, so it stays put when the drawer pushes .app. */
.threads-rail-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: calc(var(--z-overlay, 300) + 1);
  width: 20px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-right: none;
  border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
  background: var(--c-sidebar-bg, #0a0a0a);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  box-shadow: none;
}
.threads-rail-toggle::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -6px;
  right: 0;
}
.threads-rail-toggle:hover {
  color: var(--s-sidebar-text-active, #fff);
  background: var(--c-sidebar-item-bg-hover, rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.14);
}
.threads-rail-toggle:focus-visible {
  outline: 2px solid var(--s-accent, #fff);
  outline-offset: 2px;
}
.threads-rail-toggle .material-icons {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--motion-duration-normal, 0.3s) var(--motion-ease-default, ease);
}
.threads-rail-toggle[aria-expanded="true"] .material-icons {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .sidebar-toggle-area,
  .sidebar-rail-toggle,
  .threads-rail-toggle {
    display: none;
  }
}

/* Desktop contracted rail: the chevron only, same idea as .threads-rail-toggle.
   Phone keeps the overlay drawer (icons + wordmark) via the 768px rules. */
@media (min-width: 769px) {
  html:not(.mirai-mobile) .nav-sidebar:not(.expanded) {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0px !important;
    padding: 0 !important;
    overflow: visible;
    border: none !important;
    background: transparent !important;
  }
  html:not(.mirai-mobile) .nav-sidebar:not(.expanded) > :not(.sidebar-rail-toggle) {
    display: none !important;
  }
  html:not(.mirai-mobile) .nav-sidebar:not(.expanded) .sidebar-rail-toggle {
    left: 0;
    right: auto;
    border-left: none;
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  }
  /* Parent is width 0, so the hit area has to grow into the content. */
  html:not(.mirai-mobile) .nav-sidebar:not(.expanded) .sidebar-rail-toggle::after {
    left: 0;
    right: -6px;
  }
}

/* Equal sizing for both selected Axis chevrons; beat nav-only icon sizing. */
button.sidebar-rail-toggle .material-icons,
button.threads-rail-toggle .material-icons {
  width: 18px;
  height: 18px;
  font-size: 18px !important;
  opacity: 1;
}
.sidebar-rail-toggle {
  border-left: none;
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

/* Aaron, 27 Sep: both chevrons hang OUTSIDE their panel, open or closed.
   Nav tab rides the rail's right edge (0 closed, rail width open); fixed
   positioning escapes the rail's overflow:hidden. Threads tab rides the
   drawer's left edge. Shape and hit area never change, only position. */
@media (min-width: 769px) {
  html:not(.mirai-mobile) .nav-sidebar .sidebar-rail-toggle {
    position: fixed;
    left: 0;
    right: auto;
    transition: left var(--motion-duration-normal, 0.3s) var(--motion-ease-default, ease);
  }
  html:not(.mirai-mobile) .nav-sidebar.expanded .sidebar-rail-toggle {
    left: var(--layout-sidebar-width, 220px);
  }
  html:not(.mirai-mobile) .nav-sidebar .sidebar-rail-toggle::after {
    left: 0;
    right: -6px; /* grow into the content, never over rail items */
  }
  .app.sidebar-open .threads-rail-toggle {
    position: fixed;
    right: min(var(--layout-drawer-width, 280px), 94vw); /* = .voice-sidebar width */
    z-index: 351;
  }
}

/* P116: actionable navigation state is a centred teal dot in every theme.
 * Reserve a trailing slot so long labels cannot collide with the indicator. */
.nav-sidebar .sidebar-item:has(:is(.tab-badge, .sidebar-item-badge, .email-nav-badge, .sms-nav-badge, .nt-badge)) {
  padding-right: 32px !important;
}
.nav-sidebar .sidebar-item :is(.tab-badge, .sidebar-item-badge, .email-nav-badge, .sms-nav-badge, .nt-badge) {
  position: absolute;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%);
  width: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #21BFC1 !important;
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
  animation: none;
  pointer-events: none;
}

/* ---- layout/_header.css ---- */
/* ==========================================================================
   HEADER — Top navigation bar (full-width, inside .app column)
   ========================================================================== */

.app-header {
  height: var(--c-header-height, 48px);
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--s-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  z-index: var(--z-sticky);
}

/* Brand/logo slot retired — sidebar is full height; header is content-only. */
.header-brand-slot,
.header-logo-link,
.header-logo-img {
  display: none !important;
}

/* Content-aligned header row: page title + actions */
.header-main {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 20px;
  box-sizing: border-box;
}
.header-main-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Header left group: toggle + logo + title */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-width: 0;
  flex-shrink: 1;
}

/* Header right group: zoom + actions + logout */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-shrink: 0;
}

/* Logo in header */
.header-logo {
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm, 4px);
}

/* Sidebar toggle button — desktop expand lives in the nav rail; hide header
   duplicate so it does not sit offset to the right of the icon column. */
.header-left .sidebar-toggle-btn,
.header-brand-slot .sidebar-toggle-btn,
.header-main-left .sidebar-toggle-btn,
#headerSidebarToggle {
  background: none;
  border: none;
  color: var(--s-text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  font-size: 20px;
  display: none; /* rail owns expand/collapse on desktop */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm, 4px);
  transition: color var(--motion-duration-fast, 150ms) var(--motion-ease-default),
              background-color var(--motion-duration-fast, 150ms) var(--motion-ease-default);
}

.header-left .sidebar-toggle-btn:hover,
.header-brand-slot .sidebar-toggle-btn:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover);
}

.header-left .sidebar-toggle-btn:active,
.header-brand-slot .sidebar-toggle-btn:active {
  background: var(--s-bg-active, var(--s-bg-hover));
}

.header-left .sidebar-toggle-btn:focus-visible,
.header-brand-slot .sidebar-toggle-btn:focus-visible {
  outline: 2px solid var(--s-accent, #FFFFFF);
  outline-offset: 2px;
}

/* Mobile hamburger button — hidden on desktop, shown on mobile */
.header-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--s-text-primary);
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: 24px;
  line-height: 1;
  transition: var(--motion-colors);
}

.header-hamburger:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.header-hamburger:active {
  background: var(--s-bg-active, var(--s-bg-hover));
}

/* Page title */
.header-title {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-header-title-text, var(--s-text-primary));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* Header actions (right side) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-shrink: 0;
}

/* Header icon button */
.header-action-btn {
  background: none;
  border: none;
  color: var(--s-text-secondary);
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--motion-colors);
  font-size: 20px;
  line-height: 1;
  position: relative;
}

.header-action-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.header-action-btn:active {
  background: var(--s-bg-active, var(--s-bg-hover));
}

.header-action-btn:focus-visible,
.header-hamburger:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent));
  outline-offset: 2px;
}

/* Theme toggle in header */
.theme-toggle-btn {
  background: none;
  border: none;
  color: var(--s-text-secondary);
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--motion-colors);
  font-size: 20px;
  line-height: 1;
}

.theme-toggle-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.theme-toggle-btn:active {
  background: var(--s-bg-active, var(--s-bg-hover));
}

/* Zoom controls */
.zoom-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.zoom-control .zoom-btn {
  border-radius: 0;
  font-size: 18px;
  padding: var(--sp-1) var(--sp-1-5);
  min-width: 28px;
  min-height: 28px;
}

.zoom-control .zoom-btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.zoom-control .zoom-btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.zoom-control .zoom-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.zoom-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--s-text-secondary);
  background: none;
  border: none;
  border-left: 1px solid var(--s-border);
  border-right: 1px solid var(--s-border);
  padding: var(--sp-1) var(--sp-1-5);
  cursor: pointer;
  transition: var(--motion-colors);
  line-height: 1;
  font-family: inherit;
}

.zoom-indicator:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover);
}

.zoom-indicator:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent));
  outline-offset: -2px;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  /* On mobile: hide the sidebar toggle (desktop), show hamburger (mobile) */
  .header-left .sidebar-toggle-btn {
    display: none;
  }

  .header-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Ensure all header buttons meet 44px touch target on tablet/mobile */
  .header-action-btn,
  .theme-toggle-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .zoom-control .zoom-btn,
  .zoom-indicator {
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .zoom-indicator {
    display: none;
  }
  .zoom-control .zoom-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: 1px solid var(--s-border);
  }
  .zoom-control .zoom-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-indicator {
    transition: none;
  }
}

/* ---- Live tokens in/out (quiet telemetry chip, left of action icons) ---- */
.header-token-usage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 0 0;
  padding: 4px 9px;
  border: 1px solid var(--s-hairline);
  border-radius: var(--radius-sm, 6px);
  background: var(--s-hover-wash);
  box-shadow: none;
  color: var(--s-text-secondary);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  order: -1;
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    color var(--motion-duration-fast, 150ms) var(--motion-ease-default, ease),
    background-color var(--motion-duration-fast, 150ms) var(--motion-ease-default, ease),
    border-color var(--motion-duration-fast, 150ms) var(--motion-ease-default, ease);
}
.header-token-usage:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--s-hairline-strong);
}
.header-token-usage:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent));
  outline-offset: 2px;
}
/* Soft accent while a run/stream is live */
.header-token-usage.is-active {
  border-color: color-mix(in srgb, var(--s-accent) 35%, transparent);
  background: color-mix(in srgb, var(--s-accent) 8%, transparent);
}
.header-token-usage.is-loading .htu-v,
.header-token-usage.is-error .htu-v {
  opacity: 0.55;
}
.htu-part {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.htu-k {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-text-tertiary, var(--s-text-secondary));
  opacity: 0.85;
}
.htu-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--s-text-primary);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
/* In is quieter; out is the figure that draws the eye */
.htu-in .htu-v {
  color: var(--s-text-secondary);
  font-weight: 500;
}
.htu-out .htu-v {
  color: var(--s-text-primary);
}
/* SuperGrok Heavy credit % (sg) — real account pool, not rate-card $ */
.htu-sg .htu-k,
.htu-usd .htu-k {
  font-size: 9px;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.htu-sg .htu-v,
.htu-usd .htu-v {
  color: var(--s-text-primary);
  font-weight: 600;
  min-width: 2.5ch;
}
.header-token-usage.is-stale .htu-sg .htu-v {
  opacity: 0.7;
}
/* Soft daily reference bar (visual only — not an enforce gate) */
.htu-meter {
  display: inline-block;
  width: 28px;
  height: 4px;
  margin-left: 2px;
  align-self: center;
  border-radius: 2px;
  background: var(--s-hairline-strong);
  overflow: hidden;
  flex-shrink: 0;
}
.htu-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--s-text-tertiary, rgba(255, 255, 255, 0.35));
  transition: width 0.35s ease, background-color 0.2s ease;
}
.header-token-usage.is-hot .htu-meter-fill,
.htu-meter.is-hot .htu-meter-fill {
  background: var(--s-status-warning, #d4a017);
}
.header-token-usage.is-over .htu-meter-fill,
.htu-meter.is-over .htu-meter-fill {
  background: var(--s-status-error, #c44);
}
/* Thin hairline divider instead of a slash */
.htu-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  align-self: center;
  background: var(--s-hairline-strong);
  border-radius: 1px;
  flex-shrink: 0;
}
/* Flash blue when the value increases */
.htu-v.htu-flash {
  color: var(--s-accent, #3b82f6);
  animation: htu-flash-blue 0.85s ease-out;
}
.htu-in .htu-v.htu-flash,
.htu-out .htu-v.htu-flash {
  color: var(--s-accent, #3b82f6);
}
@keyframes htu-flash-blue {
  0%   {
    color: var(--s-accent-hover, #60a5fa);
    text-shadow: 0 0 10px color-mix(in srgb, var(--s-accent, #3b82f6) 55%, transparent);
  }
  45%  {
    color: var(--s-accent, #3b82f6);
    text-shadow: 0 0 5px color-mix(in srgb, var(--s-accent, #3b82f6) 30%, transparent);
  }
  100% {
    color: var(--s-text-primary);
    text-shadow: none;
  }
}

@media (max-width: 768px) {
  .header-token-usage {
    margin-right: 6px;
    min-height: 36px;
    padding: 4px 8px;
  }
  .htu-v { font-size: 10px; }
}

@media (max-width: 420px) {
  .htu-k { display: none; }
  .header-token-usage { gap: 6px; padding: 4px 7px; }
  .htu-sep { height: 10px; }
  .htu-meter { width: 20px; }
  /* Keep sg label on tiny screens so SuperGrok % stays identifiable */
  .htu-sg .htu-k { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .header-token-usage { transition: none; }
  .htu-v { transition: none; }
  .htu-v.htu-flash {
    animation: none;
    color: var(--s-accent, #3b82f6);
  }
}

/* Connection status indicator */
.header-status {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
}

.header-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--s-status-success);
  flex-shrink: 0;
}

.header-status-dot.disconnected {
  background: var(--s-status-error);
}


/* ---- Platform brand (full-width header) ---- */
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  margin-right: 4px;
}
.header-brand:hover .header-brand-name {
  color: var(--s-text-primary);
}
.header-brand { display: none !important; }
.header-brand-mark { display: none; }
.header-brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  white-space: nowrap;
}
.header-title:not([hidden]) {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--s-text-primary);
  max-width: min(48vw, 360px);
}
@media (max-width: 768px) {
  .header-brand-name { display: none; }
  .header-brand-slot {
    width: auto;
    flex-basis: auto;
    padding: 0 8px;
    justify-content: flex-start;
    gap: 8px;
    border-right: none;
    background: transparent;
  }
  .header-main { padding: 0 12px; }
  .header-title:not([hidden]) {
    max-width: 42vw;
  }
  /* desktop expand toggle stays hidden on mobile (hamburger opens drawer) */
  .header-left .sidebar-toggle-btn,
  .header-brand-slot .sidebar-toggle-btn { display: none; }
  .header-logo-img { max-height: 22px; }
}

/* ---- components/_scrollbar.css ---- */
/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
}

/* Webkit */
::-webkit-scrollbar {
  width: var(--c-scrollbar-width);
  height: var(--c-scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--c-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-scrollbar-thumb-hover);
}

/* ---- components/_buttons.css ---- */
/* ==========================================================================
   BUTTONS — LEGACY COMPAT LAYER (FROZEN 2026-08-18)

   ⚠ Do NOT add new .btn usage anywhere — modules MUST use the mod-btn
   classes (mod-btn / mod-btn-primary / -secondary / -outline / -ghost /
   -danger / -sm / -icon). See /opt/mirai/soul/DESIGN_SPEC.md and the
   golden CLAUDE.md validation checklist ("No `.btn` classes in tab.js").

   This file exists ONLY to keep residual class="btn …" markup styled like
   mod-btn until it is migrated. Do not extend it, do not add variants, and
   do not restyle it — canonical base lives in _module-components.css
   (+ polish in _module-polish.css, theme in _theme-xai.css).
   ========================================================================== */

/* Base — mirror .mod-btn */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--radius-lg);
  border: none;
  background: transparent;
  color: var(--s-text-primary);
  cursor: pointer;
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-medium);
  font-family: var(--t-font-family);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn .material-icons { font-size: var(--t-font-size-lg); }

/* Variants — mirror mod-btn-* */
.btn-primary {
  background: var(--c-btn-primary-bg);
  color: var(--c-btn-primary-text);
}
.btn-primary:hover:not(:disabled) { background: var(--c-btn-primary-bg-hover); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }

.btn-secondary {
  background: var(--c-btn-secondary-bg);
  color: var(--c-btn-secondary-text);
  border: 1px solid var(--c-btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--c-btn-secondary-bg-hover); }
.btn-secondary:active:not(:disabled) { transform: scale(0.97); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
}
.btn-outline:hover:not(:disabled) { border-color: var(--c-btn-primary-bg); color: var(--c-btn-primary-bg); }
.btn-outline:active:not(:disabled) { background: var(--s-accent-subtle); transform: scale(0.97); }

.btn-danger {
  background: var(--c-btn-danger-bg);
  color: var(--c-btn-danger-text);
}
.btn-danger:hover:not(:disabled) { background: var(--c-btn-danger-bg-hover); color: var(--c-btn-danger-text); }
.btn-danger:active:not(:disabled) { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  color: var(--s-text-secondary);
  padding: var(--sp-1-5) var(--sp-2);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--s-bg-hover); color: var(--s-text-primary); }

/* Sizes / modifiers */
.btn-sm {
  padding: 8px 16px;
  font-size: var(--t-font-size-sm);
}
.btn-lg {
  padding: 14px 28px;
  font-size: var(--t-font-size-base);
}
.btn-icon {
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
}
.btn-block { width: 100%; }

/* ---- components/_inputs.css ---- */
/* ==========================================================================
   INPUTS — Text fields, selects, textareas
   ========================================================================== */

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
textarea:not(.text-input), select {
  height: var(--c-input-height);
  padding: 0 var(--c-input-padding-x);
  background: var(--c-input-bg);
  color: var(--c-input-text);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  font-family: inherit;
  font-size: var(--c-input-font-size);
  line-height: var(--t-line-height-normal);
  transition: var(--motion-colors);
  outline: none;
  width: 100%;
}

.input:hover, input:hover, textarea:not(.text-input):hover, select:hover {
  border-color: var(--c-input-border);
}

.input:focus, input:focus, textarea:not(.text-input):focus, select:focus {
  border-color: var(--c-input-border);
  box-shadow: none;
}

.input::placeholder, input::placeholder, textarea:not(.text-input)::placeholder {
  color: var(--c-input-text-placeholder);
}

.input:disabled, input:disabled, textarea:not(.text-input):disabled, select:disabled {
  background: var(--c-input-bg-disabled);
  opacity: var(--c-btn-disabled-opacity);
  cursor: not-allowed;
}

/* type=search is a filter, not a native widget. appearance:auto draws a second
   magnifying glass / results decoration and its padding beats a single class
   (input[type=search] is 0,1,1 vs .sidebar-search 0,1,0), which is how the
   threads icon sat on top of the placeholder. The same selector's width:100%
   (rule above) is the flex base, so a field beside a button covers that
   button unless the module sets width on input.class (0,1,1), not .class.
   34px matches toolbar buttons. */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.2;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.input-error, .input.error {
  border-color: var(--c-input-border-error);
}

textarea:not(.text-input) {
  height: auto;
  min-height: 80px;
  padding: var(--sp-2) var(--c-input-padding-x);
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23585C66' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
}

/* Label */
.form-label {
  display: block;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--s-text-secondary);
  margin-bottom: var(--sp-1-5);
}

/* Help text */
.form-hint {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-tertiary);
  margin-top: var(--sp-1);
}

.form-error {
  font-size: var(--t-font-size-2xs);
  color: var(--s-status-error);
  margin-top: var(--sp-1);
}

/* Form group */
.form-group {
  margin-bottom: var(--sp-4);
}

/* ---- components/_cards.css ---- */
/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-4) 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--s-border-subtle);
  margin-bottom: var(--sp-4);
}

.card-title {
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
}

.card-subtitle {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  margin-top: var(--sp-0-5);
}

.card-body { flex: 1; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--s-border-subtle);
  margin-top: var(--sp-4);
}

/* Clickable card */
.card-interactive {
  cursor: pointer;
  transition: var(--motion-colors);
}
.card-interactive:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: transparent;
  border-left: 2px solid var(--s-accent);
}

/* ---- components/_tables.css ---- */
/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--c-table-font-size);
}

.table th {
  background: var(--c-table-header-bg);
  color: var(--c-table-header-text);
  font-weight: var(--t-font-weight-medium);
  text-align: left;
  padding: var(--c-table-cell-padding);
  border-bottom: 1px solid var(--s-border);
  font-size: var(--t-font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
}

.table td {
  padding: var(--c-table-cell-padding);
  border-bottom: 1px solid var(--c-table-row-border);
  color: var(--s-text-primary);
  vertical-align: middle;
}

.table tbody tr {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-default);
}

.table tbody tr:nth-child(even) {
  background: var(--c-table-row-bg-alt);
}

.table tbody tr:hover {
  background: var(--c-table-row-bg-hover);
}

.table tbody tr.selected {
  background: var(--c-table-row-bg-selected);
}

/* Compact variant */
.table-compact th, .table-compact td {
  padding: var(--sp-1-5) var(--sp-3);
}

/* Striped variant */
.table-striped tbody tr:nth-child(even) {
  background: var(--s-bg-surface-sunken);
}

/* Responsive: horizontal scroll wrapper for tables on mobile */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .table th, .table td {
    font-size: var(--t-font-size-xs, 12px);
    padding: var(--sp-1-5, 6px) var(--sp-2, 8px);
  }
}

/* ---- components/_badges.css ---- */
/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--c-badge-padding);
  font-size: var(--c-badge-font-size);
  font-weight: var(--c-badge-font-weight);
  line-height: 1;
  border-radius: var(--c-badge-radius);
  white-space: nowrap;
}

.badge-default {
  background: var(--c-badge-bg);
  color: var(--c-badge-text);
}

.badge-success {
  background: var(--s-status-success-bg);
  color: var(--s-status-success-text);
}

.badge-warning {
  background: var(--s-status-warning-bg);
  color: var(--s-status-warning-text);
}

.badge-danger {
  background: var(--s-status-error-bg);
  color: var(--s-status-error-text);
}

.badge-info {
  background: var(--s-status-info-bg);
  color: var(--s-status-info-text);
}

.badge-neutral {
  background: var(--s-bg-surface-sunken);
  color: var(--s-text-secondary);
}

/* Status dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.status-dot-success { background: var(--s-status-success); }
.status-dot-warning { background: var(--s-status-warning); }
.status-dot-danger  { background: var(--s-status-error); }
.status-dot-info    { background: var(--s-status-info); }
.status-dot-neutral { background: var(--s-text-disabled); }

/* Count badge */
.badge-count {
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-1-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  border-radius: var(--radius-full);
  background: var(--s-status-error);
  color: var(--p-white);
}

/* ---- components/_toggles.css ---- */
/* ==========================================================================
   TOGGLES, CHECKBOXES, RADIOS
   ========================================================================== */

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: var(--sp-2);
}

.toggle-track {
  width: var(--c-toggle-width);
  height: var(--c-toggle-height);
  background: var(--c-toggle-bg-off);
  border-radius: var(--radius-full);
  position: relative;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-default);
  flex-shrink: 0;
}

.toggle-track.on {
  background: var(--c-toggle-bg-on);
}

.toggle-knob {
  width: calc(var(--c-toggle-height) - 4px);
  height: calc(var(--c-toggle-height) - 4px);
  background: var(--c-toggle-knob);
  border-radius: var(--radius-full);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--motion-duration-normal) var(--motion-ease-default);
  box-shadow: none;
}

.toggle-track.on .toggle-knob {
  transform: translateX(calc(var(--c-toggle-width) - var(--c-toggle-height)));
}

.toggle-label {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
}

/* Checkbox */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
}

.checkbox-input {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--s-border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
  transition: var(--motion-colors);
  position: relative;
  flex-shrink: 0;
  background: var(--s-bg-input);
}

.checkbox-input:checked {
  background: var(--s-accent);
  border-color: var(--s-accent);
}

.checkbox-input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--p-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-input:focus-visible {
  box-shadow: none;
}

/* ---- components/_dropdowns.css ---- */
/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  background: var(--c-dropdown-bg);
  border: 1px solid var(--c-dropdown-border);
  border-radius: var(--c-dropdown-radius);
  box-shadow: none;
  padding: var(--sp-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-default),
              transform var(--motion-duration-fast) var(--motion-ease-default),
              visibility var(--motion-duration-fast) var(--motion-ease-default);
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--c-dropdown-item-padding);
  color: var(--c-dropdown-item-text);
  font-size: var(--t-font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-default);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.dropdown-item:hover {
  background: color-mix(in srgb, var(--c-btn-primary-bg) 15%, var(--c-dropdown-bg));
}

.dropdown-item:active {
  background: color-mix(in srgb, var(--c-btn-primary-bg) 22%, var(--c-dropdown-bg));
}

.dropdown-divider {
  height: 1px;
  background: var(--s-border-subtle);
  margin: var(--sp-1) 0;
}

/* ---- components/_modals.css ---- */
/* ==========================================================================
   MODALS & DIALOGS
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-modal-backdrop);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-duration-normal) var(--motion-ease-default),
              visibility var(--motion-duration-normal) var(--motion-ease-default);
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--c-modal-bg);
  border: 1px solid var(--c-modal-border);
  border-radius: var(--c-modal-radius);
  box-shadow: none;
  padding: var(--c-modal-padding);
  width: var(--layout-modal-width-md);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform var(--motion-duration-normal) var(--motion-ease-bounce);
}

.modal-backdrop.open .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

.modal-title {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--s-text-tertiary);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  font-size: var(--t-font-size-2xl);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.modal-body { margin-bottom: var(--sp-5); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.modal-sm { width: var(--layout-modal-width-sm); }
.modal-lg { width: var(--layout-modal-width-lg); }

/* Mobile: full-width modals */
@media (max-width: 480px) {
  .modal { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; margin: 0; }
  .modal-backdrop { align-items: flex-end; }
}

/* ---- components/_toasts.css ---- */
/* ==========================================================================
   TOASTS — transient notifications created by showToast() in utils.js
   Markup: .toast-container > .toast.{success|error|info|warning}
             > .toast-dot + .toast-content + button.toast-close
   Flat monochrome: surface bg, hairline border, teal dot and explicit severity, no shadow.
   Single owner of toast styling (the duplicate block in _overlays.css and the
   theme-xai !important overrides were removed 25 Sep). Themes adjust the
   look via --c-toast-* tokens only, never !important on .toast.
   Motion: transition-driven via --motion-* tokens, which collapse to 0ms
   under prefers-reduced-motion (see design-system/_motion.css).
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  width: var(--c-toast-width);
  max-width: 90vw;
  background: var(--c-toast-bg);
  border: 1px solid var(--c-toast-border);
  border-radius: var(--c-toast-radius);
  box-shadow: none;
  padding: var(--c-toast-padding);
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(var(--sp-2));
  transition: opacity var(--motion-duration-normal) var(--motion-ease-default),
              transform var(--motion-duration-normal) var(--motion-ease-default);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* One teal indicator for every notification; severity is explicit text. */
.toast-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--s-text-heading, var(--mirai-teal, #21BFC1));
}
.toast-content { flex: 1; min-width: 0; }
.toast-label {
  display: block;
  color: var(--s-text-heading, var(--mirai-teal, #21BFC1));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 2px;
}
.toast-msg {
  display: block;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Dismiss affordance (functional icon — allowed, same as modal close) */
.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--s-text-tertiary);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1);
  margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) 0;
  line-height: 1;
}

.toast-close .material-icons {
  font-size: var(--t-font-size-lg);
}

.toast-close:hover { color: var(--s-text-primary); }

.toast-close:focus-visible {
  outline: 1px solid var(--s-text-secondary);
  outline-offset: 1px;
}

/* Mobile harness (option B, 26 Sep): stack sits at the top under the safe
   area so it never covers the chat composer / send button / bottom nav.
   Evidence: data/ui/toast-placement-20260926/. */
html.has-mobile-bottom-nav .toast-container,
html.mirai-mobile .toast-container {
  top: calc(env(safe-area-inset-top, 0px) + var(--sp-3));
  bottom: auto;
  right: max(var(--sp-3), env(safe-area-inset-right, 0px));
  left: max(var(--sp-3), env(safe-area-inset-left, 0px));
}

html.has-mobile-bottom-nav .toast,
html.mirai-mobile .toast {
  width: 100%;
  max-width: none;
  transform: translateY(calc(-1 * var(--sp-2)));   /* enter from above */
}

html.has-mobile-bottom-nav .toast.show,
html.mirai-mobile .toast.show {
  transform: translateY(0);
}

/* Session-expired strip (_overlays.css) shares --z-toast and owns the top edge:
   drop the stack below it instead of hiding the newest toast. */
html.has-mobile-bottom-nav body:has(> .session-expired-banner) .toast-container,
html.mirai-mobile body:has(> .session-expired-banner) .toast-container {
  top: calc(env(safe-area-inset-top, 0px) + var(--sp-16));
}

/* Soft keyboard: the stack is top-anchored now, so the old `bottom: var(--sp-3)`
   must become auto (otherwise top+bottom stretch the column-reverse container
   and the toasts fall to its bottom edge, over the composer). */
html body.keyboard-open .toast-container {
  bottom: auto;
}

/* ---- components/_tooltips.css ---- */
/* ==========================================================================
   TOOLTIPS
   ========================================================================== */

.tooltip {
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: calc(100% + var(--sp-1));
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-tooltip-bg);
  color: var(--c-tooltip-text);
  font-size: var(--c-tooltip-font-size);
  padding: var(--c-tooltip-padding);
  border-radius: var(--c-tooltip-radius);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-default);
  box-shadow: none;
}

.tooltip:hover .tooltip-content { opacity: 1; }

/* ---- components/_chat.css ---- */
/* ==========================================================================
   CHAT — Complete rewrite. No vars that could fail. Hardcoded fallbacks.
   ========================================================================== */

/* Chat component tokens (no design-system equivalent) */
:root {
  --c-chat-user-code-bg: rgba(0, 0, 0, 0.2);
  --c-chat-scroll-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Transcript container */
.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* auto: open thread already at latest — smooth animates top→bottom on load */
  scroll-behavior: auto;
  background: var(--c-chat-window-bg);
}

/* Base message */
.msg {
  max-width: 720px;
  padding: 0;
  flex-shrink: 0;
  animation: fadeUp 0.2s ease;
}

.msg.history {
  animation: none;
  opacity: 1;
}

/* User message — right aligned */
.msg.user {
  align-self: center;
}

.msg.user .msg-content {
  background: var(--c-chat-user-bg);
  color: var(--c-chat-user-text);
  padding: 10px 14px;
  border-radius: 0;
  font-size: var(--type-read, 0.9375rem);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  overflow: hidden;
}

/* Assistant message — left aligned (.mira canonical; .mirai legacy API role leak) */
.msg.mira,
.msg.mirai {
  align-self: center;
}

.msg.mira .msg-content,
.msg.mirai .msg-content {
  background: var(--c-chat-assistant-bg);
  color: var(--c-chat-assistant-text);
  border: none;
  padding: 10px 14px;
  border-radius: 0;
  font-size: var(--type-read, 0.9375rem);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  /* visible: overflow:hidden clipped list markers (list-style outside) */
  overflow: visible;
}

/* Meta row — sender + time + actions */
.msg .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 4px;
}

.msg .sender {
  font-size: var(--type-meta, 0.6875rem);
  font-weight: var(--t-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--s-text-secondary);
}

.msg.user .meta {
  flex-direction: row-reverse;
}

.msg.user .sender {
  color: var(--s-accent);
}

.msg.mira .sender {
  color: var(--s-accent);
}

.msg .time {
  font-size: var(--type-meta, 0.6875rem);
  color: var(--s-text-tertiary);
}

/* Message actions — copy button etc */
.msg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}

.msg:hover .msg-actions {
  opacity: 1;
}

.msg-action-btn {
  all: unset;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--s-text-tertiary);
  transition: color 0.15s;
}

.msg-action-btn:hover {
  color: var(--s-text-primary);
}

.msg-action-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.msg-action-btn .copied-text {
  font-size: 11px;
  display: none;
  color: var(--s-status-success);
}

.copy-success .copied-text {
  display: inline;
}

.copy-success svg {
  display: none;
}

/* ---- Markdown content in assistant messages ---- */

.msg.mira .msg-content h1,
.msg.mira .msg-content h2,
.msg.mira .msg-content h3 {
  color: var(--s-text-primary);
  margin: 12px 0 6px;
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.3;
  color: var(--c-heading-color);
}

.msg.mira .msg-content h1 { font-size: var(--t-font-size-lg); }
.msg.mira .msg-content h2 { font-size: var(--t-font-size-lg); }
.msg.mira .msg-content h3 { font-size: var(--t-font-size-base); }

.msg.mira .msg-content > :first-child {
  margin-top: 0;
}

.msg.mira .msg-content > :last-child {
  margin-bottom: 0;
}

.msg.mira .msg-content p {
  margin: 6px 0;
}

.msg.mira .msg-content ul,
.msg.mira .msg-content ol {
  margin: 6px 0;
  padding-left: 20px;
}

.msg.mira .msg-content li {
  margin: 3px 0;
}

.msg.mira .msg-content a {
  color: var(--s-accent);
  text-decoration: none;
}

.msg.mira .msg-content a:hover {
  text-decoration: underline;
}

.msg.mira .msg-content strong {
  color: var(--s-text-primary);
  font-weight: var(--t-font-weight-semibold);
}

.msg.mira .msg-content em {
  color: var(--s-text-secondary);
}

/* Inline code */
.msg.mira .msg-content code {
  background: var(--s-bg-surface-sunken);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: JetBrains Mono, Fira Code, monospace;
  font-size: var(--type-code, 0.8125rem);
  color: var(--s-text-primary);
  border: none;
}

/* Code blocks */
.msg.mira .msg-content pre {
  background: var(--s-bg-surface-sunken);
  border: 1px solid var(--s-border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: var(--type-code, 0.8125rem);
  line-height: 1.5;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.msg.mira .msg-content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: var(--s-text-primary);
  border: none;
  white-space: pre;
}

/* User message links — needs contrast on blue bg */
.msg.user .msg-content a {
  color: var(--p-blue-100);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.msg.user .msg-content a:hover {
  color: var(--p-white);
}

/* User message code — needs contrast on blue bg */
.msg.user .msg-content code {
  background: var(--c-chat-user-code-bg);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--radius-sm);
  font-family: JetBrains Mono, Fira Code, monospace;
  font-size: var(--t-font-size-xs);
}

.msg.user .msg-content pre {
  background: var(--c-chat-user-code-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  overflow-x: auto;
  margin: var(--sp-2) 0;
  font-size: var(--t-font-size-xs);
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.msg.user .msg-content pre code {
  background: none;
  padding: 0;
  white-space: pre;
}

/* Tables */
.msg.mira .msg-content table {
  border-collapse: collapse;
  margin: 8px 0;
  width: 100%;
  font-size: var(--type-code, 0.8125rem);
  display: block;
  overflow-x: auto;
}

.msg.mira .msg-content th,
.msg.mira .msg-content td {
  border: 1px solid var(--s-border);
  padding: 6px 10px;
  text-align: left;
}

.msg.mira .msg-content th {
  background: var(--s-bg-surface-sunken);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Blockquotes */
.msg.mira .msg-content blockquote {
  border-left: 3px solid var(--s-accent);
  padding-left: 12px;
  margin: 8px 0;
  color: var(--s-text-secondary);
}

/* Images */
.msg .msg-content img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin: 8px 0;
  display: block;
}

/* Chat video (was an inline style; model output may no longer carry style=) */
.msg .msg-content video.md-video {
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--radius-lg);
}

/* Media from another site: click-to-load (voice-utils.js _gateExternalMedia) */
.msg .msg-content .md-ext-media {
  display: block;
  margin: var(--sp-2, 8px) 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Image wrapper with download */
.img-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.img-download-btn {
  all: unset;
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--c-modal-backdrop);
  color: var(--s-text-inverse);
  padding: var(--sp-1-5);
  border-radius: var(--radius-full);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
}

.img-wrapper:hover .img-download-btn {
  opacity: 1;
}

.img-download-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Code wrapper with copy */
.code-wrapper {
  position: relative;
}

.code-copy-btn {
  all: unset;
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--s-bg-surface-raised);
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.code-wrapper:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  color: var(--s-text-primary);
  border-color: var(--s-text-tertiary);
}

/* ---- Empty state ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--s-text-tertiary);
  gap: var(--sp-3);
  padding: var(--sp-10);
}

.empty-state-icon {
  font-size: var(--t-font-size-4xl);
  opacity: 0.3;
}

.empty-state-title {
  font-size: var(--t-font-size-lg);
}

.empty-state-hint {
  font-size: var(--t-font-size-sm);
  opacity: 0.6;
}

/* ---- History divider ---- */
.history-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--s-text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.history-divider::before,
.history-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--s-border);
}

/* ---- Pending banner ---- */
.pending-banner {
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
  color: var(--s-text-secondary);
  font-size: var(--type-code, 0.8125rem);
}

.pending-dismiss {
  float: right;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.5;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pending-dismiss:hover { opacity: 1; }

.pending-title {
  font-weight: 500;
  color: var(--s-text-primary);
  margin-bottom: 4px;
}

.pending-msg {
  color: var(--s-text-tertiary);
  font-size: 12px;
  margin-top: 4px;
}

/* ---- Skeleton loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--s-bg-surface) 25%, var(--s-bg-surface-raised) 50%, var(--s-bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton-line:last-child { width: 60%; }

.skeleton-card {
  height: 80px;
  margin-bottom: 12px;
}

/* ---- Typing indicator ---- */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  align-self: flex-start;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--s-text-tertiary);
  border-radius: 50%;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* Thinking indicator — animated dots only */
.thinking-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 2px;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll to bottom ---- */
.scroll-bottom-btn {
  all: unset;
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sticky);
  box-shadow: none;
  transition: background 0.15s;
  box-sizing: border-box;
}

.scroll-bottom-btn.show {
  display: flex;
}

.scroll-bottom-btn:hover {
  background: var(--s-bg-surface-raised);
  color: var(--s-text-primary);
}

.scroll-bottom-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .msg { max-width: 92%; }
  .transcript { padding: 12px; gap: 12px; }

  /* Touch: show code copy + image download buttons (no hover on touch) */
  .code-copy-btn { opacity: 1; }
  .img-download-btn { opacity: 1; }

  /* Touch-friendly action buttons at tablet size */
  .msg-action-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .msg { max-width: 95%; }
  .transcript { padding: 8px; }
  .msg-actions { opacity: 1; }

  /* Larger touch targets for code/image action buttons on phone */
  .code-copy-btn {
    opacity: 1;
    padding: 6px 10px;
    font-size: 12px;
  }
  .img-download-btn {
    opacity: 1;
    padding: 10px;
  }
  .img-download-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Reduce code block font on very small screens */
  .msg.mira .msg-content pre { font-size: 12px; }
}

/* Legacy collapse shells (Show more/less) — disabled; full message always shown */
.msg-content .collapse-wrapper {
  position: static;
}
.msg-content .collapse-content {
  max-height: none !important;
  overflow: visible !important;
}
.msg-content .collapse-toggle {
  display: none !important;
}

/* Progressive streaming inside the live thinking bubble — full reading width */
#thinkingIndicator.msg,
.msg.thinking-live {
  width: 100%;
  max-width: 720px;
  align-self: center;
  box-sizing: border-box;
}
#thinkingIndicator .msg-content,
.msg.thinking-live .msg-content,
.msg.mira .msg-content.thinking-active {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  min-width: 0;
}
.stream-tools {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.stream-tools:empty { display: none; margin: 0; }
/* Thinking accordion — above the answer, open by default (founder 31 Aug) */
.stream-thought {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  color: var(--s-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  max-height: none;
  overflow: visible;
  background: transparent;
  order: 2;
}
.stream-thought[hidden] { display: none !important; }
.stream-thought-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--s-text-secondary);
  margin: 0;
  padding: 2px 0;
  user-select: none;
}
.stream-thought-label::-webkit-details-marker { display: none; }
.stream-thought-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--s-text-tertiary, rgba(255,255,255,0.4));
  transform: rotate(-90deg);
  transition: transform 140ms ease;
  flex-shrink: 0;
}
.stream-thought[open] .stream-thought-chevron {
  transform: rotate(0deg);
}
.stream-thought-title {
  color: var(--s-text-secondary);
}
.stream-thought-meta {
  color: var(--s-text-tertiary, rgba(255,255,255,0.4));
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.stream-thought-body {
  margin-top: 6px;
  max-height: 148px;
  overflow-y: auto;
  scroll-behavior: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  color: var(--s-text-tertiary, rgba(255,255,255,0.45));
  padding: 0 0 2px;
}
.stream-thought-done {
  margin-bottom: 8px;
}
.stream-answer {
  width: 100%;
  box-sizing: border-box;
  display: block;
  position: relative;
  min-height: 1.2em;
  order: 3;
}
.stream-answer[hidden] {
  display: none !important;
}
.stream-tools {
  order: 1;
}
.stream-body {
  width: 100%;
  box-sizing: border-box;
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.82);
  font-size: inherit;
  line-height: 1.6;
}
.stream-body.stream-plain {
  white-space: pre-wrap;
}
.stream-caret {
  /* Hide carets retained in an older cached transcript, too. */
  display: none !important;
  animation: none !important;
}
/* legacy class kept so stale clients don't break */
.stream-segment {
  width: 100%;
  display: block;
  opacity: 0.9;
}


/* ==========================================================================
   Long-form prose polish (assistant messages)
   Clean structure only — no decorative chrome
   ========================================================================== */

.msg.mira .msg-content {
  line-height: 1.65;
  letter-spacing: 0.005em;
  max-width: 52rem;
}

.msg.mira .msg-content.thinking-active {
  max-width: none;
}

/* Vertical rhythm */
.msg.mira .msg-content > * + * {
  margin-top: 0.75em;
}

.msg.mira .msg-content > :first-child {
  margin-top: 0 !important;
}

.msg.mira .msg-content > :last-child {
  margin-bottom: 0 !important;
}

.msg.mira .msg-content p {
  margin: 0;
  line-height: 1.65;
}

.msg.mira .msg-content p + p {
  margin-top: 0.85em;
}

/* Headings — clear hierarchy without shouting */
.msg.mira .msg-content h1,
.msg.mira .msg-content h2,
.msg.mira .msg-content h3,
.msg.mira .msg-content h4 {
  color: var(--s-text-primary);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 1.25em 0 0.45em;
  padding: 0;
  border: none;
}

.msg.mira .msg-content h1 {
  font-size: 1.2rem;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--s-border, rgba(255,255,255,0.08));
}

.msg.mira .msg-content h2 {
  font-size: 1.08rem;
}

.msg.mira .msg-content h3 {
  font-size: 1rem;
  color: var(--s-text-secondary, inherit);
}

.msg.mira .msg-content h4 {
  font-size: 0.95rem;
  color: var(--s-text-secondary, inherit);
  font-weight: 600;
}

.msg.mira .msg-content h1:first-child,
.msg.mira .msg-content h2:first-child,
.msg.mira .msg-content h3:first-child {
  margin-top: 0;
}

/* Lists */
.msg.mira .msg-content ul,
.msg.mira .msg-content ol {
  margin: 0.4em 0 0.6em;
  padding-left: 1.35em;
}

.msg.mira .msg-content li {
  margin: 0.28em 0;
  line-height: 1.55;
  padding-left: 0.15em;
}

.msg.mira .msg-content li > ul,
.msg.mira .msg-content li > ol {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.msg.mira .msg-content li > p {
  margin: 0.2em 0;
}

.msg.mira .msg-content ul {
  list-style: disc;
}

.msg.mira .msg-content ul ul {
  list-style: circle;
}

.msg.mira .msg-content ol {
  list-style: decimal;
}

/* Horizontal rules between major sections */
.msg.mira .msg-content hr {
  border: none;
  border-top: 1px solid var(--s-border, rgba(255,255,255,0.1));
  margin: 1.1em 0;
}

/* Strong / emphasis */
.msg.mira .msg-content strong {
  font-weight: 600;
  color: var(--s-text-primary);
}

.msg.mira .msg-content em {
  font-style: italic;
  color: var(--s-text-secondary);
}

/* Inline code */
.msg.mira .msg-content code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--s-bg-surface-sunken, rgba(0,0,0,0.25));
  border: 1px solid var(--s-border, rgba(255,255,255,0.06));
  border-radius: 4px;
  padding: 0.12em 0.4em;
  color: var(--s-text-primary);
}

/* Code blocks */
.msg.mira .msg-content pre {
  margin: 0.85em 0;
  padding: 0.85em 1em;
  border-radius: 8px;
  background: var(--s-bg-surface-sunken, rgba(0,0,0,0.35));
  border: 1px solid var(--s-border, rgba(255,255,255,0.08));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.5;
}

.msg.mira .msg-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--s-text-primary);
  white-space: pre;
}

/* Tables — readable, not cramped */
.msg.mira .msg-content .md-table-wrap {
  margin: 0.85em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--s-border, rgba(255,255,255,0.08));
  border-radius: 8px;
}

.msg.mira .msg-content table {
  display: table;
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.msg.mira .msg-content th,
.msg.mira .msg-content td {
  border: 1px solid var(--s-border, rgba(255,255,255,0.08));
  padding: 0.5em 0.75em;
  text-align: left;
  vertical-align: top;
}

.msg.mira .msg-content th {
  background: var(--s-bg-surface-sunken, rgba(0,0,0,0.2));
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--s-text-secondary);
  white-space: nowrap;
}

.msg.mira .msg-content tr:nth-child(even) td {
  background: var(--s-hover-wash);
}

/* Blockquote */
.msg.mira .msg-content blockquote {
  margin: 0.85em 0;
  padding: 0.35em 0 0.35em 0.9em;
  border-left: 3px solid var(--s-accent, #2EB8DB);
  color: var(--s-text-secondary);
  background: transparent;
}

.msg.mira .msg-content blockquote p {
  margin: 0.35em 0;
}

/* Streaming answer body shares prose rhythm */
.stream-answer .stream-body {
  line-height: 1.65;
}

.stream-answer .stream-body h1,
.stream-answer .stream-body h2,
.stream-answer .stream-body h3 {
  margin: 1em 0 0.4em;
  font-weight: 600;
  line-height: 1.3;
}

.stream-answer .stream-body p + p {
  margin-top: 0.75em;
}

.stream-answer .stream-body ul,
.stream-answer .stream-body ol {
  margin: 0.4em 0 0.6em;
  padding-left: 1.35em;
}

/* ---- components/_controls.css ---- */
/* ==========================================================================
   COMPOSER — Mirai command dock
   Premium monochrome input. Self-contained; does not depend on theme hacks.
   ========================================================================== */

/* ---- Dock shell ---- */
.controls {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  padding: 0 16px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  /* Flat dock — no gradient fade/shadow into the transcript */
  background: var(--s-bg-page);
  min-height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Removed soft top fade (looked like a muddy shadow under chat) */
.controls::before {
  content: none !important;
  display: none !important;
}

[data-active-tab]:not([data-active-tab="chat"]) .controls {
  display: none;
}

.controls-text-group {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* ---- The dock card ---- */
.text-input-wrap {
  --composer-bg: var(--s-bg-input);
  --composer-bg-focus: var(--s-bg-surface);
  --composer-ring: rgba(255, 255, 255, 0.10);
  --composer-ring-focus: rgba(255, 255, 255, 0.32);
  --composer-fg: #f5f5f5;
  --composer-muted: rgba(255, 255, 255, 0.34);
  --composer-hover: rgba(255, 255, 255, 0.08);

  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 4px 8px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 8px 8px 10px;
  background: var(--composer-bg);
  border: 1px solid var(--composer-ring);
  border-radius: 14px;
  box-shadow: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.text-input-wrap:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.text-input-wrap:focus-within {
  background: var(--composer-bg-focus);
  border-color: color-mix(in srgb, var(--s-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-accent) 28%, transparent);
}

.text-input-wrap.has-text {
  border-color: rgba(255, 255, 255, 0.16);
}

/* ---- Tool clusters ---- */
.composer-tools,
.composer-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  align-self: end;
  padding-bottom: 2px;
}

.composer-tools { grid-column: 1; }
.text-input-wrap > .text-input { grid-column: 2; }
.composer-actions { grid-column: 3; }

/* Attachment shares the trailing cluster with the voice control. */
.controls .text-input-wrap.tools-on-right { grid-template-columns: minmax(0, 1fr) auto !important; }
.text-input-wrap.tools-on-right > .text-input { grid-column: 1; }
.text-input-wrap.tools-on-right > .composer-actions { grid-column: 2; }

/* Fallback when markup not yet using clusters: keep order */
.text-input-wrap > .loop-toggle-btn,
.text-input-wrap > .upload-btn {
  grid-column: 1;
}
.text-input-wrap > .send-btn,
.text-input-wrap > .voice-btn {
  grid-column: 3;
}

/* ---- Textarea (must beat global input/textarea rules) ---- */
.text-input-wrap .text-input,
.text-input-wrap textarea.text-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 28px !important;
  max-height: min(36vh, 220px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--composer-fg) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.011em !important;
  resize: none !important;
  overflow-y: auto !important;
  display: block !important;
  field-sizing: content;
  word-break: break-word;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.text-input-wrap .text-input::placeholder {
  color: var(--composer-muted) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.text-input-wrap .text-input:focus,
.text-input-wrap .text-input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---- Shared icon button ---- */
.text-input-wrap .upload-btn,
.text-input-wrap .voice-btn,
.text-input-wrap .send-btn,
.text-input-wrap .loop-toggle-btn,
.composer-tools button,
.composer-actions button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--composer-muted);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease,
    opacity 0.15s ease;
}

.text-input-wrap .upload-btn:hover,
.text-input-wrap .voice-btn:hover,
.text-input-wrap .loop-toggle-btn:hover {
  color: #fff;
  background: var(--composer-hover);
}

.text-input-wrap .upload-btn:active,
.text-input-wrap .voice-btn:active,
.text-input-wrap .send-btn:active,
.text-input-wrap .loop-toggle-btn:active {
  transform: scale(0.96);
}

/* Hands-free standby (same mic button — not a second control) */
.text-input-wrap .voice-btn.wake-armed:not(.active):not(.speech) {
  color: #fff;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.45);
}

.text-input-wrap .upload-btn svg,
.text-input-wrap .voice-btn svg,
.text-input-wrap .send-btn svg,
.text-input-wrap .loop-toggle-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* Loop: compact chip, not full label weight */
.text-input-wrap .loop-toggle-btn {
  width: auto;
  min-width: 36px;
  padding: 0 10px;
  gap: 6px;
  color: var(--composer-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.text-input-wrap .loop-toggle-btn .loop-label {
  font-size: inherit;
  letter-spacing: inherit;
}
.text-input-wrap .loop-toggle-btn.active,
.text-input-wrap .loop-toggle-btn[aria-pressed="true"] {
  color: var(--p-black, #0A0E14);
  background: #fff;
}

/* ---- Send: accent command key ---- */
.text-input-wrap .send-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--s-accent);
  color: var(--s-accent-on, #0A0E14);
  box-shadow: none;
}

.text-input-wrap .send-btn.show,
.text-input-wrap.has-text .send-btn,
.text-input-wrap .send-btn.is-stop {
  display: inline-flex;
  animation: composerSendIn 0.16s ease;
}

/* Stop / interrupt — visible while Mirai is generating or speaking */
.text-input-wrap .send-btn.is-stop {
  background: var(--s-accent);
  color: var(--s-accent-on, #0A0E14);
}
.text-input-wrap .send-btn.is-stop .send-icon { display: none; }
.text-input-wrap .send-btn.is-stop .stop-icon { display: block; }
.text-input-wrap .send-btn .stop-icon { display: none; }
.text-input-wrap .send-btn:not(.is-stop) .send-icon { display: block; }

.text-input-wrap .send-btn:hover {
  background: var(--s-accent-hover, var(--s-accent));
  opacity: 1;
  color: var(--s-accent-on, #0A0E14);
}

.text-input-wrap .send-btn svg {
  width: 16px;
  height: 16px;
}

@keyframes composerSendIn {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

/* Hide mic when sending text (optional dual-state) — keep both for voice-first */
.text-input-wrap.has-text .voice-btn {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Voice waveform ---- */
.text-input-wrap .voice-btn {
  color: var(--composer-muted);
}

.text-input-wrap .voice-icon {
  width: 20px;
  height: 20px;
}

.text-input-wrap .voice-bar {
  fill: currentColor;
  transition: fill 0.15s, transform 0.2s;
  transform-origin: center;
}

.text-input-wrap .voice-btn:hover .voice-bar {
  fill: #fff;
}

/* Lit chrome shared by all live phases — not only .active / listening.
   Phase class alone must not drop the lit look (speech/think used to). */
.text-input-wrap .voice-btn.active,
.text-input-wrap .voice-btn.speech,
.text-input-wrap .voice-btn.listening,
.text-input-wrap .voice-btn.thinking,
.text-input-wrap .voice-btn.working,
.text-input-wrap .voice-btn.transcribing,
.text-input-wrap .voice-btn.playing {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.text-input-wrap .voice-btn.active .voice-bar,
.text-input-wrap .voice-btn.speech .voice-bar,
.text-input-wrap .voice-btn.listening .voice-bar,
.text-input-wrap .voice-btn.thinking .voice-bar,
.text-input-wrap .voice-btn.working .voice-bar,
.text-input-wrap .voice-btn.transcribing .voice-bar,
.text-input-wrap .voice-btn.playing .voice-bar {
  fill: #fff;
}

.text-input-wrap .voice-btn.speech .voice-bar {
  fill: #fff;
  animation: voiceWave 0.55s ease-in-out infinite alternate;
}
.text-input-wrap .voice-btn.speech .voice-bar:nth-child(1) { animation-delay: 0s; }
.text-input-wrap .voice-btn.speech .voice-bar:nth-child(2) { animation-delay: 0.08s; }
.text-input-wrap .voice-btn.speech .voice-bar:nth-child(3) { animation-delay: 0.16s; }
.text-input-wrap .voice-btn.speech .voice-bar:nth-child(4) { animation-delay: 0.24s; }
.text-input-wrap .voice-btn.speech .voice-bar:nth-child(5) { animation-delay: 0.32s; }

.text-input-wrap .voice-btn.thinking .voice-bar,
.text-input-wrap .voice-btn.working .voice-bar,
.text-input-wrap .voice-btn.transcribing .voice-bar,
.text-input-wrap .voice-btn.playing .voice-bar {
  fill: #fff;
  /* Gentler pulse — old 0.28→1 opacity looked like the mic flashing off */
  animation: voicePulse 1.4s ease-in-out infinite;
}
.text-input-wrap .voice-btn.thinking .voice-bar:nth-child(1),
.text-input-wrap .voice-btn.working .voice-bar:nth-child(1),
.text-input-wrap .voice-btn.transcribing .voice-bar:nth-child(1),
.text-input-wrap .voice-btn.playing .voice-bar:nth-child(1) { animation-delay: 0s; }
.text-input-wrap .voice-btn.thinking .voice-bar:nth-child(2),
.text-input-wrap .voice-btn.working .voice-bar:nth-child(2),
.text-input-wrap .voice-btn.transcribing .voice-bar:nth-child(2),
.text-input-wrap .voice-btn.playing .voice-bar:nth-child(2) { animation-delay: 0.12s; }
.text-input-wrap .voice-btn.thinking .voice-bar:nth-child(3),
.text-input-wrap .voice-btn.working .voice-bar:nth-child(3),
.text-input-wrap .voice-btn.transcribing .voice-bar:nth-child(3),
.text-input-wrap .voice-btn.playing .voice-bar:nth-child(3) { animation-delay: 0.24s; }
.text-input-wrap .voice-btn.thinking .voice-bar:nth-child(4),
.text-input-wrap .voice-btn.working .voice-bar:nth-child(4),
.text-input-wrap .voice-btn.transcribing .voice-bar:nth-child(4),
.text-input-wrap .voice-btn.playing .voice-bar:nth-child(4) { animation-delay: 0.36s; }
.text-input-wrap .voice-btn.thinking .voice-bar:nth-child(5),
.text-input-wrap .voice-btn.working .voice-bar:nth-child(5),
.text-input-wrap .voice-btn.transcribing .voice-bar:nth-child(5),
.text-input-wrap .voice-btn.playing .voice-bar:nth-child(5) { animation-delay: 0.48s; }

@keyframes voiceWave {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1); }
}
@keyframes voicePulse {
  0%, 100% { opacity: 0.65; transform: scaleY(0.55); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ---- Boss mode ---- */
.app.mode-boss .text-input-wrap:focus-within {
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow:
    0 0 0 3px rgba(248, 113, 113, 0.1),
    0 14px 48px rgba(0, 0, 0, 0.55);
}
.app.mode-boss .text-input-wrap .send-btn {
  background: #ef4444;
  color: #fff;
  box-shadow: none;
}
.app.mode-boss .text-input-wrap .voice-btn.active,
.app.mode-boss .text-input-wrap .voice-btn.speech .voice-bar {
  color: #f87171;
  fill: #f87171;
}

/* ---- Mode selector (outside dock) ---- */
.mode-selector {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 8px;
}

.mode-current {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: var(--s-bg-input);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  box-sizing: border-box;
}

.mode-current:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  background: var(--s-bg-input);
}

.mode-chevron {
  font-size: 10px;
  opacity: 0.55;
}

.mode-label { white-space: nowrap; }
.mode-indicator,
.mode-dot { display: none; }

.mode-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  background: var(--s-bg-input);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  z-index: var(--z-dropdown, 1000);
  overflow: hidden;
  padding: 4px;
}

.mode-dropdown.show { display: block; }

.mode-option {
  appearance: none;
  display: flex;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s-text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: background 0.1s, color 0.1s;
  text-align: left;
}

.mode-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.mode-option.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-name { font-weight: 500; letter-spacing: -0.01em; }

.mode-desc {
  font-size: 11px;
  color: var(--s-text-secondary);
  line-height: 1.3;
}

/* ---- File pills ---- */
.file-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 10px 2px 0;
}

.file-pills:empty { display: none; }

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--s-bg-input);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.file-pill svg {
  width: 14px;
  height: 14px;
  fill: var(--s-text-secondary);
  flex-shrink: 0;
}

.file-pill-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-pill-size { color: var(--s-text-secondary); }

.file-pill-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--s-text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.file-pill-remove:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

/* Exit animation for pills removed via dismissAllPills() in voice-upload.js;
   that JS listens for animationend to detach the node. */
@keyframes filePillDismiss {
  to { opacity: 0; transform: translateY(-4px); }
}

.file-pill.dismissing {
  animation: filePillDismiss 160ms ease forwards;
  pointer-events: none;
}

/* ---- Upload progress / warning ---- */
.upload-progress {
  display: none;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 8px auto 0;
  padding: 0 2px;
  font-size: 12px;
  color: var(--s-text-secondary);
}

.upload-progress.show { display: flex; }

.upload-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--s-active-wash);
  border-radius: 2px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--s-accent);
  border-radius: 2px;
  transition: width 0.2s;
}

.upload-size-info {
  font-size: 11px;
  color: var(--s-text-secondary);
  white-space: nowrap;
}

.upload-size-warning {
  display: none;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 8px auto 0;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  font-size: 12px;
  color: var(--s-status-warning-text);
}

.upload-size-warning.show { display: flex; }

.upload-size-warning button {
  appearance: none;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 6px;
  background: transparent;
  color: var(--s-status-warning-text);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ---- Drop overlay ---- */
.drop-overlay {
  display: none;
  position: absolute;
  inset: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.88);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(6px);
}

.drop-overlay.show { display: flex; }

.drop-overlay svg {
  width: 36px;
  height: 36px;
  fill: var(--s-text-secondary);
}

.drop-overlay p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Generic icon button */
.ctrl-icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
}

.ctrl-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Focus rings ---- */
.text-input-wrap .upload-btn:focus-visible,
.text-input-wrap .send-btn:focus-visible,
.text-input-wrap .voice-btn:focus-visible,
.text-input-wrap .loop-toggle-btn:focus-visible,
.mode-current:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

.mode-option:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: -1px;
  background: rgba(255, 255, 255, 0.06);
}

/* ---- Light theme ---- */
[data-theme="light"] .controls {
  background: var(--s-bg-page, #f7f7f7) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .controls::before {
  display: none !important;
  content: none !important;
}
[data-theme="light"] .text-input-wrap {
  --composer-bg: #ffffff;
  --composer-bg-focus: #ffffff;
  --composer-ring: rgba(0, 0, 0, 0.10);
  --composer-ring-focus: rgba(0, 0, 0, 0.28);
  --composer-fg: var(--s-text-primary);
  --composer-muted: rgba(0, 0, 0, 0.38);
  --composer-hover: rgba(0, 0, 0, 0.05);
  box-shadow: none;
}
[data-theme="light"] .text-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--s-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-accent) 28%, transparent);
}
[data-theme="light"] .text-input-wrap .send-btn {
  background: var(--s-accent);
  color: var(--s-accent-on, #0A0E14);
  box-shadow: none;
}
[data-theme="light"] .text-input-wrap .send-btn:hover {
  background: var(--s-accent-hover, var(--s-accent));
  color: var(--s-accent-on, #0A0E14);
}
[data-theme="light"] .mode-current,
[data-theme="light"] .mode-dropdown,
[data-theme="light"] .file-pill {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .mode-option:hover,
[data-theme="light"] .mode-option.active {
  background: rgba(0, 0, 0, 0.04);
  color: var(--p-black, #0A0E14);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .controls {
    padding: 0 12px 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .text-input-wrap {
    min-height: 48px;
    border-radius: 14px;
    padding: 6px 6px 6px 8px;
  }
  .text-input-wrap .upload-btn,
  .text-input-wrap .voice-btn,
  .text-input-wrap .send-btn {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .controls {
    padding: 0 10px 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .text-input-wrap {
    border-radius: 14px;
    gap: 4px;
  }
  .text-input-wrap .text-input {
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .text-input-wrap .loop-toggle-btn .loop-label {
    display: none;
  }
  .text-input-wrap .loop-toggle-btn {
    width: 36px;
    padding: 0;
  }
}

/* Operator app shell: bottom nav owns safe-area — don't double-pad composer */
html.has-mobile-bottom-nav .controls {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 8px;
}
html.has-mobile-bottom-nav body.keyboard-open .controls {
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}

/* ---- components/_settings.css ---- */
/* ==========================================================================
   SETTINGS PANEL
   Complete styles for the settings page and all sub-components.
   UniFi Site Manager aesthetic: clean sections, dividers, compact controls.
   Uses design-system tokens exclusively: --s-*, --c-*, --sp-*, --t-*, etc.
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS PAGE CONTAINER
   ========================================================================== */

.settings-page {
  flex: 1;
  min-height: 0;
  width: 100%;
  
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   2. SUB-NAVIGATION PILL BAR
   Horizontal pills: Appearance, Agent, Inference, Services, Voice, System, Modules
   ========================================================================== */

.ppf-summary-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-1-5);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: none;
  background: transparent;
  position: relative;
  top: auto;
  z-index: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppf-summary-stats::-webkit-scrollbar {
  display: none;
}

.ppf-stat {
  font-size: var(--c-pill-font-size);
  font-weight: var(--c-pill-font-weight);
  font-family: var(--t-font-family);
  padding: var(--c-pill-padding);
  border-radius: var(--c-pill-radius);
  border: none;
  background: var(--c-pill-bg);
  color: var(--c-pill-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.ppf-stat:hover {
  background: var(--c-pill-bg-hover);
  color: var(--s-text-primary);
}

.ppf-stat.active {
  background: var(--c-pill-bg-active);
  color: var(--c-pill-text-active);
}

.ppf-stat:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent));
  outline-offset: 2px;
}


/* ==========================================================================
   3. SETTINGS SECTIONS
   ========================================================================== */

.settings-section {
  padding: var(--sp-5) var(--sp-5);
}

.settings-section + .settings-section {
  padding-top: var(--sp-6);
  margin-top: var(--sp-3);
}

.settings-section-title {
  font-size: var(--c-heading-size);
  font-weight: var(--c-heading-weight);
  color: var(--c-heading-color);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 var(--sp-2-5) 0;
  line-height: var(--t-line-height-snug);
}

.settings-section-title-tight {
  margin-bottom: var(--sp-1);
}

.settings-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}

.settings-section-header .settings-section-title {
  margin-bottom: 0;
}

.settings-reset-btn {
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-2xs);
  font-family: var(--t-font-family);
  font-weight: var(--t-font-weight-medium);
  padding: var(--sp-0-5) var(--sp-2-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--motion-colors);
}

.settings-reset-btn:hover {
  color: var(--s-status-error);
  border-color: var(--s-status-error);
  background: var(--s-status-error-bg);
}

.settings-subsection {
  margin-top: var(--sp-4);
}

.settings-subsection:first-child {
  margin-top: 0;
}


/* ==========================================================================
   4. SETTINGS ITEMS (key-value rows)
   ========================================================================== */

.settings-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2-5) 0;
  gap: var(--sp-4);
}

.settings-item + .settings-item {
  border-top: 1px solid var(--s-border-subtle);
}

.settings-item-top {
  align-items: flex-start;
}

.settings-item.clickable {
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: var(--sp-2-5) var(--sp-3);
  margin: 0 calc(-1 * var(--sp-3));
  transition: background-color var(--motion-duration-fast) var(--motion-ease-default);
}

.settings-item.clickable:hover {
  background: var(--s-bg-hover);
}

.settings-item.clickable:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent));
  outline-offset: -2px;
}

.settings-item.clickable + .settings-item.clickable {
  border-top: none;
}

.settings-label {
  font-size: var(--c-label-size);
  color: var(--c-label-color);
  flex-shrink: 0;
  cursor: inherit;
  line-height: var(--t-line-height-normal);
}

.settings-value {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.settings-arrow {
  font-size: var(--t-font-size-base);
  color: var(--s-text-secondary);
  line-height: var(--t-line-height-none);
  flex-shrink: 0;
}

.settings-hint {
  font-size: var(--c-hint-size);
  color: var(--c-hint-color);
  line-height: var(--t-line-height-snug);
  margin: 0 0 var(--sp-2) 0;
}

.settings-hint-flush {
  margin: 0;
}

.settings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: inherit;
  text-decoration: none;
}


/* ==========================================================================
   5. FORM CONTROLS — Text Input
   ========================================================================== */

.settings-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  height: var(--c-input-height);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--c-input-text);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  line-height: var(--t-line-height-normal);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default);
}

.settings-input:hover {
  border-color: var(--c-input-border);
}

.settings-input:focus {
  border-color: var(--c-input-border);
  box-shadow: none;
}

.settings-input::placeholder {
  color: var(--c-input-text-placeholder);
}

.settings-custom-fields {
  padding: 0 0 var(--sp-1);
}

.settings-custom-fields .settings-item {
  padding: var(--sp-1-5) 0;
}


/* ==========================================================================
   6. FORM CONTROLS — Select Dropdown
   ========================================================================== */

.settings-select {
  -webkit-appearance: menulist;
  appearance: menulist;
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--s-text-primary);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  padding: var(--sp-2) var(--sp-2-5);
  height: var(--c-input-height);
  cursor: pointer;
  outline: none;
  min-width: 120px;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default);
}

[data-theme="light"] .settings-select { color-scheme: light; }
[data-theme="dark"]  .settings-select { color-scheme: dark; }

.settings-select:hover {
  border-color: var(--c-input-border);
}

.settings-select:focus {
  border-color: var(--c-input-border);
  box-shadow: none;
}


/* ==========================================================================
   7. FORM CONTROLS — Range Slider
   ========================================================================== */

.settings-range-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.settings-range {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--s-border-strong);
  outline: none;
  cursor: pointer;
}

.settings-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--s-accent) 0%,
    var(--s-accent) var(--range-pct, 50%),
    var(--s-border-strong) var(--range-pct, 50%),
    var(--s-border-strong) 100%
  );
}

.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--s-accent);
  border: 2px solid var(--s-bg-surface);
  box-shadow: none;
  cursor: pointer;
  margin-top: -5px;
}

.settings-range::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--s-border-strong);
}

.settings-range::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--s-accent);
}

.settings-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--s-accent);
  border: 2px solid var(--s-bg-surface);
  box-shadow: none;
  cursor: pointer;
}

.settings-range-val {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   8. FORM CONTROLS — Toggle Switch
   ========================================================================== */

.settings-toggle {
  position: relative;
  display: inline-block;
  width: var(--c-toggle-width);
  height: var(--c-toggle-height);
  flex-shrink: 0;
}

.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--c-toggle-bg-off);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-default);
}

.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: calc(var(--c-toggle-height) - 4px);
  height: calc(var(--c-toggle-height) - 4px);
  left: 2px;
  top: 2px;
  background: var(--c-toggle-knob);
  border-radius: var(--radius-full);
  box-shadow: none;
  transition: transform var(--motion-duration-normal) var(--motion-ease-default);
}

.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--c-toggle-bg-on);
}

.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(calc(var(--c-toggle-width) - var(--c-toggle-height)));
}

.settings-toggle input:focus-visible + .settings-toggle-slider {
  box-shadow: none;
}


/* ==========================================================================
   9. FORM CONTROLS — Segmented Control (Mode Bar)
   ========================================================================== */

.settings-mode-bar {
  display: flex;
  gap: 0;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.settings-mode-btn {
  flex: 1;
  padding: var(--sp-1-5) var(--sp-2);
  border: none;
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-normal);
  font-family: var(--t-font-family);
  cursor: pointer;
  border-right: 1px solid var(--s-border);
  transition: var(--motion-colors);
}

.settings-mode-btn:last-child {
  border-right: none;
}

.settings-mode-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.settings-mode-btn.active {
  background: var(--s-bg-surface);
  color: var(--s-text-primary);
  font-weight: var(--t-font-weight-semibold);
}

.settings-mode-btn .lock-icon {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-left: 2px;
  fill: currentColor;
  opacity: 0.6;
}


/* ==========================================================================
   10. THEME TOGGLE PILLS
   ========================================================================== */

.theme-toggle-pills {
  display: flex;
  gap: var(--sp-px);
  background: var(--s-bg-surface-sunken);
  border-radius: var(--radius-md);
  padding: 2px;
  width: fit-content;
}

.theme-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  font-family: var(--t-font-family);
  font-size: var(--t-font-size-sm);
  cursor: pointer;
  transition: var(--motion-colors);
}

.theme-pill.active {
  background: var(--s-bg-surface);
  color: var(--s-text-primary);
  box-shadow: none;
}

.theme-pill:hover:not(.active) {
  color: var(--s-text-primary);
}


/* ==========================================================================
   11. CONNECTION STATUS DOTS
   ========================================================================== */

.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--s-border-strong);
  flex-shrink: 0;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-default);
}

.conn-dot.on {
  background: var(--s-status-success);
}


/* ==========================================================================
   12. COLOR PICKERS — Appearance Panel
   ========================================================================== */

.brand-group-label {
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wider);
  color: var(--s-text-secondary);
  padding: var(--sp-3) 0 var(--sp-1);
  margin-top: var(--sp-1);
  border-top: 1px solid var(--s-border);
}

.brand-group-label:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.brand-color-row {
  gap: var(--sp-2);
}

.brand-color-pick-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  position: relative;
}

.brand-color-swatch {
  display: none;
}

.brand-color-pick {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--s-bg-surface);
  flex-shrink: 0;
}

.brand-color-pick::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.brand-color-pick::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius-sm);
}

.brand-hex {
  width: 90px;
  font-family: var(--t-font-family);
  font-size: var(--t-font-size-sm);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--s-text-primary);
  outline: none;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.brand-hex:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.brand-hex-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: var(--motion-colors);
}

.brand-hex-copy:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover);
}

.brand-hex-copy.copied {
  color: var(--s-status-success);
}


/* ==========================================================================
   13. BRAND UPLOADS — Logo & Favicon
   ========================================================================== */

.brand-assets-row {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.brand-asset-col {
  flex: 1;
  min-width: 160px;
}

.brand-asset-label {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-secondary);
  margin-bottom: var(--sp-0-5);
}

.brand-upload-area {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
}

.brand-preview-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--s-border);
  background: var(--s-bg-surface-sunken);
  padding: var(--sp-1);
}

.brand-favicon-preview {
  width: 32px;
  height: 32px;
}

.brand-upload-actions {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.brand-default-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-sm);
  background: var(--s-bg-surface-sunken);
  border-style: dashed;
}

.brand-actions-row {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}

.brand-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.brand-toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--s-accent);
  cursor: pointer;
}

.brand-size-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}

.brand-size-range {
  width: 80px;
  flex: none;
  accent-color: var(--s-accent);
}

.brand-size-val {
  min-width: 38px;
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   14. PROVIDER CARDS — Inference Panel
   ========================================================================== */

.prov-cards {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.prov-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  min-width: 140px;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default);
}

.prov-card:hover {
  border-color: var(--s-border-strong);
}

.prov-card.active {
  border-color: var(--s-accent);
  box-shadow: none;
}

.prov-name {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
}

.prov-status {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
}

.prov-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-default);
}

.prov-dot.ok {
  background: var(--s-status-success);
}

.prov-dot.off {
  background: var(--s-border-strong);
}


/* ==========================================================================
   15. SOUL / PERSONA EDITOR
   ========================================================================== */

.soul-editor-layout {
  display: flex;
  gap: 0;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 320px;
}

.soul-file-list {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--s-border);
  background: var(--s-bg-surface-sunken);
  overflow-y: auto;
  padding: var(--sp-2) 0;
}

.soul-file-item {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color var(--motion-duration-fast) var(--motion-ease-default),
              background-color var(--motion-duration-fast) var(--motion-ease-default);
}

.soul-file-item:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.soul-file-item.active {
  color: var(--s-text-primary);
  background: var(--s-bg-surface);
  border-left-color: var(--s-accent);
  font-weight: var(--t-font-weight-medium);
}

.soul-editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.soul-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2-5) var(--sp-4);
  border-bottom: none;
  background: var(--s-bg-surface);
}

.soul-editor-header span {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
}

.soul-editor-textarea {
  flex: 1;
  width: 100%;
  min-height: 240px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--s-bg-surface);
  border: none;
  color: var(--s-text-primary);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family-mono);
  line-height: var(--t-line-height-relaxed);
  resize: vertical;
  outline: none;
}

.soul-editor-textarea::placeholder {
  color: var(--s-text-secondary);
}

.soul-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--s-border);
  background: var(--s-bg-surface);
}


/* ==========================================================================
   16. VOICE PROFILES
   ========================================================================== */

.settings-voices-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.settings-voices-empty {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  padding: var(--sp-1) 0;
}

.voice-profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.voice-profile-item:hover {
  border-color: var(--s-border-strong);
}

.voice-profile-item.voice-active {
  border-color: var(--s-accent);
}

.voice-profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-px);
}

.voice-profile-name {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
  font-weight: var(--t-font-weight-medium);
}

.voice-profile-meta {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
}

.voice-profile-del {
  background: none;
  border: none;
  color: var(--s-text-secondary);
  cursor: pointer;
  padding: var(--sp-0-5);
  border-radius: var(--radius-sm);
  transition: color var(--motion-duration-fast) var(--motion-ease-default);
}

.voice-profile-del:hover {
  color: var(--s-status-error);
}

.voice-profile-del svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.voice-use-btn {
  padding: var(--sp-0-5) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--t-font-size-2xs);
  border: 1px solid var(--s-border);
  background: var(--s-bg-surface);
  color: var(--s-accent);
  cursor: pointer;
  font-family: var(--t-font-family);
  transition: var(--motion-colors);
}

.voice-use-btn:hover {
  background: var(--s-bg-hover);
}

.voice-use-btn.active {
  background: var(--s-accent-subtle);
  color: var(--s-accent);
  border-color: var(--s-accent);
  cursor: default;
}

.voice-use-btn:disabled {
  opacity: var(--c-btn-disabled-opacity);
  cursor: default;
}

.voice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border-subtle);
  border-radius: var(--radius-md);
  gap: var(--sp-3);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.voice-card:hover {
  border-color: var(--s-border-strong);
}

.voice-card.voice-active {
  border-color: var(--s-accent);
  background: var(--s-bg-surface);
}

.voice-card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-px);
  min-width: 0;
}

.voice-card-actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}


/* ==========================================================================
   17. VOICE CLONE RECORDING
   ========================================================================== */

.clone-record-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}

.clone-description {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  line-height: var(--t-line-height-snug);
  margin: 0;
}

.clone-reference-text {
  background: var(--s-bg-surface-sunken);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  line-height: var(--t-line-height-normal);
  max-height: 100px;
  overflow-y: auto;
}

.clone-btn-wrap {
  display: flex;
  gap: var(--sp-2);
}

.clone-record-btn {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  cursor: pointer;
  border: 2px dashed var(--s-border);
  background: var(--s-bg-surface-sunken);
  color: var(--s-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  transition: var(--motion-colors);
}

.clone-record-btn:hover {
  background: var(--s-bg-hover);
  border-color: var(--s-accent);
}

.clone-record-btn:disabled {
  opacity: var(--c-btn-disabled-opacity);
  cursor: not-allowed;
}

.clone-record-btn.recording {
  border-color: var(--s-status-error);
  color: var(--s-status-error);
}

.clone-stack-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}

.clone-progress {
  width: 100%;
  height: 4px;
  background: var(--s-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.clone-progress-fill {
  height: 100%;
  background: var(--s-accent);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width var(--motion-duration-normal) var(--motion-ease-default);
}

.active-speaker-display {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--s-bg-surface-sunken);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  font-size: var(--t-font-size-sm);
  color: var(--s-accent);
}

.active-speaker-icon {
  fill: var(--s-accent);
  flex-shrink: 0;
}

.tts-test-area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}

.tts-test-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--c-input-text);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  line-height: var(--t-line-height-normal);
  resize: vertical;
  outline: none;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.tts-test-input:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.tts-test-controls {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.tts-test-select {
  min-width: 140px;
}

.tts-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-1-5) var(--sp-3);
  background: var(--s-accent);
  color: var(--s-accent-on);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  font-weight: var(--t-font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-default);
}

.tts-test-btn:hover {
  background: var(--s-accent-hover);
}

.tts-test-btn:disabled {
  opacity: var(--c-btn-disabled-opacity);
  cursor: not-allowed;
}


/* ==========================================================================
   18. AI PROVIDER SETTINGS
   ========================================================================== */

.ai-provider-block {
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.ai-provider-block:last-child {
  margin-bottom: 0;
}

.ai-provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: none;
}

.ai-provider-header .settings-section-title {
  margin-bottom: 0;
}


/* ==========================================================================
   19. TAB PILLS (sub-tabs within settings panels)
   ========================================================================== */

.tab-pills {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1) 0 var(--sp-3);
}

.tab-pill {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  font-family: var(--t-font-family);
  padding: var(--sp-1) var(--sp-2-5);
  border-radius: var(--radius-full);
  border: none;
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-duration-fast) var(--motion-ease-default),
              background-color var(--motion-duration-fast) var(--motion-ease-default);
}

.tab-pill:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.tab-pill.active {
  background: var(--s-accent-subtle);
  color: var(--s-accent);
}


/* ==========================================================================
   20. ACTION BUTTONS
   ========================================================================== */

.ppf-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--s-border);
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-xs);
  font-family: var(--t-font-family);
  font-weight: var(--t-font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--motion-colors);
}

.ppf-add-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
  border-color: var(--s-border-strong);
}

.ppf-add-btn:active {
  transform: scale(0.97);
}

.ppf-add-btn.ppf-btn-sm {
  font-size: var(--t-font-size-2xs);
  padding: var(--sp-0-5) var(--sp-2);
}

.ppf-add-btn.ppf-btn-primary {
  background: var(--s-accent);
  color: var(--s-accent-on);
  border-color: var(--s-accent);
}

.ppf-add-btn.ppf-btn-primary:hover {
  background: var(--s-accent-hover);
  border-color: var(--s-accent-hover);
}

.ppf-add-btn.ppf-btn-ghost {
  background: transparent;
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
}

.ppf-add-btn.ppf-btn-ghost:hover {
  border-color: var(--s-border-strong);
  color: var(--s-text-primary);
}


/* ==========================================================================
   21. CUSTOM SELECT (csel)
   ========================================================================== */

.csel {
  position: relative;
  display: inline-block;
  min-width: 140px;
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
}

.csel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--s-text-primary);
  cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csel-trigger::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--s-text-secondary);
  margin-left: var(--sp-2);
  flex-shrink: 0;
}

.csel-trigger:hover {
  border-color: var(--c-input-border-hover);
}

.csel:focus .csel-trigger,
.csel:focus-visible .csel-trigger,
.csel.open .csel-trigger {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.csel:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent));
  outline-offset: 2px;
}

.csel-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  right: 0;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--s-bg-overlay);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-dropdown);
  box-shadow: none;
  z-index: var(--z-dropdown);
  padding: var(--sp-1) 0;
}

.csel.open .csel-menu {
  display: block;
}

.csel-opt {
  padding: var(--sp-1-5) var(--sp-3);
  color: var(--s-text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-duration-instant) var(--motion-ease-default);
}

.csel-opt:hover {
  background: var(--s-bg-hover);
}

.csel-opt.selected {
  background: var(--s-accent-subtle);
  color: var(--s-accent);
}

.csel-optgroup {
  padding: var(--sp-2) var(--sp-3) var(--sp-0-5);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wider);
  cursor: default;
}


/* ==========================================================================
   22. SERVICE CARDS — Services Tab
   ========================================================================== */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}

.svc-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-card);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.svc-card:hover {
  border-color: var(--s-accent);
}

.svc-name {
  font-weight: var(--t-font-weight-semibold);
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
}

.svc-host-info {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  margin: 0 0 var(--sp-3) 0;
}

.svc-status {
  flex-shrink: 0;
}

.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0-5) var(--sp-2);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-medium);
  border-radius: var(--radius-full);
  background: var(--s-bg-surface-sunken);
  color: var(--s-text-secondary);
}

.svc-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-default);
}

.svc-dot.up {
  background: var(--s-status-success);
}

.svc-dot.down {
  background: var(--s-status-error);
}

.svc-dot.checking {
  background: var(--s-status-warning);
}


/* ==========================================================================
   23. SYSTEM STATS
   ========================================================================== */

.sys-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}

.sys-stat-card {
  flex-direction: column;
  align-items: flex-start;
}

.sys-stat-label {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
}

.sys-stat-value {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
  font-variant-numeric: tabular-nums;
}

.sys-stat-error {
  color: var(--s-status-error);
  font-size: var(--t-font-size-xs);
}


/* ==========================================================================
   24. MODULE SETTINGS
   ========================================================================== */

.settings-action-btn {
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--s-border);
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  font-family: var(--t-font-family);
  transition: var(--motion-colors);
}

.settings-action-btn:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover);
}


/* ==========================================================================
   25. MENU ORDER DRAG-AND-DROP
   ========================================================================== */

.menu-order-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-1) 0;
}

.menu-order-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-card);
  cursor: grab;
  user-select: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default),
              opacity var(--motion-duration-fast) var(--motion-ease-default);
}

.menu-order-item:hover {
  background: var(--s-bg-hover);
}

.menu-order-item.menu-order-fixed {
  cursor: default;
  opacity: 0.5;
}

.menu-order-item.menu-order-dragging {
  opacity: 0.4;
  background: var(--s-bg-hover);
  box-shadow: none;
}

.menu-order-grip {
  font-size: var(--t-font-size-base);
  color: var(--s-text-secondary);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.menu-order-label {
  flex: 1;
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
}

.menu-order-hint {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
}


/* ==========================================================================
   26. ACTIVITY LOG
   ========================================================================== */

.activity-log-search {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--c-input-text);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  outline: none;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.activity-log-search:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.activity-log-stats {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}

.activity-stat-badge {
  padding: var(--sp-2) var(--sp-3);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-card);
  min-width: 100px;
}

.activity-stat-label {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
}

.activity-stat-count {
  font-size: var(--t-font-size-xl);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
  font-variant-numeric: tabular-nums;
}

.activity-stat-sub {
  font-size: var(--t-font-size-2xs);
  color: var(--s-status-error);
}

.activity-log-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-1-5) 0;
  border-bottom: 1px solid var(--s-border-subtle);
}

.activity-log-ts {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  min-width: 70px;
  white-space: nowrap;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.activity-log-type {
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  padding: var(--sp-px) var(--sp-1-5);
  border-radius: var(--radius-sm);
  min-width: 28px;
  text-align: center;
}

.activity-log-msg {
  flex: 1;
  font-size: var(--t-font-size-sm);
  color: var(--s-text-primary);
  line-height: var(--t-line-height-snug);
}

.activity-log-error {
  color: var(--s-status-error);
  font-size: var(--t-font-size-2xs);
  margin-top: var(--sp-0-5);
  padding-left: 52px;
}

.activity-log-meta {
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-2xs);
}

.activity-log-method {
  font-weight: var(--t-font-weight-medium);
}

.activity-log-status-ok  { color: var(--s-status-success); }
.activity-log-status-err { color: var(--s-status-error); }
.activity-log-status-code { color: var(--s-text-secondary); }


/* ==========================================================================
   27. UTILITY HELPERS
   ========================================================================== */

.settings-row-end {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.settings-filter-spacer {
  flex: 1;
}

.settings-mb-sm {
  margin-bottom: var(--sp-3);
}

.settings-mt-sm {
  margin-top: var(--sp-2);
}

.u-file-hidden { display: none; }
.u-nowrap      { white-space: nowrap; }
.text-dim-sm   { font-size: var(--t-font-size-xs); }

.ppf-empty {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  padding: var(--sp-5);
  text-align: center;
}


/* ==========================================================================
   28. RESPONSIVE — Tablet
   ========================================================================== */

@media (max-width: 1024px) {
  /* Reduce section padding on tablets */
  .settings-section {
    padding: var(--sp-4) var(--sp-4);
  }

  .ppf-summary-stats {
    padding: var(--sp-2-5) var(--sp-4);
  }

  /* Service grid needs fewer columns */
  .svc-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}


/* ==========================================================================
   28b. RESPONSIVE — Mobile (<=768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Pill bar: tighter padding, ensure smooth horizontal scroll --- */
  .ppf-summary-stats {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-1);
  }

  .ppf-stat {
    padding: var(--sp-1-5) var(--sp-3);
    font-size: var(--t-font-size-xs);
  }


  /* --- Section padding: reduce horizontal space --- */
  .settings-section {
    padding: var(--sp-3) var(--sp-3);
  }


  /* --- Settings items: stack label above control --- */
  .settings-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1-5);
    min-height: auto;
    padding: var(--sp-3) 0;
  }

  .settings-item.clickable {
    padding: var(--sp-3) var(--sp-3);
    margin: 0 calc(-1 * var(--sp-3));
  }

  .settings-label {
    flex-shrink: initial;
  }

  .settings-value {
    width: 100%;
  }


  /* --- Toggle switch: larger touch target on mobile --- */
  .settings-toggle {
    width: 48px;
    height: 26px;
    min-width: 48px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
  }

  .settings-toggle-slider {
    width: 48px;
    height: 26px;
    top: auto;
    bottom: auto;
  }

  .settings-toggle-slider::before {
    width: 22px;
    height: 22px;
  }

  .settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(22px);
  }


  /* --- Range slider: wider track, larger thumb for touch --- */
  .settings-range {
    width: 100%;
    min-width: 80px;
    height: 8px;
  }

  .settings-range::-webkit-slider-runnable-track {
    height: 8px;
  }

  .settings-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
  }

  .settings-range::-moz-range-track {
    height: 8px;
  }

  .settings-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }

  .settings-range-wrap {
    width: 100%;
  }


  /* --- Selects: full width on mobile --- */
  .settings-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: var(--t-font-size-base);
  }


  /* --- Custom select: full width on mobile --- */
  .csel {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .csel-trigger {
    min-height: 44px;
    font-size: var(--t-font-size-base);
  }

  .csel-opt {
    padding: var(--sp-2-5) var(--sp-3);
    min-height: 44px;
    display: flex;
    align-items: center;
  }


  /* --- Text inputs: ensure full width + proper touch height --- */
  .settings-input {
    min-height: 44px;
    font-size: var(--t-font-size-base);
  }


  /* --- Colour picker swatches: larger for touch --- */
  .color-cell-swatch {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .color-cell-row {
    max-width: none;
  }

  .color-cell-hex {
    min-height: 44px;
    font-size: var(--t-font-size-base);
    padding: var(--sp-2) var(--sp-2-5);
  }

  .brand-color-pick {
    width: 44px;
    height: 44px;
  }

  .brand-hex {
    min-height: 44px;
    width: 100px;
    font-size: var(--t-font-size-base);
  }


  /* --- Soul editor stacks vertically --- */
  .soul-editor-layout {
    flex-direction: column;
    min-height: 280px;
  }

  .soul-file-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--s-border);
    max-height: 120px;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--sp-1) 0;
  }

  .soul-file-item {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--sp-1-5) var(--sp-3);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .soul-file-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--s-accent);
  }

  .soul-editor-textarea {
    min-height: 180px;
  }


  /* --- Provider cards stack --- */
  .prov-cards {
    flex-direction: column;
  }

  .prov-card {
    min-width: 0;
    min-height: 44px;
    padding: var(--sp-3);
  }


  /* --- TTS test controls stack --- */
  .tts-test-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .tts-test-select {
    min-width: 0;
    width: 100%;
    min-height: 44px;
  }

  .tts-test-btn {
    min-height: 44px;
    justify-content: center;
  }


  /* --- Service grid: single column on mobile --- */
  .svc-grid {
    grid-template-columns: 1fr;
  }

  .svc-card {
    padding: var(--sp-3);
  }


  /* --- System stat grid: 2 columns on mobile --- */
  .sys-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }


  /* --- Brand assets row: stack --- */
  .brand-assets-row {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .brand-asset-col {
    min-width: 0;
  }

  .brand-row {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .brand-row-size {
    margin-left: 0;
    max-width: none;
    width: 100%;
  }

  .brand-row-size input[type="range"] {
    width: 100%;
    flex: 1;
    min-height: 44px;
  }


  /* --- Tab pills: horizontal scroll --- */
  .tab-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: var(--sp-2);
  }

  .tab-pills::-webkit-scrollbar {
    display: none;
  }

  .tab-pill {
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }


  /* --- Activity log: wrap entries on mobile --- */
  .activity-log-entry {
    flex-wrap: wrap;
    gap: var(--sp-1);
  }

  .activity-log-ts {
    min-width: auto;
  }

  .activity-log-msg {
    width: 100%;
    flex-basis: 100%;
  }

  .activity-log-error {
    padding-left: 0;
  }

  .activity-log-stats {
    gap: var(--sp-2);
  }

  .activity-stat-badge {
    min-width: 80px;
    flex: 1;
  }



  /* --- Menu order items: larger touch targets --- */
  .menu-order-item {
    min-height: 44px;
    padding: var(--sp-3);
  }


  /* --- Voice profile items: touch-friendly --- */
  .voice-profile-item {
    min-height: 44px;
    padding: var(--sp-3);
  }

  .voice-profile-del {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .voice-card {
    flex-wrap: wrap;
    padding: var(--sp-3);
  }

  .voice-use-btn {
    min-height: 36px;
    padding: var(--sp-1) var(--sp-3);
  }

  .clone-record-btn {
    min-height: 48px;
  }


  /* --- Mode bar buttons: touch friendly --- */
  .settings-mode-btn {
    min-height: 44px;
    padding: var(--sp-2) var(--sp-2);
    font-size: var(--t-font-size-sm);
  }


  /* --- Theme toggle pills: touch friendly --- */
  .theme-pill {
    min-height: 36px;
    padding: var(--sp-1-5) var(--sp-3);
  }


  /* --- AI provider blocks: tighter padding --- */
  .ai-provider-block {
    padding: var(--sp-3);
  }

  .ai-provider-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }


  /* --- Settings section header: wrap on mobile --- */
  .settings-section-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }


  /* --- Reset/action buttons: touch-friendly --- */
  .settings-reset-btn {
    min-height: 36px;
    padding: var(--sp-1-5) var(--sp-3);
  }

  .settings-action-btn {
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
  }

  .ppf-add-btn {
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
  }
}


/* ==========================================================================
   28c. RESPONSIVE — Small phones (<=480px)
   ========================================================================== */

@media (max-width: 480px) {
  .settings-section {
    padding: var(--sp-2-5) var(--sp-2-5);
  }

  .ppf-summary-stats {
    padding: var(--sp-2) var(--sp-2-5);
  }

  /* System stats: single column on very small screens */
  .sys-stat-grid {
    grid-template-columns: 1fr;
  }

  /* Brand size slider full width */
  .brand-size-range {
    width: 100%;
  }

  .soul-file-list {
    max-height: 100px;
  }

  .soul-editor-textarea {
    min-height: 150px;
  }
}


/* ==========================================================================
   APPEARANCE PAGE
   ========================================================================== */

/* Colour groups */
.color-group { margin-bottom: var(--sp-4); }
.color-group + .color-group { padding-top: var(--sp-3); }
.color-group-title {
  font-size: var(--c-subheading-size);
  font-weight: var(--c-subheading-weight);
  color: var(--c-subheading-color);
  margin-bottom: var(--sp-2);
}

/* Colour grid — swatches in rows */
.color-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}

/* Each colour cell: square swatch + hex input side by side, label below */
.color-cell { display: flex; flex-direction: column; gap: var(--sp-1); }

.color-cell-row {
  display: flex;
  max-width: 220px;
  align-items: center;
  gap: var(--sp-1-5);
}

.color-cell-swatch {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
  background: var(--s-bg-surface);
  flex-shrink: 0;
}

.color-cell-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.color-cell-swatch::-webkit-color-swatch { border: none; border-radius: 3px; }
.color-cell-swatch::-moz-color-swatch { border: none; border-radius: 3px; }

.color-cell-hex {
  all: unset;
  flex: 1;
  font-family: var(--t-font-family);
  font-size: var(--t-font-size-sm);
  text-transform: uppercase;
  padding: var(--sp-1-5) var(--sp-2);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  color: var(--s-text-primary);
  box-sizing: border-box;
  min-width: 0;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default);
}

.color-cell-hex:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.color-cell-hex::placeholder {
  color: var(--s-text-tertiary);
  text-transform: none;
}

.color-cell-label {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
}







.brand-asset-controls .btn,
.brand-asset-controls .mod-btn {
  font-size: var(--t-font-size-2xs);
  height: var(--c-btn-height-sm);
  padding: 0 var(--sp-2-5);
}

.brand-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  cursor: pointer;
}

.brand-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--s-accent);
}

.brand-card-size input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: var(--s-accent);
}

.brand-card-size span:last-child {
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* Brand rows — compact logo/favicon */
.brand-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2-5) 0;
}

.brand-row + .brand-row {
  border-top: 1px solid var(--s-border-subtle);
}

.brand-row-preview {
  flex-shrink: 0;
  min-width: 40px;
}

.brand-row-actions {
  display: flex;
  gap: var(--sp-1-5);
  align-items: center;
}

.brand-row-actions .btn,
.brand-row-actions .mod-btn {
  font-size: var(--t-font-size-2xs);
  height: var(--c-btn-height-sm);
  padding: 0 var(--sp-2-5);
}

.brand-row-size {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  margin-left: auto;
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  max-width: 180px;
}

.brand-row-size input[type="range"] {
  width: 80px;
  height: 3px;
  accent-color: var(--s-accent);
}

.brand-row-size span:last-child {
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Inline size slider next to buttons */
.brand-size-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-2);
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
}

.brand-size-inline input[type="range"] {
  width: 70px;
  height: 3px;
  accent-color: var(--s-accent);
}

.brand-size-inline span {
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}

/* Logo size slider — own row under the logo */
.brand-logo-size {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0 0;
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  max-width: 220px;
}

.brand-logo-size input[type="range"] {
  flex: 1;
  height: 3px;
  accent-color: var(--s-accent);
}

.brand-logo-size span:last-child {
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PILL NAV — Reusable across all modules
   Usage: <div class="pill-nav"><button class="pill active">Tab 1</button>...</div>
   ========================================================================== */

.pill-nav {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.pill {
  font-size: var(--c-pill-font-size);
  font-weight: var(--c-pill-font-weight);
  font-family: var(--t-font-family);
  padding: var(--c-pill-padding);
  border-radius: var(--c-pill-radius);
  border: none;
  background: var(--c-pill-bg);
  color: var(--c-pill-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pill:hover {
  background: var(--c-pill-bg-hover);
  color: var(--s-text-primary);
}

.pill.active {
  background: var(--c-pill-bg-active);
  color: var(--c-pill-text-active);
}

/* ==========================================================================
   SOUL EDITOR — File list item styles
   ========================================================================== */

.soul-file-name {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--s-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soul-file-meta {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-tertiary);
}

/* ==========================================================================
   VOICE CLONE — Recording and upload UI
   ========================================================================== */

.clone-record-area { display: flex; flex-direction: column; gap: var(--sp-2); }
.clone-record-timer { font-size: var(--t-font-size-sm); color: var(--s-status-error); font-variant-numeric: tabular-nums; }
.clone-status { font-size: var(--t-font-size-2xs); color: var(--s-text-tertiary); min-height: 18px; }
.clone-sample-actions { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; }
.clone-reading-text {
  background: var(--s-bg-surface-sunken);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.clone-reading-text p { font-size: var(--t-font-size-sm); color: var(--s-text-secondary); line-height: var(--t-line-height-relaxed); font-style: italic; }
.clone-upload-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  color: var(--s-text-tertiary);
  font-size: var(--t-font-size-2xs);
}
.clone-upload-divider::before,
.clone-upload-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--s-border);
}
.clone-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1-5);
  width: 100%;
  padding: var(--sp-2-5);
  border: 2px dashed var(--s-border);
  border-radius: var(--radius-md);
  background: var(--s-bg-surface);
  color: var(--s-text-tertiary);
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              color var(--motion-duration-fast) var(--motion-ease-default);
}
.clone-upload-btn:hover { border-color: var(--s-accent); color: var(--s-accent); }
.clone-upload-progress { margin-top: var(--sp-2); }
.clone-upload-status { font-size: var(--t-font-size-2xs); color: var(--s-text-tertiary); text-align: center; margin-top: var(--sp-1-5); }

/* ==========================================================================
   UTILITY CLASSES — Common inline style replacements
   ========================================================================== */

.settings-input--narrow { max-width: 220px; }
.settings-hint--tight { margin-top: -4px; }
.btn-group-sm { display: flex; gap: var(--sp-1); }
.settings-actions-bar { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-2); }

/* Inline style replacements — consumer simplicity pass */
.settings-input-sm { max-width: 220px; margin-bottom: var(--sp-1); }
.settings-select-md { max-width: 220px; }

/* --- 360px: full-width inputs on ultra-narrow screens --- */
@media (max-width: 360px) {
  .settings-input--narrow,
  .settings-input-sm,
  .settings-select-md,
  .color-cell-row {
    max-width: 100%;
    width: 100%;
  }
  .settings-range {
    width: 100%;
  }
  .settings-range-wrap {
    width: 100%;
  }
  .settings-save-btn {
    min-width: 0;
    width: 100%;
  }
}
.settings-actions-row { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-2); }
.settings-hint-inline { margin: 0; }
.soul-editor-actions { display: flex; gap: var(--sp-1); }
.settings-item-wrap { flex-wrap: wrap; gap: var(--sp-1); }
.settings-item-body { flex: 1; min-width: 0; }
.settings-save-btn { min-width: 120px; }
.settings-section-compact { padding-top: var(--sp-2); }

/* Button group — inline flex row with standard gap */
.btn-group { display: flex; gap: var(--sp-2); align-items: center; }

/* Brand asset preview images */
.brand-logo-preview {
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.brand-favicon-preview {
  height: 24px;
  width: 24px;
  object-fit: contain;
}

/* ==========================================================================
   VOICE PAGE — Consumer polish (2026-03-26)
   ========================================================================== */

/* Voice group labels (ElevenLabs / Local Voices within selector) */
.voice-group-label {
  margin: 0 0 var(--sp-1-5) 0;
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
  font-size: var(--t-font-size-2xs);
}

.voice-group-label-spaced {
  margin-top: var(--sp-4);
}

/* Enhanced active voice card — subtle accent tint background */
.voice-card.voice-active {
  background: color-mix(in srgb, var(--s-accent) 6%, var(--s-bg-surface));
  border-color: var(--s-accent);
  box-shadow: none;
}

.voice-card.voice-active .voice-profile-meta {
  color: var(--s-accent);
  font-weight: var(--t-font-weight-medium);
}

/* Record button — more prominent with larger touch target */
.clone-record-btn {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-medium);
  border-width: 2px;
  min-height: 56px;
}

.clone-record-btn svg {
  fill: currentColor;
}

.clone-record-btn:not(.recording) svg {
  fill: var(--s-accent);
}

.clone-record-btn.recording {
  background: color-mix(in srgb, var(--s-status-error) 8%, var(--s-bg-surface));
  animation: voice-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { border-color: var(--s-status-error); }
  50% { border-color: color-mix(in srgb, var(--s-status-error) 40%, transparent); }
}

/* Clone action buttons — consistent sizing */
.clone-action-btn {
  min-height: 36px;
  padding: var(--sp-1-5) var(--sp-3);
  font-size: var(--t-font-size-sm);
}

.clone-action-btn.save {
  font-weight: var(--t-font-weight-medium);
}

/* Voice card transitions */
.voice-card {
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              background-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default);
}

/* Smoother voice list spacing */
.settings-voices-list {
  gap: var(--sp-1-5);
}

/* Settings header pill bar — visibility and spacing */
.settings-page .ppf-summary-stats {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  min-height: 52px;
  align-items: center;
}

/* Add top padding so content doesn't touch the header */
.settings-page > .system-sub-content {
  padding: 0 var(--sp-4);
}

/* Pill bar items: consistent sizing */
.settings-page .ppf-summary-stats .ppf-stat {
  font-size: var(--t-font-size-sm);
  padding: var(--sp-2) var(--sp-4);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ---- components/_drawer.css ---- */
/* ==========================================================================
   DRAWER — Right-side Threads rail (conversation switcher)
   Slides in from the right edge. Uses only design system tokens.
   Desktop: open by default (pushes .app via .sidebar-open).
   ========================================================================== */


/* ==========================================================================
   OVERLAY / BACKDROP
   ========================================================================== */

.voice-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-modal-backdrop);
  z-index: calc(var(--z-overlay) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-slow) var(--motion-ease-default);
}

.voice-sidebar-overlay:not(.show) {
  visibility: hidden;
}

.voice-sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overscroll-behavior: contain;
}


/* ==========================================================================
   DRAWER PANEL
   ========================================================================== */

.voice-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--layout-drawer-width);
  background: var(--c-chat-sidebar-bg, var(--s-bg-surface));
  border-left: 1px solid var(--c-chat-sidebar-border, var(--s-border));
  color: var(--c-chat-sidebar-text, var(--s-text-primary));
  z-index: var(--z-overlay);
  /* Rest closed off-screen without a transform. A standing translateX kept a
     second compositor copy of the wallpaper on inactive threads. */
  right: -100%;
  transform: none;
  transition: right var(--motion-duration-slow) var(--motion-ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-sidebar.open {
  right: 0;
  transform: none;
  box-shadow: none;
}

.voice-sidebar.is-dragging {
  right: 0;
  transition: none !important;
}

/* Finger-follow while the APK edge-swipe is in progress */
.voice-sidebar.is-dragging,
.voice-sidebar-overlay.is-dragging {
  transition: none !important;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-chat-sidebar-border, var(--s-border-subtle));
  flex-shrink: 0;
}

/* New Chat — primary button */
.sidebar-new-chat {
  display: inline-flex;
  align-items: center;
  gap: var(--c-btn-gap);
  height: var(--c-btn-height);
  padding: 0 var(--c-btn-padding-x);
  background: var(--c-btn-primary-bg);
  color: var(--c-btn-primary-text);
  border: 1px solid var(--c-btn-primary-border);
  border-radius: var(--c-btn-radius);
  font-size: var(--c-btn-font-size);
  font-weight: var(--c-btn-font-weight);
  font-family: inherit;
  line-height: var(--t-line-height-none);
  cursor: pointer;
  transition: var(--motion-colors);
}

.sidebar-new-chat:hover {
  background: var(--c-btn-primary-bg-hover);
}

.sidebar-new-chat:active {
  background: var(--c-btn-primary-bg-active);
}

.sidebar-new-chat:focus-visible {
  outline: 2px solid var(--s-accent, #FFFFFF);
  outline-offset: 2px;
}

.sidebar-new-chat svg {
  flex-shrink: 0;
  fill: currentColor;
  pointer-events: none;
}

/* Close — ghost icon button */
.sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--c-btn-height);
  height: var(--c-btn-height);
  padding: 0;
  background: var(--c-btn-ghost-bg);
  color: var(--c-btn-ghost-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--motion-colors);
}

.sidebar-close:hover {
  background: var(--c-btn-ghost-bg-hover);
  color: var(--c-btn-ghost-text-hover);
}

.sidebar-close svg {
  pointer-events: none;
}


/* ==========================================================================
   CONVERSATION LIST
   ========================================================================== */

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
}

.sidebar-list::-webkit-scrollbar {
  width: var(--c-scrollbar-width);
}

.sidebar-list::-webkit-scrollbar-track {
  background: var(--c-scrollbar-track);
}

.sidebar-list::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar-thumb);
  border-radius: var(--radius-sm);
}

.sidebar-list::-webkit-scrollbar-thumb:hover {
  background: var(--c-scrollbar-thumb-hover);
}


/* ==========================================================================
   DATE GROUP HEADERS
   ========================================================================== */

.sidebar-date-group {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wider);
  color: var(--c-heading-color);
  line-height: var(--t-line-height-normal);
}


/* ==========================================================================
   CONVERSATION ITEM
   ========================================================================== */

.voice-sidebar .sidebar-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  gap: 1px;
  cursor: pointer;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid transparent;
  box-shadow: none;
  position: relative;
  transition: background var(--motion-duration-fast) var(--motion-ease-default),
              border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.voice-sidebar .sidebar-item:hover {
  background: var(--s-bg-hover);
  border-left-color: var(--s-accent);
}

/* Active = neutral wash only — no accent edge / coloured box outline */
.voice-sidebar .sidebar-item.active {
  background: var(--s-bg-hover);
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid transparent;
  box-shadow: none;
}

/* Header row — title + action buttons */
.voice-sidebar .sidebar-item-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.voice-sidebar .sidebar-item-header .sidebar-item-title {
  flex: 1;
  min-width: 0;
}

/* Project 68: per-thread run-state indicator. Each sidebar chat is an
   independent concurrent thread; the dot shows that thread's live state. */
.voice-sidebar .thread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 50%);
  background: var(--s-text-tertiary, #8a8a8a);
  display: inline-block;
  box-shadow: none;
}
.voice-sidebar .thread-dot.thread-idle    { background: var(--s-text-tertiary, #8a8a8a); box-shadow: none; }
.voice-sidebar .thread-dot.thread-queued  { background: var(--s-status-warning, #d9a300); box-shadow: none; }
.voice-sidebar .thread-dot.thread-running {
  background: var(--s-status-success, #1faa59);
  box-shadow: none;
  animation: thread-pulse 1.2s ease-in-out infinite;
}
.voice-sidebar .thread-dot.thread-error   { background: var(--s-status-error, #d64545); box-shadow: none; }
.voice-sidebar .thread-dot.thread-done-flash {
  background: var(--s-status-success, #1faa59);
  box-shadow: none;
  animation: none;
}
.voice-sidebar .sidebar-item-restart {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s-status-warning, #d9a300);
  border: 1px solid color-mix(in srgb, var(--s-status-warning, #d9a300) 45%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.3;
  white-space: nowrap;
}
.voice-sidebar .sidebar-item.pending-restart .sidebar-item-title {
  color: var(--s-status-warning, #d9a300);
}
/* P68: unread marker — a reply landed in this chat while another pane was open. */
.voice-sidebar .sidebar-item.has-unread .sidebar-item-title {
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-heading-color);
}
.voice-sidebar .sidebar-item.has-unread .sidebar-item-title::after {
  content: "";
  display: inline-block;
  width: var(--sp-2);
  height: var(--sp-2);
  margin-left: var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--s-status-info, #FFFFFF);
  vertical-align: middle;
}
@keyframes thread-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.voice-sidebar .sidebar-item-header .sidebar-item-delete,
.voice-sidebar .sidebar-item-header .sidebar-item-archive,
.voice-sidebar .sidebar-item-header .sidebar-item-fork,
.voice-sidebar .sidebar-item-header .sidebar-item-rename {
  position: static;
  transform: none;
  flex-shrink: 0;
}

/* Title */
.voice-sidebar .sidebar-item-title {
  font-size: 14px;
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
  line-height: var(--t-line-height-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-sidebar .sidebar-item.active .sidebar-item-title {
  color: var(--s-text-primary);
}

/* Meta — queue only (message count removed) */
.voice-sidebar .sidebar-item-meta {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-secondary);
  line-height: 1.2;
  margin-top: 0;
}

/* Preview snippet — hidden (title + time only in sidebar list) */
.voice-sidebar .sidebar-item-preview {
  display: none !important;
}

.voice-sidebar .sidebar-item-time {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
  min-width: 4.5em;
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.voice-sidebar .sidebar-item-runlabel {
  display: none; /* run state via thread-dot only */
}

.voice-sidebar .sidebar-item-count {
  display: none;
}


/* ==========================================================================
   ITEM ACTION BUTTONS — appear on hover
   ========================================================================== */

/* Delete button */
.voice-sidebar .sidebar-item-delete {
  position: absolute;
  right: var(--sp-2-5);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--s-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-default),
              var(--motion-colors);
}

.voice-sidebar .sidebar-item:hover .sidebar-item-delete,
.voice-sidebar .sidebar-item:hover .sidebar-item-fork,
.voice-sidebar .sidebar-item:hover .sidebar-item-archive {
  opacity: 1;
}

.voice-sidebar .sidebar-item-delete:hover {
  color: var(--s-status-error);
  background: var(--s-status-error-bg);
}

/* Rename / fork buttons */
.voice-sidebar .sidebar-item-rename,
.voice-sidebar .sidebar-item-fork {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--s-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-default),
              var(--motion-colors);
}

.voice-sidebar .sidebar-item:hover .sidebar-item-rename,
.voice-sidebar .sidebar-item:hover .sidebar-item-fork,
.voice-sidebar .sidebar-item:hover .sidebar-item-archive {
  opacity: 1;
}

.voice-sidebar .sidebar-item-rename:hover,
.voice-sidebar .sidebar-item-fork:hover {
  color: var(--s-accent);
  background: var(--s-bg-hover);
}

.voice-sidebar .sidebar-item-archive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--s-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-default),
              var(--motion-colors);
}

.voice-sidebar .sidebar-item-archive:hover {
  color: var(--s-accent);
  background: var(--s-bg-hover);
}


/* ==========================================================================
   INLINE RENAME INPUT
   ========================================================================== */

.sidebar-rename-input {
  width: 100%;
  height: var(--c-input-height);
  padding: 0 var(--c-input-padding-x);
  background: var(--c-input-bg);
  color: var(--c-input-text);
  border: 1px solid var(--c-input-border-focus);
  border-radius: var(--c-input-radius);
  font-size: var(--c-input-font-size);
  font-family: inherit;
  outline: none;
}

.sidebar-rename-input:focus-visible {
  box-shadow: none;
}


/* ==========================================================================
   EMPTY & LOADING STATES
   ========================================================================== */

.sidebar-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-normal);
}

.sidebar-loading {
  padding: var(--sp-5);
  text-align: center;
  color: var(--s-text-secondary);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-normal);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.voice-sidebar .sidebar-footer {
  padding: var(--sp-2-5) var(--sp-4);
  border-top: 1px solid var(--s-border-subtle);
  flex-shrink: 0;
}

.voice-sidebar .sidebar-theme-btn {
  display: flex;
  align-items: center;
  gap: var(--c-btn-gap);
  width: 100%;
  height: var(--c-btn-height);
  padding: 0 var(--sp-3);
  background: var(--c-btn-secondary-bg);
  color: var(--c-btn-secondary-text);
  border: 1px solid var(--c-btn-secondary-border);
  border-radius: var(--c-btn-radius);
  font-size: var(--c-btn-font-size);
  font-family: inherit;
  cursor: pointer;
  transition: var(--motion-colors);
}

.sidebar-theme-btn:hover {
  background: var(--c-btn-secondary-bg-hover);
  border-color: var(--s-border-strong);
  color: var(--s-text-primary);
}

.sidebar-theme-btn svg {
  flex-shrink: 0;
  fill: currentColor;
  pointer-events: none;
}


/* ==========================================================================
   RESPONSIVE — Desktop: push content
   ========================================================================== */

@media (min-width: 769px) {
  .voice-sidebar-overlay {
    display: none;
  }

  .app.sidebar-open {
    margin-right: var(--layout-drawer-width);
    width: calc(100% - var(--layout-drawer-width));
  }
}


/* ==========================================================================
   RESPONSIVE — Tablet & mobile (overlay mode)
   ========================================================================== */

@media (max-width: 768px) {
  .voice-sidebar {
    max-width: 85vw;
  }

  .sidebar-item {
    min-height: var(--c-btn-height-lg);
    justify-content: center;
  }

  .voice-sidebar .sidebar-item-delete,
  .voice-sidebar .sidebar-item-rename,
  .voice-sidebar .sidebar-item-fork,
  .voice-sidebar .sidebar-item-archive {
    min-width: 26px;
    min-height: 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Touch devices: show action buttons at reduced opacity (no hover) */
  .sidebar-item .sidebar-item-delete,
  .sidebar-item .sidebar-item-archive,
  .sidebar-item .sidebar-item-fork,
  .sidebar-item .sidebar-item-rename {
    opacity: 0.7;
  }

  .sidebar-item .sidebar-item-delete:active,
  .sidebar-item .sidebar-item-archive:active,
  .sidebar-item .sidebar-item-fork:active,
  .sidebar-item .sidebar-item-rename:active {
    opacity: 1;
  }
}


/* ==========================================================================
   RESPONSIVE — Small phones
   ========================================================================== */

@media (max-width: 480px) {
  .voice-sidebar {
    width: 85vw;
    max-width: 300px;
  }

  .sidebar-new-chat {
    min-height: var(--c-btn-height-lg);
  }

  .sidebar-close {
    min-width: var(--c-btn-height-lg);
    min-height: var(--c-btn-height-lg);
  }
}


/* ==========================================================================
   RESPONSIVE — Ultra-narrow
   ========================================================================== */

@media (max-width: 360px) {
  .voice-sidebar {
    width: 90vw;
    max-width: none;
  }
}

/* ---- components/_overlays.css ---- */
/* ==========================================================================
   OVERLAYS — Lightbox, Enrollment, PIN, Scroll Button, Toasts, Session Banner
   Design system tokens only. Clean, minimal, UniFi-style.
   ========================================================================== */

/* Overlay component tokens */
:root {
  --c-overlay-btn-bg: rgba(0, 0, 0, 0.6);
  --c-overlay-btn-bg-hover: rgba(0, 0, 0, 0.7);
  --c-overlay-download-bg: rgba(0, 0, 0, 0.45);
  --c-overlay-download-bg-hover: rgba(0, 0, 0, 0.65);
}


/* ==========================================================================
   LIGHTBOX — Full-screen image viewer
   ========================================================================== */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--c-modal-backdrop);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox.show {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: none;
  cursor: default;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: max(var(--sp-4), env(safe-area-inset-top));
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  background: var(--c-overlay-btn-bg);
  border: none;
  border-radius: var(--radius-full);
  color: var(--p-white);
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-raised);
  transition: background var(--motion-duration-fast) var(--motion-ease-default);
}

.lightbox-close:hover {
  background: var(--c-overlay-btn-bg-hover);
}

.lightbox-download {
  position: absolute;
  bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  right: var(--sp-6);
  background: var(--c-overlay-download-bg);
  border: 1px solid var(--s-border-subtle);
  border-radius: var(--c-btn-radius);
  color: var(--s-text-inverse);
  font-size: var(--t-font-size-xs);
  font-family: inherit;
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  transition: background var(--motion-duration-fast) var(--motion-ease-default);
}

.lightbox-download:hover {
  background: var(--c-overlay-download-bg-hover);
}

.lightbox-download svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}


/* ==========================================================================
   ENROLLMENT OVERLAY — Voice enrollment dialog
   ========================================================================== */

.enroll-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-modal-backdrop);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-4);
}

.enroll-overlay.show {
  display: flex;
}

.enroll-box {
  background: var(--c-modal-bg);
  border: 1px solid var(--c-modal-border);
  border-radius: var(--c-modal-radius);
  padding: var(--c-modal-padding) var(--sp-8);
  max-width: var(--layout-modal-width-sm);
  width: 90%;
  text-align: center;
  box-shadow: none;
}

.enroll-box h3 {
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
  margin: 0 0 var(--sp-2) 0;
}

.enroll-box p {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  line-height: var(--t-line-height-relaxed, 1.5);
  margin: 0 0 var(--sp-4) 0;
}

.enroll-box input {
  width: 100%;
  height: var(--c-input-height);
  padding: 0 var(--c-input-padding-x);
  border-radius: var(--c-input-radius);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  color: var(--c-input-text);
  font-size: var(--c-input-font-size);
  font-family: inherit;
  outline: none;
  margin-bottom: var(--sp-3);
  box-sizing: border-box;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-default),
              box-shadow var(--motion-duration-fast) var(--motion-ease-default);
}

.enroll-box input:hover {
  border-color: var(--c-input-border-hover);
}

.enroll-box input:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.enroll-box input::placeholder {
  color: var(--c-input-text-placeholder);
}

/* Enrollment progress bar */
.enroll-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--s-bg-surface-sunken);
  overflow: hidden;
  margin-bottom: var(--sp-2);
  display: none;
}

.enroll-progress.show {
  display: block;
}

.enroll-progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--s-accent);
  border-radius: var(--radius-full);
  transition: width var(--motion-duration-instant) linear;
}

/* Enrollment status text */
.enroll-status {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  min-height: 1.2em;
  margin-bottom: var(--sp-2);
}

/* Enrollment action buttons */
.enroll-btns {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}

.enroll-btns button {
  height: var(--c-btn-height);
  padding: 0 var(--c-btn-padding-x);
  border-radius: var(--c-btn-radius);
  font-size: var(--c-btn-font-size);
  font-weight: var(--c-btn-font-weight);
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--c-btn-secondary-border);
  background: var(--c-btn-secondary-bg);
  color: var(--c-btn-secondary-text);
  transition: var(--motion-colors);
}

.enroll-btns button:hover {
  background: var(--c-btn-secondary-bg-hover);
}

.enroll-btns button:active {
  background: var(--c-btn-secondary-bg-active);
}

.enroll-btns button.primary {
  background: var(--c-btn-primary-bg);
  border-color: var(--c-btn-primary-border);
  color: var(--c-btn-primary-text);
}

.enroll-btns button.primary:hover {
  background: var(--c-btn-primary-bg-hover);
}

.enroll-btns button.primary:active {
  background: var(--c-btn-primary-bg-active);
}

.enroll-btns button:disabled {
  opacity: var(--c-btn-disabled-opacity);
  cursor: not-allowed;
}


/* ==========================================================================
   PIN OVERLAY — PIN entry dialog (reuses enroll-overlay / enroll-box)
   ========================================================================== */

#pinOverlay input {
  text-align: center;
  letter-spacing: 0.25em;
  font-size: var(--t-font-size-lg);
}


/* ==========================================================================
   SCROLL-TO-BOTTOM BUTTON — Floating scroll indicator
   ========================================================================== */

.scroll-bottom-btn {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  color: var(--s-text-tertiary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-raised);
  box-shadow: none;
  transition: var(--motion-colors), var(--motion-transform);
}

.scroll-bottom-btn.show {
  display: flex;
}

.scroll-bottom-btn:hover {
  background: var(--s-bg-hover);
  border-color: var(--s-border-strong);
  color: var(--s-text-primary);
}

.scroll-bottom-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}


/* ==========================================================================
   SESSION EXPIRED BANNER — Quiet top strip (not an error alert)
   ========================================================================== */

.session-expired-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  background: var(--s-bg-surface);
  color: var(--s-text-secondary);
  border-bottom: 1px solid var(--s-hairline-strong);
  padding: var(--sp-1-5) var(--sp-4);
  padding-top: max(var(--sp-1-5), env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: var(--t-font-size-sm);
  font-family: inherit;
  box-shadow: none;
  min-height: 36px;
}

.session-expired-banner .reload-btn,
.session-expired-banner .mod-btn {
  background: var(--s-bg-page);
  color: var(--s-text-primary);
  border: 1px solid var(--s-border);
  padding: 4px 12px;
  border-radius: var(--c-btn-radius, 8px);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: var(--motion-colors);
  min-height: 28px;
}

.session-expired-banner .reload-btn:hover,
.session-expired-banner .mod-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

/* ---- components/_module-components.css ---- */
/* ==========================================================================
   MODULE COMPONENTS — Shared UI library for all Mirai module tabs

   Maps MiraiDB's component patterns to Mirai's design token system.
   All module tab.js files should use these mod-* classes exclusively.
   Module tab.css should only contain module-specific layout overrides.

   Token naming:
     --s-*      semantic (bg, text, border, status, accent)
     --sp-*     spacing scale (4px base)
     --t-*      typography (font-size, weight, line-height)
     --radius-* border-radius scale
     --p-*      primitives (raw colors — avoid in components)
   ========================================================================== */

/* ---------- TOOLBAR / HEADER BAR ---------- */
.mod-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}
.mod-toolbar-spacer { flex: 1; min-width: 0; }

.mod-title {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-heading-color);
  margin: 0;
}
.mod-subtitle {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-tertiary);
  margin-top: 2px;
}
.mod-record-count {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  white-space: nowrap;
}

/* ---------- SEARCH BOX ---------- */
.mod-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s-bg-input);
  border: 1px solid var(--s-border);
  border-radius: 8px;
  padding: 0 12px;
  height: 34px;
  box-sizing: border-box;
  flex: 1;
  max-width: 400px;
  transition: border-color 0.2s ease;
}
.mod-search:focus-within {
  border-color: var(--s-border);
}
/* Magnifier is an SVG (.mod-search-icon). A Material ligature named "search"
   paints that word across the field when the icon font misses; clip leftovers. */
.mod-search > .mod-search-icon,
.mod-search > .material-icons:not(.mod-search-clear) {
  color: var(--s-text-tertiary);
  width: 16px;
  height: 16px;
  overflow: hidden;
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-search > .mod-search-icon svg,
.mod-search > .material-icons:not(.mod-search-clear) svg {
  display: block;
  width: 16px;
  height: 16px;
}
.mod-search > .material-icons:not(.mod-search-clear) {
  font-family: 'Material Icons';
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
}
.mod-search input {
  align-self: stretch;
  background: none;
  border: none;
  color: var(--s-text-primary);
  height: auto;
  padding: 0;
  font-size: 13px;
  line-height: 1.2;
  flex: 1;
  outline: none;
  font-family: var(--t-font-family);
  min-width: 0;
  box-shadow: none;
}
.mod-search input::placeholder {
  color: var(--s-text-tertiary);
  opacity: 1;
}
.mod-search .mod-search-clear {
  cursor: pointer;
  font-size: 16px;
  color: var(--s-text-tertiary);
  flex-shrink: 0;
  transition: color 0.15s;
  /* Glyph-sized tap target — pad the 18px glyph out to a 32px box without
     growing the row. Deliberately no `display` here: at this specificity it
     would beat a module's own hiding class (user_admin's
     `.ua-hidden { display: none }`) and strand the clear affordance on an
     empty field. The span is a flex item, so it is blockified regardless and
     min-width/min-height apply; text-align centres the glyph. */
  padding: 7px;
  min-width: 32px;
  min-height: 32px;
  text-align: center;
  border-radius: var(--radius-md);
  margin-right: -4px;
}
.mod-search .mod-search-clear:hover { color: var(--s-text-primary); }
.mod-search .mod-search-clear svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
}

/* ---------- DATA TABLE ---------- */
/* Flat monochrome: transparent wrap + hairline (DESIGN_SPEC) — not a raised card */
.mod-table-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mod-table-wrap::-webkit-scrollbar { height: 6px; }
.mod-table-wrap::-webkit-scrollbar-track { background: transparent; border-radius: 0; }
.mod-table-wrap::-webkit-scrollbar-thumb { background: var(--s-border); border-radius: 3px; }

/* Mobile scroll affordance — right-edge shadow hints at horizontal overflow */
@media (max-width: 767px) {
  .mod-table-wrap {
    box-shadow: none;
  }
}

.mod-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.mod-table th,
.mod-th {
  background: var(--c-table-header-bg);
  padding: 13px 18px;
  text-align: left;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  text-transform: capitalize;
  letter-spacing: 0.03em;
  color: var(--c-table-header-text);
  border-bottom: 1px solid var(--c-table-row-border);
  white-space: nowrap;
  user-select: none;
  position: relative;
  top: auto;
  z-index: auto;
  transition: color 0.15s ease;
}
/* Standalone table header text class — apply to any element */
.mod-th-text {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  text-transform: capitalize;
  letter-spacing: 0.03em;
  color: var(--c-table-header-text);
}

.mod-table th.sortable { cursor: pointer; }
.mod-table th.sortable:hover { color: var(--s-accent); }
.mod-table th .sort-icon {
  font-size: var(--t-font-size-base);
  vertical-align: middle;
  margin-left: 2px;
}

.mod-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--c-table-row-border);
  font-size: var(--t-font-size-base);
  color: var(--s-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod-table tbody tr {
  cursor: pointer;
  transition: background 0.1s ease;
}
.mod-table tbody tr:nth-child(even) {
  background: var(--c-table-row-bg-alt);
}

.mod-table tbody tr:hover {
  background: var(--c-table-row-bg-hover);
}
.mod-table tbody tr:last-child td {
  border-bottom: none;
}
/* Non-clickable row variant */
.mod-table tbody tr.no-click { cursor: default; }

/* Checkbox column */
.mod-table th.col-check,
.mod-table td.col-check {
  width: 32px;
  padding: 4px 8px;
  text-align: center;
}
.mod-table th.col-check input,
.mod-table td.col-check input {
  cursor: pointer;
  accent-color: var(--s-accent);
}

/* Actions column */
.mod-table td.col-actions {
  white-space: nowrap;
  width: 1%;
}
.mod-table td.col-actions .mod-btn { opacity: 0; transition: opacity 0.15s; }
.mod-table tbody tr:hover td.col-actions .mod-btn,
.mod-table tbody tr:focus-within td.col-actions .mod-btn { opacity: 1; }
/* No hover to reveal on touch — mirrors .mod-list-row-actions below. */
@media (hover: none) {
  .mod-table td.col-actions .mod-btn { opacity: 1; }
}

/* ---------- CARDS (flat — threads / dashboard Needs attention language) ---------- */
.mod-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--s-hairline);
  border-radius: 0;
  padding: var(--sp-5) 0;
  margin: 0 0 var(--sp-4);
  box-shadow: none;
  transition: background 0.12s ease;
  overflow: visible;
}
.mod-card:hover {
  border-color: transparent;
  border-bottom-color: var(--s-hairline);
  box-shadow: none;
  background: transparent;
}
.mod-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.mod-card-title {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  text-transform: capitalize;
  letter-spacing: var(--t-tracking-wider);
  color: var(--c-subheading-color);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mod-card-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---------- FORM COMPONENTS ---------- */
.mod-form-group {
  margin-bottom: var(--sp-4);
}
.mod-form-group label {
  display: block;
  font-size: var(--t-font-size-sm);
  color: var(--c-heading-color);
  margin-bottom: 8px;
  font-weight: var(--t-font-weight-medium);
}
.mod-form-group label .req {
  color: var(--s-status-error);
  margin-left: 2px;
}
.mod-form-group-wide { grid-column: 1 / -1; }

/* Standalone form label — use inside .ua-detail-section or similar non-form-group contexts */
.mod-label {
  display: block;
  font-size: var(--t-font-size-sm);
  color: var(--c-heading-color);
  margin-bottom: var(--sp-2);
  font-weight: var(--t-font-weight-medium);
}

.mod-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-6);
}

.mod-input {
  width: 100%;
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  padding: 11px var(--sp-3);
  color: var(--s-text-primary);
  font-size: var(--t-font-size-base);
  font-family: var(--t-font-family);
  transition: border-color 0.2s ease, outline-color 0.2s ease;
}
.mod-input::placeholder {
  color: var(--s-text-tertiary);
  opacity: 1;
}
input.mod-input:focus,
textarea.mod-input:focus,
select.mod-input:focus,
.mod-input:focus,
.mod-input:focus-visible {
  outline: none;
  border-color: var(--c-input-border);
  box-shadow: none;
}
.mod-input:disabled, .mod-input[readonly] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--s-bg-surface);
}
textarea.mod-input {
  min-height: 80px;
  resize: vertical;
}
select.mod-input {
  appearance: auto;
  cursor: pointer;
  padding-right: 28px;
  min-height: 42px;
}

/* Custom dropdown — replaces native <select> for brand-consistent hover */
.mod-dropdown {
  position: relative;
  display: inline-block;
}
.mod-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  padding: 11px var(--sp-3);
  padding-right: 28px;
  color: var(--s-text-primary);
  font-size: var(--t-font-size-base);
  font-family: var(--t-font-family);
  cursor: pointer;
  min-width: 100px;
  white-space: nowrap;
  position: relative;
}
.mod-dropdown-trigger::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--s-text-secondary);
}
.mod-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-width: min(300px, calc(100vw - 32px));
  background: var(--c-card-bg);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  z-index: 200;
  overflow: hidden;
  overflow-y: auto;
  max-height: 60vh;
  animation: mod-fade-in 0.1s ease;
}
.mod-dropdown.open .mod-dropdown-menu { display: block; }
.mod-dropdown-item {
  padding: 10px 14px;
  font-size: var(--t-font-size-base);
  color: var(--s-text-primary);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.mod-dropdown-item:hover {
  background: color-mix(in srgb, var(--c-btn-primary-bg) 15%, var(--c-card-bg));
  color: var(--c-btn-primary-bg);
}
.mod-dropdown-item.selected {
  background: color-mix(in srgb, var(--c-btn-primary-bg) 12%, var(--c-card-bg));
  color: var(--c-btn-primary-bg);
  font-weight: var(--t-font-weight-medium);
}

/* ---------- BUTTONS ---------- */
.mod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--radius-lg);
  border: none;
  background: transparent;
  color: var(--s-text-primary);
  cursor: pointer;
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-medium);
  font-family: var(--t-font-family);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.mod-btn:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}
.mod-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.mod-btn .material-icons { font-size: var(--t-font-size-lg); }

.mod-btn-primary {
  background: var(--c-btn-primary-bg);
  color: var(--c-btn-primary-text);
}
.mod-btn-primary:hover:not(:disabled) { background: var(--c-btn-primary-bg-hover); }
.mod-btn-primary:active:not(:disabled) { transform: scale(0.97); }

.mod-btn-secondary {
  background: var(--c-btn-secondary-bg);
  color: var(--c-btn-secondary-text);
  border: 1px solid var(--c-btn-secondary-border);
}
.mod-btn-secondary:hover:not(:disabled) { background: var(--c-btn-secondary-bg-hover); }
.mod-btn-secondary:active:not(:disabled) { transform: scale(0.97); }

.mod-btn-outline {
  background: transparent;
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
}
.mod-btn-outline:hover:not(:disabled) { border-color: var(--c-btn-primary-bg); color: var(--c-btn-primary-bg); }
.mod-btn-outline:active:not(:disabled) { background: var(--s-accent-subtle); transform: scale(0.97); }

.mod-btn-danger {
  background: var(--c-btn-danger-bg);
  color: var(--c-btn-danger-text);
}
.mod-btn-danger:hover:not(:disabled) { background: var(--c-btn-danger-bg-hover); color: var(--c-btn-danger-text); }
.mod-btn-danger:active:not(:disabled) { transform: scale(0.97); }

.mod-btn-ghost {
  background: transparent;
  color: var(--s-text-secondary);
  padding: var(--sp-1-5) var(--sp-2);
}
.mod-btn-ghost:hover:not(:disabled) { background: var(--s-bg-hover); color: var(--s-text-primary); }

.mod-btn-sm {
  padding: 8px 16px;
  font-size: var(--t-font-size-sm);
}
.mod-btn-icon {
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
}

/* ---------- BADGES ---------- */
.mod-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  white-space: nowrap;
}
.mod-badge-success { background: var(--s-status-success-bg); color: var(--s-status-success); }
.mod-badge-warning { background: var(--s-status-warning-bg); color: var(--s-status-warning); }
.mod-badge-danger  { background: var(--s-status-error-bg); color: var(--s-status-error); }
.mod-badge-info    { background: var(--s-status-info-bg); color: var(--s-status-info); }
.mod-badge-neutral { background: color-mix(in srgb, var(--s-text-secondary) 15%, var(--c-card-bg)); color: var(--s-text-primary); }
.mod-badge-accent  { background: var(--s-accent-subtle); color: var(--s-accent); }

/* ---------- MODAL ---------- */
.mod-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: mod-fade-in 0.15s ease;
}
@keyframes mod-fade-in { from { opacity: 0; } to { opacity: 1; } }

.mod-modal {
  background: var(--c-card-bg);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  animation: mod-scale-in 0.15s ease;
}
@keyframes mod-scale-in {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mod-modal-lg { max-width: 780px; }

.mod-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-page);
  border-bottom: 1px solid var(--s-border);
  flex-shrink: 0;
}
.mod-modal-header h3 {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-heading-color);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod-modal-close {
  background: none;
  border: none;
  color: var(--s-text-tertiary);
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}
.mod-modal-close:hover { color: var(--s-text-primary); background: var(--s-bg-hover); }
.mod-modal-close:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }

.mod-modal-body {
  padding: var(--sp-8);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.mod-modal-body::-webkit-scrollbar { width: 6px; }
.mod-modal-body::-webkit-scrollbar-track { background: var(--s-bg-surface); }
.mod-modal-body::-webkit-scrollbar-thumb { background: var(--s-border); border-radius: 3px; }

.mod-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-page);
  border-top: 1px solid var(--s-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ---------- TABS / PILL BAR ---------- */
.mod-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--s-border);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mod-tabs::-webkit-scrollbar { display: none; }
.mod-tab {
  padding: 12px var(--sp-5);
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-medium);
  color: var(--s-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
}
.mod-tab:hover { color: var(--s-text-primary); }
.mod-tab.active {
  color: var(--s-accent);
  border-bottom-color: var(--s-accent);
}

/* ---------- TOGGLE SWITCH ---------- */
/* Geometry derives from the design-system toggle tokens (--c-toggle-*) so
   size overrides only need to redeclare the two custom properties. */
.mod-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
}
/* Context-proof: .mod-form-group label { display: block; margin-bottom } used
   to flatten nested toggles — the slider span fell back to display:inline and
   the track collapsed (settings-modal "sliders don't render" bug). */
.mod-form-group label.mod-toggle,
label.mod-toggle {
  display: inline-flex;
  margin-bottom: 0;
  font-weight: var(--t-font-weight-normal);
  color: var(--s-text-secondary);
}
.mod-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.mod-toggle-slider {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--c-toggle-width, 40px);
  height: var(--c-toggle-height, 22px);
  background: var(--c-toggle-bg-off, var(--s-border));
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--motion-duration-normal, 0.2s) var(--motion-ease-default, ease);
}
.mod-toggle-slider::before {
  content: '';
  position: absolute;
  width: calc(var(--c-toggle-height, 22px) - 4px);
  height: calc(var(--c-toggle-height, 22px) - 4px);
  left: 2px;
  top: 2px;
  background: var(--c-toggle-knob, var(--p-white, #fff));
  border-radius: var(--radius-full);
  transition: transform var(--motion-duration-normal, 0.2s) var(--motion-ease-default, ease);
}
.mod-toggle input:checked + .mod-toggle-slider { background: var(--c-toggle-bg-on, var(--s-accent)); }
.mod-toggle input:checked + .mod-toggle-slider::before {
  transform: translateX(calc(var(--c-toggle-width, 40px) - var(--c-toggle-height, 22px)));
}
.mod-toggle input:focus-visible + .mod-toggle-slider { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.mod-toggle input:disabled + .mod-toggle-slider { opacity: 0.5; cursor: not-allowed; }

/* ---------- STAT STRIP (flat — no nested boxes) ---------- */
.mod-stats {
  display: flex;
  gap: 0;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--s-hairline);
  padding-bottom: var(--sp-3);
}
.mod-stat {
  flex: 1;
  min-width: 100px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--s-hairline);
  border-radius: 0;
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  transition: none;
}
.mod-stat:last-child { border-right: none; }
.mod-stat:hover { border-color: transparent; border-right-color: var(--s-hairline); }
.mod-stat-value {
  font-size: var(--t-font-size-3xl);
  font-weight: var(--t-font-weight-bold);
  color: var(--c-heading-color);
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-stat-label {
  font-size: var(--t-font-size-xs);
  color: var(--c-subheading-color);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- FLAT LIST (threads / dashboard / organiser pattern) ---------- */
.mod-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-list-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--s-hairline);
  border-left: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mod-list-row:last-child { border-bottom: none; }
.mod-list-row:hover {
  background: var(--s-hover-wash);
  border-left-color: var(--s-accent);
}
/* Non-clickable row variant — mirrors `.mod-table tbody tr.no-click` above, so
   static lists can drop the pointer affordance without each module writing its
   own undo rule (brand/tab.css and reporting/tab.css each did). */
.mod-list-row.no-click { cursor: default; }
.mod-list-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}
.mod-list-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mod-list-row-title {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--c-heading-color);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-list-row-meta {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-secondary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-list-row-aside {
  flex-shrink: 0;
  font-size: var(--t-font-size-xs);
  color: var(--s-text-tertiary);
  padding: var(--sp-3) var(--sp-2);
  align-self: center;
  font-variant-numeric: tabular-nums;
}
.mod-list-row-actions {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  padding-right: var(--sp-1);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.mod-list-row:hover .mod-list-row-actions,
.mod-list-row:focus-within .mod-list-row-actions {
  opacity: 1;
}
@media (hover: none) {
  .mod-list-row-actions { opacity: 0.55; }
}
.mod-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-2);
  padding: 0;
}
.mod-section-title {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-heading-color);
  margin: 0;
}
.mod-section-count {
  margin-left: auto;
  font-size: var(--t-font-size-xs);
  color: var(--s-text-tertiary);
}

/* ---------- EMPTY STATE ---------- */
.mod-empty {
  text-align: center;
  padding: var(--sp-8, 48px) var(--sp-5);
  color: var(--s-text-tertiary);
}
.mod-empty .material-icons {
  font-size: 32px; /* DESIGN_SPEC: quiet empty icons, not 64px decoration */
  color: var(--s-text-disabled);
  margin-bottom: var(--sp-3);
  display: block;
}
.mod-empty h3 {
  font-size: var(--t-font-size-xl);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-secondary);
  margin-bottom: var(--sp-2);
}
.mod-empty p {
  font-size: var(--t-font-size-base);
  margin-bottom: var(--sp-5);
  line-height: var(--t-line-height-relaxed);
}
.mod-empty .mod-btn { margin-top: 4px; }

/* ---------- TAG / CHIP ---------- */
.mod-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--s-accent-subtle);
  color: var(--s-accent);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--t-font-size-2xs);
  max-width: 100%;
}
.mod-tag .remove {
  cursor: pointer;
  font-size: var(--t-font-size-base);
  opacity: 0.7;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.mod-tag .remove:hover { opacity: 1; }

/* ---------- PAGINATION ---------- */
.mod-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: var(--t-font-size-sm);
  color: var(--s-text-tertiary);
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.mod-pagination-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mod-pagination-btns button {
  background: var(--s-bg-input);
  border: 1px solid var(--s-border);
  color: var(--s-text-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  font-size: var(--t-font-size-sm);
  font-family: var(--t-font-family);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mod-pagination-btns button:not(:disabled):hover {
  border-color: var(--s-accent);
  color: var(--s-accent);
}
.mod-pagination-btns button:not(:disabled):active {
  background: var(--s-accent-subtle);
}
.mod-pagination-btns button.active {
  background: var(--s-accent-subtle);
  border-color: var(--s-accent);
  color: var(--s-accent);
}
.mod-pagination-btns button:disabled { opacity: 0.3; cursor: default; }
.mod-pagination-btns button:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 1px; }

/* ---------- DETAIL PANEL ---------- */
.mod-detail {
  background: var(--c-card-bg);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}
.mod-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--s-border);
}
.mod-detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.mod-detail-label {
  font-size: var(--t-font-size-sm);
  color: var(--c-subheading-color);
  min-width: 120px;
  flex-shrink: 0;
}
.mod-detail-value {
  font-size: var(--t-font-size-base);
  color: var(--s-text-primary);
}

/* ---------- FORM ROW (inline fields) ---------- */
.mod-form-row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-5);
}
.mod-form-row .mod-form-group { flex: 1; margin-bottom: 0; }

/* ---------- LOADING SKELETON ---------- */
/* The shimmer stays INVISIBLE for the first 200ms (mod-skeleton-reveal) so
   fast loads never flash a loading state — a skeleton that blinks in and out
   on a 50ms fetch makes the UI feel slower than it is. Anything genuinely
   slow (>200ms) fades the shimmer in as before. */
.mod-skeleton {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-btn-primary-bg) 15%, var(--c-card-bg)) 25%, color-mix(in srgb, var(--c-btn-primary-bg) 30%, var(--c-card-bg)) 50%, color-mix(in srgb, var(--c-btn-primary-bg) 15%, var(--c-card-bg)) 75%);
  background-size: 200% 100%;
  animation: mod-skeleton-reveal 0.25s ease 0.2s both, mod-shimmer 1.5s infinite 0.2s;
  border-radius: var(--radius-sm);
  opacity: 0;
}
@keyframes mod-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes mod-skeleton-reveal { from { opacity: 0; } to { opacity: 1; } }

/* ---------- CONFIRM DIALOG ---------- */
.mod-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  animation: mod-fade-in 0.15s ease;
}
.mod-confirm {
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  box-shadow: none;
  animation: mod-scale-in 0.15s ease;
}
.mod-confirm-icon {
  text-align: center;
  padding: var(--sp-6) var(--sp-6) 0;
}
.mod-confirm-icon .material-icons { font-size: 48px; color: var(--s-accent); }
.mod-confirm.danger .mod-confirm-icon .material-icons { color: var(--s-status-error); }
.mod-confirm-body {
  padding: var(--sp-4) var(--sp-6) var(--sp-2);
  text-align: center;
}
.mod-confirm-body h3 {
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-heading-color);
  margin-bottom: var(--sp-2);
}
.mod-confirm-body p {
  font-size: var(--t-font-size-sm);
  color: var(--s-text-secondary);
  line-height: var(--t-line-height-normal);
}
.mod-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.mod-confirm-actions .mod-btn { min-width: 100px; justify-content: center; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .mod-toolbar { gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
  .mod-nav-with-title {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .mod-nav-tabs {
    margin-left: 0;
    flex: 1 1 auto;
    width: auto;
  }
  .mod-nav-title {
    padding-left: 0;
  }

  .mod-toolbar-spacer { flex: 1 1 auto; min-width: 4px; }
  .mod-search { max-width: none; min-height: 40px; height: auto; flex: 1 1 0; min-width: 120px; }
  .mod-search input { padding: 8px var(--sp-2); }
  .mod-form-row { flex-direction: column; }
  .mod-form-grid { grid-template-columns: 1fr; }
  .mod-stats { gap: var(--sp-4); margin-bottom: var(--sp-3); }
  .mod-stat { min-width: 0; flex: 1; padding: var(--sp-2) var(--sp-3); }
  .mod-stat-value { font-size: var(--t-font-size-xl); }
  .mod-stat-label { font-size: var(--t-font-size-2xs); margin-top: 2px; }
  .mod-card-grid { grid-template-columns: 1fr; }
  .mod-table td { font-size: var(--t-font-size-xs); padding: 8px 10px; }
  /* Table header: 12px minimum to remain legible on mobile */
  .mod-table th { font-size: var(--t-font-size-xs); padding: 8px 10px; }
  .mod-modal-overlay { padding: var(--sp-2); align-items: flex-start; padding-top: var(--sp-4); }
  .mod-modal { max-height: calc(100dvh - 32px); max-width: 100%; border-radius: var(--radius-lg); }
  .mod-modal-lg { max-width: 100%; }
  .mod-modal-header { padding: 14px var(--sp-4); }
  .mod-modal-body { padding: var(--sp-4); }
  .mod-modal-footer { padding: 14px var(--sp-4); }
  .mod-pagination { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .mod-pagination-btns { flex-wrap: wrap; }
  /* Pagination buttons: 44px touch target on mobile */
  .mod-pagination-btns button { min-height: 44px; min-width: 44px; }
  .mod-empty { padding: 48px var(--sp-4); }
  .mod-empty .material-icons { font-size: 32px; }
  .mod-table td.col-actions .mod-btn { opacity: 1; }
  /* Icon buttons: 44px touch target on mobile */
  .mod-btn-icon { min-width: 44px; min-height: 44px; }
  /* Text buttons incl. mod-btn-sm: 44px touch target floor on mobile */
  .mod-btn { min-height: 44px; }
  /* Detail label: stack vertically instead of fixed-width side-by-side */
  .mod-detail-row { flex-direction: column; gap: var(--sp-1); }
  .mod-detail-label { min-width: 0; }
  /* Confirm dialog: tighter padding on mobile */
  .mod-confirm-overlay { padding: var(--sp-3); }
  .mod-confirm-icon { padding: var(--sp-4) var(--sp-4) 0; }
  .mod-confirm-body { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
  .mod-confirm-actions { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  /* Dropdown items: 44px touch target */
  .mod-dropdown-item { min-height: 44px; display: flex; align-items: center; }
  /* Search clear: touch floor */
  .mod-search .mod-search-clear { min-width: 44px; min-height: 40px; padding: 11px 13px; margin-right: -8px; }
  /* Tabs: compact padding on mobile */
  .mod-tab { padding: 10px var(--sp-3); }
  /* Compact toolbar: hide record count to fit one line */
  .mod-record-count { display: none; }
}

/* ---------- 360px — ULTRA NARROW ---------- */
@media (max-width: 360px) {
  .mod-modal-overlay { padding: var(--sp-1); padding-top: var(--sp-2); }
  .mod-modal { border-radius: var(--radius-md); }
  .mod-modal-header { padding: 12px var(--sp-3); }
  .mod-modal-body { padding: var(--sp-3); }
  .mod-modal-footer { padding: 12px var(--sp-3); }
  .mod-confirm-overlay { padding: var(--sp-2); }
  .mod-confirm-actions { flex-direction: column; gap: var(--sp-2); }
  .mod-confirm-actions .mod-btn { min-width: 0; width: 100%; }
  .mod-toolbar { gap: var(--sp-1); }
  .mod-search input { padding: 8px var(--sp-1); }
  .mod-stat { padding: var(--sp-1-5) var(--sp-2); }
  .mod-stat-value { font-size: var(--t-font-size-lg); }
  .mod-table td { font-size: var(--t-font-size-2xs); padding: 6px 8px; }
  .mod-table th { font-size: var(--t-font-size-2xs); padding: 6px 8px; }
  .mod-empty { padding: 32px var(--sp-3); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ========================================================================
   MOD-NAV — Unified module header chrome
   Layout:
     <div class="mod-page">
       <div class="mod-nav mod-nav-with-title">
         <span class="mod-nav-title">Module</span>
         <div class="mod-nav-tabs">…optional section tabs…</div>
         <div class="mod-toolbar-spacer"></div>
         …action buttons…
       </div>
       <div class="mod-page-body">…</div>
     </div>
   ======================================================================== */
.mod-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid var(--s-border);
  background: var(--c-header-bg, var(--s-bg-surface));
  flex-shrink: 0;
  flex-wrap: wrap;
  margin: 0;
  box-sizing: border-box;
}

.mod-nav-with-title {
  align-items: center;
  gap: 12px;
}

.mod-nav-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-heading-color, var(--s-text-primary));
  white-space: nowrap;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.mod-nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
  /* grow so spacer/actions still pin right when no spacer present */
  flex: 1 1 auto;
}

.mod-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--s-text-secondary);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.mod-nav-btn:hover {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}

.mod-nav-btn.active {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
  font-weight: 600;
}

.mod-nav-btn .material-icons {
  font-size: 16px;
  opacity: 0.85;
}

.mod-nav > .mod-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* Action cluster on the right of the header */
.mod-nav > .mod-btn,
.mod-nav > .mod-search,
.mod-nav > .mod-dropdown,
.mod-nav > label {
  flex-shrink: 0;
}

.mod-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mod-nav-btn { transition: none; }
}


/* ========================================================================
   MOD-PAGE-TITLE — legacy full-width title (prefer .mod-nav-title)
   ======================================================================== */
#activeTabTitle.mod-page-title {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.mod-page-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-heading-color, var(--s-text-primary));
  line-height: 1.25;
  flex-shrink: 0;
  border-bottom: 1px solid var(--s-border);
  background: var(--c-header-bg, var(--s-bg-surface));
  box-sizing: border-box;
}

.mod-page-title-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-text-tertiary);
  margin-top: 0;
}

/* ========================================================================
   MOD-PAGE — Standard module page layout
   Scroll lives on the parent .tab-panel (full content-column edge), NOT on
   .mod-page-body (which is max-width centered and would inset the scrollbar).
   ======================================================================== */
.mod-page {
  display: flex;
  flex-direction: column;
  /* grow with content; parent tab-panel scrolls */
  min-height: 100%;
  height: auto;
  overflow: visible;
}

.mod-page-body {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding: 20px;
  box-sizing: border-box;
}

/* Module chrome stays in normal document flow. */
.mod-nav,
.mod-nav.mod-nav-with-title,
.mod-page-title {
  position: relative;
  top: auto;
  z-index: auto;
}

@media (max-width: 768px) {
  .mod-nav {
    min-height: 48px;
    padding: 8px 12px;
    gap: 6px;
  }
  .mod-page-body {
    padding: 16px 12px;
  }
  .mod-nav-title,
  .mod-page-title {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .mod-page-body {
    padding: 12px 10px;
  }
}

/* ---- components/_animations.css ---- */
/* ==========================================================================
   ANIMATIONS — Keyframes, Transitions & Motion Utilities
   Centralized animation definitions using design-system tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES — Generic Entrances
   -------------------------------------------------------------------------- */

/* fadeUp — generic element entrance */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fadeUpUser — user message entrance (slightly faster, from right-aligned) */
@keyframes fadeUpUser {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fadeUpMira — assistant message entrance with subtle accent glow */
@keyframes fadeUpMira {
  from {
    opacity: 0;
    transform: translateY(8px);
    box-shadow: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   2. KEYFRAMES — Chat & Message
   -------------------------------------------------------------------------- */

/* miraGlow — left-border glow on new assistant messages */
@keyframes miraGlow {
  0% {
    border-left-color: var(--s-accent);
    box-shadow: none;
  }
  100% {
    border-left-color: transparent;
    box-shadow: none;
  }
}

/* typing-bounce — typing indicator dot bounce */
@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

/* --------------------------------------------------------------------------
   3. KEYFRAMES — Microphone / Voice
   -------------------------------------------------------------------------- */

/* ringIdle — mic ring idle/listening state pulse */
@keyframes ringIdle {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: none;
  }
}

/* ringActive — mic ring speech detection pulse */
@keyframes ringActive {
  0%, 100% {
    box-shadow: none;
    transform: scale(1);
  }
  50% {
    box-shadow: none;
    transform: scale(1.04);
  }
}

/* micGlowSpin — conic gradient rotation for mic processing states */
@keyframes micGlowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   4. KEYFRAMES — Controls & Buttons
   -------------------------------------------------------------------------- */

/* pulse-stop — interrupt button pulse */
@keyframes pulse-stop {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: none;
  }
}

/* spin — generic spinner rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   5. KEYFRAMES — Loading & Skeleton
   -------------------------------------------------------------------------- */

/* shimmer — skeleton loading shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* --------------------------------------------------------------------------
   6. KEYFRAMES — Notifications & Feedback
   -------------------------------------------------------------------------- */

/* badgePop — badge pop-in animation */
@keyframes badgePop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   7. KEYFRAMES — Lists & Items
   -------------------------------------------------------------------------- */

/* itemSlideIn — list item slide-in */
@keyframes itemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* taskComplete — task completion fade-out */
@keyframes taskComplete {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* pillDismiss — file pill dismiss */
@keyframes pillDismiss {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* --------------------------------------------------------------------------
   8. KEYFRAMES — Status
   -------------------------------------------------------------------------- */

/* connPulse — connection dot pulse */
@keyframes connPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* --------------------------------------------------------------------------
   9. TRANSITION UTILITIES
   -------------------------------------------------------------------------- */

/* Theme switch — smooth transitions on color-related properties */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color var(--motion-duration-slow) var(--motion-ease-default),
              color var(--motion-duration-slow) var(--motion-ease-default),
              border-color var(--motion-duration-slow) var(--motion-ease-default),
              box-shadow var(--motion-duration-slow) var(--motion-ease-default),
              fill var(--motion-duration-slow) var(--motion-ease-default),
              stroke var(--motion-duration-slow) var(--motion-ease-default) !important;
}

/* --------------------------------------------------------------------------
   10. FOCUS RING STYLES
   -------------------------------------------------------------------------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--s-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   11. TOUCH & INTERACTION FIXES
   -------------------------------------------------------------------------- */

/* SVG pointer-events fix for buttons (touch targets) */
button svg,
a svg,
[role="button"] svg {
  pointer-events: none;
}

/* Prevent double-tap zoom on interactive elements */
button,
a,
input,
select,
textarea,
[role="button"],
[tabindex] {
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* de-claude animations — no glow entrances */
.msg { animation: none !important; }
.msg.user { animation: none !important; }
.msg.mira { animation: none !important; }
.msg.mira .msg-content { animation: none !important; box-shadow: none !important; }

/* ---- components/_utilities.css ---- */
/* ==========================================================================
   UTILITIES, STATE CLASSES & MISCELLANEOUS ELEMENTS
   ========================================================================== */


/* ==========================================================================
   1. Display Utilities
   ========================================================================== */

.u-hidden         { display: none !important; }
.hidden           { display: none !important; }
.u-block          { display: block !important; }
.u-flex           { display: flex !important; }
.u-inline-block   { display: inline-block !important; }


/* ==========================================================================
   2. Opacity Utilities
   ========================================================================== */

.u-opacity-0      { opacity: 0 !important; }
.u-opacity-1      { opacity: 1 !important; }
.u-drag-active    { opacity: 0.4 !important; }


/* ==========================================================================
   3. Accessibility
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   4. Typography Utilities
   ========================================================================== */

.mono {
  font-family: var(--t-font-family-mono);
  font-size: var(--t-font-size-xs);
}

.u-nowrap {
  white-space: nowrap;
}

.text-dim-sm {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-tertiary);
}


/* ==========================================================================
   5. Spacing Utilities
   ========================================================================== */

.ml-auto {
  margin-left: auto;
}


/* ==========================================================================
   6. File Input Utility
   ========================================================================== */

.u-file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}


/* ==========================================================================
   7. State Visibility Classes — JS Toggle Pairs
   ========================================================================== */

/* Widget */
.widget-hidden        { display: none !important; }
.widget-visible       { display: block !important; }

/* Email stats */
.email-stats-hidden   { display: none !important; }
.email-stats-visible  { display: flex !important; }

/* Reply area */
.reply-area-hidden    { display: none !important; }
.reply-area-visible   { display: block !important; }

/* Forward field */
.fwd-field-hidden     { display: none !important; }
.fwd-field-visible    { display: block !important; }

/* Validation */
.validation-hidden    { display: none !important; }
.validation-visible   { display: block !important; }

/* TTS field */
.tts-field-hidden     { display: none !important; }
.tts-field-visible    { display: flex !important; }

/* Clone actions */
.clone-actions-hidden { display: none !important; }

/* Clone progress */
.clone-progress-active { display: block !important; }

/* Feedback */
.feedback-hidden      { display: none !important; }
.feedback-visible     { display: block !important; }

/* Soul content */
.soul-content-hidden  { display: none !important; }
.soul-content-visible { display: block !important; }

/* Widget info extra */
.wi-extra-hidden      { display: none !important; }

/* Reject form */
.reject-form-hidden   { display: none !important; }


/* ==========================================================================
   8. Connection Status Dot
   ========================================================================== */

.conn-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-default);
}

/* Connected / Streaming — green */
.conn-dot-connected,
.conn-dot-streaming {
  background-color: var(--s-status-success);
}

/* Connecting / Reconnecting — amber */
.conn-dot-connecting,
.conn-dot-reconnecting {
  background-color: var(--s-status-warning);
}

/* Error / Gave up — red */
.conn-dot-error,
.conn-dot-gave_up {
  background-color: var(--s-status-error);
}

/* Offline — grey */
.conn-dot-offline {
  background-color: var(--s-text-disabled);
}

/* ---- Connection label text colours ---- */
.conn-label-connected,
.conn-label-streaming {
  color: var(--s-status-success-text);
}

.conn-label-connecting,
.conn-label-reconnecting {
  color: var(--s-status-warning-text);
}

.conn-label-error,
.conn-label-gave_up {
  color: var(--s-status-error-text);
}

.conn-label-offline {
  color: var(--s-text-disabled);
}


/* ==========================================================================
   9. Keyboard Shortcut (kbd)
   ========================================================================== */

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: var(--sp-0-5) var(--sp-1-5);
  font-family: var(--t-font-family-mono);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1;
  color: var(--s-text-secondary);
  background: var(--s-bg-surface-sunken);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}


/* ==========================================================================
   10. Section Label (divider heading)
   ========================================================================== */

.section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  color: var(--c-subheading-color);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wider);
  padding: var(--sp-2) 0;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--s-border-subtle);
}


/* ==========================================================================
   11. Filter Bar & Buttons
   ========================================================================== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--c-btn-height-sm);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--s-text-secondary);
  background: transparent;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--motion-colors);
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover);
  border-color: var(--s-border-strong);
}

.filter-btn.active {
  color: var(--s-accent);
  background: var(--s-accent-subtle);
  border-color: var(--s-accent);
}


/* ==========================================================================
   12. Stats Row & Stat Cards
   ========================================================================== */

.stats-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 140px;
  padding: var(--sp-4);
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border-subtle);
  border-radius: var(--radius-card);
}

.stat-card-label {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--c-label-color);
  margin-bottom: var(--sp-1);
}

.stat-card-value {
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-text-primary);
  line-height: var(--t-line-height-tight);
}

.stat-card-value.good { color: var(--s-status-success-text); }
.stat-card-value.warn { color: var(--s-status-warning-text); }
.stat-card-value.bad  { color: var(--s-status-error-text); }


/* ==========================================================================
   13. Tab Page Generic Elements
   ========================================================================== */

.tab-page-count {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-tertiary);
  font-weight: var(--t-font-weight-medium);
}

.tab-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--c-btn-height-sm);
  height: var(--c-btn-height-sm);
  background: transparent;
  border: 1px solid var(--s-border);
  border-radius: var(--radius-sm);
  color: var(--s-text-secondary);
  cursor: pointer;
  transition: var(--motion-colors);
}

.tab-refresh-btn:hover {
  color: var(--s-text-primary);
  background: var(--s-bg-hover);
  border-color: var(--s-border-strong);
}

.tab-page-body {
  padding: var(--sp-4) 0;
}

.tab-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--s-text-tertiary);
  font-size: var(--t-font-size-sm);
}

.tab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--s-text-tertiary);
  font-size: var(--t-font-size-sm);
}


/* ==========================================================================
   14. PPF Page (Generic Tab Page Container)
   ========================================================================== */

.ppf-page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ppf-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ppf-search-icon {
  position: absolute;
  left: var(--sp-3);
  color: var(--s-text-tertiary);
  pointer-events: none;
  font-size: var(--t-font-size-sm);
}

.ppf-search-input {
  width: 100%;
  height: var(--c-input-height);
  padding: 0 var(--c-input-padding-x) 0 calc(var(--sp-3) + 1em + var(--sp-2));
  font-family: inherit;
  font-size: var(--c-input-font-size);
  color: var(--c-input-text);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  outline: none;
  transition: var(--motion-colors);
}

.ppf-search-input::placeholder {
  color: var(--c-input-text-placeholder);
}

.ppf-search-input:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}


/* ==========================================================================
   15. Edit Forms (inline editing)
   ========================================================================== */

.edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.edit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.edit-input,
.edit-textarea,
.edit-select {
  width: 100%;
  height: var(--c-input-height);
  padding: 0 var(--c-input-padding-x);
  font-family: inherit;
  font-size: var(--c-input-font-size);
  color: var(--c-input-text);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--c-input-radius);
  outline: none;
  transition: var(--motion-colors);
}

.edit-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--sp-2) var(--c-input-padding-x);
  resize: vertical;
  line-height: var(--t-line-height-normal);
}

.edit-input:focus,
.edit-textarea:focus,
.edit-select:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
}

.edit-input::placeholder,
.edit-textarea::placeholder {
  color: var(--c-input-text-placeholder);
}

.edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

.edit-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: var(--c-btn-height-sm);
  padding: var(--sp-1) var(--sp-3);
  font-family: inherit;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--c-btn-primary-text);
  background: var(--c-btn-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--c-btn-radius);
  cursor: pointer;
  transition: var(--motion-colors);
}

.edit-save-btn:hover {
  background: var(--c-btn-primary-bg-hover);
}

.edit-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: var(--c-btn-height-sm);
  padding: var(--sp-1) var(--sp-3);
  font-family: inherit;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--c-btn-secondary-text);
  background: var(--c-btn-secondary-bg);
  border: 1px solid var(--c-btn-secondary-border);
  border-radius: var(--c-btn-radius);
  cursor: pointer;
  transition: var(--motion-colors);
}

.edit-cancel-btn:hover {
  background: var(--c-btn-secondary-bg-hover);
}


/* ==========================================================================
   16. Audio Visualiser Bars
   ========================================================================== */

.vis-bar {
  width: 3px;
  height: var(--bar-h, 4px);
  border-radius: var(--radius-full);
  transition: height var(--motion-duration-fast) var(--motion-ease-out),
              background-color var(--motion-duration-fast) var(--motion-ease-default);
}

.vis-bar-idle {
  background-color: var(--s-text-disabled);
}

.vis-bar-low {
  background-color: var(--s-status-success);
}

.vis-bar-mid {
  background-color: var(--s-status-warning);
}

.vis-bar-high {
  background-color: var(--s-status-error);
}


/* ==========================================================================
   17. Mode Indicator
   ========================================================================== */

.mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0-5) var(--sp-2);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  color: var(--s-accent);
  background: var(--s-accent-subtle);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
}


/* ==========================================================================
   18. Boss Mode Accent
   ========================================================================== */

.app.mode-boss {
  border-top: 2px solid var(--s-accent);
}

/* Skip to content (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-max);
}
.skip-link:focus {
  position: fixed;
  left: var(--sp-4);
  top: var(--sp-4);
  width: auto;
  height: auto;
  padding: var(--sp-2) var(--sp-4);
  background: var(--s-bg-surface);
  color: var(--s-accent);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  text-decoration: none;
  outline: none;
}

/* ==========================================================================
   HEADING CLASSES — Reusable across all pages and modules
   ========================================================================== */

/* Page/section heading — accent colour, larger */
.heading {
  font-size: var(--c-heading-size);
  font-weight: var(--c-heading-weight);
  color: var(--c-heading-color);
  line-height: 1.3;
  margin: 0;
}

/* Sub-heading — secondary colour, medium */
.subheading {
  font-size: var(--c-subheading-size);
  font-weight: var(--c-subheading-weight);
  color: var(--c-subheading-color);
  line-height: 1.4;
  margin: 0;
}

/* Label text — form labels, captions */
.label {
  font-size: var(--c-label-size);
  font-weight: var(--c-label-weight);
  color: var(--c-label-color);
}

/* Hint/help text */
.hint {
  font-size: var(--c-hint-size);
  color: var(--c-hint-color);
}


/* ==========================================================================
   14. Error / Status Text Utilities
   ========================================================================== */

.text-error {
  color: var(--s-status-error) !important;
}

.text-success {
  color: var(--s-status-success) !important;
}


/* ==========================================================================
   15. Compact Input Variant
   ========================================================================== */

.settings-input-sm {
  font-size: var(--t-font-size-xs);
  padding: var(--sp-1) var(--sp-2);
}


/* ==========================================================================
   16. System Prompt Textarea (monospace code editor style)
   ========================================================================== */

.settings-textarea-mono {
  width: 100%;
  resize: vertical;
  font-family: var(--t-font-family-mono);
  font-size: var(--t-font-size-sm);
  line-height: 1.5;
  padding: 0.6rem;
  background: var(--s-bg-input);
  color: var(--s-text-primary);
  border: 1px solid var(--s-border);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.settings-textarea-mono:focus {
  border-color: var(--c-input-border-focus);
  box-shadow: none;
  outline: none;
}


/* ==========================================================================
   17. Model Chip — inline tag for loaded model names
   ========================================================================== */

.model-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  margin: 0.1rem;
  border-radius: var(--radius-sm);
  background: var(--s-bg-surface-sunken);
  font-size: var(--c-hint-size);
  color: var(--s-text-secondary);
}


/* ==========================================================================
   18. Module Info (description & meta under module name)
   ========================================================================== */

.module-desc {
  font-size: var(--t-font-size-xs);
  color: var(--s-text-tertiary);
  line-height: 1.3;
}

.module-meta {
  font-size: var(--t-font-size-2xs);
  color: var(--s-text-tertiary);
  margin-top: 0.2rem;
}


/* ==========================================================================
   19. Module Manager — card list, detail panel, badges
   ========================================================================== */

/* Restart banner */
.mod-restart-banner {
  background: var(--s-accent-subtle, rgba(0,111,255,0.12));
  border: 1px solid var(--s-accent, #FFFFFF);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  font-size: var(--t-font-size-sm, 13px);
  color: var(--s-text-primary);
}

/* Summary badge in section title */
.mod-summary-badge {
  font-size: var(--t-font-size-xs, 12px);
  color: var(--s-text-tertiary);
  font-weight: 400;
}

/* Module card list */
.mod-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}


/* ---- components/_responsive.css ---- */
/* ==========================================================================
   RESPONSIVE — Consolidated Breakpoint Overrides
   All responsive/mobile rules in one place. Uses only design-system tokens.
   Imported last in main.css to override component defaults.
   ========================================================================== */


/* ==========================================================================
   1024px — TABLET LANDSCAPE
   ========================================================================== */

@media (max-width: 1024px) {

  /* Reduce page-level spacing */
  :root {
    --sp-page: var(--sp-4);
  }

  /* Tab panels: tighter padding */
  .app.voice-app .tab-panel {
    padding: var(--sp-4);
  }

  /* Transcript: reduced padding */
  .transcript {
    padding: var(--sp-3);
  }

  /* Sidebar open: content pushes left */
  .app.sidebar-open .app-content {
    transition: margin-right var(--motion-duration-slow) var(--motion-ease-out);
  }

  /* Settings: tighter sections */
  .settings-section {
    padding: var(--sp-3) var(--sp-4);
  }
}


/* ==========================================================================
   768px — TABLET / MOBILE
   ========================================================================== */

@media (max-width: 768px) {

  /* Tighter page spacing */
  :root {
    --sp-page: var(--sp-3);
  }

  /* App shell: column layout for mobile */
  .app.voice-app {
    flex-direction: column;
  }

  /* Messages: wider max-width on smaller screens */
  .msg {
    max-width: 90%;
  }

  /* Controls: reduced padding, flex-wrap */

  /* Hide non-essential control buttons */
  #clearChatBtn,
  .ctrl-icon-btn.hide-mobile {
    display: none;
  }

  /* Sidebar nav: overlay mode, off-screen by default.
     Parent scrolls so the full desktop module list is reachable. */
  .nav-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--c-sidebar-width-expanded);
    height: 100dvh;
    max-height: 100dvh;
    z-index: var(--z-overlay);
    left: -100%;
    transform: none;
    transition: left var(--motion-duration-slow) var(--motion-ease-out);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav-sidebar .sidebar-nav {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .nav-sidebar.open,
  .nav-sidebar.is-dragging {
    left: 0;
    transform: none;
  }

  .nav-sidebar.is-dragging,
  .sidebar-overlay.is-dragging {
    transition: none !important;
  }

  /* Sidebar overlay backdrop */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-modal-backdrop);
    z-index: calc(var(--z-overlay) - 1);
  }

  .sidebar-overlay.visible,
  .sidebar-overlay.is-dragging {
    display: block;
  }

  /* Force sidebar labels visible when open on mobile */
  .nav-sidebar.open .sidebar-item-label,
  .nav-sidebar.open .sidebar-section-label,
  .nav-sidebar.open .sidebar-logo .logo-text {
    display: block;
    opacity: 1;
  }

  /* On mobile, open sidebar needs expanded-like layout for items */
  .nav-sidebar.open .sidebar-item {
    justify-content: flex-start;
    padding: 0 var(--sp-4);
    gap: 12px;
  }

  /* Conversation drawer: constrained width */
  .voice-sidebar {
    max-width: 85vw;
    width: 300px;
  }

  /* Drawer items: touch-friendly sizing */
  .voice-sidebar .sidebar-item {
    min-height: 44px;
    justify-content: center;
  }

  /* Action buttons always partially visible on touch (no hover) */
  .voice-sidebar .sidebar-item .sidebar-item-delete,
  .voice-sidebar .sidebar-item .sidebar-item-archive,
  .voice-sidebar .sidebar-item .sidebar-item-fork,
  .voice-sidebar .sidebar-item .sidebar-item-rename {
    opacity: 0.7;
    min-width: 26px;
    min-height: 26px;
    width: 26px;
    height: 26px;
  }

  .voice-sidebar .sidebar-item .sidebar-item-delete:active,
  .voice-sidebar .sidebar-item .sidebar-item-archive:active,
  .voice-sidebar .sidebar-item .sidebar-item-fork:active,
  .voice-sidebar .sidebar-item .sidebar-item-rename:active {
    opacity: 1;
  }

  /* Message actions: always visible on touch devices */
  .msg-actions {
    opacity: 1;
  }

  /* Transcript: tighter padding */
  .transcript {
    padding: var(--sp-3) var(--sp-2);
    gap: var(--sp-2);
  }

  /* Tab panels: compact padding */
  .app.voice-app .tab-panel {
    padding: var(--sp-3);
  }

  /* Header hamburger: visible */
  .header-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Settings: responsive adjustments */
  .settings-section {
    padding: var(--sp-3) var(--sp-3);
  }

  .ppf-summary-stats {
    gap: var(--sp-1-5);
    padding: var(--sp-2-5) var(--sp-3);
  }

  .brand-assets-row {
    flex-direction: column;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .sys-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Modal adjustments */
  .enroll-box {
    padding: var(--sp-5) var(--sp-4);
    width: 92%;
  }
}


/* ==========================================================================
   480px — PHONE
   ========================================================================== */

@media (max-width: 480px) {

  /* Header: compact */
  .app-header {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }

  .header-title {
    font-size: var(--t-font-size-base);
  }

  /* All touch targets: minimum 44px */
  .header-action-btn,
  .theme-toggle-btn,
  .header-hamburger {
    min-width: 44px;
    min-height: 44px;
  }

  /* Sidebar toggle & drawer buttons: 44px touch target */
  .sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-new-chat {
    min-height: 44px;
  }

  .sidebar-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Conversation drawer: phone sizing */
  .voice-sidebar {
    width: 85vw;
    max-width: 300px;
  }

  /* Font sizes: prevent iOS zoom (min 16px on inputs) */
  .text-input,
  .chat-input,
  .settings-input,
  .activity-log-search,
  .sidebar-rename-input,
  .enroll-box input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Controls: stacked layout */


  /* Text input wrap: touch-friendly */

  .text-input {
    padding: 7px 0;
    min-width: 0;
    flex: 1;
  }

  /* Inline mic in text wrap: compact */



  /* Upload button: larger touch target */


  /* Mode selector: simplified */
  .mode-label {
    display: none;
  }

  .mode-current {
    padding: var(--sp-1-5) var(--sp-2);
    min-height: 44px;
  }

  .mode-dropdown {
    min-width: 160px;
    right: auto;
    left: 0;
  }

  .mode-option {
    padding: var(--sp-2-5) var(--sp-3);
    min-height: 44px;
  }

  .mode-selector {
    order: 0;
  }

  /* Upload progress & file pills: compact */
  .upload-progress {
    font-size: var(--t-font-size-2xs);
  }

  .file-pills {
    gap: var(--sp-1);
  }

  .file-pill {
    font-size: var(--t-font-size-2xs);
    padding: var(--sp-0-5) var(--sp-1-5);
    min-height: 28px;
  }

  /* Messages: near full width */
  .msg {
    max-width: 95%;
  }

  /* Message action buttons: touch-friendly */
  .msg-action-btn {
    min-width: 36px;
    min-height: 36px;
    padding: var(--sp-1);
  }

  /* Transcript: minimal side padding */
  .transcript {
    padding: var(--sp-2) var(--sp-1-5);
  }

  /* Sidebar: full overlay on phone */
  .nav-sidebar.open {
    width: var(--c-sidebar-width-expanded);
  }

  /* Settings: compact */
  .settings-section {
    padding: var(--sp-2-5) var(--sp-3);
  }

  .settings-item {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* Search bars: consistent 44px touch target */
  .activity-log-search {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
  }
  .mod-search input {
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
  }

  .settings-range {
    width: 140px;
  }

  /* Lightbox: tighter on phone */
  .lightbox img {
    max-width: 95%;
    max-height: 85%;
  }
}


/* ==========================================================================
   360px — ULTRA NARROW
   ========================================================================== */

@media (max-width: 360px) {

  /* Further reduce padding */
  .app-header {
    padding: 0 var(--sp-2);
    gap: var(--sp-1-5);
  }

  .header-title {
    font-size: var(--t-font-size-sm);
  }

  /* Mode button: touch-friendly minimum */
  .mode-current {
    min-height: 44px;
    padding: var(--sp-1) var(--sp-1-5);
    font-size: var(--t-font-size-xs);
  }

  /* Input text: 16px minimum prevents iOS auto-zoom on focus */
  .text-input {
    font-size: 16px;
  }

  /* Conversation drawer: full width on ultra-narrow, capped to prevent overflow */
  .voice-sidebar {
    width: 90vw;
    max-width: 90vw;
  }

  /* Controls: maximum compaction */

  /* Messages: full width */
  .msg {
    max-width: 98%;
  }

  /* Tab panels: minimal */
  .app.voice-app .tab-panel {
    padding: var(--sp-2);
  }

  /* Settings: minimal padding */
  .settings-section {
    padding: var(--sp-2) var(--sp-2);
  }

  .ppf-summary-stats {
    padding: var(--sp-2);
    gap: var(--sp-1);
  }

  .ppf-stat {
    font-size: var(--t-font-size-2xs);
    padding: var(--sp-0-5) var(--sp-2);
  }

  /* Module modals: tighter padding at 360px */
  .mod-modal-overlay { padding: var(--sp-1); padding-top: var(--sp-2); }
  .mod-modal-body { padding: var(--sp-3); }
  .mod-modal-footer { padding: 12px var(--sp-3); }

  /* Confirm dialog: stack buttons vertically to prevent overflow */
  .mod-confirm-actions { flex-direction: column; }
  .mod-confirm-actions .mod-btn { min-width: 0; width: 100%; }

  /* Settings inputs: full width on ultra-narrow */
  .settings-input--narrow,
  .settings-input-sm,
  .settings-select-md {
    max-width: 100%;
    width: 100%;
  }
  .settings-range {
    width: 100%;
  }
  .settings-range-wrap {
    width: 100%;
  }

  /* Controls: ensure touch target compliance */
  .controls {
    min-height: 44px;
  }
}


/* ==========================================================================
   iOS SAFE AREA
   ========================================================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

  /* Controls: respect safe area inset at bottom */
  .controls {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Chat widget FAB: clear safe area */
  #mcw-fab {
    bottom: max(80px, calc(20px + env(safe-area-inset-bottom)));
  }
}

/* Virtual keyboard open: constrain layout to visual viewport */
.u-app-height {
  height: var(--app-h, 100vh);
  height: var(--app-h, 100dvh);
  overflow: hidden;
}

/* Keyboard open: hide mode selector to save space */
body.keyboard-open .mode-selector {
  display: none;
}

/* Keyboard open: compress controls area */
body.keyboard-open .controls {
  padding-top: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

/* Keyboard open: ensure transcript doesn't get pushed off */
body.keyboard-open .transcript {
  min-height: 0;
  flex: 1;
}



/* ==========================================================================
   TOUCH OPTIMIZATIONS
   ========================================================================== */

/* SVG pointer-events: none inside buttons — prevent tap misses */
button svg,
a svg,
.sidebar-item svg {
  pointer-events: none;
}

/* touch-action: manipulation on interactive elements — kill double-tap zoom */
button,
a,
input,
textarea,
select,
.sidebar-item,
.mode-option,
.settings-toggle,
.settings-toggle-slider,
.ppf-stat,
.theme-pill,
.file-pill,
.menu-order-item,
.voice-profile-item {
  touch-action: manipulation;
}

/* Active state feedback: opacity on press */
@media (hover: none) and (pointer: coarse) {

  button:active,
  a:active,
  .sidebar-item:active,
  .mode-option:active,
  .ppf-stat:active,
  .theme-pill:active,
  .voice-sidebar .sidebar-item:active {
    opacity: 0.7;
    transition: opacity var(--motion-duration-instant) var(--motion-ease-default);
  }

  /* Hover states on touch: always show action buttons */
  .msg-actions {
    opacity: 1;
  }

  .voice-sidebar .sidebar-item .sidebar-item-delete,
  .voice-sidebar .sidebar-item .sidebar-item-archive,
  .voice-sidebar .sidebar-item .sidebar-item-fork,
  .voice-sidebar .sidebar-item .sidebar-item-rename {
    opacity: 0.7;
    min-width: 26px;
    min-height: 26px;
    width: 26px;
    height: 26px;
  }

  /* Scroll-to-bottom button: larger on touch */
  .scroll-bottom-btn {
    width: 44px;
    height: 44px;
  }

  .scroll-bottom-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Code copy & image download: always visible on touch (no hover) */
  .code-copy-btn {
    opacity: 1;
  }

  .img-download-btn {
    opacity: 1;
  }

  /* Pending banner dismiss: touch-friendly */
  .pending-dismiss {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
  }
}


/* ==========================================================================
   MODULE COMPONENTS — MOBILE TOUCH TARGETS & OVERFLOW SAFETY
   Cross-cutting rules for module pages (mod-*) on phones/small tablets.
   Mobile-only: every rule lives inside a max-width media query.
   ========================================================================== */

@media (max-width: 768px) {

  /* Buttons: minimum touch-target height (44px standard, 40px small) */
  .mod-btn {
    min-height: 44px;
  }

  .mod-btn-sm {
    min-height: 40px;
  }

  /* Module section nav tabs: comfortable touch height */
  .mod-nav-btn {
    min-height: 40px;
  }

  /* Module inputs & dropdowns: touch-friendly height */
  .mod-input,
  .mod-dropdown {
    min-height: 40px;
  }

  /* Chat input row + footer nav chevron: expand the tap area of compact
     icon buttons without changing their visual size (pill stays slim).
     Vertical bias keeps adjacent buttons from overlapping horizontally. */
  .text-input-wrap .send-btn,
  .text-input-wrap .voice-btn,
  .text-input-wrap .upload-btn,
  .footer-nav-btn {
    position: relative;
  }

  .text-input-wrap .send-btn::after,
  .text-input-wrap .voice-btn::after,
  .text-input-wrap .upload-btn::after,
  .footer-nav-btn::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-1));
  }

  /* Footer nav chevron is the only nav opener on mobile — full 44px target */
  .footer-nav-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* Shell touch targets: sidebar nav items, chat-header actions, and the
     shell modal close button all reach the 44px minimum on touch viewports. */
  .nav-sidebar .sidebar-item {
    min-height: 44px;
  }

  .chat-only-header .header-action-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Tables: scroll wrappers never exceed the viewport */
  .mod-table-wrap {
    max-width: 100%;
  }

  /* Media inside tab panels must never exceed the viewport */
  .tab-panel img {
    max-width: 100%;
    height: auto;
  }

  /* Long unbroken strings (ids, urls, hashes) wrap instead of overflowing */
  .mod-detail-value,
  .mod-card {
    overflow-wrap: anywhere;
    min-width: 0;
  }
}

@media (max-width: 480px) {

  /* Module inputs: 16px minimum prevents iOS focus-zoom */
  .mod-input,
  .mod-search input,
  .mod-dropdown {
    font-size: 16px;
  }
}


/* ==========================================================================
   NO HORIZONTAL SCROLL — Global safety net
   ========================================================================== */

html,
body,
.app.voice-app,
.app-content,
.main-area,
.tab-panel,
.transcript {
  overflow-x: hidden;
}

/* ---- components/_responsive-tables.css ---- */
/* ==========================================================================
   RESPONSIVE TABLES + MODULE BREAKPOINT BASELINE
   Reusable, opt-in mobile patterns for module pages. Tokens only.
   Imported after _responsive.css so card-stack overrides win the cascade.

   STANDARD MODULE BREAKPOINT BASELINE
   -----------------------------------
   Every module should target these three breakpoints (and only these) so the
   platform reads consistently on mobile. Use max-width queries:
     768px  tablet / small  — tighten spacing, single-column secondary grids
     640px  card-stack       — tables collapse to cards, multi-col grids → 1col
     480px  phone            — full-width controls, 16px inputs (no iOS zoom)
   ========================================================================== */


/* ==========================================================================
   TABLE → CARD PATTERN  (.mod-rtable)
   --------------------------------------------------------------------------
   Markup contract (CSS-only, no JS):
     <table class="mod-rtable">
       <thead><tr><th>Name</th><th>Status</th></tr></thead>
       <tbody>
         <tr>
           <td data-label="Name">Acme</td>
           <td data-label="Status">Active</td>
         </tr>
       </tbody>
     </table>
   At/below 640px each row becomes a card and every cell shows its column
   label (from data-label) beside the value. Above 640px it is a normal table.
   ========================================================================== */

.mod-rtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-font-size-sm);
}

.mod-rtable th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--s-border);
  color: var(--c-heading-color);
  font-size: var(--t-font-size-2xs);
  font-weight: var(--t-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
}

.mod-rtable td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--s-border);
  color: var(--s-text-primary);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {

  /* Hide the header row visually but keep it for assistive tech */
  .mod-rtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .mod-rtable,
  .mod-rtable tbody,
  .mod-rtable tr,
  .mod-rtable td {
    display: block;
    width: 100%;
  }

  /* Each row is a card */
  .mod-rtable tr {
    background: var(--s-bg-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2);
    margin-bottom: var(--sp-3);
  }

  .mod-rtable tr:last-child {
    margin-bottom: 0;
  }

  /* Each cell: label on the left, value on the right */
  .mod-rtable td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1-5) var(--sp-1);
    border: 0;
    border-bottom: 1px solid var(--s-border);
    text-align: right;
    min-height: 44px;
  }

  .mod-rtable td:last-child {
    border-bottom: 0;
  }

  /* Column label sourced from data-label */
  .mod-rtable td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--s-text-secondary);
    font-size: var(--t-font-size-xs);
    font-weight: var(--t-font-weight-medium);
    text-transform: none;
  }

  /* Cells with no data-label (e.g. action button row) span full width */
  .mod-rtable td:not([data-label]) {
    justify-content: flex-end;
    text-align: right;
  }

  .mod-rtable td:not([data-label])::before {
    content: none;
  }
}


/* ==========================================================================
   44px TOUCH-TARGET UTILITY  (.u-touch-target)
   --------------------------------------------------------------------------
   Apply to any interactive element that must meet the 44x44 minimum tap area
   on touch screens. The full variant always enforces it; the -mobile variant
   only enforces at/below the 768px baseline so desktop density is preserved.
   ========================================================================== */

.u-touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .u-touch-target-mobile {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
}

/* ---- components/_loop.css ---- */
/* ── Autonomous Loop ───────────────────────────────── */
.loop-toggle-btn {
  background: none; border: none; color: var(--s-text-secondary);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  display: flex; align-items: center; gap: 4px; font-size: 11px;
  transition: all .2s;
}
.loop-toggle-btn:hover { color: var(--s-text-primary); background: var(--s-bg-hover); }
.loop-toggle-btn.active { color: var(--s-accent); background: var(--s-accent-subtle); }
.loop-toggle-btn.active svg { animation: loop-spin 2s linear infinite; }
@keyframes loop-spin { 100% { transform: rotate(360deg); } }
.loop-label { font-weight: 500; }

.loop-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; background: var(--s-accent-subtle);
  border-bottom: 1px solid var(--s-border); font-size: 12px;
}
.loop-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--s-accent); animation: loop-blink 1.5s ease infinite;
}
@keyframes loop-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.loop-iter { font-weight: 600; color: var(--s-accent); }
.loop-model { color: var(--s-text-secondary); }
.loop-config-btn, .loop-reset-btn {
  background: none; border: none; color: var(--s-text-secondary);
  cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px;
  margin-left: auto;
}
.loop-config-btn:hover, .loop-reset-btn:hover { color: var(--s-text-primary); background: var(--s-bg-hover); }

.loop-config {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--s-bg-surface);
  border-bottom: 1px solid var(--s-border); font-size: 12px;
}
.loop-config label { display: flex; align-items: center; gap: 4px; color: var(--s-text-secondary); }
.loop-config input[type="text"], .loop-config input[type="number"] {
  background: var(--s-bg-input); color: var(--s-text-primary);
  border: 1px solid var(--s-border); border-radius: 4px; padding: 3px 6px;
}
.loop-config select { font-size: 12px; }

/* Loop message bubbles */
.msg.loop-msg { border-left: 3px solid var(--s-accent); }
.loop-thinking-wrap { margin: 4px 0 8px 0; font-size: 12px; }
.loop-thinking-header {
  cursor: pointer; color: var(--s-accent); font-weight: 500;
  padding: 4px 0; user-select: none; list-style: none;
}
.loop-thinking-header::marker,
.loop-thinking-header::-webkit-details-marker { display: none; }
.loop-thinking-header::before {
  content: '\25B6'; margin-right: 6px; font-size: 10px;
  display: inline-block; transition: transform .2s;
}
details[open] > .loop-thinking-header::before { transform: rotate(90deg); }
.loop-thinking-content {
  max-height: 300px; overflow-y: auto; padding: 8px;
  background: var(--s-accent-subtle); border-radius: 6px;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; line-height: 1.5;
  color: var(--s-text-secondary); white-space: pre-wrap; word-break: break-word;
}
.loop-response { min-height: 20px; }

/* Loop config panel (expanded) */
.loop-config-panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; background: var(--s-bg-surface);
  border-bottom: 1px solid var(--s-border); font-size: 12px;
  max-height: 400px; overflow-y: auto;
}
.loop-config-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.loop-config-row label { display: flex; align-items: center; gap: 4px; color: var(--s-text-secondary); }
.loop-config-row input[type="text"], .loop-config-row input[type="number"] {
  background: var(--s-bg-input); color: var(--s-text-primary);
  border: 1px solid var(--s-border); border-radius: 4px; padding: 3px 6px;
}
.loop-config-row select { font-size: 12px; }
.loop-think-toggle { cursor: pointer; }
.loop-save-btn {
  background: var(--s-accent); color: var(--s-accent-on); border: none; border-radius: 4px;
  padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.loop-save-btn:hover { background: var(--s-accent-hover); }
.loop-prompt-label {
  flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px;
  color: var(--s-text-secondary); font-size: 11px; font-weight: 500;
}
.loop-prompt-textarea {
  width: 100%; background: var(--s-bg-input); color: var(--s-text-primary);
  border: 1px solid var(--s-border); border-radius: 6px;
  padding: 8px; font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px; line-height: 1.5; resize: vertical;
}

/* Layout fixes — indicator/config are flex-shrink:0, transcript fills rest */
.loop-indicator { flex-shrink: 0; }
.loop-config-panel { flex-shrink: 0; max-height: 50vh; overflow-y: auto; }

/* Force loop messages to not overflow transcript */
.msg.loop-msg { max-width: 100%; overflow: hidden; word-break: break-word; }
.loop-thinking-content { scroll-behavior: auto; }

/* ── Tool call cards ──────────────────────────────── */
.loop-tool-card {
  margin: 6px 0;
  border: 1px solid var(--s-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--s-bg-surface);
  border-left: 3px solid var(--s-text-secondary);
}
.loop-tool-card.calling { border-left-color: var(--s-status-warning); }
.loop-tool-card.success { border-left-color: var(--s-status-success); }
.loop-tool-card.error   { border-left-color: var(--s-status-error); }

.loop-tool-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.loop-tool-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--s-bg-hover);
  color: var(--s-text-secondary);
  flex-shrink: 0;
}
.loop-tool-card.success .loop-tool-badge { background: var(--s-status-success-bg); color: var(--s-status-success-text); }
.loop-tool-card.error   .loop-tool-badge { background: var(--s-status-error-bg);   color: var(--s-status-error-text); }

.loop-tool-name {
  font-weight: 500;
  color: var(--s-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loop-tool-status {
  font-size: 10px;
  color: var(--s-text-secondary);
  flex-shrink: 0;
}
.loop-tool-spinner::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border: 2px solid var(--s-text-secondary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: tool-spin 0.8s linear infinite;
}
@keyframes tool-spin { 100% { transform: rotate(360deg); } }

.loop-tool-args {
  margin-top: 3px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--s-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loop-tool-result {
  margin-top: 4px;
  font-size: 11px;
  color: var(--s-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}
.loop-tool-result-summary {
  cursor: pointer;
  user-select: none;
}
.loop-tool-result-full {
  margin-top: 4px;
  padding: 6px;
  background: var(--s-bg-surface-sunken);
  border-radius: 4px;
  font-size: 10px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---- components/_chat-widget.css ---- */
/* Shared chat, compact location. No second message/composer design. */
#mcw-fab {
  position: fixed; right: 24px; bottom: 24px;
  z-index: calc(var(--z-modal, 1000) - 1);
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 10px;
  border: 1px solid var(--s-border); border-radius: 12px;
  background: var(--s-bg-overlay);
  color: var(--mirai-teal, #21BFC1); cursor: pointer;
}
#mcw-fab[hidden], #mcw-panel[hidden] { display: none !important; }
#mcw-fab svg, #mcw-header svg { width: 22px; height: 22px; }
#mcw-fab.has-unread::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
#mcw-panel {
  position: fixed; right: 24px; bottom: 24px;
  width: min(520px, calc(100vw - 32px));
  height: min(720px, calc(var(--mcw-visible-height, 100dvh) - 48px));
  max-height: calc(var(--mcw-visible-height, 100dvh) - 32px);
  z-index: calc(var(--z-modal, 1000) - 1);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--s-border); border-radius: 12px;
  background: var(--s-bg-overlay);
  color: var(--s-text-primary); font-family: var(--t-font-family);
}
#mcw-header {
  display: flex; align-items: center; flex: none; gap: 4px;
  padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--s-border);
}
.mcw-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#mcw-title { color: var(--mirai-teal, #21BFC1); font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mcw-header #mcw-agent {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 4px;
  width: auto; max-width: 100%; min-height: 32px; height: auto; padding: 2px 6px;
  color: var(--s-text-secondary); font: inherit; font-size: 13px;
}
#mcw-agent .mcw-agent-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mcw-header #mcw-agent svg { width: 16px; height: 16px; flex: none; }
#mcw-agent:disabled { opacity: .6; cursor: default; }
@media (pointer: coarse) { #mcw-header #mcw-agent { min-height: 44px; } }
#mcw-header button {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 10px; cursor: pointer;
  border: 0; border-radius: 8px; background: transparent; color: var(--s-text-secondary);
}
#mcw-header button:hover, #mcw-fab:hover { background: var(--s-bg-hover); color: var(--s-text-primary); }
#mcw-panel :is(button,textarea,summary,a):focus-visible, #mcw-fab:focus-visible {
  outline: 2px solid var(--mirai-teal, #21BFC1); outline-offset: -2px;
}
#mcw-messages { padding: 0; margin: 0; isolation: isolate; position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; }
/* Scope to the actual moved nodes; normal Chat retains its layout. */
html[data-theme] #mcw-panel #transcript {
  width: 100%; min-width: 0; padding: 20px !important; gap: 0 !important;
  background: transparent !important; overflow-x: hidden; overscroll-behavior: contain;
}
html[data-theme] #mcw-panel #transcript .msg { width: 100%; min-width: 0; max-width: 100%; }
html[data-theme] #mcw-panel #transcript .msg-content { min-width: 0; overflow-wrap: anywhere; }
html[data-theme] #mcw-panel #transcript :is(img,video) { max-width: 100%; height: auto; }
html[data-theme] #mcw-panel > .controls {
  display: flex !important; position: relative !important; inset: auto !important;
  width: 100% !important; max-width: none !important; min-width: 0;
  flex: none; padding: 12px 20px !important; margin: 0 !important;
  border-top: 1px solid var(--s-border) !important; background: transparent !important;
}
html[data-theme] #mcw-panel .controls-text-group { width: 100%; min-width: 0; max-width: none; }
html[data-theme] #mcw-panel #textInput { max-height: 140px; }
#mcw-panel #scrollBottomBtn { position: absolute; right: 16px; bottom: 12px; }
html[data-theme="light"] :is(#mcw-title, #mcw-fab) { color: #066B6C; }
@media (max-width: 600px) {
  #mcw-panel { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); height: min(640px, calc(var(--mcw-visible-height, 100dvh) - 32px)); }
  #mcw-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  html[data-theme] #mcw-panel #transcript { padding: 16px !important; }
  html[data-theme] #mcw-panel > .controls { padding: 12px 16px !important; }
}
@media (max-height: 500px) {
  #mcw-panel { top: 8px; bottom: 8px; height: calc(var(--mcw-visible-height, 100dvh) - 16px); max-height: none; }
  html[data-theme] #mcw-panel #textInput { max-height: 72px; }
}

html[data-theme] #mcw-panel #chat-panel {
  display: flex !important; flex-direction: column; position: relative;
  flex: 1; min-height: 0; width: 100%; background: transparent !important;
}
#mcw-error { flex: none; padding: 8px 20px; font-size: 13px; color: var(--s-status-error); }
#mcw-error[hidden] { display: none; }
/* Controls beneath the text keep the compact reading width available. */
html[data-theme] #mcw-panel .controls .text-input-wrap.tools-on-right { display: flex !important; flex-direction: column; align-items: stretch; }
html[data-theme] #mcw-panel #textInput { width: 100%; }
html[data-theme] #mcw-panel .composer-actions { width: 100%; align-self: stretch; }
#mcw-panel #uploadBtn { order: 1; }
#mcw-panel #micBtn { order: 2; }
#mcw-panel #sendBtn { order: 3; margin-left: auto; }

html[data-theme] #mcw-panel #mcw-messages { background: transparent !important; }

#mcw-panel { bottom: calc(24px + var(--mcw-keyboard-offset, 0px)); }
@media (max-width: 600px), (max-height: 500px) {
  #mcw-panel { bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--mcw-keyboard-offset, 0px)); }
}
/* The page already owns the artwork. The popup keeps only its theme tint. */
#mcw-panel .chat-synthesis-field { display: none !important; }

/* The resizable Threads rail owns the right edge, including New thread. */
@media (min-width: 769px) {
  #mcw-fab, #mcw-panel { right: calc(24px + var(--mcw-rail-width, 0px)); }
  #mcw-panel { width: min(520px, calc(100vw - var(--mcw-rail-width, 0px) - 48px)); }
}

/* ---- components/_shell-extras.css ---- */
/* ==========================================================================
   Shell extras — command palette (Ctrl+K), activity feed, header hamburger
   ========================================================================== */

/* ---- Header hamburger (mobile nav opener; _responsive.css shows it ≤768) -- */
.header-hamburger { display: none; background: none; border: none; color: var(--s-text-primary); cursor: pointer; padding: var(--sp-2); border-radius: var(--radius-md); }
.header-hamburger:hover { background: var(--s-bg-surface-raised); }

/* ---- Command palette ------------------------------------------------------ */
#cmdkOverlay { display: none; position: fixed; inset: 0; background: var(--c-modal-backdrop); z-index: 1200; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#cmdkOverlay.show { display: flex; }
.cmdk-box { width: min(560px, 92vw); background: var(--s-bg-surface); border: 1px solid var(--s-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: none; }
.cmdk-input { width: 100%; box-sizing: border-box; background: var(--s-bg-surface); color: var(--s-text-primary); border: none; border-bottom: 1px solid var(--s-border); padding: var(--sp-4) var(--sp-5); font-size: var(--t-font-size-lg); outline: none; font-family: inherit; }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: var(--sp-2); }
.cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); cursor: pointer; }
.cmdk-item:hover, .cmdk-item.selected { background: var(--s-bg-surface-raised); }
.cmdk-item.selected { outline: 1px solid var(--s-accent); outline-offset: -1px; }
.cmdk-label { color: var(--s-text-primary); font-size: var(--t-font-size-sm); }
.cmdk-hint { color: var(--s-text-tertiary); font-size: var(--t-font-size-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
.cmdk-empty { padding: var(--sp-5); text-align: center; color: var(--s-text-secondary); font-size: var(--t-font-size-sm); }
.cmdk-foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--s-border); color: var(--s-text-tertiary); font-size: var(--t-font-size-2xs); }

/* ---- Activity feed ---------------------------------------------------------- */
.af-btn { position: relative; }
.af-btn.working .material-icons { color: var(--s-accent); }
.af-badge { display: none; position: absolute; top: 0; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--radius-full); background: var(--s-accent); color: var(--s-accent-on); font-size: var(--t-font-size-2xs); line-height: 14px; text-align: center; }
.af-badge.show { display: block; }
.af-pop { display: none; position: fixed; right: 12px; top: 52px; left: auto; bottom: auto; width: min(340px, 92vw); max-height: 60vh; overflow: hidden; background: var(--s-bg-surface); border: 1px solid var(--s-border); border-radius: var(--radius-lg); z-index: 1100; flex-direction: column; box-shadow: none; }
.af-pop.show { display: flex; }
.af-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--s-border); color: var(--c-heading-color); font-weight: var(--t-font-weight-semibold); font-size: var(--t-font-size-sm); }
.af-live { padding: 0 var(--sp-4); color: var(--s-text-tertiary); font-size: var(--t-font-size-xs); min-height: 0; }
.af-live.active { padding: var(--sp-2) var(--sp-4); color: var(--s-accent); }
.af-list { overflow-y: auto; padding: var(--sp-2); }
.af-item { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); cursor: default; }
.af-item.af-linked { cursor: pointer; }
.af-item.af-linked:hover { background: var(--s-hover-wash); }
.af-item.unread { background: var(--s-bg-surface-raised); }
.af-item + .af-item { margin-top: var(--sp-1); }
.af-item-head { display: flex; justify-content: space-between; gap: var(--sp-2); }
.af-item-title { color: var(--s-text-primary); font-size: var(--t-font-size-sm); font-weight: var(--t-font-weight-medium); }
.af-item-time { color: var(--s-text-tertiary); font-size: var(--t-font-size-2xs); white-space: nowrap; }
.af-item-msg { color: var(--s-text-secondary); font-size: var(--t-font-size-xs); margin-top: 2px; }
.af-item-open { color: var(--s-text-tertiary); font-size: var(--t-font-size-2xs); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.af-empty { padding: var(--sp-5); text-align: center; color: var(--s-text-secondary); font-size: var(--t-font-size-sm); }


/* Header activity + logout */
.header-activity-slot {
  display: inline-flex;
  align-items: center;
}
.header-action-btn.af-btn,
.header-action-btn.header-logout {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-action-btn .af-badge {
  top: 2px;
  right: 2px;
}
.app-footer-empty,
.app-footer[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ---- components/_theme-xai.css ---- */
/* ==========================================================================
   THEME X — de-Claude / SpaceX / Tesla / xAI
   Loaded last. Overrides chatty AI-assistant chrome with monochrome product UI.
   ========================================================================== */

:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-full: 9999px;
  --radius-button: 4px;
  --radius-input: 4px;
  --radius-card: 6px;
  --radius-modal: 8px;
  --radius-badge: 4px;
  --c-chat-bubble-radius: 6px;
  --c-btn-radius: 4px;
  --c-input-radius: 4px;
  /* Toast: xAI keeps the tighter 4px corner via token (no !important on
     .toast — that killed the severity left edge). Border/bg stay on the
     theme-aware --c-toast-* defaults so light mode gets a real hairline. */
  --c-toast-radius: var(--radius-md);
  --sidebar-width: var(--layout-sidebar-width-collapsed, 52px);
  --sidebar-width-expanded: var(--layout-sidebar-width, 220px);
  --header-height: 48px;
  --layout-header-height: 48px;
  --layout-sidebar-width-collapsed: 52px;
  --layout-sidebar-width: 220px;

  /* Kill colorful mode palette */
  --mode-mira: var(--s-accent);
  --mode-boss: var(--s-text-secondary);
  --mode-integrate: var(--s-text-tertiary);
}

/* --------------------------------------------------------------------------
   Global base — pure product surface
   -------------------------------------------------------------------------- */
html, body {
  background: var(--s-bg-page) !important;
  color: var(--s-text-primary);
  letter-spacing: -0.011em;
}

.app, .voice-app, .app-body, .app-content, .main-area, .tab-panel {
  background: var(--s-bg-page) !important;
}

/* Prefer less motion — de-Claude "delight" animations */
.msg, .msg.user, .msg.mira, .badge, .pill {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Header — thin, quiet, no chrome weight
   -------------------------------------------------------------------------- */
.app-header, .chat-only-header {
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
  background: var(--s-bg-page) !important;
  border-bottom: 1px solid var(--s-border) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 12px !important;
}

.header-action-btn, .header-hamburger, .sidebar-toggle-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 4px !important;
  color: var(--s-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.header-action-btn:hover, .header-hamburger:hover, .sidebar-toggle-btn:hover {
  color: var(--s-text-primary) !important;
  background: var(--s-bg-hover) !important;
}

.app-title, #activeTabTitle, .mod-page-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--s-text-tertiary) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.header-title,
#headerPageTitle {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--s-text-primary) !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Nav sidebar — icon rail, hairline, no pill active states
   -------------------------------------------------------------------------- */
.nav-sidebar {
  width: var(--sidebar-width) !important;
  background: var(--s-bg-page) !important;
  border-right: 1px solid var(--s-border) !important;
  box-shadow: none !important;
}
.nav-sidebar.expanded { width: var(--sidebar-width-expanded) !important; }

.nav-sidebar .sidebar-item {
  height: 36px !important;
  margin: 1px 6px !important;
  border-radius: 4px !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
  box-shadow: none !important;
  border-left: 2px solid transparent !important;
}
.nav-sidebar .sidebar-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
}
.nav-sidebar .sidebar-item.active {
  background: var(--s-accent-subtle) !important;
  color: var(--s-text-primary) !important;
  border-left: 2px solid var(--s-accent) !important;
  box-shadow: none !important;
}
.nav-sidebar .sidebar-item.active .material-icons,
.nav-sidebar .sidebar-item.active .sidebar-item-icon {
  color: var(--s-accent) !important;
}
.nav-sidebar .sidebar-item .material-icons,
.nav-sidebar .sidebar-item-icon {
  font-size: 18px !important;
  opacity: 0.85;
  color: inherit !important;
}
.sidebar-section-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.25) !important;
}

@media (max-width: 768px) {
  .nav-sidebar,
  .nav-sidebar.expanded {
    width: min(280px, 85vw) !important;
  }
}

/* Conversation history drawer */
.voice-sidebar {
  background: var(--s-bg-surface-sunken) !important;
  border-right: 1px solid var(--s-border) !important;
  box-shadow: none !important;
}
.sidebar-header {
  border-bottom: 1px solid var(--s-border) !important;
  padding: 12px !important;
}
.sidebar-new-chat {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 550 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  height: 34px !important;
  box-shadow: none !important;
}
.sidebar-new-chat:hover { opacity: 0.9; }
.sidebar-list .conv-item,
.sidebar-list .conversation-item,
.sidebar-list button {
  border-radius: 4px !important;
  font-size: 13px !important;
  color: var(--s-text-secondary) !important;
}
.sidebar-list .conv-item:hover,
.sidebar-list .conversation-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--s-text-primary) !important;
}
.sidebar-list .conv-item.active,
.sidebar-list .conversation-item.active {
  background: var(--s-bg-hover) !important;
  color: var(--s-text-primary) !important;
}

/* --------------------------------------------------------------------------
   Chat transcript — document stream, not chat bubbles
   -------------------------------------------------------------------------- */
.transcript, #transcript, .chat-panel {
  background: var(--s-bg-page) !important;
  padding: 24px 0 16px !important;
  gap: 20px !important;
  max-width: none !important;
}

.msg {
  max-width: min(720px, 92%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  animation: none !important;
}

/* Full-width columns inside transcript */
.msg.user {
  align-self: stretch !important;
  max-width: min(720px, 92%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.msg.mira {
  align-self: stretch !important;
  max-width: min(720px, 92%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kill speech-bubble shapes — flat document blocks */
.msg.user .msg-content {
  background: transparent !important;
  color: var(--s-text-primary) !important;
  border: none !important;
  border-left: 2px solid var(--s-accent) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: none !important;
}

.msg.mira .msg-content {
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
}

/* Meta: tiny labels — teal sender for brand identity */
.msg .meta {
  margin-bottom: 6px !important;
  opacity: 1;
}
.msg .sender {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--s-accent) !important;
}
.msg.user .sender {
  color: var(--s-accent) !important;
}
.msg.mira .sender {
  color: color-mix(in srgb, var(--s-accent) 78%, #fff) !important;
}
.msg .time {
  font-size: 10px !important;
  color: rgba(255,255,255,0.22) !important;
  font-variant-numeric: tabular-nums;
}

.msg-actions { opacity: 0; transition: opacity 0.12s ease; }
.msg:hover .msg-actions { opacity: 1; }
.msg-action-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--s-text-secondary) !important;
  box-shadow: none !important;
}
.msg-action-btn:hover {
  color: var(--s-text-primary) !important;
  border: none !important;
  background: transparent !important;
}

/* Markdown inside assistant */
.msg.mira .msg-content h1,
.msg.mira .msg-content h2,
.msg.mira .msg-content h3 {
  color: var(--s-accent) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 1.1em 0 0.4em !important;
}
.msg.mira .msg-content a {
  color: var(--s-accent) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--s-accent) 45%, transparent);
}
.msg.mira .msg-content a:hover {
  color: var(--s-accent-hover) !important;
  text-decoration-color: var(--s-accent);
}
.msg.mira .msg-content code {
  background: var(--s-bg-hover) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 3px !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.88em !important;
  padding: 0.1em 0.35em !important;
}
.msg.mira .msg-content pre {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.msg.mira .msg-content blockquote {
  border-left: 2px solid color-mix(in srgb, var(--s-accent) 55%, transparent) !important;
  color: var(--s-text-secondary) !important;
  background: transparent !important;
  margin: 0.8em 0 !important;
  padding-left: 12px !important;
}
.msg.mira .msg-content table {
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
}
.msg.mira .msg-content th {
  background: var(--s-bg-surface) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--s-text-secondary) !important;
}
.msg.mira .msg-content td {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Thinking / streaming / tool chips — quieter industrial */
.thinking, .thinking-block, .msg.thinking .msg-content,
.stream-thinking, .tool-call, .tool-chip, .activity-feed,
.tool-result, .pending-banner {
  background: transparent !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 4px !important;
  color: var(--s-text-secondary) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
.thinking-dots span,
.typing-indicator span {
  /* visibility owned by chat-ux LIVE ACTIVITY block (teal pulse) */
  background: var(--s-accent) !important;
  opacity: 0.9 !important;
}

/* Shimmer skeletons — monochrome, no accent wash */
[class*="skeleton"], .shimmer {
  background: linear-gradient(90deg, var(--s-bg-surface) 25%, var(--s-bg-hover) 50%, var(--s-bg-surface) 75%) !important;
  background-size: 200% 100% !important;
}

/* Empty state — almost nothing */
.empty-state {
  gap: 6px !important;
  padding: 48px 16px !important;
}
.empty-state-icon {
  display: none !important; /* no cartoon chat bubble */
}
.empty-state-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--s-text-tertiary) !important;
}
.empty-state-hint {
  font-size: 12px !important;
  color: rgba(255,255,255,0.22) !important;
  letter-spacing: 0.01em !important;
}

.history-divider {
  color: rgba(255,255,255,0.22) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

/* --------------------------------------------------------------------------
   Composer — rectilinear, not pill chatbot bar
   -------------------------------------------------------------------------- */
.controls {
  padding: 10px 16px 14px !important;
  background: var(--s-bg-page) !important;
  border-top: 1px solid var(--s-border) !important;
}
.controls-text-group {
  max-width: min(720px, 100%) !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.text-input-wrap {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important; /* not 24px pill */
  padding: 6px 8px 6px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease !important;
}
.text-input-wrap:focus-within {
  border-color: var(--s-text-tertiary) !important;
  box-shadow: none !important;
}
.text-input-wrap .text-input {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--s-text-primary) !important;
}
.text-input-wrap .text-input::placeholder {
  color: var(--s-text-tertiary) !important;
}

/* Buttons inside composer — square-ish, not circles */
.text-input-wrap .upload-btn,
.text-input-wrap .voice-btn,
.text-input-wrap .loop-toggle-btn {
  border-radius: 4px !important;
  color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
  width: 32px !important;
  height: 32px !important;
}
.text-input-wrap .upload-btn:hover,
.text-input-wrap .voice-btn:hover,
.text-input-wrap .loop-toggle-btn:hover {
  color: var(--s-text-primary) !important;
  background: var(--s-bg-hover) !important;
}
.text-input-wrap .send-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 4px !important;
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  box-shadow: none !important;
}
.text-input-wrap .send-btn:hover { opacity: 0.9; }
.text-input-wrap .voice-btn.active,
.text-input-wrap .voice-btn.speech,
.text-input-wrap .voice-btn.listening,
.text-input-wrap .voice-btn.thinking,
.text-input-wrap .voice-btn.working,
.text-input-wrap .voice-btn.transcribing,
.text-input-wrap .voice-btn.playing {
  background: var(--s-bg-hover) !important;
  color: var(--s-text-primary) !important;
  box-shadow: none !important;
}
.text-input-wrap .voice-btn .voice-bar {
  fill: currentColor !important;
}

/* Mode selector — flat chip, not soft pill */
.mode-selector, .mode-current, .mode-dropdown {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  color: var(--s-text-secondary) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.mode-current:hover {
  border-color: rgba(255,255,255,0.25) !important;
  color: var(--s-text-primary) !important;
  background: rgba(255,255,255,0.04) !important;
}
.mode-option:hover, .mode-option.active {
  background: var(--s-bg-hover) !important;
  color: var(--s-text-primary) !important;
}

.file-pills .file-pill, .file-pill {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
  color: var(--s-text-secondary) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.scroll-bottom-btn {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  color: var(--s-text-secondary) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Buttons / forms / cards — industrial flat
   -------------------------------------------------------------------------- */
.btn, button.btn, .mod-btn, .loop-save-btn {
  border-radius: 4px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.btn-primary, .btn.primary, .mod-btn-primary, button.primary {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  border: 1px solid transparent !important;
}
.btn-primary:hover, .mod-btn-primary:hover {
  background: var(--s-accent-hover) !important;
}
.btn-secondary, .btn.secondary, .mod-btn-secondary, .mod-btn-outline {
  background: transparent !important;
  color: var(--s-text-primary) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.btn-secondary:hover, .mod-btn-outline:hover {
  background: rgba(255,255,255,0.05) !important;
}
.btn-ghost, .mod-btn-ghost {
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  border: none !important;
}
.btn-danger, .mod-btn-danger {
  background: transparent !important;
  color: var(--s-status-error) !important;
  border: 1px solid rgba(248,113,113,0.3) !important;
}

input:not(.text-input-wrap *), textarea:not(.text-input),
select,
.mod-input, .mod-dropdown, .form-control {
  background: var(--s-bg-surface) !important;
  color: var(--s-text-primary) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: inherit !important;
}
input:not(.text-input-wrap *):focus, textarea:not(.text-input):focus, select:focus,
.mod-input:focus {
  /* outline:none stays only because the box-shadow below IS the focus ring */
  outline: none !important;
  border-color: var(--s-border-focus, var(--s-accent)) !important;
  box-shadow: 0 0 0 3px var(--s-accent-subtle) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--s-text-tertiary) !important;
}

/* Page shell must NOT look like a nested card (broke every module tab). */
.mod-page {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Surfaces for settings/login only — list content stays flat via module-polish */
.card, .login-card, .settings-panel, .settings-section, .panel {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.mod-card, .mod-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Kill decorative gradients in settings */
.settings-panel [style*="gradient"],
.settings-header,
.mod-hero,
.hero-banner {
  background-image: none !important;
}

/* Tables */
table, .mod-table { border-collapse: collapse !important; }
th {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
td {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
}
tr:hover td { background: rgba(255,255,255,0.03) !important; }

/* --------------------------------------------------------------------------
   Tabs / badges / toggles
   -------------------------------------------------------------------------- */
.tab-bar, #tabBar {
  background: var(--s-bg-page) !important;
  border-bottom: 1px solid var(--s-border) !important;
}
.tab, .mod-tab {
  color: var(--s-text-tertiary) !important;
  border-bottom: 1px solid transparent !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.tab.active, .mod-tab.active {
  color: var(--s-text-primary) !important;
  border-bottom-color: var(--s-text-primary) !important;
  background: transparent !important;
}

.badge, .chip, .tag, .mod-badge {
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--s-text-secondary) !important;
  box-shadow: none !important;
}

.toggle input:checked + .toggle-track,
.switch input:checked + .slider,
.toggle-switch.on {
  background: var(--s-accent) !important;
}

/* --------------------------------------------------------------------------
   Modals / drawers / cmdk (toast chrome: _toasts.css + --c-toast-* tokens)
   -------------------------------------------------------------------------- */
.modal, .modal-content, .drawer, .cmdk-box, .af-pop {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  box-shadow: var(--s-shadow-lg) !important; /* 0 16px 48px rgba(0,0,0,0.55) */
  backdrop-filter: none !important;
}
.modal-backdrop, .drawer-backdrop, #cmdkOverlay {
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: none !important;
}
.cmdk-input {
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}
.cmdk-item.selected {
  outline: none !important;
  background: var(--s-bg-hover) !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.app-footer, .footer, .voice-footer {
  background: var(--s-bg-page) !important;
  border-top: 1px solid var(--s-border) !important;
  color: var(--s-text-tertiary) !important;
  min-height: 36px !important;
}
.footer-text, .footer-link {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--s-text-tertiary) !important;
  text-decoration: none !important;
}
.footer-link:hover { color: var(--s-text-primary) !important; }

/* --------------------------------------------------------------------------
   Loop / misc chrome — less toy-like
   -------------------------------------------------------------------------- */
.loop-indicator {
  background: transparent !important;
  border-bottom: 1px solid var(--s-border) !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.loop-pulse {
  background: var(--s-accent) !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 0.7;
}
.loop-toggle-btn .loop-label {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Dropdowns */
.dropdown-menu, .menu-panel, .context-menu, .popover, .mode-dropdown-menu {
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  box-shadow: var(--s-shadow-md) !important; /* 0 12px 32px rgba(0,0,0,0.5) */
}

/* Scrollbars — hairline */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 0;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* Selection */
::selection {
  background: rgba(255,255,255,0.18);
  color: var(--s-text-primary);
}

/* Focus — theme-aware ring (token flips per palette). outline-offset is
   deliberately NOT !important so component rules that need an inset ring
   (e.g. .mod-modal-close:focus-visible) still win. */
:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent)) !important;
  outline-offset: 2px;
}
.header-left .sidebar-toggle-btn:focus-visible,
.header-action-btn:focus-visible {
  outline: 2px solid var(--s-border-focus, var(--s-accent)) !important;
}

/* Material icons quieter */
.material-icons {
  font-weight: 400 !important;
  opacity: 0.85;
}

/* Activity feed accents monochrome */
.af-badge { background: var(--s-accent) !important; color: var(--s-accent-on) !important; border-radius: 3px !important; }
.af-btn.working .material-icons,
.af-live.active { color: var(--s-text-primary) !important; }

/* Lightbox / overlays */
.lightbox, .lightbox-content {
  background: var(--s-bg-page) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* --------------------------------------------------------------------------
   Light mode — still monochrome, not pastel
   -------------------------------------------------------------------------- */
[data-theme="light"] html,
[data-theme="light"] body,
[data-theme="light"] .app,
[data-theme="light"] .voice-app {
  background: var(--s-bg-page) !important;
  color: var(--s-text-primary);
}
[data-theme="light"] .app-header,
[data-theme="light"] .chat-only-header,
[data-theme="light"] .controls,
[data-theme="light"] .app-footer,
[data-theme="light"] .transcript {
  background: var(--s-bg-page) !important;
  border-color: var(--s-border) !important;
}
[data-theme="light"] .msg.user .msg-content {
  color: var(--s-text-primary) !important;
  border-left-color: var(--s-text-primary) !important;
}
[data-theme="light"] .msg.mira .msg-content { color: var(--s-text-primary) !important; }
[data-theme="light"] .text-input-wrap {
  background: var(--s-accent) !important;
  border-color: var(--s-border) !important;
}
[data-theme="light"] .text-input-wrap .send-btn {
  background: var(--s-bg-page) !important;
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .nav-sidebar {
  background: var(--s-bg-page) !important;
}
[data-theme="light"] .sidebar-new-chat {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
}
[data-theme="light"] .btn-primary, [data-theme="light"] .mod-btn-primary {
  background: var(--s-bg-page) !important;
  color: var(--s-text-primary) !important;
}

/* --------------------------------------------------------------------------
   Kill residual teal / soft-AI accent hardcodes
   -------------------------------------------------------------------------- */
.accent, .text-accent, .primary-color { color: var(--s-text-primary) !important; }
.bg-accent, .primary-bg { background: var(--s-accent) !important; color: var(--s-accent-on) !important; }

/* Reduce "AI product" glow filters if any */
.msg.mira, .msg.user, .mic-btn, .voice-btn {
  filter: none !important;
}

/* ==== TYPE BALANCE — final authority (comprehensive) =====================
   Root 16px. Reading body 15px. UI chrome 13–14px. Meta 11–12px.
   No 9–10px UI text. Consistent hierarchy across shell/chat/modules.
   ======================================================================= */

html {
  font-size: 16px !important;
}

body,
.app,
.voice-app {
  font-size: var(--type-body, 0.875rem) !important; /* 14 */
  line-height: 1.5 !important;
  letter-spacing: -0.011em !important;
  font-weight: 400 !important;
}

/* ---- Shell chrome ---- */
.app-header,
.chat-only-header,
.app-footer,
.footer {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
}

.header-title,
.app-title,
#activeTabTitle {
  font-size: var(--type-caption, 0.75rem) !important; /* 12 */
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}
/* Module titles use sentence case — see _module-polish.css */
.mod-page-title,
.mod-nav-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

.header-action-btn .material-icons,
.header-hamburger .material-icons,
.sidebar-item-icon.material-icons,
.nav-sidebar .material-icons {
  font-size: var(--type-icon, 20px) !important;
}

.nav-sidebar .sidebar-item {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.sidebar-section-label {
  font-size: var(--type-meta, 0.6875rem) !important; /* 11 */
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.3 !important;
}

.sidebar-new-chat {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.sidebar-list .conv-item,
.sidebar-list .conversation-item,
.sidebar-list button,
.sidebar-list a {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
  line-height: 1.35 !important;
}

.footer-text,
.footer-link {
  font-size: var(--type-meta, 0.6875rem) !important; /* 11 */
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
}

/* ---- Chat reading stream ---- */
.transcript {
  font-size: var(--type-read, 0.9375rem) !important; /* 15 */
}

.msg.user .msg-content,
.msg.mira .msg-content,
.msg .msg-content {
  font-size: var(--type-read, 0.9375rem) !important; /* 15 */
  line-height: 1.55 !important;
  letter-spacing: -0.011em !important;
  font-weight: 400 !important;
}

.msg .sender {
  font-size: var(--type-meta, 0.6875rem) !important; /* 11 */
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
}

.msg .time,
.msg-action-btn,
.msg-action-btn .copied-text {
  font-size: var(--type-meta, 0.6875rem) !important; /* 11 */
  line-height: 1.3 !important;
}

/* Markdown hierarchy inside assistant */
.msg.mira .msg-content h1 {
  font-size: 1.25em !important;   /* ~18.75 from 15 */
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.msg.mira .msg-content h2 {
  font-size: 1.15em !important;   /* ~17 */
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.msg.mira .msg-content h3 {
  font-size: 1.05em !important;   /* ~15.75 */
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
.msg.mira .msg-content p,
.msg.mira .msg-content li {
  font-size: inherit !important;
  line-height: 1.55 !important;
}
.msg.mira .msg-content code {
  font-size: 0.9em !important;    /* ~13.5 */
  line-height: 1.4 !important;
}
.msg.mira .msg-content pre,
.msg.mira .msg-content pre code {
  font-size: var(--type-code, 0.8125rem) !important; /* 13 */
  line-height: 1.5 !important;
}
.msg.mira .msg-content th {
  font-size: var(--type-meta, 0.6875rem) !important;
  letter-spacing: 0.06em !important;
}
.msg.mira .msg-content td {
  font-size: 0.93em !important; /* ~14 */
  line-height: 1.45 !important;
}
.msg.mira .msg-content blockquote {
  font-size: inherit !important;
  line-height: 1.55 !important;
}

.empty-state-title {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
}
.empty-state-hint {
  font-size: var(--type-caption, 0.75rem) !important; /* 12 */
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
}

.history-divider {
  font-size: var(--type-meta, 0.6875rem) !important;
  letter-spacing: 0.08em !important;
}

.thinking, .thinking-block, .tool-call, .tool-chip,
.tool-result, .pending-banner, .activity-feed {
  font-size: var(--type-caption, 0.75rem) !important; /* 12 */
  line-height: 1.45 !important;
}

/* ---- Composer ---- */
.controls {
  font-size: var(--type-body, 0.875rem) !important;
}
.text-input-wrap .text-input {
  font-size: var(--type-body, 0.875rem) !important; /* 14 */
  line-height: 1.45 !important;
  letter-spacing: -0.011em !important;
}
.text-input-wrap .text-input::placeholder {
  font-size: inherit !important;
}
.mode-selector, .mode-current, .mode-dropdown, .mode-option {
  font-size: var(--type-caption, 0.75rem) !important; /* 12 */
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}
.file-pill, .file-pills .file-pill {
  font-size: var(--type-caption, 0.75rem) !important;
  line-height: 1.3 !important;
}
.loop-indicator {
  font-size: var(--type-meta, 0.6875rem) !important;
  letter-spacing: 0.06em !important;
}
.loop-toggle-btn .loop-label {
  font-size: var(--type-meta, 0.6875rem) !important;
  letter-spacing: 0.06em !important;
}
.loop-config-row,
.loop-config-row label,
.loop-config-row input,
.loop-config-row select,
.loop-prompt-label,
.loop-prompt-textarea {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
  line-height: 1.45 !important;
}

/* ---- Buttons / forms / modules ---- */
.btn, button.btn, .mod-btn, .loop-save-btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger,
.mod-btn-primary, .mod-btn-secondary, .mod-btn-outline, .mod-btn-ghost {
  font-size: var(--type-body, 0.875rem) !important; /* 14 */
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
.btn-sm, .mod-btn-sm { font-size: var(--type-ui, 0.8125rem) !important; }
.btn-lg, .mod-btn-lg { font-size: var(--type-title, 1rem) !important; }

input:not(.text-input-wrap *), textarea:not(.text-input),
select,
.mod-input, .mod-dropdown, .form-control {
  font-size: var(--type-body, 0.875rem) !important; /* 14 */
  line-height: 1.4 !important;
  letter-spacing: -0.011em !important;
}

.field label,
label.form-label,
.mod-label,
.mod-section-title,
.settings-label {
  font-size: var(--type-caption, 0.75rem) !important; /* 12 */
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
}

.card, .settings-panel, .panel, .mod-page {
  font-size: var(--type-body, 0.875rem) !important;
  line-height: 1.5 !important;
}

.mod-page h1, .settings-panel h1, .mod-card h1 { font-size: var(--type-heading, 1.125rem) !important; }
.mod-page h2, .settings-panel h2, .mod-card h2 { font-size: var(--type-title, 1rem) !important; }
.mod-page h3, .settings-panel h3, .mod-card h3 { font-size: var(--type-body, 0.875rem) !important; }

/* Tables */
th {
  font-size: var(--type-meta, 0.6875rem) !important; /* 11 */
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
}
td {
  font-size: var(--type-ui, 0.8125rem) !important; /* 13 */
  line-height: 1.45 !important;
}

/* Tabs / badges */
.tab, .mod-tab {
  font-size: var(--type-caption, 0.75rem) !important; /* 12 */
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.3 !important;
}
.badge, .chip, .tag, .mod-badge {
  font-size: var(--type-meta, 0.6875rem) !important; /* 11 */
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}

/* Modals / cmdk / drawers (toast type lives in _toasts.css) */
.modal, .modal-content, .drawer, .cmdk-box, .af-pop {
  font-size: var(--type-body, 0.875rem) !important;
  line-height: 1.5 !important;
}
.modal h1, .modal-title, .drawer-title, .af-head {
  font-size: var(--type-title, 1rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.cmdk-input {
  font-size: var(--type-title, 1rem) !important; /* 16 — command palette */
  line-height: 1.4 !important;
  letter-spacing: -0.015em !important;
}
.cmdk-label { font-size: var(--type-body, 0.875rem) !important; }
.cmdk-hint, .cmdk-foot {
  font-size: var(--type-meta, 0.6875rem) !important;
  letter-spacing: 0.04em !important;
}
.af-item-title { font-size: var(--type-ui, 0.8125rem) !important; font-weight: 500 !important; }
.af-item-msg { font-size: var(--type-caption, 0.75rem) !important; }
.af-item-time, .af-live { font-size: var(--type-meta, 0.6875rem) !important; }

/* Material icons — consistent */
.material-icons {
  font-size: var(--type-icon, 20px) !important;
  line-height: 1 !important;
}

/* Dropdowns / menus */
.dropdown-menu, .menu-panel, .context-menu, .popover {
  font-size: var(--type-ui, 0.8125rem) !important;
  line-height: 1.4 !important;
}

/* Chat widget (if used) */
.chat-widget, .cw-messages, .cw-input {
  font-size: var(--type-body, 0.875rem) !important;
}

/* Soften prior over-tight tracking on body-scale text */
.msg, .controls, .mod-page, .settings-panel {
  letter-spacing: -0.011em !important;
}


/* ==== COMPOSER PROTECTION — dock owns its chrome ======================== */
.controls {
  border-top: none !important;
  border-bottom: none !important;
}
.controls .text-input-wrap {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 4px 8px !important;
  /* prevent theme from flattening premium dock */
  border-radius: 14px !important;
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 10px 40px rgba(0, 0, 0, 0.45) !important;
  padding: 8px 8px 8px 10px !important;
  min-height: 52px !important;
  align-items: end !important;
}
.controls .text-input-wrap:focus-within {
  background: var(--s-bg-surface-raised) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    var(--s-shadow-focus), /* dark: 0 0 0 3px rgba(255, 255, 255, 0.06) */
    0 14px 48px rgba(0, 0, 0, 0.55) !important;
}
.controls .text-input-wrap .text-input,
.controls .text-input-wrap textarea.text-input {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--s-text-primary) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  padding: 8px 4px !important;
  min-height: 28px !important;
  width: 100% !important;
}
.controls .text-input-wrap .text-input::placeholder {
  color: rgba(255, 255, 255, 0.34) !important;
}
.controls .text-input-wrap .upload-btn,
.controls .text-input-wrap .voice-btn,
.controls .text-input-wrap .loop-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.34) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.controls .text-input-wrap .upload-btn:hover,
.controls .text-input-wrap .voice-btn:hover,
.controls .text-input-wrap .loop-toggle-btn:hover {
  color: var(--s-text-primary) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.controls .text-input-wrap .send-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
}
.controls .text-input-wrap .send-btn.show,
.controls .text-input-wrap.has-text .send-btn,
.controls .text-input-wrap .send-btn.is-stop {
  display: inline-flex !important;
}
.controls .text-input-wrap .send-btn:not(.show):not(.is-stop) {
  display: none !important;
}
.controls .text-input-wrap.has-text .send-btn:not(.show) {
  display: inline-flex !important;
}
.controls .composer-tools,
.controls .composer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
[data-theme="light"] .controls .text-input-wrap .text-input {
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .controls .text-input-wrap .send-btn {
  background: var(--s-bg-surface) !important;
  color: var(--s-text-primary) !important;
  box-shadow: none !important;
}

/* ---- components/_chat-ux.css ---- */
/* ==========================================================================
   CHAT UX — polished voice/text conversation surface
   Loaded after chat + controls. Owns reading layout and interaction chrome.
   ========================================================================== */

:root {
  --chat-col: min(720px, calc(100% - 48px));
  --chat-pad-x: max(24px, calc((100% - 720px) / 2));
  --chat-gap: 28px;
}

/* ---- App content column: pure black stage ---- */
.app.voice-app .app-content,
.app.voice-app .main-area,
.app.voice-app #chat-panel {
  background: var(--s-bg-page) !important;
}

/* ---- Header: minimal instrument bar ---- */
.app.voice-app .sidebar-brand {
  display: none !important;
}
.app.voice-app .chat-only-header {
  position: relative !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  justify-content: space-between !important;
}

.app.voice-app .chat-only-header .header-left,
.app.voice-app .chat-only-header .header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 88px;
}
.app.voice-app .chat-only-header .header-right {
  justify-content: flex-end;
}

/* Center brand in header */
.app.voice-app .chat-only-header .chat-header-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.app.voice-app .chat-only-header .chat-header-mark {
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--s-accent) 55%, transparent);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--s-accent);
  background: var(--s-accent-subtle);
}
.app.voice-app .chat-only-header .chat-header-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.app.voice-app .chat-only-header .header-action-btn,
.app.voice-app .chat-only-header .header-hamburger {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}
.app.voice-app .chat-only-header .header-action-btn:hover,
.app.voice-app .chat-only-header .header-hamburger:hover {
  color: var(--s-text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Hide module title strip on chat tab */
.app.voice-app[data-active-tab="chat"] #activeTabTitle,
.app.voice-app[data-active-tab="chat"] .mod-page-title {
  display: none !important;
}

/* ---- Footer: almost invisible on chat ---- */
.app.voice-app[data-active-tab="chat"] .app-footer {
  height: 28px !important;
  min-height: 28px !important;
  background: var(--s-bg-page) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 0 14px !important;
}
.app.voice-app[data-active-tab="chat"] .footer-text,
.app.voice-app[data-active-tab="chat"] .footer-link {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.22) !important;
}
.app.voice-app[data-active-tab="chat"] .footer-link:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}
.app.voice-app[data-active-tab="chat"] .footer-nav-btn {
  color: rgba(255, 255, 255, 0.28) !important;
  background: transparent !important;
  border: 0 !important;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.app.voice-app[data-active-tab="chat"] .footer-nav-btn:hover {
  color: var(--s-text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.app.voice-app[data-active-tab="chat"] .footer-nav-btn .material-icons {
  font-size: 18px !important;
}

/* ---- Transcript: reading column ---- */
.app.voice-app #chat-panel {
  position: relative;
}

.transcript,
#transcript {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--chat-gap);
  padding: 20px var(--chat-pad-x) 28px !important;
  /* auto: thread open/switch must land at latest without top→bottom animation */
  scroll-behavior: auto;
  background: var(--s-bg-page) !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Space so last message clears the composer dock */
.transcript::after {
  content: "";
  flex: 0 0 12px;
}

/* ---- Empty state: editorial, not chatbot ---- */
.empty-state {
  flex: 1;
  min-height: 42vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
  padding: 48px 20px !important;
  text-align: center;
  user-select: none;
}
.empty-state.u-hidden { display: none !important; }

.empty-state-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--s-text-primary);
  background: linear-gradient(180deg, var(--s-bg-surface), var(--s-bg-page));
  box-shadow: none;
}
.empty-state-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
.empty-state-hint {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.32) !important;
  letter-spacing: 0 !important;
  max-width: 280px;
  line-height: 1.45 !important;
}
.empty-state-keys {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-state-keys kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  background: var(--s-bg-input);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 9px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* ---- Messages: shared reading width ---- */
.msg {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  align-self: center !important;
  padding: 0 !important;
  animation: none !important;
  position: relative;
}

.msg.user,
.msg.mira {
  align-self: center !important;
  max-width: 720px !important;
}

/* Meta row */
.msg .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0 !important; /* Aaron, 6 Oct: tighten speaker-to-text spacing. */
  padding: 0 !important;
  min-height: 20px;
}
.msg.user .meta {
  flex-direction: row !important; /* keep left-aligned for document feel */
  justify-content: flex-start;
}

.msg .sender {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--s-accent) !important;
}
.msg.user .sender {
  color: var(--s-accent) !important;
}
.msg.mira .sender {
  color: color-mix(in srgb, var(--s-accent) 80%, var(--p-white, #fff)) !important;
}
.msg .time {
  font-size: 11px !important;
  color: var(--s-text-tertiary, rgba(255, 255, 255, 0.4)) !important;
  font-variant-numeric: tabular-nums;
  margin-left: auto !important;
  opacity: 1 !important;
}

.msg-actions {
  margin-left: 0 !important;
  opacity: 0;
  transition: opacity 0.12s ease;
  gap: 4px !important;
}
.msg:hover .msg-actions,
.msg:focus-within .msg-actions {
  opacity: 1;
}
/* Touch: no hover to reveal. Re-assert the intent of _responsive.css's
   (hover:none)+(pointer:coarse) rule, which this file's later import beats. */
@media (hover: none) and (pointer: coarse) {
  .msg-actions { opacity: 1; }
}
.msg-action-btn {
  appearance: none;
  border: none !important;
  background: transparent !important;
  color: var(--s-text-tertiary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 28px;
  min-height: 28px;
  padding: 4px !important;
  font-size: 11px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
}
.msg-action-btn:hover {
  color: var(--s-text-primary) !important;
  border: none !important;
  background: transparent !important;
}
.msg-action-btn.copy-success {
  color: var(--s-status-success) !important;
  border: none !important;
}

/* ---- Content blocks ---- */
.msg.user .msg-content {
  background: transparent !important;
  color: var(--s-text-primary) !important;
  border: none !important;
  border-left: 2px solid var(--s-accent) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 14px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.011em !important;
  box-shadow: none !important;
}

.msg.mira .msg-content {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: -0.011em !important;
  box-shadow: none !important;
}

.msg.mira .msg-content.thinking-active {
  color: rgba(255, 255, 255, 0.45) !important;
  min-height: 24px;
}

/* Markdown — long-form readable structure (no decorative junk) */
.msg.mira .msg-content {
  line-height: 1.65 !important;
  max-width: 52rem;
}
.msg.mira .msg-content.thinking-active {
  max-width: none;
}
.msg.mira .msg-content h1,
.msg.mira .msg-content h2,
.msg.mira .msg-content h3,
.msg.mira .msg-content h4 {
  color: var(--s-text-primary, rgba(255,255,255,0.95)) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin: 1.35em 0 0.5em !important;
  line-height: 1.3 !important;
  border: none !important;
  padding: 0 !important;
}
.msg.mira .msg-content h1 {
  font-size: 1.22em !important;
  padding-bottom: 0.35em !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--s-text-primary) !important;
}
.msg.mira .msg-content h2 {
  font-size: 1.1em !important;
  color: var(--s-accent) !important;
}
.msg.mira .msg-content h3 {
  font-size: 1.02em !important;
  color: rgba(255,255,255,0.82) !important;
}
.msg.mira .msg-content h4 {
  font-size: 0.96em !important;
  color: rgba(255,255,255,0.7) !important;
}
.msg.mira .msg-content > :first-child { margin-top: 0 !important; }
.msg.mira .msg-content > :last-child { margin-bottom: 0 !important; }
.msg.mira .msg-content p {
  margin: 0 0 0.85em !important;
  line-height: 1.65 !important;
}
.msg.mira .msg-content p:last-child { margin-bottom: 0 !important; }
.msg.mira .msg-content p + p {
  margin-top: 0.15em !important;
}
.msg.mira .msg-content ul,
.msg.mira .msg-content ol {
  margin: 0.45em 0 0.9em !important;
  padding-left: 1.4em !important;
}
.msg.mira .msg-content li {
  margin: 0.32em 0 !important;
  line-height: 1.55 !important;
  padding-left: 0.15em !important;
}
.msg.mira .msg-content li > ul,
.msg.mira .msg-content li > ol {
  margin: 0.25em 0 0.35em !important;
}
.msg.mira .msg-content li > p {
  margin: 0.2em 0 !important;
}
.msg.mira .msg-content hr {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin: 1.2em 0 !important;
}
.msg.mira .msg-content strong {
  font-weight: 600 !important;
  color: rgba(255,255,255,0.95) !important;
}
.msg.mira .msg-content a {
  color: var(--s-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--s-accent) 40%, transparent);
}
.msg.mira .msg-content a:hover {
  color: var(--s-accent-hover) !important;
  text-decoration-color: var(--s-accent);
}
.msg.mira .msg-content code {
  font-family: var(--t-font-mono, ui-monospace, monospace) !important;
  font-size: 0.88em !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 0.12em 0.4em !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.msg.mira .msg-content pre {
  margin: 0.85em 0 !important;
  padding: 14px 16px !important;
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  overflow-x: auto;
  box-shadow: none !important;
}
.msg.mira .msg-content pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
.msg.mira .msg-content blockquote {
  margin: 0.85em 0 !important;
  padding: 4px 0 4px 14px !important;
  border-left: 2px solid color-mix(in srgb, var(--s-accent) 55%, transparent) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
}
.msg.mira .msg-content .md-table-wrap {
  margin: 0.9em 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.msg.mira .msg-content table {
  display: table;
  width: 100%;
  min-width: 260px;
  margin: 0 !important;
  border-collapse: collapse;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}
.msg.mira .msg-content th,
.msg.mira .msg-content td {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 9px 12px !important;
  text-align: left;
  vertical-align: top;
}
.msg.mira .msg-content th {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255,255,255,0.03) !important;
  white-space: nowrap;
}
.msg.mira .msg-content img {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 100%;
  margin: 0.5em 0;
}

/* User inline code on transparent bg */
.msg.user .msg-content code {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  color: var(--s-text-primary) !important;
}

/* Code / image wrappers */
.code-wrapper,
.img-wrapper {
  position: relative;
  border-radius: 10px;
}
.code-copy-btn,
.img-download-btn {
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(6px);
  font-size: 11px !important;
}
.code-copy-btn:hover,
.img-download-btn:hover {
  color: var(--s-text-primary) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Collapse long content — retired; full messages always shown */
.msg-content .collapse-content {
  max-height: none !important;
  overflow: visible !important;
}
.msg-content .collapse-toggle {
  display: none !important;
}

/* History divider */
.history-divider {
  max-width: 720px;
  width: 100%;
  margin: 4px auto !important;
  padding: 8px 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.22) !important;
}
.history-divider::before,
.history-divider::after {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Pending / tools */
.pending-banner,
.tool-call,
.tool-chip {
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

/* Thinking dots */
.thinking-dots {
  gap: 6px !important;
  padding: 6px 0 !important;
}
.thinking-dots span {
  width: 5px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  opacity: 1 !important;
}

/* ---- Scroll to bottom ---- */
.scroll-bottom-btn {
  all: unset;
  position: absolute !important;
  bottom: 18px !important;
  right: max(18px, calc((100% - 720px) / 2 - 8px)) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: var(--s-bg-input) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  box-shadow: none !important;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
  box-sizing: border-box;
}
.scroll-bottom-btn.show {
  display: flex !important;
  animation: chatFabIn 0.16s ease;
}
.scroll-bottom-btn:hover {
  color: var(--s-text-primary) !important;
  background: var(--s-bg-surface) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
}
.scroll-bottom-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor;
}
@keyframes chatFabIn {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- History drawer polish ---- */
.voice-sidebar {
  width: min(var(--layout-drawer-width, 280px), 94vw) !important;
  background: var(--s-bg-page) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 350 !important; /* above sticky header (200) and base overlay (300-1) */
}
.voice-sidebar:not(.is-dragging) {
  transform: none !important;
}
.voice-sidebar.open:not(.is-dragging) {
  right: 0;
}
.voice-sidebar .sidebar-header {
  flex-shrink: 0 !important;
}
.voice-sidebar-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sidebar-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 12px 12px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 10px !important;
}
.sidebar-new-chat {
  flex: 1;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--s-bg-surface) !important;
  color: var(--c-heading-color, var(--s-text-primary)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sidebar-new-chat:hover {
  background: var(--s-bg-hover) !important;
}
.sidebar-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
}
.sidebar-close:hover {
  color: var(--s-text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.voice-sidebar .sidebar-item {
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  transition: background 0.12s ease;
}
.voice-sidebar .sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.voice-sidebar .sidebar-item-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.25 !important;
}
.voice-sidebar .sidebar-item.active .sidebar-item-title {
  color: var(--s-text-primary);
}
.voice-sidebar .sidebar-item-preview {
  display: none !important;
}
.voice-sidebar .sidebar-item-meta {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.32) !important;
  line-height: 1.25 !important;
}
.sidebar-loading {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.04em;
}

/* ---- Drop overlay ---- */
.drop-overlay {
  inset: 12px !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(255, 255, 255, 0.22) !important;
  background: color-mix(in srgb, var(--s-bg-page) 82%, transparent) !important;
  backdrop-filter: blur(8px);
}
.drop-overlay p {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--s-text-secondary) !important;
}

/* ---- Composer sits cleanly under chat ---- */
.app.voice-app[data-active-tab="chat"] .controls {
  z-index: 30;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  :root {
    --chat-pad-x: 16px;
    --chat-gap: 22px;
  }
  .transcript,
  #transcript {
    padding: 14px 16px 20px !important;
  }
  .msg,
  .msg.user,
  .msg.mira {
    max-width: 100% !important;
  }
  .msg-actions { opacity: 1; }
  .app.voice-app .chat-only-header .chat-header-name {
    display: none;
  }
  .scroll-bottom-btn {
    right: 14px !important;
    bottom: 14px !important;
  }
  .empty-state-keys { display: none; }

  /* Compact thread-row actions: 3×44px + time ate the 300px rail */
  .voice-sidebar .sidebar-item-header {
    gap: 2px !important;
  }
  .voice-sidebar .sidebar-item-time {
    display: none !important;
  }
  .voice-sidebar .sidebar-item-agent,
  .voice-sidebar .sidebar-item-agent.is-default {
    display: inline-flex !important;
    align-items: center;
    max-width: 3.6rem;
    min-height: 26px;
    padding: 0 5px;
    opacity: 0.85;
  }
  .voice-sidebar .sidebar-item-rename {
    margin-left: auto !important;
  }
  .voice-sidebar .sidebar-item-rename,
  .voice-sidebar .sidebar-item-fork,
  .voice-sidebar .sidebar-item-archive,
  .voice-sidebar .sidebar-item-delete {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    opacity: 0.7;
  }
}

html.mirai-mobile .voice-sidebar .sidebar-item-header,
.mirai-mobile .voice-sidebar .sidebar-item-header {
  gap: 2px !important;
}
html.mirai-mobile .voice-sidebar .sidebar-item-time,
.mirai-mobile .voice-sidebar .sidebar-item-time {
  display: none !important;
}
html.mirai-mobile .voice-sidebar .sidebar-item-agent,
html.mirai-mobile .voice-sidebar .sidebar-item-agent.is-default,
.mirai-mobile .voice-sidebar .sidebar-item-agent,
.mirai-mobile .voice-sidebar .sidebar-item-agent.is-default {
  display: inline-flex !important;
  align-items: center;
  max-width: 3.6rem;
  min-height: 26px;
  padding: 0 5px;
  opacity: 0.85;
}
html.mirai-mobile .voice-sidebar .sidebar-item-rename,
.mirai-mobile .voice-sidebar .sidebar-item-rename {
  margin-left: auto !important;
}
html.mirai-mobile .voice-sidebar .sidebar-item-rename,
html.mirai-mobile .voice-sidebar .sidebar-item-fork,
html.mirai-mobile .voice-sidebar .sidebar-item-archive,
html.mirai-mobile .voice-sidebar .sidebar-item-delete,
.mirai-mobile .voice-sidebar .sidebar-item-rename,
.mirai-mobile .voice-sidebar .sidebar-item-fork,
.mirai-mobile .voice-sidebar .sidebar-item-archive,
.mirai-mobile .voice-sidebar .sidebar-item-delete {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  opacity: 0.7;
}

@media (max-width: 480px) {
  :root { --chat-pad-x: 12px; --chat-gap: 18px; }
  .transcript, #transcript {
    padding: 12px 12px 16px !important;
  }
  .msg.user .msg-content,
  .msg.mira .msg-content {
    font-size: 15px !important;
  }
}

/* Light mode chat stage — semantic tokens (flip with [data-theme="light"]) */
[data-theme="light"] .app.voice-app .app-content,
[data-theme="light"] .app.voice-app .main-area,
[data-theme="light"] .app.voice-app #chat-panel,
[data-theme="light"] .transcript,
[data-theme="light"] #transcript {
  background: var(--s-bg-page) !important;
}
[data-theme="light"] .app.voice-app .chat-only-header {
  background: color-mix(in srgb, var(--s-bg-page) 85%, transparent) !important;
  border-bottom-color: var(--s-border-subtle, var(--s-border)) !important;
}
[data-theme="light"] .app.voice-app .chat-only-header .chat-header-name,
[data-theme="light"] .app.voice-app .chat-only-header .header-action-btn {
  color: var(--s-text-secondary) !important;
}
[data-theme="light"] .app.voice-app .chat-only-header .chat-header-mark {
  color: var(--c-heading-color, var(--s-text-primary));
  border-color: var(--s-border);
  background: var(--s-bg-surface);
}
[data-theme="light"] .msg.user .msg-content {
  color: var(--s-text-primary) !important;
  border-left-color: var(--s-accent) !important;
}
[data-theme="light"] .msg.mira .msg-content {
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .msg .sender {
  color: var(--s-text-secondary) !important;
}
[data-theme="light"] .empty-state-title { color: var(--c-heading-color, var(--s-text-primary)) !important; }
[data-theme="light"] .empty-state-hint { color: var(--s-text-secondary) !important; }
[data-theme="light"] .empty-state-mark {
  color: var(--c-heading-color, var(--s-text-primary));
  border-color: var(--s-border);
  background: var(--s-bg-surface);
  box-shadow: none;
}
[data-theme="light"] .empty-state-keys kbd {
  color: var(--s-text-secondary);
  background: var(--s-bg-surface);
  border-color: var(--s-border);
}
[data-theme="light"] .msg-content .collapse-toggle {
  display: none !important;
}
[data-theme="light"] .voice-sidebar {
  background: var(--s-bg-surface) !important;
  border-left-color: var(--s-border-subtle, var(--s-border)) !important;
}
[data-theme="light"] .voice-sidebar .sidebar-item-title {
  color: var(--s-text-primary);
}
[data-theme="light"] .voice-sidebar .sidebar-item-time {
  color: var(--s-text-secondary) !important;
}
[data-theme="light"] .voice-sidebar .sidebar-item {
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .voice-sidebar .sidebar-date-group {
  color: var(--mirai-teal, #21BFC1) !important;
}
[data-theme="light"] .scroll-bottom-btn {
  background: var(--s-bg-surface) !important;
  border-color: var(--s-border) !important;
  color: var(--s-text-secondary) !important;
  box-shadow: none !important;
}

/* ---- Live stream / thinking bubble (full reading column) ---- */
#thinkingIndicator.msg,
.msg.thinking-live {
  width: 100% !important;
  max-width: 720px !important;
  align-self: center !important;
}
#thinkingIndicator .msg-content,
.msg.thinking-live .msg-content.thinking-active,
.msg.mira .msg-content.thinking-active.streaming {
  width: 100% !important;
  max-width: 100% !important;
  color: rgba(255, 255, 255, 0.78) !important;
  min-height: 28px;
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
}
.stream-tools .loop-tool-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.stream-thought {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  color: var(--s-text-secondary) !important;
  margin-top: 0 !important;
}
.stream-thought-label {
  color: var(--s-text-secondary) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.stream-thought-body {
  color: var(--s-text-tertiary, rgba(255,255,255,0.45)) !important;
  font-family: inherit !important;
}
.stream-answer,
.stream-body {
  width: 100% !important;
  max-width: 100% !important;
  color: var(--s-text-primary) !important;
}
.stream-body p:last-child { margin-bottom: 0 !important; }

/* ---- Shell/module header consistency ---- */
.app.voice-app .chat-only-header {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: var(--s-bg-page) !important;
}
.app.voice-app .chat-only-header .chat-header-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--s-text-primary) !important;
}
.app.voice-app .chat-only-header .header-action-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}


/* Brand removed from header (agent name lives in empty-state only) */
.app.voice-app .chat-only-header .chat-header-brand {
  display: none !important;
}


/* ---- Shell chrome polish (2026-07-12) ---- */
.app.voice-app .chat-only-header .chat-header-brand {
  display: none !important;
}
.app.voice-app .app-footer,
.app.voice-app .app-footer-empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
  padding: 0 !important;
}
.app.voice-app[data-active-tab="chat"] .controls {
  background: var(--s-bg-page) !important;
  box-shadow: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.app.voice-app[data-active-tab="chat"] .controls::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
.app.voice-app .chat-only-header {
  justify-content: space-between !important;
}
.app.voice-app .chat-only-header .header-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}


/* ---- Conversation history drawer (right) — layout cleanup ---- */
.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-header-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.sidebar-new-chat {
  width: 100% !important;
  flex: none !important;
  justify-content: center !important;
  height: 36px !important;
  border-radius: 10px !important;
  gap: 6px !important;
}
.sidebar-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sidebar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--s-text-tertiary);
  pointer-events: none;
}
.sidebar-search-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}
/* input.sidebar-search beats input[type=search] so the icon cannot cover
   the placeholder. 34px lines up with the archive and New buttons. */
input.sidebar-search {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 34px !important;
  min-height: 0;
  padding: 0 12px 0 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--s-hairline-strong) !important;
  background: var(--s-bg-input) !important;
  color: var(--s-text-primary) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-family: inherit;
  outline: none;
  box-shadow: none;
}
input.sidebar-search:focus {
  border-color: var(--s-border-strong) !important;
  box-shadow: 0 0 0 3px var(--s-hover-wash);
}
input.sidebar-search::placeholder {
  color: var(--s-text-tertiary);
  opacity: 1;
}
@media (max-width: 768px) {
  input.sidebar-search { font-size: 16px !important; }
}
.voice-sidebar .sidebar-list {
  flex: none;
  overflow: visible;
  padding: 0;
}
/* Threads and the archive action share one scrolling area. */
.voice-sidebar .sidebar-thread-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* Keep the content inset inside a full-height scrollbar (Aaron, 27 Sep). */
  margin-block: 0;
  padding: 24px 0 12px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.voice-sidebar .sidebar-date-group {
  display: block !important;
  padding: 10px 12px 3px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--mirai-teal, #21BFC1) !important;
}
.voice-sidebar .sidebar-item {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 2px solid transparent !important;
  gap: 2px;
  color: var(--s-text-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.voice-sidebar .sidebar-item:hover {
  background: var(--s-sidebar-hover) !important;
  border-left-color: var(--s-accent) !important;
}
.voice-sidebar .sidebar-item.active {
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 2px solid transparent !important;
  box-shadow: none !important;
}
.voice-sidebar .sidebar-item.is-empty .sidebar-item-title {
  font-style: italic;
  opacity: 0.75;
}
.voice-sidebar .sidebar-item-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0;
}
.voice-sidebar .sidebar-item-pin {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--s-text-secondary, rgba(255, 255, 255, 0.55));
}
.voice-sidebar .sidebar-item.is-pinned .sidebar-item-pin {
  color: var(--s-text-primary, rgba(255, 255, 255, 0.92));
}
.voice-sidebar .thread-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  background: var(--s-text-tertiary, rgba(255, 255, 255, 0.25));
  box-shadow: none !important;
}
.voice-sidebar .thread-dot.thread-idle {
  background: var(--s-text-tertiary, rgba(255, 255, 255, 0.25)) !important;
}
.voice-sidebar .thread-dot.thread-running {
  background: var(--s-status-success) !important;
  box-shadow: none !important;
  animation: threadPulse 1.2s ease-in-out infinite;
}
.voice-sidebar .thread-dot.thread-queued {
  background: var(--s-status-warning) !important;
  box-shadow: none !important;
}
.voice-sidebar .thread-dot.thread-error {
  background: var(--s-status-error) !important;
  box-shadow: none !important;
}
.voice-sidebar .thread-dot.thread-done-flash {
  background: var(--s-status-success) !important;
  box-shadow: none !important;
  animation: none !important;
}
/* Per-thread: API recycle required for this thread's work to load */
.voice-sidebar .sidebar-item-restart {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s-status-warning);
  border: 1px solid color-mix(in srgb, var(--s-status-warning) 45%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.3;
  white-space: nowrap;
}
/* Sticky Quorum agent badge — click to reassign */
.voice-sidebar .sidebar-item-agent {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--s-text-secondary, rgba(255, 255, 255, 0.55));
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-sidebar .sidebar-item-agent:hover,
.voice-sidebar .sidebar-item-agent:focus-visible {
  color: var(--s-text-primary, rgba(255, 255, 255, 0.9));
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}
.voice-sidebar .sidebar-item-agent.is-default {
  opacity: 0.55;
}
.voice-sidebar .sidebar-item:hover .sidebar-item-agent.is-default,
.voice-sidebar .sidebar-item:focus-within .sidebar-item-agent.is-default {
  opacity: 0.85;
}
.thr-new-overlay .thr-new-hint {
  margin: 6px 0 0;
  font-size: var(--t-font-size-xs, 12px);
  color: var(--s-text-secondary, rgba(255, 255, 255, 0.55));
}
.thr-new-modal .mod-form-group {
  margin-bottom: 12px;
}
.voice-sidebar .sidebar-item.pending-restart .sidebar-item-title {
  color: var(--s-status-warning);
}
@keyframes threadPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.voice-sidebar .sidebar-item-title {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.9);
  opacity: 1; /* Allow the running-title opacity animation to render. */
  visibility: visible !important;
}
.voice-sidebar .sidebar-item-time {
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
  min-width: 4.5em !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Sidebar message preview/summary — hidden (title + time only) */
.voice-sidebar .sidebar-item-preview {
  display: none !important;
}
.voice-sidebar .sidebar-item-meta {
  display: flex;
  gap: 6px;
  padding-left: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.2;
  margin-top: 0;
}
.voice-sidebar .sidebar-item-queue {
  color: var(--s-status-warning);
}
.voice-sidebar .sidebar-item-rename,
.voice-sidebar .sidebar-item-fork,
.voice-sidebar .sidebar-item-archive,
.voice-sidebar .sidebar-item-delete {
  opacity: 0;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.voice-sidebar .sidebar-item:hover .sidebar-item-rename,
.voice-sidebar .sidebar-item:hover .sidebar-item-fork,
.voice-sidebar .sidebar-item:hover .sidebar-item-archive,
.voice-sidebar .sidebar-item:hover .sidebar-item-delete,
.voice-sidebar .sidebar-item:focus-within .sidebar-item-rename,
.voice-sidebar .sidebar-item:focus-within .sidebar-item-fork,
.voice-sidebar .sidebar-item:focus-within .sidebar-item-archive,
.voice-sidebar .sidebar-item:focus-within .sidebar-item-delete {
  opacity: 1;
}
.voice-sidebar .sidebar-item-rename:hover,
.voice-sidebar .sidebar-item-fork:hover,
.voice-sidebar .sidebar-item-archive:hover,
.voice-sidebar .sidebar-item-delete:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--s-text-primary);
}
.voice-sidebar .sidebar-item-delete:hover {
  color: var(--s-status-error);
}
.voice-sidebar .sidebar-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
.voice-sidebar .sidebar-empty .material-icons {
  font-size: 28px;
  opacity: 0.35;
  display: block;
  margin-bottom: 8px;
}
.voice-sidebar .sidebar-empty-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 4px;
}
.sidebar-rename-input {
  width: 100%;
  background: var(--s-bg-input);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--s-text-primary);
  font-size: 13px;
  padding: 4px 8px;
  font-family: inherit;
}

/* ==========================================================================
   TEAL ACCENT — brand #2EB8DB via --s-accent
   Restores teal into monochrome chat chrome without going full neon.
   ========================================================================== */
.empty-state-mark {
  border-color: color-mix(in srgb, var(--s-accent) 45%, transparent) !important;
  color: var(--s-accent) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--s-accent) 12%, var(--s-bg-surface)),
    var(--s-bg-page)
  ) !important;
}
.empty-state-title {
  color: var(--s-text-primary) !important;
}
.empty-state-keys kbd {
  border-color: color-mix(in srgb, var(--s-accent) 22%, transparent) !important;
  color: color-mix(in srgb, var(--s-accent) 70%, var(--p-white, #fff)) !important;
}

/* Stream / thinking — no coloured frame; accordion is the chrome */
.stream-thought {
  border: none !important;
  color: var(--s-text-secondary) !important;
}
#thinkingIndicator .msg-content,
.msg.thinking-live .msg-content.thinking-active,
.msg.mira .msg-content.thinking-active.streaming {
  border-left: none !important;
  padding-left: 0 !important;
}
.stream-tools .loop-tool-card {
  border-color: color-mix(in srgb, var(--s-accent) 22%, var(--s-border)) !important;
}

/* Selection + focus */
.msg.mira .msg-content ::selection,
.msg.user .msg-content ::selection {
  background: color-mix(in srgb, var(--s-accent) 35%, transparent);
  color: var(--s-text-primary);
}
.msg-action-btn:hover {
  color: var(--s-accent) !important;
}
.scroll-bottom-btn:hover {
  border-color: color-mix(in srgb, var(--s-accent) 45%, transparent) !important;
  color: var(--s-accent) !important;
}

/* Strong / emphasis can pick up a touch of teal in assistant copy */
.msg.mira .msg-content strong {
  color: color-mix(in srgb, var(--s-accent) 35%, var(--s-text-primary)) !important;
}

/* History drawer active thread — neutral only, no accent edge/title tint */
.voice-sidebar .sidebar-item.active {
  border: none !important;
  border-left: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.voice-sidebar .sidebar-item.active .sidebar-item-title {
  color: var(--s-text-primary);
}
.voice-sidebar .thread-dot.thread-running {
  background: var(--s-status-success) !important;
  box-shadow: none !important;
}

/* Composer focus — thin accent ring only */
.text-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--s-accent) 55%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-accent) 28%, transparent) !important;
}
.text-input-wrap .send-btn {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  box-shadow: none !important;
}
.text-input-wrap .send-btn:hover {
  background: var(--s-accent-hover, var(--s-accent)) !important;
  color: var(--s-accent-on) !important;
}

/* Module / shell titles that share chat chrome */
.mod-nav-title,
.mod-page-title,
#activeTabTitle {
  color: var(--s-text-primary);
}
.mod-nav-title::after,
/* keep titles readable; teal only on accents below */

/* Light theme: keep teal identity */
[data-theme="light"] .msg.user .msg-content {
  border-left-color: var(--s-accent) !important;
}
[data-theme="light"] .msg.user .sender,
[data-theme="light"] .msg.mira .sender {
  color: var(--s-accent) !important;
}
[data-theme="light"] .msg.mira .msg-content h1,
[data-theme="light"] .msg.mira .msg-content h2,
[data-theme="light"] .msg.mira .msg-content h3 {
  color: var(--s-accent) !important;
}
[data-theme="light"] .app.voice-app .chat-only-header .chat-header-name,
[data-theme="light"] .app.voice-app .chat-only-header .chat-header-mark {
  color: var(--s-accent) !important;
  border-color: color-mix(in srgb, var(--s-accent) 40%, transparent);
}

/* ==========================================================================
   LIVE ACTIVITY — thinking status, tool cards, composer strip
   Makes agent/tool work visible while the model is busy.
   ========================================================================== */
/* Status row pinned under reply + thought — blue live activity */
.thinking-status-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding-top: 8px;
  min-height: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  order: 9;
}
.thinking-status-row[hidden] {
  display: none !important;
}
.thinking-dots {
  display: inline-flex !important;
  align-items: center;
  gap: 5px !important;
  padding: 0 !important;
}
.thinking-dots span {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--s-status-info) !important;
  opacity: 0.85 !important;
  animation: thinkingDot 1.2s ease-in-out infinite !important;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s !important; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s !important; }
@keyframes thinkingDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.thinking-status-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--s-status-info-text, var(--s-status-info)) !important;
  letter-spacing: -0.01em;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.thinking-phase {
  display: none !important; /* phase lives on the thought accordion / composer */
}
.stream-tools,
.msg-tools,
.msg .stream-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 10px;
  width: 100%;
}
/* Permanent tool boxes on finished assistant messages (whole harness) */
.msg.mira > .msg-tools,
.msg.mira > .stream-tools {
  margin: 2px 0 8px;
  padding: 0 2px;
}
.stream-tools .loop-tool-card,
.msg-tools .loop-tool-card,
.msg .stream-tools .loop-tool-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--s-bg-surface) !important;
  border: 1px solid color-mix(in srgb, var(--s-accent) 22%, var(--s-border)) !important;
  border-left: 3px solid var(--s-accent) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
.stream-tools .loop-tool-card.calling,
.msg-tools .loop-tool-card.calling {
  border-left-color: var(--s-accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-accent) 12%, transparent);
}
.stream-tools .loop-tool-card.success,
.msg-tools .loop-tool-card.success {
  border-left-color: var(--s-status-success) !important;
}
.stream-tools .loop-tool-card.error,
.msg-tools .loop-tool-card.error {
  border-left-color: var(--s-status-error) !important;
}
.stream-tools .loop-tool-badge,
.msg-tools .loop-tool-badge {
  background: var(--s-accent-subtle) !important;
  color: var(--s-accent) !important;
}
.stream-tools .loop-tool-name,
.msg-tools .loop-tool-name {
  color: var(--s-text-primary) !important;
  font-weight: 600 !important;
}
.stream-tools .loop-tool-spinner::after,
.msg-tools .loop-tool-spinner::after {
  border-color: color-mix(in srgb, var(--s-accent) 35%, transparent) !important;
  border-top-color: var(--s-accent) !important;
  animation: tool-spin 0.75s linear infinite !important;
}
.stream-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--s-accent);
  animation: streamCaret 0.9s step-end infinite;
}
@keyframes streamCaret {
  50% { opacity: 0; }
}

[data-theme="light"] .stream-thought {
  border: none !important;
  color: var(--s-text-secondary) !important;
}
[data-theme="light"] .stream-thought-label { color: var(--s-text-secondary) !important; }
[data-theme="light"] .stream-thought-body {
  color: var(--s-text-tertiary) !important;
}
[data-theme="light"] .thinking-status-label { color: var(--s-status-info) !important; }
[data-theme="light"] .thinking-phase { color: var(--s-status-info) !important; }
[data-theme="light"] .thinking-dots span { background: var(--s-status-info) !important; }
[data-theme="light"] .thinking-status-row {
  border-top-color: color-mix(in srgb, var(--s-status-info) 20%, transparent);
}

.stream-answer { margin-top: 4px; }
.msg.thinking-live .msg-content.thinking-active {
  min-height: 32px !important;
}

/* Composer activity strip — quiet secondary status while model works */
.composer-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto 8px;
  width: 100%;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--s-text-secondary);
  letter-spacing: -0.01em;
  box-sizing: border-box;
}
.composer-activity[hidden] { display: none !important; }
.composer-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s-text-tertiary);
  flex-shrink: 0;
  animation: composerPulse 1.4s ease-in-out infinite;
}
@keyframes composerPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1); }
}
.composer-activity-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--s-text-secondary);
}


/* Parallel thread sidebar polish — run state via thread-dot only, no edge bars */
.voice-sidebar .sidebar-item.is-running,
.voice-sidebar .sidebar-item.just-completed {
  box-shadow: none;
}
.voice-sidebar .sidebar-item.has-unread .sidebar-item-title {
  color: var(--s-text-primary);
  font-weight: 600 !important;
}
.voice-sidebar .sidebar-item.has-unread .sidebar-item-title::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--s-accent);
  vertical-align: middle;
}
.voice-sidebar .thread-dot.thread-running {
  background: var(--s-status-success) !important;
  box-shadow: none !important;
  animation: threadPulse 1.1s ease-in-out infinite !important;
}
.voice-sidebar .thread-dot.thread-done-flash {
  background: var(--s-status-success) !important;
  box-shadow: none !important;
  animation: none !important;
}
.voice-sidebar .sidebar-item-runlabel {
  display: none !important; /* run state via thread-dot only */
}
.voice-sidebar .sidebar-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
  margin-top: 0;
}
.voice-sidebar .sidebar-item-meta:empty {
  display: none;
}
.voice-sidebar .sidebar-item-count {
  display: none !important; /* message count removed from thread list */
}
.voice-sidebar .sidebar-item-queue {
  font-size: 10px;
  color: var(--s-status-warning);
  flex-shrink: 0;
  white-space: nowrap;
}
.voice-sidebar .sidebar-item-project {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--s-text-secondary);
}

/* Streaming answer — same markdown rhythm as final .msg-content */
.stream-answer .stream-body {
  line-height: 1.65 !important;
  max-width: 52rem;
}
.stream-answer .stream-body h1,
.stream-answer .stream-body h2,
.stream-answer .stream-body h3,
.stream-answer .stream-body h4 {
  margin: 1.25em 0 0.45em !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--s-text-primary) !important;
  letter-spacing: -0.015em !important;
}
.stream-answer .stream-body h1 { font-size: 1.22em !important; }
.stream-answer .stream-body h2 { font-size: 1.1em !important; color: var(--s-accent) !important; }
.stream-answer .stream-body h3 { font-size: 1.02em !important; color: rgba(255,255,255,0.82) !important; }
.stream-answer .stream-body > :first-child { margin-top: 0 !important; }
.stream-answer .stream-body p { margin: 0 0 0.85em !important; line-height: 1.65 !important; }
.stream-answer .stream-body p:last-child { margin-bottom: 0 !important; }
.stream-answer .stream-body ul,
.stream-answer .stream-body ol {
  margin: 0.45em 0 0.9em !important;
  padding-left: 1.4em !important;
  list-style: disc outside !important;
}
.stream-answer .stream-body ol { list-style-type: decimal !important; }
.stream-answer .stream-body li { margin: 0.32em 0 !important; line-height: 1.55 !important; }
.stream-answer .stream-body hr {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin: 1.2em 0 !important;
}
.stream-answer .stream-body pre {
  margin: 0.85em 0 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  overflow-x: auto;
  background: var(--s-bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.stream-answer .stream-body code {
  font-family: var(--t-font-mono, ui-monospace, monospace) !important;
  font-size: 0.88em !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 0.12em 0.4em !important;
}
.stream-answer .stream-body pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.stream-answer .stream-body .md-table-wrap {
  margin: 0.9em 0 !important;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.stream-answer .stream-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px !important;
}
.stream-answer .stream-body th,
.stream-answer .stream-body td {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 9px 12px !important;
  text-align: left;
  vertical-align: top;
}
.stream-answer .stream-plain {
  white-space: pre-wrap !important;
  word-break: break-word;
  line-height: 1.65 !important;
}

/* Force visible list markers + readable structure (override any reset) */
.msg.mira .msg-content ul {
  list-style: disc outside !important;
  list-style-type: disc !important;
  padding-left: 1.6em !important;
  margin: 0.6em 0 1em !important;
}
.msg.mira .msg-content ol {
  list-style: decimal outside !important;
  list-style-type: decimal !important;
  padding-left: 1.6em !important;
  margin: 0.6em 0 1em !important;
}
.msg.mira .msg-content li {
  display: list-item !important;
  list-style: inherit !important;
  margin: 0.35em 0 !important;
}
.msg.mira .msg-content li::marker {
  color: var(--s-accent);
}
.msg.mira .msg-content h1,
.msg.mira .msg-content h2,
.msg.mira .msg-content h3 {
  display: block !important;
}
.msg.mira .msg-content p {
  display: block !important;
}

/* === HARD READABILITY — spacing that cannot collapse ===
   Selectors cover .mira (canonical) and .mirai (legacy). Also style
   content inside .collapse-content (long messages wrap children). */
.msg.mira .msg-content,
.msg.mirai .msg-content {
  line-height: 1.7 !important;
  overflow: visible !important;
}
.msg.mira .msg-content p,
.msg.mirai .msg-content p,
.msg.mira .msg-content .collapse-content p,
.msg.mirai .msg-content .collapse-content p {
  margin: 0 0 1em !important;
  display: block !important;
}
.msg.mira .msg-content h1,
.msg.mira .msg-content h2,
.msg.mira .msg-content h3,
.msg.mira .msg-content h4,
.msg.mirai .msg-content h1,
.msg.mirai .msg-content h2,
.msg.mirai .msg-content h3,
.msg.mirai .msg-content h4 {
  display: block !important;
  margin: 1.4em 0 0.55em !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
}
.msg.mira .msg-content h1,
.msg.mirai .msg-content h1 { font-size: 1.35em !important; }
.msg.mira .msg-content h2,
.msg.mirai .msg-content h2 { font-size: 1.2em !important; color: var(--s-accent) !important; }
.msg.mira .msg-content h3,
.msg.mirai .msg-content h3 { font-size: 1.08em !important; }
.msg.mira .msg-content ul,
.msg.mira .msg-content ol,
.msg.mirai .msg-content ul,
.msg.mirai .msg-content ol {
  display: block !important;
  margin: 0.75em 0 1.1em !important;
  padding-left: 1.75em !important;
  list-style-position: outside !important;
}
.msg.mira .msg-content ul,
.msg.mirai .msg-content ul { list-style-type: disc !important; }
.msg.mira .msg-content ol,
.msg.mirai .msg-content ol { list-style-type: decimal !important; }
.msg.mira .msg-content li,
.msg.mirai .msg-content li {
  display: list-item !important;
  margin: 0.4em 0 !important;
  line-height: 1.6 !important;
}
.msg.mira .msg-content li::marker,
.msg.mirai .msg-content li::marker {
  color: var(--s-accent) !important;
}
.msg.mira .msg-content pre,
.msg.mirai .msg-content pre {
  display: block !important;
  margin: 1em 0 !important;
  padding: 12px 14px !important;
}
.msg.mira .msg-content hr,
.msg.mirai .msg-content hr {
  display: block !important;
  margin: 1.4em 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}
.msg.mira .msg-content strong,
.msg.mirai .msg-content strong {
  font-weight: 650 !important;
  color: var(--s-text-primary) !important;
}
.msg.mira .msg-content table,
.msg.mirai .msg-content table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0.85em 0 !important;
}
.msg.mira .msg-content th,
.msg.mira .msg-content td,
.msg.mirai .msg-content th,
.msg.mirai .msg-content td {
  display: table-cell !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ---- Live board strip (shared facts above thread list) ---- */
.live-board-strip {
  flex-shrink: 0 !important;
  padding: 8px 12px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  max-height: 40% !important;
  overflow-y: auto !important;
}
.live-board-strip[hidden] { display: none !important; }
.lb-strip-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mirai-teal, #21BFC1) !important;
  margin-bottom: 6px !important;
}
.lb-strip-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.lb-strip-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
.lb-strip-item .lb-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  margin-top: 5px !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.25) !important;
}
.lb-strip-item.lb-active .lb-dot { background: var(--s-accent) !important; }
.lb-strip-item.lb-bad .lb-dot { background: var(--s-status-error) !important; }
.lb-strip-item.lb-ok .lb-dot { background: var(--s-status-success) !important; }
.lb-strip-item .lb-sum {
  min-width: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* ---- Compact thread toolbar ---- */
.sidebar-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.sidebar-search-row .sidebar-search-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html[data-theme] .voice-sidebar .sidebar-new-chat,
.sidebar-header .sidebar-new-chat,
.sidebar-search-row .sidebar-new-chat {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 72px !important;
  height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 8px !important;
  border: 0 !important;
  margin-left: auto !important;
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
html[data-theme] .voice-sidebar .sidebar-new-chat:hover,
.sidebar-search-row .sidebar-new-chat:hover {
  background: var(--s-bg-hover) !important;
  color: var(--s-text-primary) !important;
  opacity: 1 !important;
  filter: none;
}
.voice-sidebar .sidebar-new-chat svg,
.sidebar-search-row .sidebar-new-chat svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  flex-shrink: 0;
}
.sidebar-new-chat-label {
  line-height: 1;
}
/* Headerless threads rail: keep New within reach while the list scrolls. */
.voice-sidebar .sidebar-new-thread-fab {
  position: absolute;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--s-bg-page);
  color: var(--mirai-teal, #21BFC1);
  cursor: pointer;
}
[data-theme="light"] .voice-sidebar .sidebar-new-thread-fab {
  color: #087677;
}
.voice-sidebar .sidebar-new-thread-fab:hover {
  background: var(--s-bg-hover);
}
.voice-sidebar .sidebar-new-thread-fab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.voice-sidebar .sidebar-thread-scroll {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: 80px;
}
.voice-sidebar .sidebar-list-end {
  padding: 6px 12px max(10px, env(safe-area-inset-bottom, 0px));
}
.voice-sidebar .sidebar-archived-toggle {
  width: auto;
  min-height: 32px;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s-text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.voice-sidebar .sidebar-archived-toggle:hover,
.voice-sidebar .sidebar-archived-toggle.is-on {
  background: var(--s-bg-hover);
  color: var(--s-text-primary);
}
.voice-sidebar .sidebar-archived-toggle:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}
.voice-sidebar .sidebar-archived-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}
/* Selected thread: theme-aware neutral fill, independent of title activity. */
.voice-sidebar .sidebar-item.active {
  background: var(--s-sidebar-active) !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* Reduced motion: these three declare `animation … !important` on class
   selectors, which out-specifies the universal catch-all in _animations.css. */
@media (prefers-reduced-motion: reduce) {
  .thinking-dots span,
  .thinking-dots span:nth-child(2),
  .thinking-dots span:nth-child(3) {
    animation: none !important;
    opacity: 0.85 !important;
    transform: none !important;
  }
  .stream-tools .loop-tool-spinner::after,
  .msg-tools .loop-tool-spinner::after {
    animation: none !important;
  }
  .voice-sidebar .thread-dot.thread-running {
    animation: none !important;
  }
}

/* ==========================================================================
   CHAT UPLIFT — 22 September 2026
   One presentation contract for live, restored and legacy provider messages.
   Reading text stays 15px; controls 13px; heading hierarchy 18 / 16 / 13.
   Scoped IDs intentionally beat historical and later brand overrides.
   ========================================================================== */
#chat-panel,
#composerActivity {
  --chat-activity-accent: var(--s-accent);
  font-family: var(--t-font-family, Arial, sans-serif);
}
/* Bright brand teal is reserved for dark surfaces; this shade gives light
   surfaces the same teal identity with readable normal-sized status text. */
[data-theme="light"] #chat-panel,
[data-theme="light"] #composerActivity { --chat-activity-accent: #087677; }
/* Speaker labels (YOU / MIRAI). Two IDs beat the later brand rule that
   forced these to secondary grey. Light uses the darker activity teal. */
#chat-panel #transcript .msg .sender {
  color: var(--chat-activity-accent) !important;
}

#chat-panel .msg,
#chat-panel .msg-content,
#chat-panel .stream-answer,
#chat-panel .stream-body { min-width: 0; box-sizing: border-box; }
#chat-panel .msg.loop-msg { border-left: 0; overflow: visible; }
#chat-panel #transcript :is(.msg-content, .stream-body) {
  font-family: var(--t-font-family, Arial, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: normal !important;
  color: var(--s-text-primary) !important;
  overflow-wrap: anywhere;
}
#chat-panel #transcript .msg.mirai .msg-content {
  padding: 2px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) :is(h1,h2,h3,h4,h5,h6) {
  display: block !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  color: var(--s-text-primary) !important;
  margin: 20px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) h1 { font-size: 18px !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) h2 { font-size: 16px !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) :is(h3,h4,h5,h6) { font-size: 13px !important; }
[data-theme-mode="mixed"] #chat-panel #transcript :is(.msg-content, .stream-body) :is(h1,h2,h3,h4,h5,h6) {
  color: var(--chat-activity-accent) !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) p { margin: 0 0 12px !important; line-height: 1.65 !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) :is(ul,ol) {
  margin: 8px 0 14px !important;
  padding-left: 24px !important;
  list-style-position: outside !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) ul { list-style-type: disc !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) ol { list-style-type: decimal !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) ul ul { list-style-type: circle !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) li { margin: 5px 0 !important; line-height: 1.6 !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) li > :is(ul,ol,p) { margin: 4px 0 !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) li::marker { color: var(--s-text-secondary) !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) > :first-child { margin-top: 0 !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) > :last-child { margin-bottom: 0 !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) :is(strong,em) { color: inherit !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) strong { font-weight: 600 !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) a {
  color: var(--chat-activity-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
#chat-panel #transcript :is(.msg-content, .stream-body) blockquote {
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  border-left: 2px solid var(--s-border-strong) !important;
  margin: 12px 0 !important;
  padding: 4px 0 4px 14px !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) hr {
  border: 0 !important;
  border-top: 1px solid var(--s-border) !important;
  margin: 20px 0 !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) code {
  font-family: var(--t-font-mono, ui-monospace, monospace) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--s-text-primary) !important;
  background: var(--s-bg-surface-sunken) !important;
  border: 1px solid var(--s-border-subtle) !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) pre {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
  background: var(--s-bg-surface-sunken) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) pre code {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.55 !important;
}
#chat-panel #transcript .code-wrapper pre { padding-top: 44px !important; }
#chat-panel #transcript :is(.msg-content, .stream-body) .md-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--s-border) !important;
  border-radius: 6px !important;
  margin: 12px 0 !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) table {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border-collapse: collapse !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) :is(th,td) {
  padding: 8px 10px !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  border: 1px solid var(--s-border) !important;
  color: var(--s-text-primary) !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) th {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  white-space: nowrap;
  background: var(--s-bg-surface-sunken) !important;
}
#chat-panel #transcript :is(.msg-content, .stream-body) img {
  max-width: 100%;
  height: auto;
  border-color: var(--s-border) !important;
  border-radius: 6px !important;
}

/* Reasoning remains open by default and user-collapsible. Same treatment for
   earlier loop replies and current provider-neutral streamed/restored replies. */
#chat-panel :is(.stream-thought, .loop-thinking-wrap) {
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--s-border-subtle) !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  box-shadow: none !important;
}
#chat-panel :is(.stream-thought-label, .loop-thinking-header) {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0 !important;
  gap: 8px;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--s-text-secondary) !important;
}
#chat-panel .stream-thought-title { color: inherit; }
#chat-panel .stream-thought-meta { font-size: 12px; color: var(--s-text-secondary); }
#chat-panel :is(.stream-thought-body, .loop-thinking-content) {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 4px 0 0;
  padding: 0 4px 4px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--t-font-family, Arial, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--s-text-secondary) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#chat-panel .thinking-status-row { border-top-color: var(--s-border-subtle); }
#chat-panel :is(.thinking-status-label, .thinking-phase),
#composerActivity .composer-activity-text { color: var(--chat-activity-accent) !important; font-size: 13px !important; }
#chat-panel .thinking-dots span,
#chat-panel .typing-dot,
#composerActivity .composer-activity-dot { background: var(--chat-activity-accent) !important; }
#chat-panel .stream-caret { background: var(--chat-activity-accent); }
#composerActivity .composer-activity-text { white-space: normal; overflow-wrap: anywhere; }

/* Tool state is expressed in a named status, without a permanent colour bar. */
#chat-panel .loop-tool-card {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 6px !important;
  background: var(--s-bg-surface) !important;
  box-shadow: none !important;
  font-family: var(--t-font-family, Arial, sans-serif) !important;
  font-size: 13px !important;
}
#chat-panel .loop-tool-header { min-width: 0; flex-wrap: wrap; gap: 8px; }
#chat-panel .loop-tool-name { min-width: 80px; white-space: normal; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
#chat-panel .loop-tool-status { font-size: 12px; color: var(--s-text-secondary); }
#chat-panel .loop-tool-badge { font-size: 10px; background: var(--s-bg-hover) !important; color: var(--s-text-secondary) !important; letter-spacing: .02em; }
#chat-panel .loop-tool-card.calling .loop-tool-status { color: var(--chat-activity-accent); }
#chat-panel .loop-tool-card.error .loop-tool-status { color: var(--s-status-error-text); }
#chat-panel .loop-tool-card.success .loop-tool-status { color: var(--s-status-success-text); }
#chat-panel .loop-tool-card.unknown .loop-tool-status { color: var(--s-text-secondary); }
#chat-panel .loop-tool-spinner::after {
  border-color: color-mix(in srgb, var(--chat-activity-accent) 30%, transparent) !important;
  border-top-color: var(--chat-activity-accent) !important;
}
#chat-panel .loop-tool-args {
  font-family: var(--t-font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  color: var(--s-text-secondary);
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: 5em;
  overflow-y: auto;
}
#chat-panel .loop-tool-result { font-size: 13px; line-height: 1.55; color: var(--s-text-secondary); }
#chat-panel .loop-tool-result-summary { min-height: 28px; padding: 3px 0; }
#chat-panel .loop-tool-result-full { font-family: var(--t-font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.55; padding: 10px; word-break: normal; overflow-wrap: anywhere; }
#chat-panel :is(.code-copy-btn, .img-download-btn, .scroll-bottom-btn) {
  color: var(--s-text-secondary) !important;
  background: var(--s-bg-surface) !important;
  border-color: var(--s-border) !important;
  border-radius: 6px !important;
  min-height: 32px;
  box-shadow: none !important;
}
#chat-panel :is(button, summary, a, [tabindex]):focus-visible,
#composerActivity :is(button,a):focus-visible {
  outline: 2px solid var(--chat-activity-accent) !important;
  outline-offset: 3px !important;
}
#chat-panel :is(.code-wrapper, .img-wrapper):focus-within :is(.code-copy-btn, .img-download-btn) { opacity: 1; }
#chat-panel :is(.empty-state-title,.empty-state-hint,.history-divider,.pending-msg) { color: var(--s-text-secondary) !important; }
#chat-panel .empty-state-keys kbd { color: var(--s-text-secondary); border-color: var(--s-border); box-shadow: none; }
#chat-panel :is(.pending-banner,.tool-call,.tool-chip) { color: var(--s-text-secondary) !important; border-color: var(--s-border) !important; border-radius: 6px !important; }

@media (max-width: 600px) {
  #chat-panel #transcript { padding-left: 16px !important; padding-right: 16px !important; }
  #chat-panel :is(.stream-thought-label,.loop-thinking-header) { min-height: 40px; }
  #chat-panel :is(.msg-action-btn,.code-copy-btn,.img-download-btn) { min-width: 40px; min-height: 40px; opacity: 1; }
  #chat-panel .msg-actions { opacity: 1; }
  #chat-panel .loop-tool-card { padding: 9px 10px !important; }
  #chat-panel #transcript .code-wrapper pre { padding-top: 50px !important; }
}
@media (hover: none) {
  #chat-panel :is(.msg-actions,.code-copy-btn,.img-download-btn) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-panel *, #chat-panel *::before, #chat-panel *::after,
  #composerActivity *, #composerActivity *::before, #composerActivity *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Turn chrome (24 Sep founder): uniform across Grok / Claude / Codex threads.
   One collapsible Activity block per turn (compact tool rows + demoted
   narration notes), thinking collapsed by default, and a footer line with
   model · tools · duration · tokens · cost under every finished reply.
   ========================================================================== */
.turn-activity {
  display: block !important;
  width: 100%;
  margin: 2px 0 10px;
  padding: 0;
  border: 1px solid var(--s-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--s-bg-surface) 70%, transparent);
  overflow: hidden;
}
.turn-activity[hidden] { display: none !important; }
.turn-activity > summary.turn-activity-label {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--s-text-secondary);
  user-select: none;
}
.turn-activity > summary::-webkit-details-marker { display: none; }
.turn-activity-chevron {
  width: 0; height: 0;
  border-left: 5px solid var(--s-text-tertiary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.turn-activity[open] > summary .turn-activity-chevron { transform: rotate(90deg); }
.turn-activity-title { color: var(--s-text-primary); }
.turn-activity-meta {
  margin-left: auto;
  color: var(--s-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.turn-activity > .stream-tools,
.turn-activity.msg-tools > .stream-tools {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 2px 0 4px;
  border-top: 1px solid var(--s-border-subtle, var(--s-border));
  max-height: 320px;
  overflow-y: auto;
}
/* Compact single-line tool row (overrides the old card look everywhere) */
.act-row,
.stream-tools .loop-tool-card.act-row,
.msg-tools .loop-tool-card.act-row,
.msg .stream-tools .loop-tool-card.act-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 3px 10px !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px;
  line-height: 1.5;
  min-height: 24px;
}
.act-row .loop-tool-name {
  flex: 0 1 auto;
  font-weight: 500 !important;
  color: var(--s-text-primary) !important;
  white-space: nowrap;
}
.act-row .loop-tool-args {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-family: var(--t-font-family-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--s-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-row .loop-tool-status {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  color: var(--s-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.act-row.error .loop-tool-status { color: var(--s-status-error); }
.act-row.unknown .loop-tool-status { color: var(--s-status-warning); }
.act-row .loop-tool-badge { display: none !important; }
/* State glyph */
.act-state {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--s-status-success);
}
.act-row.calling .act-state { background: var(--s-accent); animation: actPulse 1s ease-in-out infinite; }
.act-row.error .act-state { background: var(--s-status-error); }
.act-row.unknown .act-state { background: var(--s-status-warning); }
@keyframes actPulse { 50% { opacity: 0.35; } }
.act-row .loop-tool-spinner::after {
  width: 9px !important; height: 9px !important;
  border-width: 2px !important;
}
/* Demoted narration */
.act-row.act-note { padding-left: 25px !important; }
.act-row.act-note .act-note-text {
  flex: 1 1 auto;
  min-width: 0;
  font-style: italic;
  color: var(--s-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Thinking accordion — same row language, sits under Activity */
.stream-thought > summary.stream-thought-label { padding: 2px 0 !important; }
/* Footer line under every finished reply */
.msg.mira > .turn-footer {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--chat-activity-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.msg.thinking-live .turn-footer { display: none; }
/* Founder 28 Sep: live status + elapsed on one line under the reply (Weave only);
   the composer strip no longer carries the model-turn status. */
.chat-weave .msg.thinking-live > .turn-footer-live { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-weave #composerActivity:has(.weave-activity) { display: none !important; }
.turn-footer-live:is([data-phase="thinking"], [data-phase="tools"], [data-phase="writing"]) .tf-clock {
  animation: composer-clock-pulse 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .turn-footer-live .tf-clock { animation: none !important; } }
@media (max-width: 500px) {
  .act-row .loop-tool-args { display: none; }
  .turn-activity > .stream-tools { max-height: 220px; }
}
[data-theme="light"] .turn-activity { background: color-mix(in srgb, var(--s-bg-surface) 85%, transparent); }

/* Weave — selected shared activity presentation, 24 September 2026. */
.chat-weave #transcript .stream-thought,
.chat-weave #transcript .turn-activity,
.chat-weave #transcript .stream-tools,
.chat-weave #transcript .thinking-status-row,
.chat-weave #transcript .thinking-phase { display: none !important; }
/* Outside transcript scrolling; the composer owns the live status. */
/* Centred half-size Emergent order, selected study 43 / r003 (27 September 2026). */
.chat-weave #composerActivity { margin-bottom: 8px; padding-inline: 0; }
.chat-weave #composerActivity .weave-activity { display: flex; flex-direction: column; gap: 0; width: 100%; min-width: 0; padding: 0; }
.chat-weave #composerActivity .weave-info { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.chat-weave #composerActivity .weave-status { grid-column: 1; grid-row: 1; color: var(--chat-activity-accent, var(--s-accent)); font-size: var(--t-font-size-sm); }
.chat-weave #composerActivity .weave-metrics { display: contents; color: var(--s-text-secondary); font-size: var(--t-font-size-xs); font-variant-numeric: tabular-nums; }
.chat-weave #composerActivity .weave-clock { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
.chat-weave #composerActivity .weave-tokens { grid-column: 1 / -1; margin-top: 4px; text-align: right; }
.chat-weave #transcript .suggested-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--s-border); }
.chat-weave #transcript .suggested-actions-label { width: 100%; color: var(--s-text-secondary); font-size: var(--t-font-size-xs); }
.chat-weave #transcript .suggested-action { min-height: 36px; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.chat-weave #transcript .suggested-action:focus-visible { outline: 2px solid var(--chat-activity-accent, var(--s-accent)); outline-offset: 3px; }
.chat-weave #transcript .suggested-action:disabled { opacity: .5; cursor: default; }
.chat-weave #transcript .suggested-actions-empty,
.chat-weave #transcript .suggested-action-status { color: var(--s-text-secondary); font-size: var(--t-font-size-xs); }
.chat-weave #transcript .suggested-action-status:empty { display: none; }
@media (max-width: 480px) { .chat-weave #transcript .suggested-action { min-height: 44px; } }

/* Reply suggestions: Mirai teal in chat and the mirrored module popup. */
html[data-theme] :is(#transcript, #mcw-messages) :is(.suggested-action, .suggested-action-all) {
  --suggestion-teal: #21bfc1;
  --suggestion-ink: #062d2e;
  --suggestion-hover: #39cacc;
  background: var(--suggestion-teal) !important;
  border: 1px solid var(--suggestion-teal) !important;
  color: var(--suggestion-ink) !important;
  min-height: 36px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
html[data-theme="light"] :is(#transcript, #mcw-messages) :is(.suggested-action, .suggested-action-all) {
  --suggestion-teal: #087677;
  --suggestion-ink: #ffffff;
  --suggestion-hover: #066667;
}
html[data-theme] :is(#transcript, #mcw-messages) :is(.suggested-action, .suggested-action-all):hover:not(:disabled) {
  background: var(--suggestion-hover) !important;
  border-color: var(--suggestion-hover) !important;
}
html[data-theme] :is(#transcript, #mcw-messages) .suggested-action-all { font-weight: 600; }
html[data-theme] :is(#transcript, #mcw-messages) :is(.suggested-action, .suggested-action-all):focus-visible {
  outline: 2px solid var(--suggestion-teal);
  outline-offset: 3px;
}
html[data-theme] :is(#transcript, #mcw-messages) :is(.suggested-action, .suggested-action-all):disabled {
  opacity: .5;
  cursor: default;
}
@media (max-width: 480px) {
  html[data-theme] :is(#transcript, #mcw-messages) :is(.suggested-action, .suggested-action-all) { min-height: 44px; }
}

/* Synaptic silk — one chat background. The canvas stays for idle threads
 * and simply stops moving. The box is opaque so the still cannot show
 * through the quiet gaps as a second image. */
.app.voice-app .app-content.has-synthesis-field { position: relative; }
body > .chat-synthesis-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  background-color: var(--s-bg-page, #1B1D22);
  background-image: none !important;
  transition: none;
}
body > .chat-synthesis-field.is-active,
body > .chat-synthesis-field.is-active.is-paused {
  display: block;
  opacity: 1;
  visibility: visible;
  background-color: var(--s-bg-page, #1B1D22);
  background-image: none !important;
}
.app.voice-app .app-content.has-synthesis-field > .main-area:has(#chat-panel.active),
.app.voice-app .app-content.has-synthesis-field #chat-panel,
.app-content.has-synthesis-field #transcript { background: transparent !important; }
.app-content.has-synthesis-field > .main-area { z-index: 1; }
.app-content.has-synthesis-field #transcript { position: relative; z-index: 1; }
.app.voice-app .app-content:has(#chat-panel.active) > .controls {
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.app.voice-app .app-content:has(#chat-panel.active) > .controls::before {
  display: none !important;
  content: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body > .chat-synthesis-field { transition: none; }
}


/* P116 · compact thread options and teal active titles · 27 Sep 2026 */
.voice-sidebar { --thread-activity-teal: #21bfc1; }
[data-theme="light"] .voice-sidebar { --thread-activity-teal: #087677; }
/* Running and queued titles replace the status dot; inactive titles keep their styles. */
.voice-sidebar .thread-dot,
.voice-sidebar .sidebar-item.has-unread .sidebar-item-title::after { display: none !important; }
.voice-sidebar .sidebar-item.is-running .sidebar-item-title {
  color: var(--thread-activity-teal) !important;
  font-weight: 700 !important;
}
/* Clearer, calm activity on the name only; queued threads remain steady. */
@keyframes thread-title-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.voice-sidebar .sidebar-item.is-executing .sidebar-item-title {
  animation: thread-title-breathe 3s ease-in-out infinite;
}
/* Finished replies draw attention until opened; running/queued retain their activity style. */
.voice-sidebar { --thread-ready-neutral: #fff; }
[data-theme="light"] .voice-sidebar { --thread-ready-neutral: var(--s-text-primary); }
@keyframes thread-title-ready {
  0%, 100% { color: var(--thread-activity-teal); }
  50% { color: var(--thread-ready-neutral); }
}
.voice-sidebar .sidebar-item.has-unread:not(.is-running) .sidebar-item-title {
  color: var(--thread-activity-teal);
  /* Founder 10 Oct: 2.5x faster than the original 3s cycle. */
  animation: thread-title-ready 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .voice-sidebar .sidebar-item.is-executing .sidebar-item-title,
  .voice-sidebar .sidebar-item.has-unread:not(.is-running) .sidebar-item-title { animation: none; }
}
.voice-sidebar .sidebar-item-more {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 30px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--s-text-secondary); cursor: pointer;
}
/* Founder 11 Oct: one drag handle replaces the thread-order arrows. */
.voice-sidebar .sidebar-item-drag {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 24px; width: 24px; height: 30px; padding: 0;
  position: relative; z-index: 2;
  border: 0; background: transparent; color: var(--s-text-secondary);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.voice-sidebar .sidebar-item-drag:hover { color: var(--s-text-primary); }
.voice-sidebar .sidebar-item-drag:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }
.voice-sidebar .sidebar-item.is-dragging { opacity: .5; }
.voice-sidebar .sidebar-item.is-dragging .sidebar-item-drag { cursor: grabbing; }
.voice-sidebar .sidebar-item.thread-drop-before::before,
.voice-sidebar .sidebar-item.thread-drop-after::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--s-accent); pointer-events: none; z-index: 3;
}
.voice-sidebar .sidebar-item.thread-drop-before::before { top: 0; }
.voice-sidebar .sidebar-item.thread-drop-after::after { bottom: 0; }
@media (pointer: coarse) {
  .voice-sidebar .sidebar-item-drag { flex-basis: 44px; width: 44px; height: 44px; }
}
/* Match navigation rows to the thread list: 30px content + 8px padding
   each side + 1px divider. Keep rows from shrinking in the flex nav. */
html .nav-sidebar .sidebar-item {
  height: auto !important;
  min-height: 47px !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
@media (pointer: coarse) {
  html .nav-sidebar .sidebar-item { min-height: 57px !important; }
}
.voice-sidebar .sidebar-item-more:hover,
.voice-sidebar .sidebar-item-more[aria-expanded="true"] { background: var(--s-bg-hover); color: var(--s-text-primary); }
html .voice-sidebar .thread-options-menu {
  /* Positioning measures immediately after opening, including at app zoom. */
  transition: none !important;
  position: fixed; inset: auto; margin: 0; padding: 5px; width: 176px;
  max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto;
  background: var(--s-bg-surface); color: var(--s-text-primary);
  border: 1px solid var(--s-border); border-radius: 8px; box-shadow: none;
}
html .voice-sidebar .thread-options-menu:popover-open { display: flex; flex-direction: column; gap: 2px; }
html .voice-sidebar .thread-options-menu > button[class] {
  display: flex !important; align-items: center; justify-content: flex-start;
  gap: 10px; width: 100% !important; min-width: 0 !important;
  height: 38px !important; min-height: 38px !important; padding: 0 10px !important;
  opacity: 1 !important; visibility: visible !important; position: static !important;
  transform: none !important; margin: 0 !important; border: 0;
  border-radius: 4px; background: transparent; color: var(--s-text-primary);
  font: inherit; font-size: 13px; cursor: pointer;
}
html .voice-sidebar .thread-options-menu > button[class]:hover,
html .voice-sidebar .thread-options-menu > button[class]:focus-visible { background: var(--s-bg-hover); }
html .voice-sidebar .thread-options-menu .sidebar-item-delete {
  color: var(--s-status-error); border-top: 1px solid var(--s-border); border-radius: 0;
}
.voice-sidebar .sidebar-item-more:focus-visible,
html .voice-sidebar .thread-options-menu > button[class]:focus-visible {
  outline: 2px solid var(--thread-activity-teal) !important; outline-offset: -2px;
}
@media (pointer: coarse) {
  .voice-sidebar .sidebar-item-more { flex-basis: 40px; width: 40px; height: 40px; }
  html .voice-sidebar .thread-options-menu > button[class] { height: 44px !important; min-height: 44px !important; }
}

/* Latest exchange focus — 27 Sep 2026, Aaron. Reading history restores it. */
#transcript > .msg {
  transition: opacity 160ms ease;
}
#transcript.chat-focus-latest > .msg.chat-earlier-turn {
  opacity: .62 !important;
}
#transcript.chat-focus-latest > .msg.chat-earlier-turn:focus-within {
  opacity: 1 !important;
}
html[data-theme="dark"] #chat-panel #transcript .msg > .msg-content,
html[data-theme="dark"] #chat-panel #transcript .msg .stream-body {
  color: #FAFAFA !important;
}
html[data-theme="light"] #transcript.chat-focus-latest > .msg.chat-earlier-turn {
  opacity: .72 !important;
}
html[data-theme="light"] #transcript.chat-focus-latest > .msg.chat-earlier-turn:focus-within {
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  #transcript > .msg { transition: none; }
}

/* Exchange boundaries — Aaron, 27 Sep 2026. Shared live/history surface.
   Each prompt opens an exchange. The next prompt closes the previous reply
   with the same line; never split a prompt from its reply or cap the latest. */
#chat-panel #transcript {
  --chat-turn-divider: #21bfc1;
  gap: 0;
}
[data-theme="light"] #chat-panel #transcript { --chat-turn-divider: #087677; }
#chat-panel #transcript > .msg {
  padding-block: 18px !important;
}
#chat-panel #transcript > .msg.user {
  border-top: 1px solid var(--chat-turn-divider) !important;
  /* Double the outer exchange space while keeping prompt and reply together. */
  padding-top: 36px !important;
  /* Aaron, 28 Sep: tighten the prompt-to-response gap. */
  padding-bottom: 8px !important;
}
/* Timestamp ends at the exchange divider; Copy sits immediately before it. */
#chat-panel #transcript .msg > .meta > .sender {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chat-panel #transcript .msg > .meta > .msg-actions {
  order: 1;
  margin-left: auto !important;
  flex-shrink: 0;
}
#chat-panel #transcript .msg > .meta > .time {
  order: 2;
  margin-left: 0 !important;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
}
/* Aaron, 28 Sep 2026: no prompt rail; text shares the reply's left edge. */
#chat-panel #transcript > .msg.user > .msg-content {
  border-left: none !important;
  padding-inline: 0 !important;
  text-align: left !important;
}
#chat-panel #transcript > .msg:is(.mira, .mirai) {
  padding-block: 12px 48px !important;
}
#chat-panel #transcript .msg > .msg-content,
#chat-panel #transcript .msg .stream-body,
#chat-panel #transcript .msg .msg-content p {
  line-height: 1.85 !important;
  letter-spacing: 0.005em !important;
}
#chat-panel #transcript .msg .msg-content p + p { margin-top: 1em !important; }
#chat-panel #transcript .msg .msg-content li {
  line-height: 1.8 !important;
  margin-block: 0.4em !important;
}
#chat-panel #transcript .msg .msg-content :is(table, pre code) { line-height: 1.6 !important; }

/* Keep YOU / MIRAI close to the text in live and saved conversations. */
#chat-panel #transcript .msg > .msg-content {
  padding-top: 0 !important;
}

/* Queue state belongs to the submitted prompt, not the active answer. */
.prompt-queue-status {
  margin-top: 6px;
  color: var(--mirai-teal, #21BFC1);
  font-size: var(--t-font-size-xs, 12px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
[data-theme="light"] .prompt-queue-status { color: #087677; }

/* Prompt recall (ArrowUp): recalled prompt sits muted until adopted or sent. */
#textWrap.is-recall #textInput { color: var(--s-text-tertiary); }

/* ---- components/_module-polish.css ---- */
/* ==========================================================================
   MODULE POLISH — platform-wide monochrome UI for all module tabs
   Loaded last (after chat-ux). Unifies mod-* chrome without rewriting each tab.
   ========================================================================== */

/* ---- Module page shell — full-bleed, never a nested card ---- */
.mod-page,
.tab-panel .mod-page {
  background: var(--s-bg-page) !important;
  color: var(--s-text-primary, #fff);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Tab panels own the scroll surface; keep page bg, no decorative chrome */
[id$="-panel"].tab-panel,
.tab-panel {
  background: var(--s-bg-page) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Reading-width constraint applied to children; see "Content area" block below */
.mod-pad,
.dsh-pad,
.health-tab,
.code-tab {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Toolbar */
.mod-toolbar {
  margin-bottom: 20px !important;
  gap: 12px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s-hairline);
}
.mod-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--s-text-primary) !important;
}
.mod-subtitle {
  font-size: 12px !important;
  color: var(--s-text-secondary) !important;
  letter-spacing: 0.01em;
}
.mod-record-count {
  font-size: 12px !important;
  color: var(--s-text-secondary) !important;
  font-variant-numeric: tabular-nums;
}

/* Search — one height with toolbar buttons. Inner padding must stay 0:
   the 36px input rule plus 10px vertical padding clipped the placeholder
   (border-box). The icon is clipped to 16px so a failed ligature cannot
   paint the word "search" across the field. */
.mod-search {
  background: var(--s-bg-input) !important;
  border: 1px solid var(--s-hairline-strong) !important;
  border-radius: 8px !important;
  max-width: 320px;
  transition: border-color 0.15s ease !important;
}
.mod-search:focus-within {
  border-color: var(--s-border-strong) !important;
  box-shadow: 0 0 0 3px var(--s-hover-wash);
}
/* html + .mod-page beats the later .mod-page input[type=text] rule (0,2,1). */
html .mod-search > input,
html .mod-page .mod-search > input,
html .mod-page .mod-search > input:focus {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--s-text-primary) !important;
}
@media (min-width: 769px) {
  .mod-search {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    gap: 8px;
    box-sizing: border-box;
  }
  html .mod-search > input,
  html .mod-page .mod-search > input {
    align-self: stretch;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 32px !important;
  }
}
@media (max-width: 768px) {
  /* 16px stops iOS focus-zoom. The old 13px !important was beating this. */
  html .mod-search > input {
    font-size: 16px !important;
  }
}
.mod-search > .mod-search-icon,
.mod-search > .material-icons:not(.mod-search-clear) {
  color: var(--s-text-secondary) !important;
  width: 16px;
  height: 16px;
  overflow: hidden;
  flex: 0 0 16px;
}
.mod-search > .material-icons:not(.mod-search-clear) {
  font-family: 'Material Icons' !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 16px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Buttons inside modules */
.mod-btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  height: var(--c-btn-height); /* 34px — token aligned 2026-08-18 */
  padding: 0 14px !important;
  box-shadow: none !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
.mod-btn-primary {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  border: 1px solid transparent !important;
}
.mod-btn-primary:hover {
  background: var(--s-accent-hover) !important;
}
.mod-btn-outline,
.mod-btn-secondary {
  background: transparent !important;
  color: var(--s-text-primary) !important;
  border: 1px solid var(--s-border) !important;
}
.mod-btn-outline:hover,
.mod-btn-secondary:hover {
  background: var(--s-hover-wash) !important;
  border-color: var(--s-border-strong) !important;
}
.mod-btn-ghost {
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  border: none !important;
}
.mod-btn-ghost:hover {
  color: var(--s-text-primary) !important;
  background: var(--s-hover-wash) !important;
}
.mod-btn-sm {
  height: var(--c-btn-height-sm); /* 30px — token aligned 2026-08-18 */
  padding: 0 10px !important;
  font-size: 12px !important;
}
.mod-btn-icon {
  width: var(--c-btn-height) !important; /* 34px — square icon button */
  height: var(--c-btn-height) !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* Inputs */
.mod-input,
.mod-dropdown,
.mod-page select,
.mod-page input[type="text"],
.mod-page input[type="search"],
.mod-page input[type="number"],
.mod-page input[type="email"],
.mod-page textarea {
  background: var(--s-bg-input) !important;
  border: 1px solid var(--s-hairline-strong) !important;
  border-radius: 8px !important;
  color: var(--s-text-primary) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.mod-input:focus,
.mod-dropdown:focus,
.mod-page select:focus,
.mod-page input:focus,
.mod-page textarea:focus {
  border-color: var(--s-border-strong) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--s-hover-wash) !important;
}

/* Native date/time fields paint an inner edit surface that does not fill
   the control, so it reads as a darker box offset from the input. */
input.mod-input[type="date"],
input.mod-input[type="time"],
input.mod-input[type="datetime-local"],
input.mod-input[type="month"] {
  color-scheme: light;
}
[data-theme="dark"] input.mod-input[type="date"],
[data-theme="dark"] input.mod-input[type="time"],
[data-theme="dark"] input.mod-input[type="datetime-local"],
[data-theme="dark"] input.mod-input[type="month"] {
  color-scheme: dark;
}
input.mod-input[type="date"]::-webkit-datetime-edit,
input.mod-input[type="time"]::-webkit-datetime-edit,
input.mod-input[type="datetime-local"]::-webkit-datetime-edit,
input.mod-input[type="month"]::-webkit-datetime-edit,
input.mod-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input.mod-input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input.mod-input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input.mod-input[type="month"]::-webkit-datetime-edit-fields-wrapper {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Cards / panels — flat (no nested surface boxes) */
.mod-card,
.mod-panel {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--s-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mod-stat {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--s-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mod-stat:last-child {
  border-right: none !important;
}
.mod-card-header,
.mod-panel-header {
  border-bottom: 1px solid var(--s-hairline) !important;
  padding: 14px 0 !important;
  background: transparent !important;
}
.mod-card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--s-text-primary) !important;
}

/* Tables — no raised wrap box */
.mod-table-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  /* Must stay a scroll container: `overflow: visible` here cancelled the `overflow-x: auto`
     from _module-components.css, and `.app.voice-app .tab-panel` then hard-clipped wide tables
     so their right-hand columns were unreachable. No `!important` — the mobile rule and the
     per-module `overflow-x: auto !important` patches must keep winning, and
     decisions/tab.css's `:has(.mod-dropdown.open)` guard must keep releasing the wrap. */
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}
.mod-table {
  width: 100%;
  border-collapse: collapse;
}
.mod-table th {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--s-text-secondary) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--s-hairline-strong) !important;
  padding: 10px 14px !important;
}
.mod-table td {
  font-size: 13px !important;
  color: var(--s-text-primary) !important;
  border-bottom: 1px solid var(--s-hairline) !important;
  padding: 11px 14px !important;
}
.mod-table tr:hover td {
  background: var(--s-hover-wash) !important;
}
.mod-table tr:last-child td {
  border-bottom: none !important;
}

/* Empty states */
.mod-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 20px !important;
  text-align: center;
  color: var(--s-text-tertiary);
}
.mod-empty .material-icons {
  font-size: 32px !important;
  /* Deliberately quiet (DESIGN_SPEC §4 wants a small, calm glyph) but still above the 3:1
     non-text minimum in BOTH themes — tertiary at full strength measured 2.79 light / 2.10 dark. */
  color: var(--s-text-secondary) !important;
  opacity: 0.7 !important;
}
.mod-empty h3 {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--s-text-secondary) !important;
  margin: 0 !important;
}
.mod-empty p {
  font-size: 12px !important;
  color: var(--s-text-secondary) !important;
  margin: 0 !important;
  max-width: 320px;
  line-height: 1.45;
}

/* Badges */
.mod-badge,
.mod-tag {
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--s-border) !important;
  background: var(--s-hover-wash) !important;
  color: var(--s-text-secondary) !important;
  padding: 2px 7px !important;
}

/* Semantic badge variants — the block above sets background/color with !important, which
   killed the non-important variants in _module-components.css, so 'healthy', 'degraded' and
   'failed' all rendered as the same grey pill. Use the -text tokens for the foreground: in the
   default light theme --s-status-success on --s-status-success-bg is about 1.9:1, the -text
   token about 5:1; in dark both resolve the same. */
.mod-badge-success { background: var(--s-status-success-bg) !important; color: var(--s-status-success-text) !important; border-color: color-mix(in srgb, var(--s-status-success) 30%, transparent) !important; }
.mod-badge-warning { background: var(--s-status-warning-bg) !important; color: var(--s-status-warning-text) !important; border-color: color-mix(in srgb, var(--s-status-warning) 30%, transparent) !important; }
.mod-badge-danger  { background: var(--s-status-error-bg) !important;   color: var(--s-status-error-text) !important;   border-color: color-mix(in srgb, var(--s-status-error) 30%, transparent) !important; }
.mod-badge-accent  { background: var(--s-accent-subtle) !important;     color: var(--s-accent) !important;              border-color: color-mix(in srgb, var(--s-accent) 30%, transparent) !important; }

/* ---- Unified module header chrome (overrides older pill/underline mix) ---- */
.mod-nav,
.mod-nav.mod-nav-with-title {
  gap: 10px !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--s-hairline-strong) !important;
  background: var(--s-bg-page) !important;
  box-shadow: none !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* In-module page titles are duplicate of the header title — hide them. */
.mod-nav-title {
  display: none !important;
}

/* Section tabs — soft pills, NOT uppercase micro-labels */
.mod-nav-tabs,
.mod-section-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  margin-left: 4px !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mod-nav-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  color: var(--s-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 0 12px !important;
  height: 32px !important;
  line-height: 1 !important;
}
.mod-nav-btn:hover {
  color: var(--s-text-primary) !important;
  background: var(--s-hover-wash) !important;
}
.mod-nav-btn.active {
  color: var(--s-text-primary) !important;
  background: var(--s-active-wash) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}
.mod-nav-btn .material-icons {
  font-size: 16px !important;
  opacity: 0.8;
}

/* Keep header actions tidy on the right */
.mod-nav > .mod-toolbar-spacer {
  flex: 1 1 auto !important;
  min-width: 12px !important;
}
.mod-nav > .mod-btn {
  margin: 0 !important;
}
.mod-nav-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Standalone tabs bar (legacy modules that put tabs outside .mod-nav) */
.mod-page > .mod-nav-tabs,
.mod-page > .mod-section-nav,
.infra-page > .mod-nav-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-height: 44px !important;
  padding: 6px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--s-hairline-strong) !important;
  background: var(--s-bg-page) !important;
  box-sizing: border-box;
}

/* Content area — centered reading column, NO nested scroll */
.mod-page {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

.mod-page-body {
  overflow: visible !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding: 20px !important;
  /* full-bleed for scrollbar parent; constrain children instead */
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Reading-width for simple single-column bodies ONLY.
   Do NOT blanket-clamp every child — that broke split-pane modules
   (email, sms, threads, database, code). Opt-in via .mod-reading or
   known single-column wrappers.

   Wide data modules (infra tables, OS, reporting, monitor map, observe)
   use .mod-wide / domain body classes listed under Full-bleed below. */
.mod-page-body > .mod-reading,
.mod-page-body > .mod-pad,
.mod-page-body > .mod-table-wrap,
.mod-page-body > .mod-toolbar,
.mod-page-body > .mod-empty,
.mod-page-body > .mod-stats,
.mod-pad:not(.mod-wide):not(.dsh-obs),
.dsh-pad:not(.mod-wide):not(.dsh-obs),
.health-tab,
.code-tab {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Full-bleed split / messenger / map / wide data layouts */
.mod-page-body > .mod-split,
.mod-page-body > .mod-wide,
.mod-page-body > .email-layout,
.mod-page-body > .sms-layout,
.mod-page-body > .thr-body,
.mod-page-body > .db-root,
.mod-page-body > .lc-split,
.mod-page-body > .lc-map-root,
.mod-page-body > .infra-body,
.mod-page-body > .mos-body,
.mod-page-body > .rpt-body,
.mod-page-body > .mon-body,
.mod-page-body > .dsh-obs,
.mod-page-body > .notes-layout,
.mod-page-body:has(.mod-split),
.mod-page-body:has(.mod-wide),
.mod-page-body:has(.email-layout),
.mod-page-body:has(.sms-layout),
.mod-page-body:has(.db-root),
.mod-page-body:has(.lc-split),
.mod-page-body:has(.lc-map),
.mod-page-body:has(.mon-map-wrap),
.mod-page-body:has(.infra-body),
.mod-page-body:has(.mos-body),
.mod-page-body:has(.rpt-body),
.mod-page-body:has(.dsh-obs) {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* Maps / messenger splits: also drop vertical body pad so canvas sits edge-to-edge under nav */
.mod-page-body:has(.lc-split),
.mod-page-body:has(.lc-map),
.mod-page-body:has(.email-layout),
.mod-page-body:has(.sms-layout),
.mod-page-body:has(.db-root),
.mod-page-body:has(.mon-map-wrap) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Module headers scroll with content (Aaron, 29 Sep 2026). */
.mod-nav,
.mod-nav.mod-nav-with-title,
.mod-page-title {
  position: relative !important;
  top: auto!important;
  z-index: auto!important;
  background: var(--s-bg-page) !important;
}

/* In-page subheaders (not the top chrome) */
.mod-page-body h3,
.health-section h3,
.health-chart-section h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--c-heading-color, var(--s-text-primary)) !important;
  margin: 0 0 10px !important;
}

/* Module-local secondary toolbars under the main header */
.mod-page-body > .mod-toolbar,
.mod-page-body > .mod-toolbar:first-child,
.ct-toolbar,
.mos-toolbar,
.dsh-act-toolbar,
.rpt-digest-bar,
.health-header,
.health-controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--s-hairline) !important;
  background: transparent !important;
}

/* Skeleton */
.mod-skeleton {
  background: linear-gradient(90deg, var(--s-bg-surface) 25%, var(--s-bg-hover) 50%, var(--s-bg-surface) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
}

/* Status colors — restrained */
.mod-status-ok,
.text-success { color: var(--s-status-success) !important; }
.mod-status-warn,
.text-warning { color: var(--s-status-warning) !important; }
.mod-status-err,
.text-danger { color: var(--s-status-error) !important; }

/* ---- Module page title (legacy) + platform strip ---- */
.mod-page-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--s-text-primary) !important;
  padding: 12px 20px !important;
  min-height: 52px !important;
  border-bottom: 1px solid var(--s-hairline-strong) !important;
  background: var(--s-bg-page) !important;
  box-sizing: border-box;
}
.mod-page-title-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--s-text-secondary) !important;
  margin-top: 2px !important;
}

/* Platform activeTabTitle is redundant with per-module headers — keep hidden */
#activeTabTitle {
  display: none !important;
}
.app.voice-app:not([data-active-tab="chat"]) #activeTabTitle {
  display: none !important;
}

/* If a module uses both page-title AND nav-tabs, keep them stacked cleanly */
.mod-page > .mod-page-title + .mod-nav-tabs,
.infra-page > .mod-page-title + .mod-nav-tabs,
.infra-page > .mod-page-title + .infra-summary + .mod-nav-tabs {
  border-top: none !important;
}

/* Light theme */
[data-theme="light"] .mod-nav,
[data-theme="light"] .mod-nav.mod-nav-with-title,
[data-theme="light"] .mod-page-title,
[data-theme="light"] .mod-page > .mod-nav-tabs {
  background: var(--s-bg-page) !important;
  border-bottom-color: var(--s-hairline) !important;
}
[data-theme="light"] .mod-nav-title,
[data-theme="light"] .mod-page-title {
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .mod-nav-btn {
  /* Raw 45% black measured 3.31:1 on the light nav ground — below the 4.5:1
     floor for 13px text. The semantic token is 7.09:1. */
  color: var(--s-text-secondary) !important;
}
[data-theme="light"] .mod-nav-btn:hover {
  color: rgba(0, 0, 0, 0.8) !important;
  background: var(--s-hover-wash) !important;
}
[data-theme="light"] .mod-nav-btn.active {
  color: var(--s-text-primary) !important;
  background: var(--s-active-wash) !important;
}

/* ---- Sidebar group headers (expanded) ---- */
.sidebar-group-header {
  display: none;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
  padding: 12px 16px 4px !important;
}
.nav-sidebar.expanded .sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sidebar-divider {
  height: 1px;
  background: var(--s-hairline);
  margin: 8px 12px;
}

/* ---- Light mode modules (use semantic surfaces — do not invert to accent) ---- */
[data-theme="light"] .mod-page,
[data-theme="light"] .tab-panel .mod-page,
[data-theme="light"] .tab-panel {
  background: var(--s-bg-page) !important;
  color: var(--s-text-primary) !important;
  border: none !important;
}
[data-theme="light"] .mod-card,
[data-theme="light"] .mod-panel {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--s-hairline) !important;
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .mod-table-wrap {
  background: transparent !important;
  border: none !important;
}
[data-theme="light"] .mod-search,
[data-theme="light"] .mod-input,
[data-theme="light"] .mod-dropdown {
  background: var(--s-bg-input, #fff) !important;
  border-color: var(--s-hairline-strong) !important;
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .mod-title,
[data-theme="light"] .mod-table td {
  color: var(--s-text-primary) !important;
}
[data-theme="light"] .mod-table th {
  color: var(--s-text-secondary) !important;
  border-color: var(--s-hairline) !important;
}
[data-theme="light"] .mod-btn-primary {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
}
[data-theme="light"] .mod-btn-outline {
  color: var(--s-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .mod-nav-btn.active {
  color: var(--s-accent) !important;
  background: var(--s-accent-subtle) !important;
  border-bottom: none !important;
}

/* ---- Split-pane modules (Database, etc.) keep internal panes ---- */
.app.voice-app .tab-panel:has(.db-root),
.app.voice-app .tab-panel:has(.db-sidebar) {
  overflow: hidden !important;
}
.mod-page:has(.db-root) {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.mod-page:has(.db-root) .mod-page-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: none !important;
  padding: 0 !important;
}
.mod-page:has(.db-root) .mod-nav {
  position: relative !important; /* not sticky inside fixed split pane */
}

/* ==========================================================================
   TEAL ACCENT MODULES — headings, active chrome, focus
   ========================================================================== */
.mod-nav-title {
  /* subtle teal underline bar via left accent on active feels busy; tint icon instead */
}
.mod-page-title,
.mod-nav-title {
  letter-spacing: -0.02em;
}
/* Section labels stay quiet; titles get teal on hover/focus of parent nav */
.mod-nav-btn.active {
  color: var(--s-accent) !important;
  background: var(--s-accent-subtle) !important;
}
.mod-nav-btn.active .material-icons {
  color: var(--s-accent) !important;
}
.mod-btn-primary,
button.mod-btn-primary {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
  border-color: transparent !important;
}
.mod-btn-primary:hover,
button.mod-btn-primary:hover {
  background: var(--s-accent-hover) !important;
}
/* Module table headers / card titles */
.mod-page h2,
.mod-page h3,
.mod-page-body h2,
.mod-page-body > h2,
.dsh-section-title,
.org-today-title,
.org-section-head {
  color: var(--c-heading-color, var(--s-text-primary)) !important;
}
/* Uppercase / micro section labels — quiet tertiary, not permanent accent */
.dsh-section-title,
.dsh-group-label {
  color: var(--s-text-tertiary) !important;
}
.dsh-tile:hover .dsh-tile-icon {
  color: var(--s-accent) !important;
}
.dsh-action:hover {
  /* list rows: handled in dashboard tab.css; avoid re-carding */
}
.dsh-home-aside .dsh-action:hover {
  border-left-color: var(--s-accent) !important;
}
.dsh-attention-count {
  background: var(--s-accent) !important;
  color: var(--s-accent-on) !important;
}
/* No permanent left accent frame — transparent default, accent on hover only */
.org-today {
  border-left-color: transparent !important;
}
.org-today:hover {
  border-left-color: var(--s-accent) !important;
}
/* Focus rings */
.mod-page input:focus,
.mod-page textarea:focus,
.mod-page select:focus,
.mod-input:focus,
.mod-search:focus-within {
  border-color: color-mix(in srgb, var(--s-accent) 55%, transparent) !important;
  box-shadow: 0 0 0 3px var(--s-accent-subtle) !important;
}
.mod-badge-info {
  color: var(--s-accent) !important;
  border-color: color-mix(in srgb, var(--s-accent) 30%, transparent) !important;
  background: var(--s-accent-subtle) !important;
}

/* ==========================================================================
   FLAT DEMOTE (restrained) — DESIGN_SPEC
   Only known raised chrome classes. No [class*="card"] wildcards (they
   stripped padding/borders and broke layout when tab.css loaded globally).
   ========================================================================== */

.mod-page .mod-card,
.mod-page .mod-panel,
.mod-page .mod-card-grid > .mod-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--s-hairline) !important;
}

.mod-page .mod-card-title,
.mod-page .mod-panel-header {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c-heading-color, var(--s-text-primary)) !important;
  font-weight: 600 !important;
}

/* Known module-local raised names — demote fill only, keep padding/layout */
.mod-page .vs-card,
.mod-page .vs-card-full,
.mod-page .vs-voice-card,
.mod-page .inf-card,
.mod-page .inf-prov-card,
.mod-page .inf-api-card,
.mod-page .mos-card,
.mod-page .rpt-card,
.mod-page .cmt-card,
.mod-page .cmt-row,
.mod-page .pm-task-card,
.mod-page .pm-project-card,
.mod-page .pm-decision-card,
.mod-page .pm-task-row,
.mod-page .pm-project-row,
.mod-page .gpu-stat-card,
.mod-page .cpu-stat-card,
.mod-page .dsh-chart-card,
.mod-page .dsh-obs-card,
.mod-page .briefing-card,
.mod-page .briefing-row,
.mod-page .sms-card,
.mod-page .sa-grid-card,
.mod-page .sa-brief-card,
.mod-page .sa-sub-card,
.mod-page .qr-comms-card,
.mod-page .email-msg-card,
.mod-page .email-td-detail-card,
.mod-page .ig-card,
.mod-page .obj-card,
.mod-page .obj-stat-card,
.mod-page .obj-health-card,
.mod-page .apr-card,
.mod-page .apr-stat-card,
.mod-page .auto-card,
.mod-page .auto-run,
.mod-page .crm-card,
.mod-page .as-section,
.mod-page .ap-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Stats strip — flat, keep grid/flex from modules */
.mod-page .mod-stats,
.mod-page .inf-status-cards,
.mod-page .dsh-stats {
  background: transparent !important;
  box-shadow: none !important;
}

.mod-page .mod-stat,
.mod-page .inf-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Last-win flat list reinforcement (DESIGN_SPEC list rows) */
.mod-page .mod-list-row {
  background: transparent !important;
  border-bottom: 1px solid var(--s-hairline) !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mod-page .mod-list-row:hover {
  background: var(--s-hover-wash) !important;
  border-left-color: var(--s-accent) !important;
}

/* Danger hover utility — status-token wash */
.mod-page .mod-btn-danger:hover,
.mod-page .mod-btn-icon.mod-btn-danger:hover {
  color: var(--s-status-error) !important;
  background: color-mix(in srgb, var(--s-status-error) 12%, transparent) !important;
}

/* The `hidden` attribute must beat author display rules (.mod-btn,
   .apr-bulk-bar, …): the UA [hidden]{display:none} rule loses to any author
   declaration, which left "hidden" elements on screen — measured, e.g.
   #apr-bulk-pay computed display:inline-flex at 91.6px wide with the
   attribute set. Replaces the per-selector patches modules were adding one
   at a time (.stream-thought[hidden], .composer-activity[hidden], …). */
[hidden] {
  display: none !important;
}

/* ---- components/_mobile-harness.css ---- */
/* ==========================================================================
   MOBILE HARNESS — bare Android / phone operator shell
   Rules apply under .mirai-mobile / .has-mobile-bottom-nav only.
   Surface: Chat · Phone · Work · Mail · Approvals.
   Work header: Organiser · Tasks · Notes (like Phone Keypad/History/…).
   ========================================================================== */

html.has-mobile-bottom-nav,
html.mirai-mobile {
  --mobile-bottom-nav-h: 60px;
  --mobile-bottom-nav-safe: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  --mobile-header-h: 0px;
  --mobile-work-subnav-h: 44px;
  --header-height: 0px;
  --c-header-height: 0px;
}

html.has-mobile-bottom-nav body,
html.mirai-mobile body.mirai-mobile-shell {
  padding-bottom: 0;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

html.has-mobile-bottom-nav .app.voice-app,
html.mirai-mobile .app.voice-app {
  padding-bottom: var(--mobile-bottom-nav-safe);
  height: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
}

/* ---- Work header segments (Organiser · Tasks · Notes) — under app header ---- */
.mobile-work-subnav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  flex-shrink: 0;
  height: var(--mobile-work-subnav-h);
  padding: 0 max(4px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px));
  background: var(--s-bg-surface, #182430);
  border-bottom: 1px solid var(--s-border, #243444);
  box-shadow: none;
  z-index: 6;
}

.mobile-work-subnav[hidden] {
  display: none !important;
}

.mobile-work-subnav-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--s-text-secondary, #9AA0A6);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.mobile-work-subnav-item:active {
  background: color-mix(in srgb, var(--s-accent, #2EB8DB) 12%, transparent);
}

.mobile-work-subnav-item.active {
  color: var(--s-accent, #2EB8DB);
}

.mobile-work-subnav-item.active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--s-accent, #2EB8DB);
}

/* ---- Bottom primary nav (Chat · Phone · Work · Mail · Approvals) ---- */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay, 1000);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: var(--mobile-bottom-nav-safe);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--s-bg-surface, #182430);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--s-border, #243444);
  box-shadow: none;
}

.mobile-bottom-nav-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  min-width: 0;
  padding: 6px 2px 5px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--s-text-secondary, #9AA0A6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.mobile-bottom-nav-item:active {
  background: color-mix(in srgb, var(--s-accent, #2EB8DB) 12%, transparent);
}

/* Sized as the Material 3 active-indicator pill; the wash only paints when active,
   but the box is always reserved so selecting a tab does not reflow the row. */
.mobile-bottom-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 26px;
  border-radius: 999px;
  margin: 0 auto;
}

.mobile-bottom-nav-item .material-icons {
  font-size: 22px;
  line-height: 1;
  display: block;
  text-align: center;
}

.mobile-bottom-nav-label {
  font-size: var(--t-font-size-2xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.mobile-bottom-nav-item.active {
  color: var(--s-accent, #2EB8DB);
}

/* Active indicator: accent pill behind the glyph (Material 3), not a floating tick. */
.mobile-bottom-nav-item.active .mobile-bottom-nav-icon-wrap {
  background: var(--s-accent-subtle, rgba(46, 184, 219, 0.14));
}

/* New activity — a quiet brand-teal dot, no numeric label. */
.mobile-bottom-nav-badge {
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  width: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  display: block;
  font-size: 0;
  line-height: 0;
  background: #21BFC1;
  color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.mobile-bottom-nav-badge[hidden] {
  display: none !important;
}

/* ---- Hide desktop / admin chrome in the app shell ----
   Whole #chatHeader is gone on APK (search/cmdk + title bar).
   Threads flyout is right-edge swipe. */
html.mirai-mobile .header-hamburger,
html.mirai-mobile #headerSidebarToggle,
html.mirai-mobile .footer-nav-btn,
html.has-mobile-bottom-nav .footer-nav-btn,
html.mirai-mobile .app-header .header-logout,
html.mirai-mobile .zoom-control,
html.mirai-mobile #mcw-fab,
html.mirai-mobile #mcw-panel,
html.has-mobile-bottom-nav #mcw-fab,
html.mirai-mobile .loop-toggle-btn,
html.mirai-mobile #loopIndicator,
html.mirai-mobile #loopConfig,
html.mirai-mobile .loop-indicator,
html.mirai-mobile .loop-config-panel,
html.mirai-mobile #activityFeedBtn,
html.mirai-mobile .activity-feed-btn,
html.mirai-mobile .activity-feed-pop,
html.mirai-mobile #cmdkBtn,
html.mirai-mobile .app.voice-app #cmdkBtn,
html.mirai-mobile #chatHeader #cmdkBtn,
html.mirai-mobile .cmdk-btn,
html.mirai-mobile .cmdk-overlay,
html.mirai-mobile #cmdkOverlay,
html.mirai-mobile .cmdk-root,
html.mirai-mobile .mod-page-title#activeTabTitle {
  display: none !important;
}

/* Left-edge swipe: desktop sidebar as overlay list (counterpart to threads).
   Parent is the scrollport so every desktop-visible module is reachable —
   Android WebView treats height:auto + top/bottom as indefinite, which
   used to clip the list behind overflow:hidden. */
html.mirai-mobile .nav-sidebar,
html.mirai-mobile #navSidebar {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: var(--mobile-bottom-nav-safe);
  width: min(280px, 85vw) !important;
  max-width: 85vw;
  height: calc(100dvh - var(--mobile-bottom-nav-safe)) !important;
  max-height: calc(100dvh - var(--mobile-bottom-nav-safe));
  align-self: auto;
  z-index: var(--z-overlay, 1000);
  left: -100%;
  transform: none;
  transition: left var(--motion-duration-slow, 0.3s) var(--motion-ease-out, ease);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

html.mirai-mobile .nav-sidebar.open,
html.mirai-mobile #navSidebar.open,
html.mirai-mobile .nav-sidebar.is-dragging,
html.mirai-mobile #navSidebar.is-dragging {
  left: 0;
  transform: none;
}

html.mirai-mobile .nav-sidebar.is-dragging,
html.mirai-mobile #navSidebar.is-dragging,
html.mirai-mobile #sidebarOverlayNav.is-dragging {
  transition: none !important;
}

html.mirai-mobile #sidebarOverlayNav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--mobile-bottom-nav-safe);
  background: var(--c-modal-backdrop);
  z-index: calc(var(--z-overlay, 1000) - 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.mirai-mobile #sidebarOverlayNav.visible,
html.mirai-mobile #sidebarOverlayNav.is-dragging {
  display: block;
}

html.mirai-mobile .sidebar-rail-toggle,
html.mirai-mobile #sidebarRailToggle,
html.mirai-mobile .threads-rail-toggle,
html.mirai-mobile #threadsRailToggle {
  display: none !important;
}

html.mirai-mobile .nav-sidebar .sidebar-nav,
html.mirai-mobile #navSidebar .sidebar-nav {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  overflow: visible;
}

html.mirai-mobile .nav-sidebar .sidebar-item-label,
html.mirai-mobile .nav-sidebar.expanded .sidebar-item-label {
  display: block;
  opacity: 1;
}

html.mirai-mobile .nav-sidebar .sidebar-section-label,
html.mirai-mobile .nav-sidebar .sidebar-group-header {
  display: flex !important;
  opacity: 1;
  height: auto;
  pointer-events: auto;
}

html.mirai-mobile .nav-sidebar .sidebar-item,
html.mirai-mobile .nav-sidebar.expanded .sidebar-item {
  justify-content: flex-start;
  padding: 0 var(--sp-4, 16px);
  gap: 12px;
  min-height: 44px;
}

/* Threads chip removed — swipe in from the right edge instead */
html.mirai-mobile #chatHistoryBtn {
  display: none !important;
}

/* Composer: bottom nav owns the safe-area */
html.has-mobile-bottom-nav .controls,
html.mirai-mobile .controls {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 8px;
  border-top-color: rgba(255, 255, 255, 0.05);
}

html.has-mobile-bottom-nav .text-input-wrap {
  min-height: 48px;
  border-radius: 14px;
}

/* Scroll-to-bottom is panel-absolute (not viewport-fixed) */
html.has-mobile-bottom-nav .scroll-bottom-btn {
  bottom: 12px !important;
  right: 14px !important;
  width: 44px;
  height: 44px;
}

/* Whole app header gone on APK — search/cmdk, title, tokens, Threads chip.
   Specificity must beat .app.voice-app .chat-only-header { height: 48px !important }.
   Work subnav (Organiser · Plan · Tasks · Notes) stays under where the header was. */
html.mirai-mobile #chatHeader,
html.mirai-mobile #chatHeader.app-header,
html.mirai-mobile .app-header,
html.mirai-mobile .app-header.chat-only-header,
html.mirai-mobile .chat-only-header,
html.mirai-mobile .app.voice-app .app-header,
html.mirai-mobile .app.voice-app .app-header.chat-only-header,
html.mirai-mobile .app.voice-app .chat-only-header,
html.has-mobile-bottom-nav #chatHeader,
html.has-mobile-bottom-nav .app-header,
html.has-mobile-bottom-nav .chat-only-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

html.mirai-mobile .header-token-usage,
html.mirai-mobile #headerTokenUsage,
html.has-mobile-bottom-nav .header-token-usage,
html.has-mobile-bottom-nav #headerTokenUsage,
html.mirai-mobile #mobileConnBtn,
html.mirai-mobile .mobile-conn-btn,
html.mirai-mobile .header-logout,
html.mirai-mobile a.header-logout,
html.mirai-mobile .chat-only-action,
html.mirai-mobile #chatHistoryBtn,
html.mirai-mobile #headerActivitySlot,
html.mirai-mobile .header-activity-slot,
html.mirai-mobile .mobile-reload-btn,
html.mirai-mobile #mobileReloadBtn {
  display: none !important;
}

/* Module pages denser / full-bleed thumb-friendly */
html.mirai-mobile .mod-page {
  padding-bottom: var(--sp-4, 16px);
  padding-left: 0;
  padding-right: 0;
}

html.mirai-mobile .mod-page-body {
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}

html.mirai-mobile .mod-reading {
  max-width: none;
  width: 100%;
}

html.mirai-mobile .mod-nav-with-title {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  position: relative;
  top: auto;
  z-index: auto;
  background: var(--s-bg-page, #131923);
  overflow: visible;
  min-height: 44px;
  padding-top: 4px;
  padding-bottom: 6px;
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}

html.mirai-mobile .mod-section-head {
  align-items: center;
  min-width: 0;
  overflow: visible;
}

html.mirai-mobile .mod-section-title {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.25;
  max-width: none;
}

/* Page title on APK lives in _mobile-modules.css (header is gone since
   4 Sep, so the page nav is the only place a module names itself). */

html.mirai-mobile .mod-nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  gap: 4px;
  padding-bottom: 2px;
}

html.mirai-mobile .mod-nav-tabs::-webkit-scrollbar {
  display: none;
}

html.mirai-mobile .mod-nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
}

html.mirai-mobile .mod-btn {
  min-height: 44px;
}

html.mirai-mobile .mod-input,
html.mirai-mobile .mod-search input,
html.mirai-mobile .mod-dropdown,
html.mirai-mobile textarea.mod-input {
  font-size: 16px; /* prevent focus-zoom */
  min-height: 44px;
}

html.mirai-mobile .app.voice-app .tab-panel {
  padding: 0;
  padding-bottom: 8px;
}

/* Messenger height under bottom nav for SMS / email */
html.has-mobile-bottom-nav .sms-messages-layout,
html.has-mobile-bottom-nav .email-messages-layout {
  height: calc(100dvh - var(--mobile-header-h) - var(--mobile-bottom-nav-safe) - 6rem) !important;
  min-height: 16rem;
}

/* Phone module denser */
html.mirai-mobile #ap-content,
html.has-mobile-bottom-nav #ap-content {
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: var(--sp-3, 12px);
}

html.mirai-mobile .tab-panel[data-tab="agent_phone"] .mod-page,
html.mirai-mobile #tab-agent_phone .mod-page {
  padding-bottom: var(--sp-3, 12px);
}

/* Conversation drawer above bottom nav */
/* Match the left-edge navigation drawer on phones. */
html.mirai-mobile .voice-sidebar {
  width: min(280px, 85vw) !important;
}

html.has-mobile-bottom-nav .voice-sidebar {
  bottom: var(--mobile-bottom-nav-safe);
  max-width: min(92vw, 340px);
}

/* Keyboard open: hide bottom nav so composer has room */
body.keyboard-open .mobile-bottom-nav {
  display: none;
}

/* Operator-facing copy that restates the tab — keep the list, drop the lecture */
html.mirai-mobile .camera-hint,
html.mirai-mobile .ap-hint {
  display: none !important;
}

/* Organiser: date left, title on the same line. No subtitle that repeats the title. */
html.mirai-mobile .org-row-main,
html.has-mobile-bottom-nav .org-row-main {
  align-items: flex-start;
  gap: 14px;
}
html.mirai-mobile .org-row-title,
html.has-mobile-bottom-nav .org-row-title {
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.25;
}
html.mirai-mobile .org-row-when-primary,
html.has-mobile-bottom-nav .org-row-when-primary {
  line-height: 1.25;
}
html.mirai-mobile .org-row-meta,
html.has-mobile-bottom-nav .org-row-meta {
  display: none !important;
}

html.mirai-mobile .td-row-main,
html.has-mobile-bottom-nav .td-row-main {
  align-items: flex-start;
  gap: 14px;
}
html.mirai-mobile .td-row-title,
html.has-mobile-bottom-nav .td-row-title {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.25;
}
html.mirai-mobile .td-row-when-primary,
html.has-mobile-bottom-nav .td-row-when-primary {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.25;
}
html.mirai-mobile .td-row-meta,
html.has-mobile-bottom-nav .td-row-meta {
  display: none !important;
}

body.keyboard-open.has-mobile-bottom-nav .app.voice-app,
html.has-mobile-bottom-nav body.keyboard-open .app.voice-app {
  padding-bottom: 0;
}

/* Short viewports (any phone in landscape) — compact the bar, never remove it:
   the app header, hamburger and Threads chip are all hidden on this harness, so
   the bottom nav is the only primary nav and the sole entry to the native dialer. */
@media (max-height: 420px) {
  html.has-mobile-bottom-nav,
  html.mirai-mobile {
    --mobile-bottom-nav-h: 44px;
  }
  .mobile-bottom-nav-item {
    min-height: 44px;
    padding: 3px 2px;
    gap: 0;
  }
  .mobile-bottom-nav-icon-wrap {
    height: 20px;
  }
  .mobile-bottom-nav-item .material-icons {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav-item {
    transition: none !important;
  }
}

[data-theme="light"] .mobile-bottom-nav {
  background: var(--s-bg-surface, #fff);
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mobile-bottom-nav-item {
  color: var(--s-text-secondary, rgba(0, 0, 0, 0.45));
}

[data-theme="light"] .mobile-bottom-nav-item.active {
  color: var(--s-text-primary, #0A0E14);
}

/* Light brand --s-accent-subtle is navy @6%, too faint to read as an indicator;
   use the active ink at 12% so the pill is visible, as the :active wash does. */
[data-theme="light"] .mobile-bottom-nav-item.active .mobile-bottom-nav-icon-wrap {
  background: color-mix(in srgb, var(--s-text-primary, #0A0E14) 12%, transparent);
}

[data-theme="light"] .mobile-bottom-nav-badge {
  background: #21BFC1;
}

[data-theme="light"] .mobile-work-subnav {
  background: var(--s-bg-surface, #fff);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mobile-work-subnav-item {
  color: var(--s-text-secondary, rgba(0, 0, 0, 0.45));
}

[data-theme="light"] .mobile-work-subnav-item.active {
  color: var(--s-text-primary, #0A0E14);
}

[data-theme="light"] .mobile-work-subnav-item.active::before {
  background: var(--s-text-primary, #0A0E14);
}

/* Mobile: module identity is already in navigation. Preserve real section titles. */
html.mirai-mobile .app.voice-app .tab-panel .mod-nav > .mod-nav-title {
  display: none !important;
}
html.mirai-mobile .app.voice-app .tab-panel .mod-nav:has(> .mod-nav-title):not(:has(> :not(.mod-nav-title):not(.mod-toolbar-spacer))) {
  display: none !important;
}

/* ---- components/_mobile-modules.css ---- */
/* ==========================================================================
   MOBILE MODULES — every desktop module opened from the APK left-swipe
   sidebar (25 visible tabs, 7 Sep 2026).
   Scope: html.mirai-mobile only (APK shell). Loads after _mobile-harness.css
   so it beats _module-polish.css !important on the same properties.
   Module tab.css still wins on equal specificity (it loads later) — this is
   the floor, module-specific mobile rules stay the ceiling.
   Tokens only. No hex. 16px inputs = focus-zoom guard (sanctioned).
   ========================================================================== */

/* ---- 1. Page title — the app header is gone on APK (4 Sep), so the page
   nav is the only place the module names itself. Title + primary action on
   row 1, section tabs as a scroll strip on row 2. Hidden again when the
   Work subnav (Organiser · Plan · Tasks · Notes) already names the tab. ---- */
html.mirai-mobile .mod-nav-with-title > .mod-nav-title {
  display: block !important;
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--c-heading-color, var(--s-text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--sp-1) 0;
}

html.mirai-mobile.has-mobile-work-subnav .mod-nav-with-title > .mod-nav-title {
  display: none !important;
}

html.mirai-mobile .mod-nav-with-title {
  /* polish pins padding 0 20px / gap 10px / min-height 52px with !important */
  padding: var(--sp-1) max(10px, env(safe-area-inset-right, 0px)) var(--sp-2) max(10px, env(safe-area-inset-left, 0px)) !important;
  gap: var(--sp-2) !important;
  min-height: 44px !important;
  border-bottom: 1px solid var(--s-hairline) !important;
}

html.mirai-mobile .mod-nav-with-title > .mod-toolbar-spacer {
  display: none;
}

html.mirai-mobile .mod-nav-with-title > .mod-btn,
html.mirai-mobile .mod-nav-with-title > .mod-nav-actions,
html.mirai-mobile .mod-nav-with-title > .mod-dropdown {
  order: 1;
  flex: 0 0 auto;
}

html.mirai-mobile .mod-nav-with-title > .mod-nav-tabs,
html.mirai-mobile .mod-nav-with-title > .mod-section-nav {
  order: 2;
  flex: 1 1 100% !important;
  margin-left: 0 !important;
  width: 100%;
}

/* When the Work subnav names the tab there is no title row — let a lone
   button sit on the tabs row instead of a blank line above it. */
html.mirai-mobile.has-mobile-work-subnav .mod-nav-with-title > .mod-btn,
html.mirai-mobile.has-mobile-work-subnav .mod-nav-with-title > .mod-nav-actions {
  order: 3;
  margin-left: auto;
}
html.mirai-mobile.has-mobile-work-subnav .mod-nav-with-title > .mod-nav-tabs {
  flex: 1 1 auto !important;
  width: auto;
}

/* ---- 2. Page body — polish forces padding:20px !important; a phone gives
   that 40px away per row. Gutter 10px + safe area. Messenger / map bodies
   keep their zero top/bottom (they own their own inner padding). ---- */
html.mirai-mobile .mod-page-body {
  padding: var(--sp-3) max(10px, env(safe-area-inset-right, 0px)) var(--sp-5) max(10px, env(safe-area-inset-left, 0px)) !important;
}

html.mirai-mobile .mod-page-body:has(.sms-layout),
html.mirai-mobile .mod-page-body:has(.email-layout),
html.mirai-mobile .mod-page-body:has(.lc-split),
html.mirai-mobile .mod-page-body:has(.lc-map),
html.mirai-mobile .mod-page-body:has(.db-root),
html.mirai-mobile .mod-page-body:has(.mon-map-wrap),
html.mirai-mobile .mod-page-body:has(.notes-layout) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- 3. Track B raised card shells (DESIGN_SPEC §19) — keep the shell,
   trim the chrome: 20px padding → 12px, xl radius → lg, tighter stacking. ---- */
html.mirai-mobile .gpu-card,
html.mirai-mobile .pwr-card,
html.mirai-mobile .pm-card,
html.mirai-mobile .lc-card,
html.mirai-mobile .fab-panel,
html.mirai-mobile .media-card,
html.mirai-mobile .qr-card,
html.mirai-mobile .qr-comms-card,
html.mirai-mobile .sv-card,
html.mirai-mobile .infra-card,
html.mirai-mobile .dsh-link-group,
html.mirai-mobile .camera-card,
html.mirai-mobile .bank-card,
html.mirai-mobile .ct-card,
html.mirai-mobile .apr-card,
html.mirai-mobile .plan-card,
html.mirai-mobile .mm-card,
html.mirai-mobile .nt-card,
html.mirai-mobile .td-card,
html.mirai-mobile .org-card,
html.mirai-mobile .rpt-card,
html.mirai-mobile .ap-card {
  padding: var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-lg);
}

/* Stat tiles: fixed 2-up so a 320–412px phone never drops to a single
   stacked column or overflows a 140px minmax track. */
html.mirai-mobile .gpu-stat-grid,
html.mirai-mobile .pwr-stat-grid,
html.mirai-mobile .lc-stat-grid,
html.mirai-mobile .fab-stat-grid,
html.mirai-mobile .infra-stat-grid,
html.mirai-mobile .camera-stat-grid,
html.mirai-mobile .mm-stat-grid,
html.mirai-mobile .rpt-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

html.mirai-mobile .gpu-stat-card,
html.mirai-mobile .pwr-stat-card,
html.mirai-mobile .lc-stat-card,
html.mirai-mobile .fab-stat-card,
html.mirai-mobile .infra-stat-card,
html.mirai-mobile .camera-stat-card,
html.mirai-mobile .mm-stat-card,
html.mirai-mobile .rpt-stat-card {
  padding: var(--sp-3);
  gap: var(--sp-2);
  border-radius: var(--radius-lg);
}

html.mirai-mobile .gpu-stat-value,
html.mirai-mobile .pwr-stat-value,
html.mirai-mobile .lc-stat-value,
html.mirai-mobile .fab-stat-value,
html.mirai-mobile .infra-stat-value,
html.mirai-mobile .camera-stat-value,
html.mirai-mobile .mm-stat-value,
html.mirai-mobile .rpt-stat-value {
  font-size: var(--t-font-size-lg);
}

/* Flat stat strip (.mod-stats and module clones): 2-up, smaller value. */
html.mirai-mobile .mod-stat,
html.mirai-mobile .pm-stat,
html.mirai-mobile .lc-stat,
html.mirai-mobile .lc-metric {
  flex: 1 1 calc(50% - 1px);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
}

html.mirai-mobile .mod-stat:nth-child(even) {
  border-right: none !important;
}

html.mirai-mobile .mod-stat-value {
  font-size: var(--t-font-size-xl);
}

/* ---- 4. Toolbars / search / forms ---- */
html.mirai-mobile .mod-toolbar {
  margin-bottom: var(--sp-4) !important;
  gap: var(--sp-2) !important;
}

html.mirai-mobile .mod-toolbar .mod-toolbar-spacer {
  display: none;
}

html.mirai-mobile .mod-search,
html.mirai-mobile .mod-toolbar .mod-search {
  flex: 1 1 100%;
  max-width: none;
  min-width: 0;
}

html.mirai-mobile .mod-toolbar > .mod-dropdown,
html.mirai-mobile .mod-toolbar > select.mod-input,
html.mirai-mobile .mod-toolbar > .mod-input {
  flex: 1 1 45%;
  min-width: 0;
}

html.mirai-mobile .mod-toolbar > .mod-btn {
  flex: 1 1 auto;
  min-width: 0;
}

html.mirai-mobile .mod-form-grid {
  grid-template-columns: 1fr;
}

html.mirai-mobile .mod-form-row {
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

html.mirai-mobile .mod-form-row .mod-form-group {
  width: 100%;
}

html.mirai-mobile .mod-detail {
  padding: var(--sp-4) var(--sp-3);
}

html.mirai-mobile .mod-detail-row {
  flex-direction: column;
  gap: 2px;
}

html.mirai-mobile .mod-detail-label {
  min-width: 0;
  font-size: var(--t-font-size-xs);
}

html.mirai-mobile .mod-detail-value {
  overflow-wrap: anywhere;
}

/* ---- 5. Tables — polish pads cells 14px !important; on a phone that is
   28px of gutter per column. Keep the shared horizontal-scroll wrap live
   (polish sets overflow:visible, tab-panel clips it — unreachable columns). ---- */
html.mirai-mobile .mod-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

html.mirai-mobile .mod-table th {
  padding: var(--sp-2) var(--sp-2-5, 10px) !important;
}

html.mirai-mobile .mod-table td {
  padding: var(--sp-2-5, 10px) var(--sp-2-5, 10px) !important;
}

/* Hover-revealed row actions have no hover on touch */
html.mirai-mobile .mod-table td.col-actions .mod-btn,
html.mirai-mobile .mod-list-row-actions {
  opacity: 1;
}

/* ---- 6. Buttons / touch targets — harness sets .mod-btn 44px; the small and
   icon variants inside rows and tables get the same 44px floor (owner call:
   the touch-target guideline beats density on the phone). ---- */
html.mirai-mobile .mod-btn-sm {
  min-height: 44px;
}

html.mirai-mobile .mod-btn-icon {
  min-width: 44px;
  min-height: 44px;
}

html.mirai-mobile .mod-list-row-actions .mod-btn,
html.mirai-mobile .mod-list-row-actions .mod-btn-icon {
  min-width: 44px;
  min-height: 44px;
}

html.mirai-mobile .mod-pagination {
  justify-content: center;
  padding: var(--sp-3) 0;
}

html.mirai-mobile .mod-pagination-btns .mod-btn {
  min-width: 44px;
}

html.mirai-mobile .mod-empty {
  padding: var(--sp-8) var(--sp-3);
}

/* ---- 7. Modals → phone sheet. Overlay padding 24px + body 32px + 85vh
   leaves a postage stamp; use the width, clear the bottom nav. ---- */
html.mirai-mobile .mod-modal-overlay {
  padding: var(--sp-2);
  padding-bottom: calc(var(--mobile-bottom-nav-safe, 56px) + var(--sp-2));
  align-items: flex-end;
}

html.mirai-mobile .mod-modal {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - var(--mobile-bottom-nav-safe, 56px) - var(--sp-4));
  border-radius: var(--radius-lg);
}

html.mirai-mobile .mod-modal-header {
  padding: var(--sp-3) var(--sp-4);
}

html.mirai-mobile .mod-modal-body {
  padding: var(--sp-4);
}

html.mirai-mobile .mod-modal-footer {
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-2);
}

html.mirai-mobile .mod-modal-footer .mod-btn {
  flex: 1 1 auto;
  min-height: 44px;
}

html.mirai-mobile .mod-modal-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.mirai-mobile .mod-modal .mod-input,
html.mirai-mobile .mod-modal select,
html.mirai-mobile .mod-modal textarea {
  font-size: 16px;
}

/* ---- 8. Per-module fixes for hazards the module's own breakpoints miss ---- */

/* Secrets: unlock form + search pin 180/200px minimums side by side. */
html.mirai-mobile .sv-unlock-form .mod-input,
html.mirai-mobile .sv-search {
  min-width: 0;
  flex: 1 1 100%;
  margin-left: 0;
}
html.mirai-mobile .mod-table td.sv-desc,
html.mirai-mobile .sv-val {
  max-width: 40vw;
}

/* Fab: printer board row (name · state · temps) does not wrap; temp block
   demands 200px. Job filter fixed 130px. */
html.mirai-mobile .fab-board-row {
  flex-wrap: wrap;
}
html.mirai-mobile .fab-temp {
  min-width: 0;
  max-width: none;
  flex: 1 1 100%;
}
html.mirai-mobile .fab-job-filter {
  width: 100%;
  flex: 1 1 100%;
}
html.mirai-mobile .fab-file-chip {
  max-width: 55vw;
}

/* Camera: PTZ options 180px min, form inputs 140px min, nav meta 18rem. */
html.mirai-mobile .camera-ptz-opts {
  min-width: 0;
  width: 100%;
}
html.mirai-mobile .camera-form-row .mod-input {
  flex: 1 1 100%;
  min-width: 0;
}
html.mirai-mobile .camera-form-row .mod-input.is-narrow,
html.mirai-mobile .camera-form-row .mod-input.is-med {
  flex: 1 1 40%;
  min-width: 0;
}
html.mirai-mobile .camera-kv {
  grid-template-columns: 6rem minmax(0, 1fr);
}
html.mirai-mobile .camera-nav-meta {
  max-width: 50vw;
}

/* Media: filter dropdown capped 180px in a wrapping toolbar; lightbox gutter. */
html.mirai-mobile .media-toolbar .media-filter {
  flex: 1 1 45%;
  min-width: 0;
  max-width: none;
}
html.mirai-mobile .media-lightbox {
  padding: var(--sp-2);
}
html.mirai-mobile .media-lightbox-frame {
  max-width: 100vw;
}

/* Quorum: comms grid minmax(300px) overflows a 316px card; action col width. */
html.mirai-mobile .qr-comms-grid {
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
html.mirai-mobile .qr-th-actions,
html.mirai-mobile .qr-th-actions-sm {
  width: auto;
}

/* Power: device tiles minmax(160px) → single column on a phone; 2-up. */
html.mirai-mobile .pwr-device-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

/* Projects: overview search capped 260px. */
html.mirai-mobile .pm-ov-search {
  max-width: none;
  flex: 1 1 100%;
}

/* Infra: filter capped 24rem; description/host cells sized for desktop. */
html.mirai-mobile .infra-filter-row {
  max-width: none;
}
html.mirai-mobile .mod-table td.infra-desc {
  max-width: 40vw;
}
html.mirai-mobile .infra-hosts-table td:first-child {
  min-width: 7rem;
  max-width: 9rem;
}

/* Company (reporting): chart canvases 240px tall on a 360px-wide card. */
html.mirai-mobile .rpt-canvas-wrap {
  height: 200px;
}

/* Dashboard launcher: outer pad stacks on the body gutter. */
html.mirai-mobile .dsh-pad {
  padding: var(--sp-2) 0 var(--sp-8);
  gap: var(--sp-4);
}
html.mirai-mobile .dsh-link-group {
  padding: var(--sp-3);
}

/* Contacts: search pinned to 200px basis. */
html.mirai-mobile .ct-search {
  flex: 1 1 100%;
}

/* Banking: approval row body + 8rem aside + 22rem action strip on one line. */
html.mirai-mobile .bank-approval-row {
  flex-wrap: wrap;
}
html.mirai-mobile .bank-approval-aside {
  flex: 1 1 100%;
  min-width: 0;
  align-items: flex-start;
  padding: 0 var(--sp-2) var(--sp-2);
}
html.mirai-mobile .bank-approval-actions {
  justify-content: flex-start;
  max-width: none;
}
html.mirai-mobile .bank-approval-actions .mod-btn {
  flex: 1 1 auto;
}

/* Rover: number inputs + action buttons. */
html.mirai-mobile .rover-actions input[type="number"] {
  min-height: 40px;
  font-size: 16px;
}
html.mirai-mobile .rover-actions .mod-btn {
  flex: 1 1 auto;
}
html.mirai-mobile .rover-kv-v {
  min-width: 0;
}

/* Location: metric strip + daily rows already tuned at 600px; battery/label
   nowrap can still push the side panel. */
html.mirai-mobile .lc-side {
  max-height: none;
}

/* Light theme: hairlines are dark-shared tokens; nothing to re-interpolate.
   Sheet modal edge in light uses the same --s-border. */

/* Quorum: stacked agent rows pin edit/remove absolutely top-right with an
   88px gutter — the buttons clip to "As…". Give actions their own row. */
html.mirai-mobile .qr-agent-table tbody tr {
  padding-right: var(--sp-3);
}
html.mirai-mobile .qr-agent-table tbody tr td.col-actions {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  width: auto;
}
html.mirai-mobile .qr-agent-table tbody tr td.col-actions .mod-btn {
  flex: 1 1 auto;
  min-height: 44px;
}

/* Toolbar dropdowns: the wrapper takes 45% but the trigger is inline-flex
   and stays at content width — stretch the trigger to the wrapper. */
html.mirai-mobile .mod-toolbar > .mod-dropdown .mod-dropdown-trigger {
  width: 100%;
  justify-content: space-between;
  min-height: 44px;
}

/* GPU Fleet: #gpu-cards reuses .gpu-stat-grid as the *host* grid (one
   .gpu-card per GPU, each holding its own .gpu-stat-grid of tiles). The
   generic 2-up above put two host cards side by side at ~150px and the
   tiles inside collapsed to icons. Hosts stack; tiles stay 2-up. */
html.mirai-mobile #gpu-cards.gpu-stat-grid,
html.mirai-mobile .gpu-stat-grid:has(> .gpu-host-block) {
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

/* device_plane / health / monitoring hero stat tiles (Track B, DESIGN_SPEC
   §19.1) were never added to the mobile trim above. device_plane's grid is
   additionally a sibling of #mdp-body (modules/device_plane/tab.js:324) and
   .mdp-body is overflow:hidden, so its row can never be scrolled off a
   phone — hence the tighter 3-up + no icon chip for that one. */
html.mirai-mobile .mdp-stat-grid,
html.mirai-mobile .health-stat-grid,
html.mirai-mobile .mon-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

html.mirai-mobile .mdp-stat-card,
html.mirai-mobile .health-stat-card,
html.mirai-mobile .mon-stat-card {
  padding: var(--sp-3);
  gap: var(--sp-2);
  border-radius: var(--radius-lg);
}

html.mirai-mobile .mdp-stat-value,
html.mirai-mobile .health-stat-value,
html.mirai-mobile .mon-stat-value {
  font-size: var(--t-font-size-lg);
}

html.mirai-mobile .mdp-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--sp-2) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
}

html.mirai-mobile .mdp-stat-icon {
  display: none;
}

/* ---- components/_workspace-headers.css ---- */
/* P116 / ws_223, 28 September 2026. Shared module chrome.
 * One top inset, one control scale. Header rows may wrap on narrow screens;
 * tab strips scroll independently. No card, dialog, editor or chat controls.
 */
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) {
  --workspace-header-height: 64px;
  --workspace-header-control: 40px;
  --workspace-header-inset: 24px;
  --workspace-header-gutter: 20px;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel):not(#dashboard-panel) > .mod-page {
  padding-top: var(--workspace-header-inset) !important;
  box-sizing: border-box;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
  .mod-nav, .mod-page > .mod-nav-tabs, .mod-page > .mod-section-nav,
  .fx-address, .fx-toolbar, .media-toolbar, .email-workspace-head, .email-mobile-head, .wx-toolbar
) {
  box-sizing: border-box !important;
  min-height: var(--workspace-header-height) !important;
  height: auto !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 9px var(--workspace-header-gutter) 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--s-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Empty title-only bars remain collapsed by the shared title-removal rule. */
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-tabs {
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: var(--workspace-header-control) !important;
  height: var(--workspace-header-control) !important;
  min-width: 0 !important;
  max-width: 100%;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  scroll-padding-inline: 4px;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
  .mod-nav, .mod-page > .mod-nav-tabs, .mod-page > .mod-section-nav,
  .fx-address, .fx-toolbar, .media-toolbar, .email-workspace-head, .email-mobile-head, .wx-toolbar
) :is(.mod-btn, .mod-nav-btn, .mod-dropdown-btn, .mod-dropdown-trigger, .mod-select, select, .mod-search, .mod-input:not(.mod-search input)) {
  box-sizing: border-box !important;
  height: var(--workspace-header-control) !important;
  min-height: var(--workspace-header-control) !important;
  max-height: var(--workspace-header-control) !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  font: 500 13px/1.4 Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
  .mod-nav, .fx-address, .fx-toolbar, .media-toolbar, .email-workspace-head, .email-mobile-head, .wx-toolbar
) :is(.mod-btn, .mod-dropdown-btn, .mod-dropdown-trigger, .mod-select, select, .mod-search, .mod-input:not(.mod-search input)) {
  border-radius: 8px !important;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
  .mod-nav, .fx-address, .fx-toolbar, .media-toolbar, .email-workspace-head, .email-mobile-head, .wx-toolbar
) .mod-btn {
  padding-inline: 12px !important;
  gap: 8px !important;
  flex-shrink: 0;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
  .mod-nav, .fx-address, .fx-toolbar, .media-toolbar, .email-workspace-head, .email-mobile-head, .wx-toolbar
) .mod-btn-icon {
  width: var(--workspace-header-control) !important;
  min-width: var(--workspace-header-control) !important;
  padding-inline: 0 !important;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
  .mod-nav, .mod-page > .mod-nav-tabs, .mod-page > .mod-section-nav
) .mod-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding-inline: 2px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  white-space: nowrap;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav .mod-nav-btn:is(.active,[aria-selected="true"]) {
  color: var(--workspace-heading, var(--s-accent)) !important;
  border-bottom-color: currentColor !important;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav .mod-nav-btn:hover {
  color: var(--s-text-primary) !important;
}
/* Inset focus stays visible inside horizontally scrollable tab strips. */
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav .mod-nav-btn:focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: -3px !important;
}
/* Media's content wrapper owns the horizontal gutter already. */
html[data-theme] .app.voice-app #media-panel .media-toolbar {
  padding-inline: 0 !important;
  margin-bottom: 20px !important;
}
@media (max-width: 760px), (pointer: coarse) {
  html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) {
    --workspace-header-control: 44px;
  }
}
@media (max-width: 760px) {
  html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) {
    --workspace-header-gutter: 12px;
  }
  html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(
    .mod-nav, .fx-address, .fx-toolbar, .email-workspace-head, .email-mobile-head, .wx-toolbar
  ) {
    padding: 9px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)) !important;
  }
}

/* Mail's mobile list heading replaces its desktop navigation. */
@media (max-width: 760px) {
 html[data-theme] .app.voice-app #email-panel .email-mail-list-head {
  box-sizing: border-box !important;
  min-height: var(--workspace-header-height) !important;
  padding-block: 9px 10px !important;
 }
 html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-tabs {
  order: -1 !important;
 }
}
html[data-theme] .app.voice-app #media-panel > .mod-page > .mod-page-body {
 padding-top: 0 !important;
}

/* Action groups are part of the bar, never a second padded toolbar. */
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-actions {
 min-height: var(--workspace-header-control) !important;
 padding: 0 !important;
 margin-block: 0 !important;
 border: 0 !important;
 gap: 8px !important;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > label {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-block: 0 !important;
}
/* Match custom Weather tabs to the same navigation treatment. */
html[data-theme] .app.voice-app .tab-panel#weather-panel .wx-toolbar .wx-layouts button.mod-btn {
 padding-inline: 2px !important;
 border-radius: 0 !important;
 border: 0 !important;
 border-bottom: 2px solid transparent !important;
}
html[data-theme] .app.voice-app .tab-panel#weather-panel .wx-layouts { gap: 16px !important; }
html[data-theme] .app.voice-app .tab-panel#weather-panel .wx-toolbar .wx-layouts button.mod-btn[aria-pressed="true"] {
 border-bottom-color: var(--s-accent) !important;
}

html[data-theme] .app.voice-app .tab-panel#weather-panel .wx-toolbar {
 flex-wrap: wrap !important;
}

/* P116, 30 Sep: section actions end at the right gutter on mobile. */
html.mirai-mobile[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(.mod-nav, .mod-toolbar, .media-toolbar, .fx-toolbar) {
 justify-content: flex-end !important;
}
html.mirai-mobile[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-actions {
 margin-left: auto !important; justify-content: flex-end !important;
}
@media (max-width: 760px) {
 html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(.mod-nav, .mod-toolbar, .media-toolbar, .fx-toolbar) {
  justify-content: flex-end !important;
 }
 html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-actions {
  margin-left: auto !important; justify-content: flex-end !important;
 }
}

/* ---- components/_workspace-headings.css ---- */
/* Structural headings across the harness. P116, Aaron 28 Sep 2026.
 * Explicit heading targets: never colour complete toolbar/card containers,
 * record text, authored documents or input values by substring matching. */
html:root[data-theme] { --s-text-heading: var(--mirai-teal, #21BFC1); }
html:root[data-theme="light"] { --s-text-heading: #066B6C; }
html[data-theme] body :is(
  .mod-title,
  .mod-nav-title,
  .mod-page-title,
  .mod-section-title,
  .mod-card-title,
  .mod-heading,
  .mod-dialog-title,
  .mod-modal-title,
  .settings-section-title,
  .dsh-section-title,
  .org-month-title,
  .org-section-title,
  .td-section-title,
  .ct-section-title,
  .plan-col-title,
  .nt-heading,
  .nt-group-title,
  .rpt-cat-title,
  .camera-section-title,
  .fab-card-title,
  .lc-section-title,
  .mm-detail__title,
  .mm-settings-group__title,
  .pm-dash-title,
  .qr-subheading,
  .rover-section-title,
  .sms-section-title,
  .sms-thread-heading,
  .chains-editor-heading,
  .db-ret-title,
  .db-sidebar-title,
  .decisions-log-form-title,
  .email-compose-title,
  .email-folder-heading,
  .email-att-head,
  .email-draft-head,
  .inf-api-card-title,
  .inf-prov-card-title,
  .inf-role-card-title,
  .inf-section-title,
  .mos-section-title,
  .mos-detail-title,
  .obj-section-title,
  .obj-slideout-title,
  .pe-viewer-title,
  .pm-detail-project-name,
  .research-detail-title,
  .sa-sub-card-title,
  .sg-section-title,
  .sg-subsection-title,
  .think-group-title,
  .thr-pane-title,
  .ua-section-title,
  .vs-section-title,
  .vs-voice-group-title,
  .briefing-digest-heading,
  .briefing-section-title,
  .apr-bulk-confirm-title
),
html[data-theme] body .tab-panel:not(#chat-panel) :is(h1, h2, h3, h4, h5, h6, [role="heading"], th):not([contenteditable="true"] *, .notes-editor *, .email-compose-editor *),
html[data-theme] body :is(.mod-modal, .mod-dialog, .settings-panel, .settings-modal, .voice-dialog, .voice-pin-dialog, .enroll-box) :is(h1, h2, h3, h4, h5, h6, [role="heading"]),
html[data-theme] body #transcript .msg :is(h1, h2, h3, h4, h5, h6),
html[data-theme] body :is(.nav-sidebar, .voice-sidebar) :is(.sidebar-section-label, .sidebar-group-header, .sidebar-header-label, .sidebar-date-group, .lb-strip-label) {
  color: var(--s-text-heading) !important;
}

/* ---- components/_workspace-surfaces.css ---- */
/* P116 / decision 784 — approved r002 surfaces across the platform.
 * Solid content on the shared Mandala, existing semantic theme colours.
 * Explicit module selectors preserve canvases, tables, native controls and chat.
 * Organiser and Notes retain their approved module-owned implementation.
 */
html[data-theme] .tab-panel:not(#chat-panel) {
  --workspace-surface-radius: 12px;
  --workspace-surface-pad: 24px;
  --workspace-surface-gap: 24px;
  --workspace-record-pad: 18px 20px;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-page .mod-btn {
  border-radius: 8px !important;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-page :is(.mod-input, .mod-select, .mod-textarea, .mod-search) {
  border-radius: 8px;
}
/* Empty/loading/results are content surfaces too; no opaque page wrapper. */
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-empty, .mod-error) {
  background: var(--s-bg-surface) !important;
  border: 1px dashed var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
}
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-card, .mod-panel) {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
}

/* agent_phone */
html[data-theme] #agent_phone-panel .ap-card,
html[data-theme] #agent_phone-panel .ap-tx-panel {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* agent_settings */
html[data-theme] #agent_settings-panel .as-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* ai_gateway */
html[data-theme] #ai_gateway-panel .aigw-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* approvals */
html[data-theme] #approvals-panel .apr-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #approvals-panel .apr-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #approvals-panel .apr-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* automations */
html[data-theme] #automations-panel .auto-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #automations-panel .auto-card:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #automations-panel .auto-card:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* banking */
html[data-theme] #banking-panel .bank-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* brand */
html[data-theme] #brand-panel .brand-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* briefing */
html[data-theme] #briefing-panel .briefing-digest-row,
html[data-theme] #briefing-panel .briefing-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #briefing-panel .briefing-digest-row:is(.active, .selected, .is-selected, [aria-selected="true"]),
html[data-theme] #briefing-panel .briefing-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #briefing-panel .briefing-digest-row:is(:hover, :focus-within),
html[data-theme] #briefing-panel .briefing-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* camera */
html[data-theme] #camera-panel .camera-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* chains */
html[data-theme] #chains-panel .chains-library,
html[data-theme] #chains-panel .chains-main {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}
html[data-theme] #chains-panel .chains-workflow,
html[data-theme] #chains-panel .chains-run-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #chains-panel .chains-workflow:is(.active, .selected, .is-selected, [aria-selected="true"]),
html[data-theme] #chains-panel .chains-run-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #chains-panel .chains-workflow:is(:hover, :focus-within),
html[data-theme] #chains-panel .chains-run-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* classifieds */
html[data-theme] #classifieds-panel .mod-list-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #classifieds-panel .mod-list-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #classifieds-panel .mod-list-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }
html[data-theme] #classifieds-panel .cl-draft {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* code */
html[data-theme] #code-panel .code-editor-panel,
html[data-theme] #code-panel .code-output-panel,
html[data-theme] #code-panel .code-history-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* commitments */
html[data-theme] #commitments-panel .cmt-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #commitments-panel .cmt-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #commitments-panel .cmt-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* contacts */
html[data-theme] #contacts-panel .ct-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #contacts-panel .ct-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #contacts-panel .ct-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* cpu_monitor */
html[data-theme] #cpu_monitor-panel .cpu-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* dashboard */
html[data-theme] #dashboard-panel .dsh-tile {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}
html[data-theme] #dashboard-panel .dsh-link-add {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* database */
html[data-theme] #database-panel .db-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* decisions */
html[data-theme] #decisions-panel .mod-table-wrap,
html[data-theme] #decisions-panel .decisions-detail-panel {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* design */
html[data-theme] #design-panel .dw-tile {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}
html[data-theme] #design-panel .dw-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #design-panel .dw-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #design-panel .dw-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }
html[data-theme] #design-panel .design-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* device_plane */
html[data-theme] #device_plane-panel .mdp-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* Email owns its flat pane and message-row borders in modules/email/tab.css. */
/* fab */
html[data-theme] #fab-panel .fab-panel,
html[data-theme] #fab-panel .fab-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* file_manager */
html[data-theme] #file_manager-panel #fx-sidebar,
html[data-theme] #file_manager-panel .fx-content {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* goals */
html[data-theme] #goals-panel .goals-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #goals-panel .goals-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #goals-panel .goals-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* gpu_monitor */
html[data-theme] #gpu_monitor-panel .gpu-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* health */
html[data-theme] #health-panel .health-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* image_gen */
html[data-theme] #image_gen-panel .ig-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* inference */
html[data-theme] #inference-panel .inf-card,
html[data-theme] #inference-panel .inf-prov-card,
html[data-theme] #inference-panel .inf-api-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* infra_monitor */
html[data-theme] #infra_monitor-panel .infra-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* knowledge_base */
html[data-theme] #knowledge_base-panel .kb-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* location */
html[data-theme] #location-panel .lc-map,
html[data-theme] #location-panel .lc-side {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}
html[data-theme] #location-panel .lc-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* media */
html[data-theme] #media-panel .media-tile,
html[data-theme] #media-panel .media-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* mirai_data */
html[data-theme] #mirai_data-panel .mod-list {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #mirai_data-panel .mod-stats {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* mirai_os */
html[data-theme] #mirai_os-panel .mos-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #mirai_os-panel .mod-table-wrap {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* module_manager */
html[data-theme] #module_manager-panel .mm-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}
html[data-theme] #module_manager-panel .mm-list-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #module_manager-panel .mm-list-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #module_manager-panel .mm-list-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* monitoring */
html[data-theme] #monitoring-panel .mon-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* notifications */
html[data-theme] #notifications-panel .nt-item,
html[data-theme] #notifications-panel .nt-req-item {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #notifications-panel .nt-item:is(.active, .selected, .is-selected, [aria-selected="true"]),
html[data-theme] #notifications-panel .nt-req-item:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #notifications-panel .nt-item:is(:hover, :focus-within),
html[data-theme] #notifications-panel .nt-req-item:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* objectives */
html[data-theme] #objectives-panel .obj-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #objectives-panel .obj-kr-item {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #objectives-panel .obj-kr-item:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #objectives-panel .obj-kr-item:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* persona_editor */
html[data-theme] #persona_editor-panel .pe-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #persona_editor-panel .pe-filelist,
html[data-theme] #persona_editor-panel .pe-editor {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* plan */
html[data-theme] #plan-panel .plan-col {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* planner */
html[data-theme] #planner-panel .planner-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #planner-panel .planner-item {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #planner-panel .planner-item:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #planner-panel .planner-item:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* power_monitor */
html[data-theme] #power_monitor-panel .pwr-card,
html[data-theme] #power_monitor-panel .pwr-device-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* printer */
html[data-theme] #printer-panel .prt-form,
html[data-theme] #printer-panel .prt-queue {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #printer-panel .prt-status-bar {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* project_management */
html[data-theme] #project_management-panel .pm-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #project_management-panel .pm-project-row,
html[data-theme] #project_management-panel .pm-decision-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #project_management-panel .pm-project-row:is(.active, .selected, .is-selected, [aria-selected="true"]),
html[data-theme] #project_management-panel .pm-decision-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #project_management-panel .pm-project-row:is(:hover, :focus-within),
html[data-theme] #project_management-panel .pm-decision-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* quorum */
html[data-theme] #quorum-panel .qr-card,
html[data-theme] #quorum-panel .qr-comms-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* reporting */
html[data-theme] #reporting-panel .rpt-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* research */
html[data-theme] #research-panel .research-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* rover */
html[data-theme] #rover-panel .rover-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* scheduled_actions */
html[data-theme] #scheduled_actions-panel .sa-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* secrets */
html[data-theme] #secrets-panel .sv-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* security_watch */
html[data-theme] #security_watch-panel .sec-watch-section,
html[data-theme] #security_watch-panel .sec-watch-raw {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* sms */
html[data-theme] #sms-panel .sms-inbox-list,
html[data-theme] #sms-panel .sms-inbox-detail,
html[data-theme] #sms-panel .sms-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #sms-panel .sms-draft-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #sms-panel .sms-draft-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #sms-panel .sms-draft-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* strategic_advisor */
html[data-theme] #strategic_advisor-panel .sa-brief-card,
html[data-theme] #strategic_advisor-panel .sa-sub-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* style_guide */
html[data-theme] #style_guide-panel .sg-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* suggestions */
html[data-theme] #suggestions-panel .sg-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #suggestions-panel .sg-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #suggestions-panel .sg-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }
html[data-theme] #suggestions-panel .sg-scan {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* theme */
html[data-theme] #theme-panel .thm-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #theme-panel .thm-theme-btn {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* think */
html[data-theme] #think-panel .think-add-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #think-panel .think-entry {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #think-panel .think-entry:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #think-panel .think-entry:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* threads */
html[data-theme] #threads-panel .thr-sidebar,
html[data-theme] #threads-panel .thr-pane {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}

/* todo */
html[data-theme] #todo-panel .td-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #todo-panel .td-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #todo-panel .td-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* user_admin */
html[data-theme] #user_admin-panel .ua-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* voice_studio */
html[data-theme] #voice_studio-panel .vs-card,
html[data-theme] #voice_studio-panel .vs-card-full {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #voice_studio-panel .vs-voice-card {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #voice_studio-panel .vs-voice-card:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #voice_studio-panel .vs-voice-card:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* weather */
html[data-theme] #weather-panel .wx-place,
html[data-theme] #weather-panel .wx-trend,
html[data-theme] #weather-panel .wx-days,
html[data-theme] #weather-panel .wx-detail-grid > section,
html[data-theme] #weather-panel .wx-hour-details,
html[data-theme] #weather-panel .wx-planner {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* websites */
html[data-theme] #websites-panel .websites-site-rail {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
}
html[data-theme] #websites-panel .websites-section {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}
html[data-theme] #websites-panel .websites-site-row {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-record-pad) !important;
  margin-bottom: 12px;
}
html[data-theme] #websites-panel .websites-site-row:is(.active, .selected, .is-selected, [aria-selected="true"]) { background: var(--s-bg-selected) !important; border-color: var(--s-accent) !important; }
html[data-theme] #websites-panel .websites-site-row:is(:hover, :focus-within) { border-color: var(--s-border-strong) !important; }

/* xero_connector */
html[data-theme] #xero_connector-panel .xero-connection-ledger,
html[data-theme] #xero_connector-panel .xero-record-details {
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: var(--workspace-surface-radius) !important;
  box-shadow: none !important;
  min-width: 0;
  padding: var(--workspace-surface-pad) !important;
  margin-bottom: var(--workspace-surface-gap);
}

/* Plan keeps compact rows within each day; the Other rail needs room for actions. */
html[data-theme] #plan-panel .plan-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
html[data-theme] #plan-panel .plan-other-rail { border: 0; padding-left: 0; }
html[data-theme] #plan-panel .plan-days { gap: 0; }
html[data-theme] #plan-panel .plan-col { padding: var(--workspace-record-pad) !important; }
html[data-theme] #plan-panel .plan-item { padding: 12px 0; gap: 8px; }
html[data-theme] #plan-panel .plan-item-actions .mod-btn { min-width: 28px; width: 28px; padding-inline: 0; }
html[data-theme] #plan-panel .plan-list.is-empty { min-height: 0; }
html[data-theme] #plan-panel .plan-col-head { padding-bottom: 10px; }
@media (max-width: 800px) {
 html[data-theme] #database-panel .db-root { height: auto; min-height: 0; overflow: visible; }
 html[data-theme] #database-panel .db-split { flex: none; grid-auto-rows: auto; align-content: start; }
 html[data-theme] #database-panel .db-sidebar { width: 100%; max-width: none; margin-bottom: 0; min-height: 180px; }
 html[data-theme] #database-panel .db-main { min-height: 0; overflow: visible; }
}
/* A nested history region uses its parent writing surface. */
html[data-theme] #code-panel .code-output-panel .code-history-section {
 background: transparent !important; border: 0 !important; border-top: 1px solid var(--s-border) !important;
 border-radius: 0 !important; padding: 20px 0 0 !important; margin-bottom: 0;
}
/* Keep inner records continuous inside a grouped surface. */
html[data-theme] :is(#banking-panel .bank-card, #reporting-panel .rpt-card, #health-panel .health-card,
 #quorum-panel .qr-card, #secrets-panel .sv-card, #user_admin-panel .ua-card) .mod-list-row {
  padding-inline: 4px;
}
/* Record collections: headings sit above separate cards, matching the agenda. */
html[data-theme] :is(#todo-panel .td-list, #approvals-panel .apr-list, #contacts-panel .ct-list) { gap: 0; }
html[data-theme] #todo-panel .td-row-main { min-width: 0; gap: 18px; }
html[data-theme] :is(#todo-panel .td-row-title, #contacts-panel .ct-row-title, #approvals-panel .apr-row-title) {
  font-size: 15px !important; line-height: 1.5 !important;
}
html[data-theme] #todo-panel .td-row-actions { gap: 2px; }
html[data-theme] #dashboard-panel .dsh-icon-grid { gap: 14px; }
html[data-theme] #dashboard-panel .dsh-tile-main { padding: 18px 38px 18px 18px; }
html[data-theme] #dashboard-panel .dsh-tile-x { top: 22px; right: 4px; }
html[data-theme] #dashboard-panel .dsh-tile:hover { background: var(--s-bg-hover) !important; }
/* Pane gutters let the common artwork connect workspaces without reducing legibility. */
html[data-theme] #sms-panel .sms-messages-layout { gap: 24px; align-items: start; }
html[data-theme] #file_manager-panel .fx-layout { gap: 20px; padding: 20px; background: transparent; }
html[data-theme] #threads-panel .thr-layout { gap: 20px; padding: 20px; background: transparent; }
html[data-theme] #chains-panel .chains-workspace { gap: 20px; }
html[data-theme] #device_plane-panel .mdp-layout { gap: 20px; }
html[data-theme] #theme-panel .thm-theme-btn:is(.active, [aria-pressed="true"]) {
  border-color: var(--s-accent) !important; background: var(--s-bg-selected) !important;
}
html[data-theme] #module_manager-panel .mm-list-row.active,
html[data-theme] #design-panel .dw-row.selected {
  border-color: var(--s-accent) !important; background: var(--s-bg-selected) !important;
}
/* Consistent control radius for dialogs rendered outside module roots. */
html[data-theme] body:has(.tab-panel:not(#chat-panel).active) .mod-modal .mod-btn { border-radius: 8px !important; }
@media (max-width: 800px) {
 html[data-theme] .tab-panel:not(#chat-panel) { --workspace-surface-pad: 18px; --workspace-surface-gap: 20px; }
}
@media (max-width: 650px) {
 html[data-theme] .tab-panel:not(#chat-panel) { --workspace-surface-pad: 14px; --workspace-surface-gap: 18px; }
 html[data-theme] #dashboard-panel .dsh-icon-grid { gap: 10px; }
 html[data-theme] #dashboard-panel .dsh-tile-main { padding: 14px 26px 14px 10px; gap: 8px; }
 html[data-theme] #dashboard-panel .dsh-tile-x { right: 0; }
 html[data-theme] #todo-panel .td-row { padding: 12px 8px !important; gap: 6px; }
 html[data-theme] #todo-panel .td-row-main { gap: 8px; }
 html[data-theme] #contacts-panel .ct-row { padding: 14px 10px !important; }
 html[data-theme] :is(#todo-panel .td-row-title, #contacts-panel .ct-row-title, #approvals-panel .apr-row-title) { font-size: 14px !important; }
 html[data-theme] #file_manager-panel .fx-layout, html[data-theme] #threads-panel .thr-layout { padding: 12px; gap: 12px; }
 html[data-theme] #sms-panel .sms-messages-layout { gap: 16px; }
}
@media print {
 html[data-theme] .tab-panel:not(#chat-panel) { --workspace-surface-pad: 12px; }
}

/* ---- components/_workspace-details.css ---- */
/* P116 decision 786: deeper workspace components, existing theme tokens only.
 * Scope is CT210 modules; no chat, rail, canvas or external-product changes.
 * Do not restore hero statistics or duplicate page titles.
 */
html[data-theme] #approvals-panel .apr-detail-section,
html[data-theme] #camera-panel .camera-side-panel,
html[data-theme] #chains-panel .chains-inspector,
html[data-theme] #database-panel .db-retention-panel,
html[data-theme] #decisions-panel .decisions-log-form,
html[data-theme] #decisions-panel .decisions-review-form,
html[data-theme] #design-panel #dw-body:has(> h2),
html[data-theme] #fab-panel .fab-board-card,
html[data-theme] #goals-panel .goals-detail,
html[data-theme] #inference-panel .inf-role-card,
html[data-theme] #location-panel .lc-toolbar,
html[data-theme] #mirai_os-panel .mos-detail-head,
html[data-theme] #module_manager-panel .mm-detail-panel,
html[data-theme] #notifications-panel .nt-compose,
html[data-theme] #quorum-panel .qr-task-detail,
html[data-theme] #research-panel .research-evidence,
html[data-theme] #sms-panel .sms-compose-panel,
html[data-theme] #theme-panel .thm-card-form,
html[data-theme] #user_admin-panel .ua-detail,
html[data-theme] #websites-panel .websites-detail-head,
html[data-theme] #websites-panel #websites-detail-body,
html[data-theme] #websites-panel #websites-content:has(> .websites-section-head) {
  min-width: 0;
  background: var(--s-bg-surface) !important;
  border: 1px solid var(--s-border) !important;
  border-radius: 12px !important;
  padding: var(--workspace-surface-pad, 24px) !important;
  box-shadow: none !important;
}

/* Dense data has one continuous sheet. Scroll wide tables inside that sheet. */
html[data-theme] .tab-panel:not(#chat-panel) .mod-table-wrap {
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: 12px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-table th {
  background: var(--s-bg-surface-sunken);
  color: var(--s-text-secondary);
  font-weight: 600;
  padding-block: 14px;
  border-bottom: 1px solid var(--s-border);
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-table td {
  vertical-align: top;
  line-height: 1.6;
}
/* Existing parent cards own the border, including loading/empty states. */
html[data-theme] .tab-panel:not(#chat-panel) :is(
 .mod-card,.mod-panel,.ap-card,.bank-card,.brand-card,.camera-card,.cpu-card,
 .db-card,.fab-card,.fab-panel,.gpu-card,.health-card,.inf-card,.infra-card,
 .kb-card,.mdp-card,.mm-card,.mon-card,.mos-section,.pm-card,.pwr-card,
 .qr-card,.rpt-card,.research-card,.sa-card,.sv-card,.ua-card,.vs-card,
 .websites-section,.chains-library,.chains-main,.email-mail-detail,.sms-inbox-detail
) :is(.mod-empty,.mod-error) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: 112px;
}
html[data-theme] .tab-panel:not(#chat-panel) :is(
 .mod-card,.ap-card,.bank-card,.camera-card,.cpu-card,.db-card,.gpu-card,
 .health-card,.inf-card,.infra-card,.kb-card,.mon-card,.mos-section,.pm-card,
 .pwr-card,.qr-card,.rpt-card,.research-card,.sa-card,.sv-card,.ua-card,.vs-card
) .mod-table-wrap {
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 0;
}

/* Navigation inside detail pages uses the same visual language as page tabs. */
html[data-theme] .tab-panel:not(#chat-panel) .mod-nav-btn {
  background: transparent !important;
  color: var(--s-text-secondary) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 4px !important;
  min-height: 40px;
  font: 500 13px/1.4 Arial, Helvetica, sans-serif;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-nav-btn:is(.active,[aria-selected="true"],[aria-pressed="true"]) {
  color: var(--s-accent) !important;
  border-bottom-color: var(--s-accent) !important;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-nav-btn:hover { color: var(--s-text-primary) !important; }
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-nav-tabs,.websites-tabs) { gap: 16px; }

/* Controls belong to readable form groups, with room for labels and help. */
html[data-theme] .tab-panel:not(#chat-panel) .mod-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
html[data-theme] .tab-panel:not(#chat-panel) .mod-form-group { min-width: 0; margin-bottom: 20px; }
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-label,.mod-form-group>label) { line-height: 1.5; margin-bottom: 8px; }
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-input,.mod-select,.mod-textarea) {
  box-sizing: border-box;
  min-width: 0;
  border-radius: 8px;
}
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-detail-row,.mod-kv-row) { gap: 16px; padding-block: 12px; }
html[data-theme] .tab-panel:not(#chat-panel) :is(.mod-detail-value,.mod-kv-value) { min-width: 0; overflow-wrap: anywhere; }

/* A dropdown is one control, not a bordered trigger inside a bordered wrapper. */
html[data-theme] .tab-panel:not(#chat-panel) .mod-dropdown,
html[data-theme] body:has(.tab-panel.active) .mod-modal .mod-dropdown {
 background: transparent !important; border: 0 !important; box-shadow: none !important;
 min-width: 0; max-width: 100%;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-dropdown-trigger,
html[data-theme] body:has(.tab-panel.active) .mod-modal .mod-dropdown-trigger {
 box-sizing: border-box; width: 100%; border-radius: 8px;
 min-height: 40px; white-space: normal; overflow-wrap: anywhere; padding-right: 30px;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-dropdown-trigger:focus-visible {
 outline: 2px solid var(--s-accent) !important; outline-offset: 2px;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-table-wrap:has(.mod-dropdown.open) { overflow: visible; }
html[data-theme] .tab-panel:not(#chat-panel) .mod-dropdown-item { white-space: normal; overflow-wrap: anywhere; }

/* Dialogs remain opaque above the artwork; headings and actions stay visible. */
html[data-theme] body:has(.tab-panel.active) .mod-modal {
  background: var(--s-bg-surface);
  border: 1px solid var(--s-border);
  border-radius: 12px;
  min-width: 0;
  max-height: min(90dvh,100%,960px);
}
html[data-theme] body:has(.tab-panel.active) :is(.mod-modal-header,.mod-modal-footer) {
  background: var(--s-bg-surface);
  padding: 16px 24px;
  gap: 12px;
}
html[data-theme] body:has(.tab-panel.active) .mod-modal-header { border-radius: 12px 12px 0 0; align-items: flex-start; }
html[data-theme] body:has(.tab-panel.active) .mod-modal-footer { border-radius: 0 0 12px 12px; }
html[data-theme] body:has(.tab-panel.active) .mod-modal-header :is(h2,h3) {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 16px;
  margin: 0;
}
html[data-theme] body:has(.tab-panel.active) .mod-modal-body { padding: 24px; }
html[data-theme] body:has(.tab-panel.active) .mod-modal :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: 2px;
}
html[data-theme] .tab-panel:not(#chat-panel) :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: 2px;
}

/* Module-owned reading geometry: separate selection rails and detail sheets. */
html[data-theme] #goals-panel .goals-layout { gap: 24px; align-items: start; }
html[data-theme] #goals-panel .goals-list { border: 0; padding: 0; }
html[data-theme] #goals-panel .goals-detail:empty { display: none; }
html[data-theme] #goals-panel .goals-detail > :first-child { margin-top: 0; }
html[data-theme] #goals-panel .goals-section:last-child { padding-bottom: 0; }
html[data-theme] #inference-panel .inf-role-card { margin-bottom: 16px; gap: 20px; }
html[data-theme] #database-panel .db-retention-panel { margin-top: 20px; }
html[data-theme] #websites-panel .websites-detail-head { margin-bottom: 20px; align-items: flex-start; }
html[data-theme] #websites-panel .websites-tabs { margin-bottom: 20px; }
html[data-theme] #research-panel .research-evidence { margin-top: 20px; }
html[data-theme] #research-panel .research-evidence > .research-card {
 background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
html[data-theme] #quorum-panel .qr-task-detail { line-height: 1.7; }
html[data-theme] #contacts-panel .ct-toolbar { padding-left: 0; gap: 12px; }
html[data-theme] #contacts-panel :is(.ct-list,.ct-section-head) { padding-left: 0; }
html[data-theme] #email-panel .email-compose-standalone { box-sizing: border-box; }
html[data-theme] #sms-panel .sms-compose-panel { margin-top: 20px; }

/* Compact existing telemetry into a single sheet. Never change hidden displays. */
html[data-theme] :is(#cpu_monitor-panel .cpu-stat-grid,#gpu_monitor-panel .gpu-stat-grid,
 #health-panel .health-stat-grid,#infra_monitor-panel .infra-stat-grid,
 #power_monitor-panel .pwr-stat-grid,#location-panel .lc-stat-grid) {
 background: var(--s-bg-surface) !important;
 border: 1px solid var(--s-border) !important;
 border-radius: 12px !important;
 padding: 8px !important;
 gap: 0 !important;
 margin-block: 16px 24px;
}
html[data-theme] :is(#cpu_monitor-panel .cpu-stat-card,#gpu_monitor-panel .gpu-stat-card,
 #health-panel .health-stat-card,#infra_monitor-panel .infra-stat-card,
 #power_monitor-panel .pwr-stat-card,#location-panel .lc-stat-card) {
 padding: 14px !important;
 min-height: 0 !important;
 margin: 0 !important;
}
/* #gpu-cards reuses .gpu-stat-grid as the list of every GPU. That class was
   drawing one border around all of them. Per-GPU cards keep their own edge. */
html[data-theme] #gpu_monitor-panel #gpu-cards.gpu-stat-grid {
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 padding: 0 !important;
 margin-block: 0 !important;
 box-shadow: none !important;
}

@media (max-width: 760px) {
 html[data-theme] .tab-panel:not(#chat-panel) .mod-nav-btn { min-height: 44px; }
 html[data-theme] .tab-panel:not(#chat-panel) .mod-form-grid { grid-template-columns: minmax(0,1fr); }
 html[data-theme] #goals-panel .goals-layout { gap: 20px; }
 html[data-theme] #goals-panel .goals-list { max-height: 40dvh; }
 html[data-theme] body:has(.tab-panel.active) .mod-modal-overlay { padding: 12px; padding-bottom: max(12px,env(safe-area-inset-bottom)); }
 html[data-theme] body:has(.tab-panel.active) .mod-modal { max-height: min(100%,calc(100dvh - 24px - env(safe-area-inset-bottom,0px))); }
 html[data-theme] body:has(.tab-panel.active) :is(.mod-modal-header,.mod-modal-body,.mod-modal-footer) { padding: 16px; }
 html[data-theme] body:has(.tab-panel.active) .mod-modal :is(.mod-btn,.mod-input,.mod-select) { min-height: 44px; }
 /* Full-height readers keep the existing phone navigation contract. */
 html[data-theme] body:has(.tab-panel.active) .ct-profile-overlay { padding: 0; }
}

/* Action-first supporting detail: explicit opt-in, never hide record status. */
html[data-theme] .tab-panel .mod-optional-details {
  min-width: 0;
  margin-block: 8px;
  color: var(--s-text-secondary);
  overflow-wrap: anywhere;
}
html[data-theme] .tab-panel .mod-optional-details > summary {
  width: fit-content;
  max-width: 100%;
  padding-block: 8px;
  cursor: pointer;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
}
html[data-theme] .tab-panel .mod-optional-details > p {
  margin: 4px 0 12px;
  white-space: pre-wrap;
}
@media (pointer: coarse) {
  html[data-theme] .tab-panel .mod-optional-details > summary {
    min-height: 44px;
    box-sizing: border-box;
    align-content: center;
  }
}

/* Actions are discoverable without hovering, including keyboard/touch use. */
html[data-theme] .tab-panel .mod-table td.col-actions .mod-btn:not(:disabled),
html[data-theme] .tab-panel .mod-list-row-actions {
  opacity: 1;
}

/* Gallery cards restored by the shared surface layer need their inset too. */
html[data-theme] #design-panel .dw-tile {
  padding: var(--workspace-surface-pad, 20px) !important;
}
html[data-theme] #fab-panel .fab-stat-grid {
  padding: var(--workspace-surface-pad, 20px) !important;
}

/* Composite controls have one focus boundary. The inner text input must not
 * draw a second, inset rectangle inside the search shell. Keep clear buttons'
 * own focus indicators, and put switch focus on the visible track. */
html[data-theme] .tab-panel:not(#chat-panel) .mod-search:has(input:focus-visible),
html[data-theme] body:has(.tab-panel.active) .mod-modal .mod-search:has(input:focus-visible) {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: 2px;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-search input:focus-visible,
html[data-theme] body:has(.tab-panel.active) .mod-modal .mod-search input:focus-visible,
html[data-theme] .tab-panel:not(#chat-panel) .mod-toggle input:focus-visible,
html[data-theme] body:has(.tab-panel.active) .mod-modal .mod-toggle input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
html[data-theme] .tab-panel:not(#chat-panel) .mod-toggle input:focus-visible + .mod-toggle-slider,
html[data-theme] body:has(.tab-panel.active) .mod-modal .mod-toggle input:focus-visible + .mod-toggle-slider {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: 2px;
}

/* ---- components/_workspace-overlays.css ---- */
/* P116: shared search and voice dialogs follow the approved r002 surfaces. */
html[data-theme] #cmdkOverlay {
  padding: clamp(12px, 10dvh, 96px) 16px 16px;
  overflow-y: auto;
}
html[data-theme] #cmdkOverlay .cmdk-box {
  width: min(600px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px !important;
  background: var(--s-bg-surface);
}
html[data-theme] #cmdkOverlay .cmdk-input {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 16px 20px;
  border: 0 !important;
  border-bottom: 1px solid var(--s-border) !important;
  border-radius: 0 !important;
  background: var(--s-bg-surface) !important;
  font-size: 16px;
  caret-color: var(--s-accent);
  box-shadow: none !important;
}
html[data-theme] #cmdkOverlay .cmdk-input:focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: -3px;
}
html[data-theme] #cmdkOverlay .cmdk-list {
  min-height: 0;
  max-height: min(55dvh, 560px);
  padding: 8px;
  overscroll-behavior: contain;
}
html[data-theme] #cmdkOverlay .cmdk-item {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
}
html[data-theme] #cmdkOverlay .cmdk-label {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
html[data-theme] #cmdkOverlay .cmdk-hint {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: normal;
}
html[data-theme] .enroll-overlay {
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
html[data-theme] .enroll-overlay .enroll-box {
  width: min(420px, 100%);
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 24px;
  border-radius: 12px;
  background: var(--s-bg-surface);
  text-align: left;
}
html[data-theme] .enroll-box h3 {
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-heading-color);
  overflow-wrap: anywhere;
}
html[data-theme] .enroll-box input {
  min-height: 44px;
  border-radius: 8px;
}
html[data-theme] .enroll-box .enroll-btns {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
html[data-theme] .enroll-box .mod-btn,
html[data-theme] .thr-new-modal :is(.mod-btn, .mod-input) {
  min-height: 44px;
  border-radius: 8px !important;
}
html[data-theme] .enroll-box :is(input, button):focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: 2px;
}
html[data-theme] .enroll-box input:focus,
html[data-theme] .thr-new-modal .mod-input:focus {
  border-color: var(--s-border) !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  html[data-theme] #cmdkOverlay { padding: 12px; }
  html[data-theme] .enroll-overlay .enroll-box { padding: 20px; }
}

/* ---- components/_workspace-mobile-spacing.css ---- */
/* P116 / ws_223 — mobile spacing, 28 Sep 2026.
 * One outer gutter owner. Inset panels and records share a spacing scale;
 * tables, maps, authored documents and controls retain functional spacing.
 * Applies equally to mobile web and the web portion of the APK at phone widths.
 */
@media (max-width: 760px) {
 html[data-theme] {
  --workspace-mobile-gutter: 12px;
  --workspace-mobile-inset: 16px;
 }
 html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) {
  --workspace-surface-pad: var(--workspace-mobile-inset);
  --workspace-surface-gap: 16px;
  --workspace-record-pad: 12px var(--workspace-mobile-inset);
 }
 html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav {
  padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)) !important;
 }
 html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-page-body {
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) 16px max(12px, env(safe-area-inset-left, 0px)) !important;
 }
 /* These modules own their page gutter in the child layout. */
 html[data-theme] .app.voice-app .tab-panel:is(#dashboard-panel,#email-panel,#database-panel) .mod-page-body {
  padding: 0 !important;
 }
 /* Strip a second unbordered wrapper inset, not the padding inside a panel. */
 html[data-theme] .app.voice-app :is(
  #notes-panel .notes-layout, #threads-panel .thr-layout,
  #reporting-panel .rpt-pad, #persona_editor-panel .pe-layout,
  #contacts-panel .ct-card, #plan-panel .plan-card
 ) { padding: 0 !important; }
 html[data-theme] .app.voice-app #file_manager-panel .fx-layout,
 html[data-theme] .app.voice-app #goals-panel .goals-layout,
 html[data-theme] .app.voice-app #database-panel .db-root {
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) 16px max(12px, env(safe-area-inset-left, 0px)) !important;
 }
 /* Full-canvas map, no new blank bands above or below it. */
 html[data-theme] .app.voice-app #location-panel .mod-page-body:has(.lc-map) {
  padding-block: 0 !important;
 }
 html[data-theme] .app.voice-app :is(
  #notes-panel .notes-sidebar, #notes-panel .notes-list-row
 ) { padding: var(--workspace-mobile-inset) !important; }
 html[data-theme] .app.voice-app :is(
  #todo-panel .td-row, #contacts-panel .ct-row,
  #module_manager-panel .mm-list-row
 ) { padding: 12px var(--workspace-mobile-inset) !important; }
 /* Notes title, document and editor controls share the same reading edge. */
 html[data-theme] .app.voice-app #notes-panel :is(.notes-editor-bar,.notes-editor-foot) {
  padding: 12px var(--workspace-mobile-inset);
 }
 html[data-theme] .app.voice-app #notes-panel .notes-body-wrap { padding: var(--workspace-mobile-inset); }
 html[data-theme] .app.voice-app #notes-panel .notes-document-title { margin-inline: var(--workspace-mobile-inset); }
 /* Email has no outer card: its rows and chrome own the one 12px gutter. */
 html[data-theme] .app.voice-app #email-panel :is(
  .email-mobile-head,.email-mail-search,.email-search-options,
  .email-io-row,.email-msg-toolbar,.email-msg-card
 ) { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)) !important; }
 /* Shared sheets: one aligned inner edge, retaining safe-area/bottom-nav rules. */
 html[data-theme] body:has(.app.voice-app) :is(.mod-modal-header,.mod-modal-body,.mod-modal-footer) {
  padding-inline: var(--workspace-mobile-inset) !important;
 }
}

/* ---- components/_workspace-feedback.css ---- */
/* P116 / ws_223: action feedback shares the platform's theme and geometry.
 * Floating feedback must obscure underlying text, unlike workspace cards. */
html:root[data-theme] {
  --c-toast-bg: var(--s-bg-menu, var(--s-bg-overlay));
  --c-toast-radius: 12px;
  --c-toast-padding: 16px;
  --c-toast-width: 360px;
  --feedback-danger: #B42318;
}
html:root[data-theme="dark"] { --feedback-danger: #FF8A80; }
html[data-theme] .toast-container {
  max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html[data-theme] .toast {
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  font-size: 13px;
}
html[data-theme] .toast-close:focus-visible {
  outline: 2px solid var(--s-text-heading);
  outline-offset: -2px;
}
html:root[data-theme]:has(.app.voice-app) body :is(
 .mod-confirm, .mod-modal, .modal-content, .thr-new-modal, .enroll-box,
 .websites-dialog, .dw-dialog, .chains-dialog, .ua-modal, .fx-dialog, .qr-work-dialog,
 .ct-profile-overlay .ct-profile) {
  background: var(--s-bg-menu, var(--s-bg-overlay)) !important;
  color: var(--s-text-primary);
  border: 1px solid var(--s-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif;
  font-size: 13px;
}
html[data-theme] .mod-confirm-overlay {
  /* Confirmations can open above Media's 1200 lightbox and legacy editors. */
  z-index: max(var(--z-popover, 500), 1300);
  padding: 16px;
  padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
html[data-theme] body .mod-confirm {
  width: min(420px, 100%);
  max-width: 100% !important;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-theme] body .mod-confirm-body {
  padding: 20px !important;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  overflow-wrap: anywhere;
}
html[data-theme] .mod-confirm-body p {
  color: var(--s-text-primary);
  line-height: 1.5;
}
html[data-theme] .mod-confirm-body :is(h2, h3, .apr-bulk-confirm-title) {
  color: var(--s-text-heading) !important;
  font-size: 16px;
  font-weight: 500;
}
html[data-theme] .mod-confirm-icon { display: none; }
html[data-theme] body .mod-confirm-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px !important;
  border-top: 1px solid var(--s-border);
}
html[data-theme] .mod-confirm-actions .mod-btn {
  min-height: 44px;
  border-radius: 8px !important;
}
html[data-theme] :is(.mod-confirm, .mod-modal) .mod-btn-danger {
  color: var(--feedback-danger) !important;
}
html[data-theme] .mod-confirm :is(button, input):focus-visible {
  outline: 2px solid var(--s-text-heading) !important;
  outline-offset: 2px;
}
html[data-theme] .session-expired-banner {
  background: var(--s-bg-menu, var(--s-bg-overlay));
  color: var(--s-text-primary);
  font: 13px/1.5 Arial, sans-serif;
  flex-wrap: wrap;
}
html[data-theme] .session-expired-banner::before {
  content: '';
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s-text-heading);
}
html[data-theme] .session-expired-banner :is(.reload-btn, .mod-btn) {
  min-height: 44px;
  background: transparent;
}
/* Narrow browser windows use the same top placement as the APK WebView. */
@media (max-width: 768px) {
  html[data-theme] .toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }
  html[data-theme] .toast { width: 100%; max-width: none; }
  html[data-theme] body:has(> .session-expired-banner) .toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 80px);
  }
}
@media (max-width: 600px) {
  html[data-theme] .mod-confirm-overlay { padding-inline: 12px; }
  html[data-theme] body .mod-confirm-body,
  html[data-theme] body .mod-confirm-actions { padding: 16px !important; }
}

/* Native <dialog> action forms use the same paint and control dimensions. */
html[data-theme] :is(.fx-dialog, .qr-work-dialog) h2 {
  color: var(--s-text-heading);
  font-size: 16px;
  font-weight: 500;
}
html[data-theme] :is(.fx-dialog-actions, .qr-work-dialog .qr-detail-actions) {
  border-top: 1px solid var(--s-border);
  padding-top: 16px;
  gap: 12px;
}
html[data-theme] :is(.fx-dialog, .qr-work-dialog) .mod-btn {
  min-height: 44px;
}

/* ---- components/_workspace-mobile-compact.css ---- */
/* P116 #893 — content-first phone chrome, 30 Sep 2026. */
html.mirai-mobile[data-theme] .app.voice-app .tab-panel:not(#chat-panel) {
 --workspace-header-inset: 4px;
 --workspace-header-height: 52px;
 --workspace-header-control: 44px;
 --workspace-header-gutter: 12px;
}
html.mirai-mobile[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(.mod-nav,.fx-address,.fx-toolbar,.email-mobile-head,.wx-toolbar) {
 padding-block: 4px !important;
 row-gap: 4px !important;
}
html.mirai-mobile[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-tabs {
 flex: 1 1 auto !important;
 width: auto !important;
 max-width: 100%;
}
html.mirai-mobile[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-empty {
 min-height: 0 !important;
 padding: 20px 12px !important;
 margin-block: 8px !important;
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 box-shadow: none !important;
}
/* Redundant collection headings, not record names or form labels. */
html.mirai-mobile[data-theme] .app.voice-app #contacts-panel .ct-card-head { display: none !important; }
html.mirai-mobile[data-theme] .app.voice-app #notifications-panel .nt-card-head:has(> .nt-heading):not(:has(button)) {
 min-height: 0; margin-block: 0; padding-block: 0;
}
html.mirai-mobile[data-theme] .app.voice-app #notifications-panel .nt-card-head > .nt-heading { display: none; }
/* Empty split-pane placeholders need neither a second card nor a tall gap. */
html.mirai-mobile[data-theme] .app.voice-app #goals-panel .goals-detail:has(> p:only-child),
html.mirai-mobile[data-theme] .app.voice-app #threads-panel .thr-list,
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-content {
 background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html.mirai-mobile[data-theme] .app.voice-app #location-panel .lc-live-map { padding-top: 8px; }
html.mirai-mobile[data-theme] .app.voice-app #location-panel .lc-legend { margin-block: 0 4px; padding-block: 4px; }
html.mirai-mobile[data-theme] .app.voice-app #location-panel .lc-live-status { margin-block: 4px 8px; }
/* A single closed actions row, with all existing file operations reachable. */
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-toolbar { justify-content: flex-end; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more { display: block; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more > summary {
 display: flex; align-items: center; justify-content: center;
 min-height: 44px; min-width: 60px; padding-inline: 12px;
 border: 1px solid var(--s-border); border-radius: 8px;
 cursor: pointer; list-style: none;
}
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more > summary::-webkit-details-marker { display: none; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more[open] { flex-basis: 100%; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more[open] > summary { margin-left: auto; width: max-content; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more > .fx-more-actions { display: none; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more[open] > .fx-more-actions {
 display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding-top: 4px;
}
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more .fx-spacer { display: none; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-more .fx-hidden { min-height: 44px; }
html.mirai-mobile[data-theme] .app.voice-app #file_manager-panel .fx-address [data-action="refresh"] { min-width: 44px; }

@media (max-width: 760px) {
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) {
 --workspace-header-inset: 4px;
 --workspace-header-height: 52px;
 --workspace-header-control: 44px;
 --workspace-header-gutter: 12px;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) :is(.mod-nav,.fx-address,.fx-toolbar,.email-mobile-head,.wx-toolbar) {
 padding-block: 4px !important;
 row-gap: 4px !important;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-nav > .mod-nav-tabs {
 flex: 1 1 auto !important;
 width: auto !important;
 max-width: 100%;
}
html[data-theme] .app.voice-app .tab-panel:not(#chat-panel) .mod-empty {
 min-height: 0 !important;
 padding: 20px 12px !important;
 margin-block: 8px !important;
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 box-shadow: none !important;
}
/* Redundant collection headings, not record names or form labels. */
html[data-theme] .app.voice-app #contacts-panel .ct-card-head { display: none !important; }
html[data-theme] .app.voice-app #notifications-panel .nt-card-head:has(> .nt-heading):not(:has(button)) {
 min-height: 0; margin-block: 0; padding-block: 0;
}
html[data-theme] .app.voice-app #notifications-panel .nt-card-head > .nt-heading { display: none; }
/* Empty split-pane placeholders need neither a second card nor a tall gap. */
html[data-theme] .app.voice-app #goals-panel .goals-detail:has(> p:only-child),
html[data-theme] .app.voice-app #threads-panel .thr-list,
html[data-theme] .app.voice-app #file_manager-panel .fx-content {
 background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html[data-theme] .app.voice-app #location-panel .lc-live-map { padding-top: 8px; }
html[data-theme] .app.voice-app #location-panel .lc-legend { margin-block: 0 4px; padding-block: 4px; }
html[data-theme] .app.voice-app #location-panel .lc-live-status { margin-block: 4px 8px; }
/* A single closed actions row, with all existing file operations reachable. */
html[data-theme] .app.voice-app #file_manager-panel .fx-toolbar { justify-content: flex-end; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more { display: block; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more > summary {
 display: flex; align-items: center; justify-content: center;
 min-height: 44px; min-width: 60px; padding-inline: 12px;
 border: 1px solid var(--s-border); border-radius: 8px;
 cursor: pointer; list-style: none;
}
html[data-theme] .app.voice-app #file_manager-panel .fx-more > summary::-webkit-details-marker { display: none; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more[open] { flex-basis: 100%; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more[open] > summary { margin-left: auto; width: max-content; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more > .fx-more-actions { display: none; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more[open] > .fx-more-actions {
 display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding-top: 4px;
}
html[data-theme] .app.voice-app #file_manager-panel .fx-more .fx-spacer { display: none; }
html[data-theme] .app.voice-app #file_manager-panel .fx-more .fx-hidden { min-height: 44px; }
html[data-theme] .app.voice-app #file_manager-panel .fx-address [data-action="refresh"] { min-width: 44px; }
}

/* ---- main.css ---- */
/* ==========================================================================
   MIRAI — Main CSS Entry Point
   ========================================================================== */

/* Design System Tokens */

/* Layout */

/* Components */



/* xAI / SpaceX polish layer — last wins */

/* APK overlay must beat theme-xai/module-polish !important on the rail */

/* Desktop modules opened from the APK sidebar — phone floor for mod-* chrome */

/* Workspace refinements — formerly @import-ed at the top of _brand-mirai.css
   (hand-versioned, outside the bundle). Kept last so they still follow every
   file above; _brand-mirai.css (base.html, after the bundle) still follows them. */