/* Andy Chat. Base styles.
 * Per-panel styles are split into public/styles/<panel>.css and
 * lazy-loaded by public/modules/panels/nav.js on openPanel / switchMode.
 * Phase 0.3 split, 2026-05-23.
 */

/* ── Andy Chat – Styles ── */

/* ── Self-hosted Inter font ── */

@font-face { font-family: 'Inter'; src: url('/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url('/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url('/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url('/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Boot stagger ── */

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

#app.app-boot #header { animation: bootFadeUp 0.28s var(--ease-out); }

#app.app-boot #tab-bar { animation: bootFadeUp 0.28s var(--ease-out) 0.12s both; }

/* ── View enter animations on tab switch ── */

@keyframes viewEnterFromRight {
  from { opacity: 0; transform: translateX(3%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes viewEnterFromLeft {
  from { opacity: 0; transform: translateX(-3%); }
  to   { opacity: 1; transform: translateX(0); }
}

.view-enter-right {
  animation: viewEnterFromRight 0.2s var(--ease-out) both !important;
}

.view-enter-left {
  animation: viewEnterFromLeft 0.2s var(--ease-out) both !important;
}

/* ── Code block language label ── */

.code-lang-label {
  position: absolute;
  top: 10px;
  right: 44px;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  font-family: var(--font-mono);
  user-select: none;
  pointer-events: none;
  opacity: 0.7;
}

/* ── Sonar ping on CC badge ── */

@keyframes sonarPing {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

.tab-bar-badge.sonar-ping {
  animation: sonarPing 0.6s ease-out;
}

/* ── M3 Design Tokens (Andy Material 3, dark scheme primary) ──
 * These color + type tokens are the canonical Andy Material 3 palette.
 * Light scheme tokens
 * are defined but only activated by prefers-color-scheme: light, which
 * the v1.1.0 cut does NOT wire to the alias layer. Dark is the only
 * shipping scheme this release.
 * ───────────────────────────────────────────────────────────── */
:root {
  /* ── Color: surface ladder ── */
  --md-sys-color-surface-dim:                  #0A0A0A;
  --md-sys-color-surface:                      #0A0A0A;
  --md-sys-color-surface-bright:               #262626;
  --md-sys-color-surface-container-lowest:     #050505;
  --md-sys-color-surface-container-low:        #0F0F0F;
  --md-sys-color-surface-container:            #171717;
  --md-sys-color-surface-container-high:       #1F1F1F;
  --md-sys-color-surface-container-highest:    #262626;
  --md-sys-color-on-surface:                   #FAFAFA;
  --md-sys-color-on-surface-variant:           #A1A1AA;
  --md-sys-color-outline:                      #262626;
  --md-sys-color-outline-variant:              #171717;
  --md-sys-color-background:                   #0A0A0A;
  --md-sys-color-on-background:                #FAFAFA;
  --md-sys-color-scrim:                        rgba(0, 0, 0, 0.6);
  --md-sys-color-scrim-dense:                  rgba(0, 0, 0, 0.85);

  /* ── Color: primary / secondary / tertiary ── */
  --md-sys-color-primary:                      #3B82F6;
  --md-sys-color-on-primary:                   #FFFFFF;
  --md-sys-color-primary-container:            #1E3A8A;
  --md-sys-color-on-primary-container:         #DBEAFE;
  --md-sys-color-secondary:                    #60A5FA;
  --md-sys-color-on-secondary:                 #FFFFFF;
  --md-sys-color-secondary-container:          #1E40AF;
  --md-sys-color-on-secondary-container:       #BFDBFE;
  --md-sys-color-tertiary:                     #94A3B8;
  --md-sys-color-on-tertiary:                  #0F172A;
  --md-sys-color-tertiary-container:           #334155;
  --md-sys-color-on-tertiary-container:        #E2E8F0;

  /* ── Color: error ── */
  --md-sys-color-error:                        #EF4444;
  --md-sys-color-on-error:                     #FFFFFF;
  --md-sys-color-error-container:              #450A0A;
  --md-sys-color-on-error-container:           #FECACA;

  /* ── Color: inverse + brand ── */
  --md-sys-color-inverse-surface:              #FAFAFA;
  --md-sys-color-inverse-on-surface:           #0A0A0A;
  --md-sys-color-inverse-primary:              #1E3A8A;
  --md-sys-color-brand-blue:                   #3B82F6;

  /* ── Color: extended semantic ── */
  --md-sys-color-success-fg:                   #10B981;
  --md-sys-color-success-bg:                   #064E3B;
  --md-sys-color-warning-fg:                   #F59E0B;
  --md-sys-color-warning-bg:                   #451A03;
  --md-sys-color-critical-fg:                  #EF4444;
  --md-sys-color-critical-bg:                  #450A0A;
  --md-sys-color-urgent-accent:                #EF4444;
  --md-sys-color-dimmed-fg:                    #52525B;

  /* ── Shape ── */
  --md-sys-shape-corner-none:                  0px;
  --md-sys-shape-corner-xs:                    4px;
  --md-sys-shape-corner-sm:                    8px;
  --md-sys-shape-corner-md:                    12px;
  --md-sys-shape-corner-lg:                    20px;
  --md-sys-shape-corner-xl:                    28px;
  --md-sys-shape-corner-full:                  999px;

  /* ── Elevation ── */
  --md-sys-elevation-0:                        none;
  --md-sys-elevation-1:                        0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-2:                        0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-3:                        0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);
  --md-sys-elevation-4:                        0 2px 3px rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15);
  --md-sys-elevation-5:                        0 4px 4px rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);

  /* ── Motion ── */
  --md-sys-motion-easing-standard:             cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:           cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decel:     cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accel:     cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-legacy:               cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-duration-short1:             100ms;
  --md-sys-motion-duration-short2:             150ms;
  --md-sys-motion-duration-short4:             200ms;
  --md-sys-motion-duration-medium1:            250ms;
  --md-sys-motion-duration-medium2:            300ms;
  --md-sys-motion-duration-long1:              450ms;

  /* ── State layer opacities ── */
  --md-sys-state-hover-opacity:                0.08;
  --md-sys-state-focus-opacity:                0.12;
  --md-sys-state-pressed-opacity:              0.12;
  --md-sys-state-dragged-opacity:              0.16;

  /* ── Typescale ── */
  --md-sys-typescale-font-family:              'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', Roboto, sans-serif;
  --md-sys-typescale-display-large-size:       57px; --md-sys-typescale-display-large-line: 64px; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-tracking: -0.02em;
  --md-sys-typescale-display-medium-size:      45px; --md-sys-typescale-display-medium-line: 52px; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-tracking: -0.015em;
  --md-sys-typescale-display-small-size:       36px; --md-sys-typescale-display-small-line: 44px; --md-sys-typescale-display-small-weight: 500; --md-sys-typescale-display-small-tracking: -0.01em;
  --md-sys-typescale-headline-large-size:      32px; --md-sys-typescale-headline-large-line: 40px; --md-sys-typescale-headline-large-weight: 600; --md-sys-typescale-headline-large-tracking: -0.01em;
  --md-sys-typescale-headline-medium-size:     28px; --md-sys-typescale-headline-medium-line: 36px; --md-sys-typescale-headline-medium-weight: 600; --md-sys-typescale-headline-medium-tracking: -0.005em;
  --md-sys-typescale-headline-small-size:      24px; --md-sys-typescale-headline-small-line: 32px; --md-sys-typescale-headline-small-weight: 600; --md-sys-typescale-headline-small-tracking: 0;
  --md-sys-typescale-title-large-size:         20px; --md-sys-typescale-title-large-line: 28px; --md-sys-typescale-title-large-weight: 600; --md-sys-typescale-title-large-tracking: 0;
  --md-sys-typescale-title-medium-size:        16px; --md-sys-typescale-title-medium-line: 24px; --md-sys-typescale-title-medium-weight: 600; --md-sys-typescale-title-medium-tracking: 0.01em;
  --md-sys-typescale-title-small-size:         14px; --md-sys-typescale-title-small-line: 20px; --md-sys-typescale-title-small-weight: 600; --md-sys-typescale-title-small-tracking: 0.01em;
  --md-sys-typescale-body-large-size:          16px; --md-sys-typescale-body-large-line: 24px; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0.01em;
  --md-sys-typescale-body-medium-size:         14px; --md-sys-typescale-body-medium-line: 20px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0.015em;
  --md-sys-typescale-body-small-size:          12px; --md-sys-typescale-body-small-line: 16px; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0.02em;
  --md-sys-typescale-label-large-size:         14px; --md-sys-typescale-label-large-line: 20px; --md-sys-typescale-label-large-weight: 600; --md-sys-typescale-label-large-tracking: 0.02em;
  --md-sys-typescale-label-medium-size:        12px; --md-sys-typescale-label-medium-line: 16px; --md-sys-typescale-label-medium-weight: 600; --md-sys-typescale-label-medium-tracking: 0.03em;
  --md-sys-typescale-label-small-size:         11px; --md-sys-typescale-label-small-line: 16px; --md-sys-typescale-label-small-weight: 600; --md-sys-typescale-label-small-tracking: 0.04em;

  /* ── Legacy alias layer (existing token names redefined) ── */
  --bg:             var(--md-sys-color-surface);
  --bg-secondary:   var(--md-sys-color-surface-container);
  --bg-tertiary:    var(--md-sys-color-surface-container-high);
  --bg-surface:     var(--md-sys-color-surface-container);
  --bg-elevated:    var(--md-sys-color-surface-container-highest);
  --text:           var(--md-sys-color-on-surface);
  --text-secondary: #C4C4C8;
  --text-muted:     var(--md-sys-color-on-surface-variant);
  --text-dim:       #71717A;
  --accent:         var(--md-sys-color-primary);
  --accent-hover:   var(--md-sys-color-secondary);
  --accent-muted:   rgba(59, 130, 246, 0.5);
  --accent-subtle:  rgba(59, 130, 246, 0.08);
  --accent-glow:    rgba(59, 130, 246, 0.15);
  --success:        var(--md-sys-color-success-fg);
  --error:          var(--md-sys-color-error);
  --accent-reply:   #2693D1;
  --border:         var(--md-sys-color-outline);
  --border-subtle:  var(--md-sys-color-outline-variant);
  --border-focus:   rgba(59, 130, 246, 0.4);
  --tool-bg:        rgba(255, 255, 255, 0.02);
  --tool-border:    rgba(255, 255, 255, 0.06);

  /* ── Option A "Refined Dark" design tokens ──
   * One unified card grammar for every inline block (tool, reasoning, todo,
   * approval, tool-result). Same radius, same hairline border, same surface.
   * Differentiate only by a small accent, never by border style. */
  --a-card-radius:  12px;                  /* single card radius (corner-md) */
  --a-card-surface: rgba(255, 255, 255, 0.018);  /* faint lift off the page */
  --a-card-line:    #1c1c21;               /* one hairline border for all cards */
  --a-bub-user:     #202027;               /* lighter than page so "me" reads */
  /* 8px spacing scale. Every card/message pad + margin draws from this. */
  --a-space-1:      4px;
  --a-space-2:      8px;
  --a-space-3:      12px;
  --a-space-4:      16px;
  --a-space-5:      24px;
  --a-ok:           #22C55E;               /* DONE pill / completed accent */
  --a-ok-bg:        rgba(34, 197, 94, 0.12);
  --a-think:        #A78BFA;               /* reasoning accent */
  --a-think-bg:     rgba(139, 92, 246, 0.05);

  --radius-sm:      var(--md-sys-shape-corner-sm);   /* was 12px → now 8px */
  --radius-md:      var(--md-sys-shape-corner-md);
  --radius-lg:      var(--md-sys-shape-corner-lg);
  --radius-xl:      var(--md-sys-shape-corner-xl);
  --shadow-lg:      var(--md-sys-elevation-4);
  --elev-1:         var(--md-sys-elevation-1);
  --elev-2:         var(--md-sys-elevation-2);
  --elev-3:         var(--md-sys-elevation-3);
  --duration-fast:   var(--md-sys-motion-duration-short2);
  --duration-normal: var(--md-sys-motion-duration-medium1);
  --ease-out:        var(--md-sys-motion-easing-emphasized-decel);
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Surface-lift overlay. Dark uses faint white; light flips to faint black.
   * Centralised here so per-surface rules can stop hardcoding
   * rgba(255,255,255,...) lifts that vanish on a white background. */
  --md-sys-state-lift-weak:    rgba(255, 255, 255, 0.03);
  --md-sys-state-lift:         rgba(255, 255, 255, 0.06);
  --md-sys-state-lift-strong:  rgba(255, 255, 255, 0.12);
  /* Composer / floating-bar glass tint, tracks the page surface. */
  --md-sys-color-glass:        rgba(9, 9, 11, 0.88);
  /* Bubble prose tokens (assistant body + emphasised text). */
  --md-sys-color-prose:        #E9E9EC;
  --md-sys-color-prose-strong: #FFFFFF;
}

/* ── Light scheme ──────────────────────────────────────────────────────
 * The AndyPalette light values + lightColorScheme() wiring.
 * Overrides the SAME custom-property set the dark :root block defines, so
 * every surface that reads a --md-sys-* token (or a legacy alias derived
 * from one) flips automatically. surface-dim / surface-bright have no M3
 * Android constant, so they follow the spec relation (dim darker than the
 * base surface, bright = pure white) using the zinc ladder.
 *
 * Activation:
 *   - html[data-theme="light"]            → explicit light choice (settings)
 *   - html:not([data-theme]) @media light → "system" follows OS preference
 *     ("system" REMOVES data-theme? No — settings.applyTheme always sets it.
 *      See the @media block below for how system is handled.)
 * Explicit dark always wins: the @media block is scoped to NOT match when
 * data-theme="dark" is present.
 * ───────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* ── Color: surface ladder ── */
  --md-sys-color-surface-dim:                  #E4E4E7;
  --md-sys-color-surface:                      #FFFFFF;
  --md-sys-color-surface-bright:               #FFFFFF;
  --md-sys-color-surface-container-lowest:     #FFFFFF;
  --md-sys-color-surface-container-low:        #FAFAFA;
  --md-sys-color-surface-container:            #F4F4F5;
  --md-sys-color-surface-container-high:       #E4E4E7;
  --md-sys-color-surface-container-highest:    #D4D4D8;
  --md-sys-color-on-surface:                   #0A0A0A;
  --md-sys-color-on-surface-variant:           #52525B;
  --md-sys-color-outline:                      #D4D4D8;
  --md-sys-color-outline-variant:              #E4E4E7;
  --md-sys-color-background:                   #FAFAFA;
  --md-sys-color-on-background:                #0A0A0A;
  --md-sys-color-scrim:                        rgba(0, 0, 0, 0.4);
  --md-sys-color-scrim-dense:                  rgba(0, 0, 0, 0.6);

  /* ── Color: primary / secondary / tertiary ── */
  --md-sys-color-primary:                      #2563EB;
  --md-sys-color-on-primary:                   #FFFFFF;
  --md-sys-color-primary-container:            #DBEAFE;
  --md-sys-color-on-primary-container:         #1E3A8A;
  --md-sys-color-secondary:                    #3B82F6;
  --md-sys-color-on-secondary:                 #FFFFFF;
  --md-sys-color-secondary-container:          #BFDBFE;
  --md-sys-color-on-secondary-container:       #1E40AF;
  --md-sys-color-tertiary:                     #64748B;
  --md-sys-color-on-tertiary:                  #FFFFFF;
  --md-sys-color-tertiary-container:           #E2E8F0;
  --md-sys-color-on-tertiary-container:        #0F172A;

  /* ── Color: error ── */
  --md-sys-color-error:                        #DC2626;
  --md-sys-color-on-error:                     #FFFFFF;
  --md-sys-color-error-container:              #FEE2E2;
  --md-sys-color-on-error-container:           #7F1D1D;

  /* ── Color: inverse + brand ── */
  --md-sys-color-inverse-surface:              #171717;
  --md-sys-color-inverse-on-surface:           #FAFAFA;
  --md-sys-color-inverse-primary:              #60A5FA;
  --md-sys-color-brand-blue:                   #3B82F6;

  /* ── Color: extended semantic (light variants) ── */
  --md-sys-color-success-fg:                   #059669;
  --md-sys-color-success-bg:                   #D1FAE5;
  --md-sys-color-warning-fg:                   #B45309;
  --md-sys-color-warning-bg:                   #FEF3C7;
  --md-sys-color-critical-fg:                  #DC2626;
  --md-sys-color-critical-bg:                  #FEE2E2;
  --md-sys-color-urgent-accent:                #DC2626;
  --md-sys-color-dimmed-fg:                    #71717A;

  /* ── Elevation: lighter shadows read better on a white page ── */
  --md-sys-elevation-1:                        0 1px 2px rgba(0,0,0,0.10), 0 1px 3px 1px rgba(0,0,0,0.06);
  --md-sys-elevation-2:                        0 1px 2px rgba(0,0,0,0.10), 0 2px 6px 2px rgba(0,0,0,0.06);
  --md-sys-elevation-3:                        0 1px 3px rgba(0,0,0,0.10), 0 4px 8px 3px rgba(0,0,0,0.07);
  --md-sys-elevation-4:                        0 2px 3px rgba(0,0,0,0.12), 0 6px 10px 4px rgba(0,0,0,0.08);
  --md-sys-elevation-5:                        0 4px 4px rgba(0,0,0,0.12), 0 8px 12px 6px rgba(0,0,0,0.10);

  /* ── Legacy alias layer: re-resolve the values that were baked dark ── */
  --text-secondary: #3F3F46;
  --text-dim:       #A1A1AA;
  --accent-hover:   var(--md-sys-color-secondary);
  --accent-muted:   rgba(37, 99, 235, 0.5);
  --accent-subtle:  rgba(37, 99, 235, 0.08);
  --accent-glow:    rgba(37, 99, 235, 0.15);
  --accent-reply:   #1D6FA5;
  --border-focus:   rgba(37, 99, 235, 0.4);
  --tool-bg:        rgba(0, 0, 0, 0.02);
  --tool-border:    rgba(0, 0, 0, 0.08);

  /* ── Option A card grammar: flip the dark-baked surfaces ── */
  --a-card-surface: rgba(0, 0, 0, 0.022);
  --a-card-line:    #E4E4E7;
  --a-bub-user:     #DBEAFE;
  --a-ok-bg:        rgba(5, 150, 105, 0.12);
  --a-think:        #7C3AED;
  --a-think-bg:     rgba(124, 58, 237, 0.06);

  /* ── Surface-lift overlays flip to faint black ── */
  --md-sys-state-lift-weak:    rgba(0, 0, 0, 0.03);
  --md-sys-state-lift:         rgba(0, 0, 0, 0.05);
  --md-sys-state-lift-strong:  rgba(0, 0, 0, 0.09);

  /* ── Glass + prose tokens for light ── */
  --md-sys-color-glass:        rgba(250, 250, 250, 0.85);
  --md-sys-color-prose:        #18181B;
  --md-sys-color-prose-strong: #000000;
}

/* "system" theme: settings.applyTheme always writes an explicit data-theme
 * (system|dark|light), so a truly system-driven page is one where the user
 * has chosen "system" → data-theme="system". Follow the OS preference there,
 * and also when no data-theme is set at all (first paint before the inline
 * bootstrap, or a non-settings entry point). Scope away from explicit dark
 * so a dark choice always wins. The selector list reuses the same light
 * custom properties via a shared rule. */
@media (prefers-color-scheme: light) {
  html[data-theme="system"],
  html:not([data-theme]) {
    /* ── Color: surface ladder ── */
    --md-sys-color-surface-dim:                  #E4E4E7;
    --md-sys-color-surface:                      #FFFFFF;
    --md-sys-color-surface-bright:               #FFFFFF;
    --md-sys-color-surface-container-lowest:     #FFFFFF;
    --md-sys-color-surface-container-low:        #FAFAFA;
    --md-sys-color-surface-container:            #F4F4F5;
    --md-sys-color-surface-container-high:       #E4E4E7;
    --md-sys-color-surface-container-highest:    #D4D4D8;
    --md-sys-color-on-surface:                   #0A0A0A;
    --md-sys-color-on-surface-variant:           #52525B;
    --md-sys-color-outline:                      #D4D4D8;
    --md-sys-color-outline-variant:              #E4E4E7;
    --md-sys-color-background:                   #FAFAFA;
    --md-sys-color-on-background:                #0A0A0A;
    --md-sys-color-scrim:                        rgba(0, 0, 0, 0.4);
    --md-sys-color-scrim-dense:                  rgba(0, 0, 0, 0.6);
    --md-sys-color-primary:                      #2563EB;
    --md-sys-color-on-primary:                   #FFFFFF;
    --md-sys-color-primary-container:            #DBEAFE;
    --md-sys-color-on-primary-container:         #1E3A8A;
    --md-sys-color-secondary:                    #3B82F6;
    --md-sys-color-on-secondary:                 #FFFFFF;
    --md-sys-color-secondary-container:          #BFDBFE;
    --md-sys-color-on-secondary-container:       #1E40AF;
    --md-sys-color-tertiary:                     #64748B;
    --md-sys-color-on-tertiary:                  #FFFFFF;
    --md-sys-color-tertiary-container:           #E2E8F0;
    --md-sys-color-on-tertiary-container:        #0F172A;
    --md-sys-color-error:                        #DC2626;
    --md-sys-color-on-error:                     #FFFFFF;
    --md-sys-color-error-container:              #FEE2E2;
    --md-sys-color-on-error-container:           #7F1D1D;
    --md-sys-color-inverse-surface:              #171717;
    --md-sys-color-inverse-on-surface:           #FAFAFA;
    --md-sys-color-inverse-primary:              #60A5FA;
    --md-sys-color-brand-blue:                   #3B82F6;
    --md-sys-color-success-fg:                   #059669;
    --md-sys-color-success-bg:                   #D1FAE5;
    --md-sys-color-warning-fg:                   #B45309;
    --md-sys-color-warning-bg:                   #FEF3C7;
    --md-sys-color-critical-fg:                  #DC2626;
    --md-sys-color-critical-bg:                  #FEE2E2;
    --md-sys-color-urgent-accent:                #DC2626;
    --md-sys-color-dimmed-fg:                    #71717A;
    --md-sys-elevation-1:                        0 1px 2px rgba(0,0,0,0.10), 0 1px 3px 1px rgba(0,0,0,0.06);
    --md-sys-elevation-2:                        0 1px 2px rgba(0,0,0,0.10), 0 2px 6px 2px rgba(0,0,0,0.06);
    --md-sys-elevation-3:                        0 1px 3px rgba(0,0,0,0.10), 0 4px 8px 3px rgba(0,0,0,0.07);
    --md-sys-elevation-4:                        0 2px 3px rgba(0,0,0,0.12), 0 6px 10px 4px rgba(0,0,0,0.08);
    --md-sys-elevation-5:                        0 4px 4px rgba(0,0,0,0.12), 0 8px 12px 6px rgba(0,0,0,0.10);
    --text-secondary: #3F3F46;
    --text-dim:       #A1A1AA;
    --accent-hover:   var(--md-sys-color-secondary);
    --accent-muted:   rgba(37, 99, 235, 0.5);
    --accent-subtle:  rgba(37, 99, 235, 0.08);
    --accent-glow:    rgba(37, 99, 235, 0.15);
    --accent-reply:   #1D6FA5;
    --border-focus:   rgba(37, 99, 235, 0.4);
    --tool-bg:        rgba(0, 0, 0, 0.02);
    --tool-border:    rgba(0, 0, 0, 0.08);
    --a-card-surface: rgba(0, 0, 0, 0.022);
    --a-card-line:    #E4E4E7;
    --a-bub-user:     #DBEAFE;
    --a-ok-bg:        rgba(5, 150, 105, 0.12);
    --a-think:        #7C3AED;
    --a-think-bg:     rgba(124, 58, 237, 0.06);
    --md-sys-state-lift-weak:    rgba(0, 0, 0, 0.03);
    --md-sys-state-lift:         rgba(0, 0, 0, 0.05);
    --md-sys-state-lift-strong:  rgba(0, 0, 0, 0.09);
    --md-sys-color-glass:        rgba(250, 250, 250, 0.85);
    --md-sys-color-prose:        #18181B;
    --md-sys-color-prose-strong: #000000;
  }
}

/* ── M3 bespoke overrides (atoms live in /styles/m3-atoms.css) ── */
.m3-chip--warn { background: var(--md-sys-color-warning-bg); color: var(--md-sys-color-warning-fg); border-color: transparent; }
.m3-chip--err { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: transparent; }
.m3-fab--docked { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 50; }

/* ── Global resets ── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.12);
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ── Login ── */

/* Splash: the boot screen. Visible from first paint (CSS is render-blocking, so
   the login form never paints first). app.js adds .splash-hide once it resolves
   auth, fading it out over the app or login underneath. */
#splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  gap: 4px;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--md-sys-color-surface, #0a0a0a);
  transition: opacity 0.3s var(--ease-out);
}
#splash.splash-hide {
  opacity: 0;
  pointer-events: none;
}
#splash .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
#splash .brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-md);
}
#splash h1 {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}
#splash .subtitle {
  color: var(--text-muted);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  margin-bottom: 28px;
}
#splash .splash-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--md-sys-color-surface-variant, rgba(59, 130, 246, 0.25));
  border-top-color: var(--md-sys-color-primary, var(--accent));
  border-radius: 50%;
  animation: activitySpin 0.8s linear infinite;
}

/* Login starts hidden so the splash owns first paint. Every path that shows
   login (no-token boot in app.js, logout->reload) sets it visible explicitly. */
#login {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
}

#login .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

#login .brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-md);
}

#login h1 {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}

#login .subtitle {
  color: var(--text-muted);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  margin-bottom: 32px;
}

/* M3 filled text field treatment (re-declared, not classed) */
#login input {
  width: 100%;
  max-width: 320px;
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0;
  color: var(--md-sys-color-on-surface);
  padding: 16px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  outline: none;
  min-height: 56px;
  margin-bottom: 12px;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#login input:focus {
  border-bottom: 2px solid var(--md-sys-color-primary);
  padding-bottom: 15px;
}

/* M3 filled button treatment (re-declared, not classed) */
#login button {
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  padding: 10px 24px;
  min-height: 40px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

#login button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  #login button:hover { box-shadow: var(--md-sys-elevation-1); }
  #login button:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#login button:active::after { opacity: var(--md-sys-state-pressed-opacity); }

#login .error {
  color: var(--error);
  font-size: var(--md-sys-typescale-body-medium-size);
  margin-top: 12px;
  min-height: 20px;
}

/* ── App layout ── */

#app {
  display: none;
  flex-direction: column;
  height: 100%;
  position: relative;
  touch-action: pan-y; /* allow vertical scroll, prevent browser horizontal pan so swipe gestures get user activation */
  background-image: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(59, 130, 246, 0.04), transparent);
}

/* ── Header (M3 top app bar) ── */

#header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 20px;
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#header.scrolled {
  box-shadow: var(--md-sys-elevation-2);
}

@supports (padding-top: env(safe-area-inset-top)) {
  #header {
    padding-top: env(safe-area-inset-top);
    height: calc(64px + env(safe-area-inset-top));
  }
}

@media (max-width: 600px) {
  #header { height: 56px; padding: 0 12px; }
  @supports (padding-top: env(safe-area-inset-top)) {
    #header { height: calc(56px + env(safe-area-inset-top)); }
  }
}

/* Andy avatar disc on the left. Only shown in chat mode. */
#header-avatar {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: none;
}
#app.chat-mode #header-avatar { display: inline-flex; }

#header-title-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

#header-meta {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
#app.chat-mode #header-meta { display: block; }

#header-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}

#dual-clock {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  padding: 0 4px;
  line-height: 1.3;
  text-align: right;
  font-weight: 500;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

/* Clock is hidden in chat mode: the meta line in the title block carries
   "Andy · online · N messages" instead. The interval still updates the
   text so non-chat modes show it. */
#app.chat-mode #dual-clock {
  display: none;
}

@media (max-width: 600px) {
  #dual-clock { display: none; }
}

/* Android ChatContextHeader parity: title (left, ellipsis on overflow,
   titleMedium SemiBold). In chat mode the title is the active
   conversation title (or "Chat" when none). In other modes (Command,
   Finance, Marketing, More) it carries the view name. */
.header-view-title {
  text-align: left;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Conversation strip (history + new chat, above composer) ──
   Matches Android ChatBottomBar.ConversationTabs slim row. Tab chips
   not yet ported — that's a separate workstream (multi-tab UX). */

/* Slim strip needs an unambiguous top boundary so it doesn't visually
   merge with the last user-message bubble immediately above it (the
   bubble sits right-aligned in #chat; the icons sit left-aligned here;
   without a separator they read as one row). The 1px outline-variant
   line matches Android ChatBottomBar.ConversationTabs. */
#convo-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px 2px;
}

/* Standard M3 icon-btn treatment for the two slim history + new-chat buttons. */
.convo-strip-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  flex-shrink: 0;
  padding: 0;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.convo-strip-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .convo-strip-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.convo-strip-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.convo-strip-btn:active {
  transform: scale(0.93);
}

@media (pointer: coarse) {
  .convo-strip-btn { width: 48px; height: 48px; }
}

/* ── Chat area ── */

#chat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 16px;
  background: var(--bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-y: contain;
}
/* Opt-in smooth scroll for one-shot jumps (new chat, scroll-to-bottom button).
   NEVER apply during streaming. High-frequency programmatic scrollTop writes
   on top of smooth-scroll animations cause the scroll target to lag behind
   each new chunk and the snap-to-bottom never catches up. */
#chat.smooth-scroll {
  scroll-behavior: smooth;
}

#chat::-webkit-scrollbar {
  display: none;
}

/* Stick-to-bottom sentinel (modules/ui.js). A 1px tail the
   IntersectionObserver watches to derive isAtBottom. Non-interactive, no
   visual footprint. */
#chat-bottom-sentinel {
  width: 100%;
  height: 1px;
  flex: 0 0 1px;
  pointer-events: none;
}

@media (min-width: 768px) {
  #chat { padding: 24px 10%; }
}

@media (min-width: 1200px) {
  #chat { padding: 24px 18%; }
}

.message {
  max-width: 100%;
  margin-bottom: 18px;
  animation: messageIn var(--duration-normal) var(--ease-out);
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.message.user {
  justify-content: flex-end;
  margin-left: auto;
  max-width: 80%;
}

.message.assistant {
  justify-content: flex-start;
  max-width: 100%;
  /* Avatar aligns to the top of Andy's content column (Option A), since the
     assistant prose is now open text rather than a single filled bubble. */
  align-items: flex-start;
}

@media (max-width: 600px) {
  .message { margin-bottom: 12px; gap: 8px; }
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--md-sys-typescale-body-small-size);
  flex-shrink: 0;
  box-shadow: var(--md-sys-elevation-1);
}

.message-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.message.user .message-body {
  align-items: flex-end;
}

.message.assistant .message-body {
  align-items: flex-start;
  max-width: calc(100% - 44px); /* leave room for 32dp avatar + 12px gap */
}

@media (min-width: 768px) {
  .message.assistant .message-body { max-width: 72%; }
  .message.user { max-width: 72%; }
}

@keyframes messageIn {
  from { opacity: 0; transform: translateY(4px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.message .bubble {
  /* M3 spec: bodyLarge typography (16sp / 24sp). Asymmetric corner stack
     keeps the conversational "tail" cue at the speaker corner (xs on the
     speaker corner, xl elsewhere). */
  padding: 12px 16px;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}

.message.user .bubble {
  /* Option A: user bubble sits clearly lighter than the page/assistant so
     "what I said" and "what Andy said" separate cleanly. Asymmetric corners
     keep the conversational tail at the speaker corner. */
  background: var(--a-bub-user);
  color: var(--md-sys-color-on-surface);
  border-radius: 16px 16px 5px 16px;
}

.message.user .bubble a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(96, 165, 250, 0.5);
}

.message.assistant .bubble {
  /* Option A: Andy's prose reads as open text on the page, not a filled
     bubble. This lets the unified cards (tool / reasoning / todo / approval)
     inside it carry the only surface treatment, exactly like the mockup .as
     column. Padding trimmed since there's no fill to inset against. */
  background: transparent;
  color: var(--md-sys-color-prose);
  border: none;
  border-radius: 0;
  padding: 2px 0;
  line-height: 1.55;
}

.message.assistant .bubble strong { color: var(--md-sys-color-prose-strong); font-weight: 650; }

.message .time {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-dim);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.message:hover .time,
.message.time-visible .time {
  opacity: 1;
}

.message.user .time {
  text-align: right;
  justify-content: flex-end;
}

/* ── BTW message styling ── */

.message.user.btw .bubble {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.btw-label {
  display: inline-block;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(59, 130, 246, 0.7);
  margin-right: 8px;
  vertical-align: middle;
}

/* BTW mode send button */

#send-btn.btw-mode {
  opacity: 0.7;
  position: relative;
}

/* ── Message copy button ── */

.msg-copy-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
  opacity: 0;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.msg-copy-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.message:hover .msg-copy-btn,
.msg-copy-btn.copied {
  opacity: 1;
}

@media (hover: hover) {
  .msg-copy-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.msg-copy-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.msg-copy-btn:active {
  transform: scale(0.9);
}

.msg-copy-btn.copied {
  color: var(--success, #4ade80);
}

@media (pointer: coarse) {
  .msg-copy-btn { width: 48px; height: 48px; }
}

/* ── Bubble typography ── */

.bubble h1 { font-size: 1.4em; font-weight: 700; margin: 18px 0 10px; letter-spacing: -0.04em; }

.bubble h2 { font-size: 1.25em; font-weight: 650; margin: 16px 0 8px; letter-spacing: -0.03em; }

.bubble h3 { font-size: 1.12em; font-weight: 600; margin: 14px 0 6px; letter-spacing: -0.02em; }

.bubble h4 { font-size: 1em; font-weight: 600; margin: 12px 0 4px; letter-spacing: -0.01em; }

.bubble p { margin: 8px 0; }

.bubble ul, .bubble ol { padding-left: 20px; margin: 8px 0; }

.bubble li { margin: 3px 0; }

.bubble li[data-level="1"] { margin-left: 18px; }

.bubble li[data-level="2"] { margin-left: 36px; }

.bubble li[data-level="3"] { margin-left: 54px; }

.bubble pre {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.55;
  margin: 10px 0;
  border: 1px solid var(--border-subtle);
}

.bubble code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--md-sys-state-lift);
  padding: 2px 6px;
  border-radius: var(--md-sys-shape-corner-xs);
}

.bubble pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: var(--md-sys-typescale-body-medium-size);
}

.bubble th, .bubble td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  text-align: left;
}

.bubble th {
  background: var(--bg-tertiary);
  font-weight: 600;
}

.bubble blockquote {
  border-left: 3px solid var(--accent-muted);
  padding: 6px 14px;
  margin: 10px 0;
  color: var(--text-secondary);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.bubble hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.bubble a {
  color: var(--accent);
  text-decoration: none;
}

.bubble a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ── Tool cards (Option A unified card grammar) ──
   ONE card style for tool / reasoning / todo / approval / result. Same 12px
   radius, same single hairline border, same surface. Differentiate by accent
   only (icon colour + optional DONE pill), never by border style. */

/* Memory-write chip: a distinct, always-visible row (not a tool card, so it is
   never collapsed into the end-of-turn tool accordion). */
.memory-saved {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--a-space-2) 0;
  padding: 8px 12px;
  border-radius: var(--a-card-radius, 12px);
  background: rgba(124, 196, 255, 0.08);
  border: 1px solid rgba(124, 196, 255, 0.22);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.memory-saved-icon { flex-shrink: 0; color: var(--md-sys-color-primary, #7cc4ff); }
.memory-saved-icon svg { width: 16px; height: 16px; display: block; }
.memory-saved-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.memory-saved-label { font-weight: 600; color: var(--md-sys-color-primary, #7cc4ff); }
.memory-saved-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(124, 196, 255, 0.16);
  color: var(--md-sys-color-primary, #7cc4ff);
}
.memory-saved-content { color: var(--text-secondary); }

.tool-card {
  background: var(--a-card-surface);
  border: 1px solid var(--a-card-line);
  border-radius: var(--a-card-radius);
  padding: var(--a-space-3);
  margin: var(--a-space-2) 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .tool-card:hover::after { opacity: var(--md-sys-state-hover-opacity); }
  .tool-card:hover { box-shadow: var(--md-sys-elevation-1); }
}

.tool-card:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.tool-card .tool-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-weight: 550;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  min-height: 24px;
}

.tool-card .tool-header .tool-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--text-dim);
}

/* DONE pill on a completed tool. Sits right-aligned in the header. */
.tool-card .tool-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--a-ok);
  background: var(--a-ok-bg);
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.tool-card .tool-badge--error {
  color: var(--error);
  background: rgba(239, 68, 68, 0.12);
}
/* When the DONE pill is present, the summary drops to its own row below. */
.tool-card.tool-done .tool-icon,
.tool-card.tool-result .tool-icon { color: var(--a-ok); }
.tool-card.tool-failed .tool-icon,
.tool-card.tool-error .tool-icon { color: var(--error); }

.tool-card .tool-header .arrow {
  transition: transform var(--duration-fast) var(--ease-out);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--text-muted);
}

.tool-card .tool-header .arrow.open {
  transform: rotate(90deg);
}

.tool-card .tool-summary {
  color: var(--text-dim);
  margin-left: 27px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--a-space-1);
}

.tool-card .tool-detail {
  display: none;
  margin-top: var(--a-space-3);
  padding: var(--a-space-2) var(--a-space-3);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--md-sys-shape-corner-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text-secondary);
  border: 1px solid var(--a-card-line);
}

.tool-card .tool-detail.open {
  display: block;
}

/* Result / error keep the unified surface + single hairline. The only signal
   is the accent on the icon (set above) and header colour. No border-style
   divergence. */
.tool-card.tool-result .tool-header { color: var(--success); }
.tool-card.tool-error .tool-header { color: var(--error); }

/* ── Send-approval card ──
   Inline card shown when the engine pauses before an outbound send and asks for
   approval. Matches the tool-card register (same surface/border/radius) but with
   a primary accent edge so it reads as an action the user must take, not a
   passive tool log. Only ever appears for send-approvals. */
.approval-card {
  /* Unified card grammar + Option A blue left-edge accent so it reads as an
     action the user must take, not a passive tool log. */
  background: linear-gradient(180deg, rgba(59,130,246,0.05), rgba(59,130,246,0.015));
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-left: 3px solid var(--md-sys-color-primary);
  border-radius: var(--a-card-radius);
  padding: var(--a-space-3) var(--a-space-4);
  margin: var(--a-space-2) 0;
  font-size: var(--md-sys-typescale-body-medium-size);
}

.approval-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--a-space-2);
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
}

.approval-summary .approval-icon { flex-shrink: 0; }

.approval-detail-toggle {
  margin-top: 8px;
  margin-left: 26px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.approval-detail-toggle:hover { color: var(--text-secondary); }

.approval-detail {
  margin-top: var(--a-space-2);
  padding: var(--a-space-2) var(--a-space-3);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--a-card-line);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text-secondary);
}

.approval-dontask {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.approval-dontask input { cursor: pointer; }

.approval-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.approval-btn {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--md-sys-color-outline);
  transition: all var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.approval-btn:disabled { opacity: 0.5; cursor: default; }

.approval-deny {
  background: transparent;
  color: var(--text-secondary);
}

.approval-deny:not(:disabled):hover {
  background: rgba(224, 96, 96, 0.08);
  border-color: var(--error);
  color: var(--error);
}

.approval-approve {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary);
}

.approval-approve:not(:disabled):hover { box-shadow: var(--md-sys-elevation-1); }

.approval-outcome {
  margin-top: 8px;
  font-size: 13px;
}

.approval-outcome--sent { color: var(--success); }
.approval-outcome--declined { color: var(--text-muted); }
.approval-outcome--error { color: var(--error); }

.approval-card--resolved { border-left-color: var(--md-sys-color-outline); }

/* ── Native renderer: "thinking" block (reasoning_delta) ──
   Unified card grammar with a purple reasoning accent. Single hairline border
   (NOT dashed), same radius/surface as every other card. The block is
   EXPANDED + animated while reasoning streams (.thinking-active), then
   collapses to a compact "Thought for Ns" summary on the first answer token. */
.reasoning-block {
  margin: var(--a-space-1) 0 var(--a-space-2);
  padding: var(--a-space-2) var(--a-space-3);
  border: 1px solid var(--a-card-line);
  border-radius: var(--a-card-radius);
  background: var(--a-think-bg);
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.reasoning-block.thinking-active {
  border-color: rgba(167, 139, 250, 0.35);
}
.reasoning-header {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  cursor: pointer;
  color: var(--a-think);
  font-size: 12.5px;
  -webkit-tap-highlight-color: transparent;
}
.reasoning-header .reasoning-label {
  font-style: normal;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
/* While active, the label gets a soft purple shimmer so it reads as "working". */
.reasoning-block.thinking-active .reasoning-header .reasoning-label {
  background: linear-gradient(90deg,
    rgba(167, 139, 250, 0.55) 0%,
    #C4B5FD 50%,
    rgba(167, 139, 250, 0.55) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: reasoningShimmer 2.4s linear infinite;
}
@keyframes reasoningShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.reasoning-header .arrow {
  font-size: 10px;
  color: var(--text-dim);
  transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.reasoning-header .arrow.open { transform: rotate(90deg); }
/* Three soft pulsing dots, shown only while active (removed on collapse). */
.reasoning-header .reasoning-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.reasoning-header .reasoning-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--a-think);
  opacity: 0.4;
  animation: reasoningDot 1.2s ease-in-out infinite;
}
.reasoning-header .reasoning-dots span:nth-child(2) { animation-delay: 0.18s; }
.reasoning-header .reasoning-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes reasoningDot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.reasoning-body {
  display: none;
  margin-top: var(--a-space-2);
  padding: var(--a-space-2) var(--a-space-3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--md-sys-shape-corner-sm);
  font-size: 12.5px;
  line-height: 1.6;
  font-style: italic;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow-y: auto;
  color: var(--text-dim);
}
.reasoning-body.open { display: block; }
@media (prefers-reduced-motion: reduce) {
  .reasoning-block.thinking-active .reasoning-header .reasoning-label {
    animation: none;
    -webkit-text-fill-color: var(--a-think);
  }
  .reasoning-header .reasoning-dots span { animation: none; opacity: 0.6; }
}

/* ── Live todo checklist (from the model's TodoWrite plan) ──
   Unified card grammar. */
.todo-card {
  margin: var(--a-space-2) 0;
  padding: var(--a-space-3) var(--a-space-4);
  border: 1px solid var(--a-card-line);
  border-radius: var(--a-card-radius);
  background: var(--a-card-surface);
}
.todo-card .todo-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--a-space-2);
}
.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  padding: 2px 0;
}
.todo-item .todo-glyph {
  flex: 0 0 auto;
  width: 15px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--md-sys-color-dimmed-fg);
}
.todo-item.todo-in_progress {
  color: var(--text);
  font-weight: 500;
}
.todo-item.todo-in_progress .todo-glyph {
  color: var(--accent);
  animation: todoPulse 1.4s ease-in-out infinite;
}
.todo-item.todo-completed {
  color: var(--text-muted);
}
.todo-item.todo-completed .todo-glyph { color: var(--success); }
.todo-item.todo-completed .todo-text {
  text-decoration: line-through;
  opacity: 0.7;
}
@keyframes todoPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Native renderer: tool_result attached under its tool card ──
   Subordinate to the tool card it belongs to: same unified surface + single
   hairline, slightly inset, accent carried by the icon (not a divergent
   border style). */
.tool-result-attached {
  margin: var(--a-space-1) 0 var(--a-space-2) var(--a-space-3);
  padding: var(--a-space-2) var(--a-space-3);
  border: 1px solid var(--a-card-line);
  border-radius: var(--a-card-radius);
  background: var(--a-card-surface);
}
.tool-result-attached.tool-result .tool-icon { color: var(--success); }
.tool-result-attached.tool-error .tool-icon { color: var(--error); }
.tool-result-attached .tool-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}
.tool-result-attached .tool-header .arrow {
  font-size: 10px;
  transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.tool-result-attached .tool-header .arrow.open { transform: rotate(90deg); }
.tool-result-attached .tool-icon { width: 14px; height: 14px; display: inline-flex; }
.tool-result-attached .tool-icon svg { width: 14px; height: 14px; }
.tool-result-attached .tool-summary {
  color: var(--text-muted);
  margin-left: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.tool-result-attached .tool-detail {
  display: none;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--md-sys-shape-corner-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 280px;
  overflow-y: auto;
  color: var(--text-secondary);
}
.tool-result-attached .tool-detail.open { display: block; }

/* ── Native renderer: subtle per-run usage footer (run_end.usage) ── */
.run-usage {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
  font-family: var(--font-mono);
}

.tool-file-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0 4px 18px;
}

/* M3 text button treatment */
.tool-file-actions button {
  background: transparent;
  border: none;
  color: var(--md-sys-color-primary);
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}

.tool-file-actions button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .tool-file-actions button:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.tool-file-actions button:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.tool-file-actions button svg {
  width: 14px;
  height: 14px;
}

/* ── Inline file shared by Andy ([[ANDY_FILE]] turn-end marker) ── */
.andy-file-chip {
  margin: 10px 0 6px 0;
  padding: 12px 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large, 16px);
  background: var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));
  max-width: 100%;
}

.andy-file-label {
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-medium-size, 13px);
  font-weight: 600;
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-primary);
  margin-bottom: 8px;
}

.andy-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.andy-file-row .file-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--md-sys-color-on-surface-variant);
}

.andy-file-row .file-icon svg {
  width: 24px;
  height: 24px;
}

.andy-file-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.andy-file-meta .file-name {
  font-size: 15px;
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.andy-file-size {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

.andy-file-chip .tool-file-actions {
  margin: 8px 0 0 0;
}

/* ── Tool group (collapsed tool cards) ── */

.tool-group {
  background: var(--a-card-surface);
  border: 1px solid var(--a-card-line);
  border-radius: var(--a-card-radius);
  margin: var(--a-space-2) 0;
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
}

.tool-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--a-space-3);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
  min-height: 24px;
  transition: background var(--duration-fast);
}

.tool-group-header:hover {
  background: var(--md-sys-state-lift-weak);
}

.tool-group-header:active {
  background: var(--md-sys-state-lift);
}

.tool-group-header .arrow {
  transition: transform var(--duration-fast) var(--ease-out);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--text-muted);
}

.tool-group-header .arrow.open {
  transform: rotate(90deg);
}

.tool-group-header .tool-group-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tool-group-header .tool-group-count {
  color: var(--text-muted);
  font-size: 13px;
}

.tool-group-body {
  display: none;
  padding: 0 8px 8px;
}

.tool-group-body.open {
  display: block;
}

/* Nested cards inside a group drop their own border/fill so we never stack a
   card-in-a-card. The group is the single card; rows just sit inside it. */
.tool-group-body .tool-card {
  margin: var(--a-space-1) 0;
  border: none;
  background: transparent;
  padding: var(--a-space-2) var(--a-space-1);
}

/* ── Streaming indicator (thought-line waveform) ── */

.streaming-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 0 2px;
  vertical-align: middle;
}

/* Transport drop mid-turn (tab/app backgrounded). The work continues
   server-side and pollForCompletion is recovering it, so we keep the working
   chrome (bubble + streaming-indicator) in place and add only a subtle dimmed
   pulse so the user knows we're reconnecting rather than frozen. The indicator
   itself stays fully visible. The class is removed automatically when the
   bubble is replaced on recovery. */
.message.assistant.reconnecting .bubble {
  animation: reconnect-pulse 1.4s ease-in-out infinite;
}
@keyframes reconnect-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.streaming-indicator .tl-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  animation: thoughtPulse 1.2s ease-in-out infinite;
  transform-origin: center;
}

.streaming-indicator .tl-bar:nth-child(1) { height: 10px; animation-delay: 0s; }

.streaming-indicator .tl-bar:nth-child(2) { height: 18px; animation-delay: 0.1s; }

.streaming-indicator .tl-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }

.streaming-indicator .tl-bar:nth-child(4) { height: 22px; animation-delay: 0.3s; }

.streaming-indicator .tl-bar:nth-child(5) { height: 8px;  animation-delay: 0.4s; }

.streaming-indicator .tl-bar:nth-child(6) { height: 16px; animation-delay: 0.5s; }

.streaming-indicator .tl-bar:nth-child(7) { height: 10px; animation-delay: 0.6s; }

@keyframes thoughtPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.5); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes streamWindDown {
  0%   { opacity: 1; transform: scaleY(1); }
  40%  { opacity: 0.6; transform: scaleY(0.4); }
  100% { opacity: 0; transform: scaleY(0.1); }
}

.streaming-indicator.wind-down {
  animation: streamWindDown 0.4s var(--ease-out) both;
}

.streaming-indicator.wind-down .tl-bar {
  animation: none;
}

/* Legacy single dot (keep for compatibility) */

.streaming-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 6px;
  animation: streamPulse 1.5s var(--ease-out) infinite;
  vertical-align: middle;
}

@keyframes streamPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

/* ── Activity status bar ── */

/* Option A: slim inline status chip. Subordinate to a real message, NOT a
   full bubble. Spinner + label + right-aligned elapsed timer. */
.activity-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--a-space-2) var(--a-space-3);
  margin: var(--a-space-2) 0;
  background: var(--accent-subtle);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: var(--a-card-radius);
  font-size: 13px;
  color: var(--md-sys-color-on-primary-container);
  letter-spacing: 0.01em;
}

.activity-status .activity-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(59, 130, 246, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: activitySpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes activitySpin {
  to { transform: rotate(360deg); }
}

.activity-status .activity-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-status .activity-timer {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11.5px;
  color: var(--md-sys-color-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── Input area ── */

#input-wrapper {
  flex-shrink: 0;
  background: var(--md-sys-color-glass);
  backdrop-filter: blur(24px) brightness(1.05) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) brightness(1.05) saturate(1.4);
  border-top: 1px solid var(--border-subtle);
}

/* Safe area handled by #tab-bar below */

#file-preview {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 0;
}

#file-preview.has-files {
  display: flex;
}

#input-area {
  padding: 12px 24px 20px;
  background: var(--md-sys-color-surface);
}

@media (max-width: 600px) {
  #input-area { padding: 8px 12px; }
}

/* M3 search-bar pattern: single pill containing [attach, textarea, voice, send].
   surface-container-highest sits one rung above the page surface. The textarea
   stays transparent so the pill background shows through. Multi-line text grows
   upward while icons stay anchored at the baseline. */
#input-box {
  background: var(--md-sys-color-surface-container-highest);
  border: 0;
  border-radius: var(--md-sys-shape-corner-xl);
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  min-height: 56px;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#input-box:focus-within {
  box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}

#input-area textarea {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  outline: none;
  max-height: 150px;
  min-height: 24px;
  display: block;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-self: center;
}

#input-area textarea::-webkit-scrollbar {
  display: none;
}

#input-area textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

#input-area textarea:focus-visible {
  outline: none;  /* pill carries the focus indicator via :focus-within */
}

/* Attach + voice are standard icon-btn treatments (transparent w/ state layer). */
#attach-btn,
#input-box #voice-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  flex-shrink: 0;
  padding: 0;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

#attach-btn::after,
#input-box #voice-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  #attach-btn:hover::after,
  #input-box #voice-btn:hover::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
}

#attach-btn:active::after,
#input-box #voice-btn:active::after {
  opacity: var(--md-sys-state-pressed-opacity);
}

#attach-btn:active,
#input-box #voice-btn:active {
  transform: scale(0.93);
}

/* Deep (Opus escalation) toggle: same 40dp icon-button shell as attach/voice,
   with an active state that fills it with the primary container so "Deep is on
   for the next message" reads at a glance. Non-sticky: chat.js resets it after
   each send. */
#input-box #deep-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  flex-shrink: 0;
  padding: 0;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  #input-box #deep-btn:hover {
    color: var(--md-sys-color-on-surface);
  }
}

#input-box #deep-btn:active {
  transform: scale(0.93);
}

#input-box #deep-btn.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* Send button: M3 small FAB inline (40dp primary disc, no elevation). */
#input-box #send-btn,
#input-box #stop-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#input-box #send-btn {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

#input-box #send-btn::after,
#input-box #stop-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#input-box #send-btn:active::after,
#input-box #stop-btn:active::after {
  opacity: var(--md-sys-state-pressed-opacity);
}

#input-box #send-btn:active,
#input-box #stop-btn:active {
  transform: scale(0.93);
}

@media (pointer: coarse) {
  #attach-btn,
  #input-box #voice-btn {
    width: 48px;
    height: 48px;
  }
}

.attach-menu {
  display: none;
  position: fixed;
  bottom: auto;
  left: auto;
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--md-sys-shape-corner-md);
  box-shadow: var(--md-sys-elevation-3);
  overflow: hidden;
  min-width: 200px;
  z-index: 100;
  animation: menuIn var(--duration-fast) var(--ease-out);
}

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

@keyframes menuIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Menu row -- M3 list-row state-layer treatment */
.attach-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  cursor: pointer;
  text-align: left;
  min-height: 48px;
  position: relative;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

.attach-menu button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .attach-menu button:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.attach-menu button:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.attach-menu .menu-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--md-sys-state-lift);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Click-to-open affordance once the file has a server path. */
.msg-attachment-clickable { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.msg-attachment-clickable:hover { background: var(--md-sys-state-lift-strong); }

/* Inline image attachment in a user bubble: small thumbnail + filename. */
.msg-attachment-img {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 4px;
}

.msg-attachment-img .msg-thumb {
  max-width: 180px;
  max-height: 180px;
  border-radius: 11px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--md-sys-state-lift);
}

.msg-attachment-img .file-name {
  padding: 0 4px;
}

/* ── Send / Stop / Voice buttons (inside #input-box single-row composer) ── */

@media (hover: hover) {
  #input-box #send-btn:hover:not(:disabled)::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
  #input-box #stop-btn:hover::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
}

#input-box #send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#input-box #send-btn:disabled::after {
  opacity: 0 !important;
}

#input-box #stop-btn {
  display: none;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

/* ── Empty state ── */

#empty-state {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text-dim);
  text-align: center;
  position: relative;
  padding: 0;
}

#empty-state #andy-brain-mount {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* ── Scrollbar ── */

::-webkit-scrollbar { width: 4px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--md-sys-state-lift); border-radius: 2px; }

::-webkit-scrollbar-thumb:hover { background: var(--md-sys-state-lift-strong); }

/* ── Code block copy button ── */

.code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-sm);
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all var(--duration-fast);
  z-index: 2;
  font-family: inherit;
  min-height: 32px;
  display: flex;
  align-items: center;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.code-copy-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

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

@media (hover: hover) {
  .code-copy-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.code-copy-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.code-copy-btn:active {
  transform: scale(0.95);
}

.code-copy-btn.copied {
  color: var(--success);
  border-color: rgba(92, 184, 122, 0.3);
}

@media (pointer: coarse) {
  .code-copy-btn { min-height: 48px; min-width: 48px; }
}

/* ── Voice input button ── */

#voice-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

#voice-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  #voice-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#voice-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

#voice-btn:active {
  transform: scale(0.93);
}

#input-box #voice-btn.recording {
  color: #fff;
  background: var(--error);
  animation: recordPulse 1.5s ease-in-out infinite;
}

#input-box #voice-btn.transcribing {
  color: #fff;
  background: var(--accent);
  animation: transcribePulse 0.8s ease-in-out infinite;
}

@keyframes recordPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes transcribePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.95); }
}

/* ── Conversation history drawer ── */

#history-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

#history-overlay.open {
  display: block;
  opacity: 1;
}

#history-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.4);
}

#history-drawer.open {
  transform: translateX(0);
}

#history-drawer .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}

@supports (padding-top: env(safe-area-inset-top)) {
  #history-drawer .drawer-header {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}

#history-drawer .drawer-header h2 {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

#history-drawer .drawer-close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-title-large-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

#history-drawer .drawer-close::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  #history-drawer .drawer-close:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#history-drawer .drawer-close:active::after { opacity: var(--md-sys-state-pressed-opacity); }

#history-drawer .drawer-close:active {
  transform: scale(0.93);
}

#history-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
  scrollbar-width: none;
}

#history-list::-webkit-scrollbar {
  display: none;
}

/* Processing slot meta colorshift (the conversation has Andy actively
   working on it). Applies to both the meta line and the row body. */
#history-list .m3-list-item.processing .m3-list-item__support {
  color: var(--accent);
}

.processing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Hover-only delete trailing button. On touch devices it's always visible. */
.convo-delete-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.convo-delete-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-error);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .m3-list-item:hover .convo-delete-btn,
  .m3-list-item:focus-within .convo-delete-btn {
    opacity: 1;
  }
  .convo-delete-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.convo-delete-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

@media (pointer: coarse) {
  .convo-delete-btn { opacity: 1; }
}

.history-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
}

/* Search results have multi-line snippets, so let the row grow taller and
   keep the leading disc top-aligned for readability. */
.m3-list-item.convo-search-result {
  align-items: flex-start;
  min-height: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.m3-list-item.convo-search-result .m3-list-item__headline { white-space: normal; }
.m3-list-item.convo-search-result .search-snippet {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
  line-height: 1.4;
}
.m3-list-item.convo-search-result .search-snippet-role {
  font-weight: 600;
  margin-right: 4px;
  color: var(--md-sys-color-on-surface);
}
.m3-list-item.convo-search-result .search-match-count {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-primary);
  margin-top: 2px;
}

.drawer-footer {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* M3 text button — low visual weight, since logout shouldn't dominate. */
.drawer-logout-btn {
  width: auto;
  padding: 0 12px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.drawer-logout-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .drawer-logout-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.drawer-logout-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.drawer-logout-btn:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }

/* ── Search bar ── */

#search-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  animation: messageIn var(--duration-fast) var(--ease-out);
}

#search-bar.open {
  display: flex;
}

/* M3 filled text field (compact) */
#search-bar input {
  flex: 1;
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0;
  color: var(--md-sys-color-on-surface);
  padding: 10px 14px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  outline: none;
  min-height: 44px;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#search-bar input:focus {
  border-bottom: 2px solid var(--md-sys-color-primary);
  padding-bottom: 9px;
}

#search-bar .search-count {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-muted);
  white-space: nowrap;
}

/* M3 tonal icon button */
#search-bar button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

#search-bar button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  #search-bar button:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#search-bar button:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.search-highlight {
  background: rgba(255, 200, 0, 0.25);
  color: inherit;
  border-radius: 2px;
}

.search-highlight.active {
  background: rgba(255, 200, 0, 0.5);
}

/* ── Files drawer ── */

/* ── Files view ── */

/* Files tabs */

/* Files tabs */

/* Files dropzone */

/* Files upload progress */

/* Files list */

/* Empty state */

/* Clear row */

/* File row */

.browse-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 10px 16px 0; font-size: 13px;
}

.browse-bc-link {
  color: var(--accent, #3b82f6); cursor: pointer; padding: 2px 4px; border-radius: var(--md-sys-shape-corner-xs);
}

.browse-bc-link:hover { text-decoration: underline; }

.browse-bc-active { color: var(--text-primary, #0f172a); font-weight: 500; padding: 2px 4px; }

.browse-bc-sep { color: var(--text-tertiary, #94a3b8); padding: 0 1px; }

/* ── File preview modal ── */

#file-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--md-sys-color-scrim-dense);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
  display: flex;
}

#file-preview-modal.open {
  opacity: 1;
  visibility: visible;
}

@keyframes previewFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* Loading skeleton for files list */

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* ── Chat drag-and-drop overlay ── */

#chat-drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 600;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--accent);
  pointer-events: none;
}

#chat-drop-overlay.visible {
  display: flex;
}

/* ── Scroll-to-bottom button ── */

#scroll-bottom-btn {
  display: none;
  position: fixed;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-lg);
  color: var(--text-secondary);
  font-size: var(--md-sys-typescale-body-medium-size);
  cursor: pointer;
  z-index: 50;
  box-shadow: var(--md-sys-elevation-3);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  min-height: 36px;
  align-items: center;
  gap: 6px;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

#scroll-bottom-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  #scroll-bottom-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#scroll-bottom-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

#scroll-bottom-btn:active {
  transform: translateX(-50%) scale(0.95);
}

#scroll-bottom-btn.visible {
  display: flex;
}

/* ── Prism.js overrides for dark theme ── */

.bubble pre[class*="language-"],
.bubble code[class*="language-"] {
  background: rgba(0, 0, 0, 0.3) !important;
  font-size: var(--md-sys-typescale-body-medium-size) !important;
}

.bubble pre[class*="language-"] {
  padding: 14px 16px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-subtle) !important;
  margin: 10px 0 !important;
}

/* ── Tools view ── */

/* ── Tools launcher grid ── */

#tools-launcher {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  overscroll-behavior-y: contain;
}

.tools-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 600px;
  margin: 0 auto;
}

.tool-launcher-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  min-height: 56px;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.tool-launcher-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.tool-launcher-card:last-child {
  border-bottom: none;
}

@media (hover: hover) {
  .tool-launcher-card:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.tool-launcher-card:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.tool-launcher-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
  padding: 7px;
}

.tool-launcher-icon svg {
  width: 100%;
  height: 100%;
}

.tool-launcher-info {
  flex: 1;
  min-width: 0;
}

.tool-launcher-name {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.tool-launcher-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-launcher-badge {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 8px;
}

.tool-launcher-badge--active {
  color: var(--accent);
  font-weight: 600;
}

.tool-launcher-chevron {
  color: var(--text-dim);
  font-size: var(--md-sys-typescale-title-large-size);
  flex-shrink: 0;
  margin-left: 4px;
}

/* ── More-tab dashboard (sectioned, live) ── */

@keyframes morePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

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

/* ── Tool frame container ── */

#tool-frame-container {
  display: none;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 5;
}

#tool-frame-container.open {
  display: flex;
  animation: toolSlideIn var(--duration-normal) var(--ease-out);
}

@keyframes toolSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes toolSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0.5; }
}

#tool-back-bar {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--md-sys-color-glass);
  backdrop-filter: blur(24px) brightness(1.05) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) brightness(1.05) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* M3 text button */
#tool-back-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--md-sys-color-primary);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--md-sys-shape-corner-full);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

#tool-back-bar button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  #tool-back-bar button:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#tool-back-bar button:active::after { opacity: var(--md-sys-state-pressed-opacity); }

#tool-back-bar svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

#tool-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg);
}

/* ── Mobile-specific responsive ── */

/* ── Landscape with keyboard ── */

@media (max-height: 500px) and (orientation: landscape) {
  #header { padding: 0 8px; height: 44px; }
  #convo-strip { display: none; }
  #input-area textarea { max-height: 60px; }
  .message { margin-bottom: 12px; }
}

/* (legacy history-item hover rules removed; see .convo-delete-btn) */

/* ── Conversation search in drawer ── */

.drawer-search {
  padding: 0 16px 8px;
}

/* M3 search-bar (pill) treatment to match mockup. */
.drawer-search input {
  width: 100%;
  height: 40px;
  background: var(--md-sys-color-surface-container-highest);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  padding: 0 16px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.4;
  outline: none;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.drawer-search input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.drawer-search input:focus {
  box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}

#convo-search-results {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.search-match-count {
  font-size: 13px;
  color: var(--accent);
  margin-top: 2px;
}

.search-snippet {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-snippet mark {
  background: rgba(59, 130, 246, 0.3);
  color: var(--text);
  padding: 0 2px;
  border-radius: var(--md-sys-shape-corner-xs);
}

.search-snippet-role {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* ── Notification bell & dropdown ── */

/* ── Panel container ── */

#panel-container {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel-back-bar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

/* M3 text button */
#panel-back-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--md-sys-color-primary);
  cursor: pointer;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  padding: 10px 12px;
  border-radius: var(--md-sys-shape-corner-full);
  min-height: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

#panel-back-bar button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  #panel-back-bar button:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

#panel-back-bar button:active::after { opacity: var(--md-sys-state-pressed-opacity); }

#panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ── Panel shared styles ── */

.panel-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  padding: 24px;
  font-size: var(--md-sys-typescale-body-large-size);
}

.panel-error { color: var(--error); padding: 16px; font-size: var(--md-sys-typescale-body-large-size); }

.panel-empty { color: var(--text-muted); padding: 24px; text-align: center; font-size: var(--md-sys-typescale-body-large-size); }

.panel-section { margin-bottom: 20px; }

.panel-heading {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.panel-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* M3 filled text field (compact) */
.panel-input {
  flex: 1;
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0;
  color: var(--md-sys-color-on-surface);
  padding: 12px 16px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  outline: none;
  min-height: 48px;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.panel-input:focus {
  border-bottom: 2px solid var(--md-sys-color-primary);
  padding-bottom: 11px;
}

.panel-select {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--md-sys-typescale-body-medium-size);
  outline: none;
  min-height: 44px;
}

.panel-select:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.panel-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 500;
  min-height: 40px;
}

.panel-btn:hover { background: var(--accent-hover); }

.panel-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.panel-btn-secondary:hover { background: var(--bg-elevated); }

.panel-btn-sm {
  padding: 4px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  min-height: 32px;
}

.panel-btn-sm:hover { background: var(--bg-elevated); }

.panel-btn-danger { color: var(--error); }

.panel-btn-danger:hover { background: rgba(224, 96, 96, 0.1); }

.panel-raw {
  background: var(--bg-tertiary);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.panel-textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-family: var(--font-mono);
  resize: vertical;
  outline: none;
  min-height: 120px;
}

.panel-textarea:focus { border-color: var(--border-focus); }

.panel-textarea:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.panel-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.panel-modal-content {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-xl);
  box-shadow: var(--md-sys-elevation-3);
  padding: 20px;
  width: min(500px, 100%);
  max-height: 80vh;
  overflow-y: auto;
}

.panel-modal-content h3 {
  margin-bottom: 12px;
  font-size: var(--md-sys-typescale-title-medium-size);
}

.panel-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

.panel-results { margin-top: 8px; }

/* ── Memory cards ── */

.type-user { background: rgba(92, 184, 122, 0.15); color: var(--success); }

.type-feedback { background: rgba(59, 130, 246, 0.15); color: var(--accent); }

.type-project { background: rgba(209, 147, 38, 0.15); color: #d19326; }

.type-reference { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

.type-decision { background: rgba(236, 72, 153, 0.15); color: #ec4899; }

.type-contact { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }

.type-status { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }

.type-unknown { background: var(--bg-tertiary); color: var(--text-muted); }

/* ── Email view ── */

/* Detail layout: sticky header + scrollable body + sticky footer */

.detail-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: -16px;
}

.detail-top {
  flex-shrink: 0;
  padding: 16px 16px 0;
}

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 12px 16px;
  min-height: 0;
}

.detail-bottom {
  flex-shrink: 0;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.detail-bottom .email-actions {
  border: none;
  padding: 12px 0 0;
  background: none;
}

.email-view { display: flex; flex-direction: column; gap: 12px; }

.email-header {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.email-subject { font-size: var(--md-sys-typescale-title-large-size); font-weight: 600; margin-bottom: 10px; line-height: 1.35; }

.email-meta { font-size: var(--md-sys-typescale-body-medium-size); color: var(--text-muted); line-height: 1.65; }

.email-body {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.email-actions {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.email-actions-label { font-size: var(--md-sys-typescale-body-medium-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; color: var(--text-dim); }

.email-quick-actions { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

.email-quick-actions .panel-btn { min-height: 48px; padding: 10px 16px; font-size: var(--md-sys-typescale-body-large-size); }

.email-custom-prompt { display: flex; gap: 8px; align-items: flex-end; }

.email-custom-prompt textarea { flex: 1; min-height: 48px; font-size: var(--md-sys-typescale-body-large-size); }

.email-custom-prompt .panel-btn { align-self: flex-end; }

/* ── Notification panel items ── */

/* Notification panel redesign */

/* ── Documents panel ── */

.docs-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: var(--md-sys-typescale-body-large-size);
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.docs-breadcrumb::-webkit-scrollbar { display: none; }

.docs-crumb {
  color: var(--accent);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--md-sys-shape-corner-sm);
  flex-shrink: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.docs-crumb:active { background: var(--bg-elevated); }

.docs-crumb-sep { color: var(--text-dim); margin: 0 2px; flex-shrink: 0; }

.docs-crumb-current { color: var(--text-secondary); font-weight: 500; padding: 6px 10px; flex-shrink: 0; min-height: 36px; display: inline-flex; align-items: center; }

.docs-list { display: flex; flex-direction: column; gap: 6px; }

.docs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 64px;
}

.docs-folder { cursor: pointer; }

.docs-folder:active { background: var(--bg-tertiary); }

.docs-icon { font-size: var(--md-sys-typescale-headline-small-size); flex-shrink: 0; width: 30px; text-align: center; }

.docs-item-info { flex: 1; min-width: 0; }

.docs-name { font-size: var(--md-sys-typescale-body-large-size); color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }

.docs-meta { font-size: var(--md-sys-typescale-body-medium-size); color: var(--text-dim); margin-top: 3px; line-height: 1.3; }

.docs-actions { display: flex; gap: 8px; flex-shrink: 0; }

.docs-actions .panel-btn-sm { min-height: 40px; min-width: 40px; padding: 6px 10px; font-size: var(--md-sys-typescale-body-large-size); display: flex; align-items: center; justify-content: center; }

.docs-chevron { color: var(--text-dim); font-size: var(--md-sys-typescale-title-large-size); flex-shrink: 0; padding: 0 4px; line-height: 1; }

/* ── Header adjustments for notif bell ── */

/* (legacy: #header { position: relative; } moved into main #header rule) */

/* ── Health Dashboard ── */

/* Overall status banner */

@keyframes health-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Service cards */

/* Resource cards with progress bars */

/* Progress bar */

/* Footer */

/* Fade-in animation for panel content */

@keyframes health-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Service meta (response time, http code) */

/* SSL cert warn dot */

/* Error log rows */

/* Security details (collapsible sections) */

/* Mobile: stack resources single column */

/* ── Bottom NavigationBar (mobile) ──
   Matches the M3 NavigationBar pattern: 60dp x 32dp secondary-container
   pill behind the icon when selected, label below in label-medium. The
   container sits one rung above the page surface. */
#tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 72px;
  background: var(--md-sys-color-surface-container-low);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(72px + env(safe-area-inset-bottom));
  }
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  background: none;
  border: 0;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  position: relative;
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  min-height: 48px;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}

/* 60dp x 32dp pill indicator behind the icon. */
.tab-bar-item::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decel);
  z-index: 0;
  pointer-events: none;
}
.tab-bar-item.active::before {
  transform: translateX(-50%) scaleX(1);
}

.tab-bar-item svg {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
  transition: stroke-width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.tab-bar-item.active svg {
  stroke-width: 2.5;
}

.tab-bar-item span {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: 600;
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  position: relative;
  z-index: 1;
}

.tab-bar-item.active {
  color: var(--md-sys-color-on-secondary-container);
}

.tab-bar-item.active span {
  font-weight: 600;
}

.tab-bar-item:active svg {
  transform: scale(0.94);
}

.tab-bar-item .tab-bar-badge {
  position: absolute;
  top: 8px;
  left: calc(50% + 8px);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  min-width: 18px;
  height: 18px;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Hide tab bar when keyboard is open on mobile */

@media (max-height: 500px) and (orientation: landscape) {
  #tab-bar { display: none; }
}

/* ── Command Center Feed ── */

/* Toolbar (refresh button) */

@keyframes cc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Group headers */

/* Card */

/* Priority left border */

/* Source color strip */

/* Override for high/critical priority cards */

/* Card source row */

/* Card content */

/* Card actions */

/* ── Card row (Track C, 2026-05-08) ── */

/* Active cards use cc-card-active and the new row layout. The completed
   archive section keeps the legacy compact markup, so legacy rules above
   continue to apply there. */

/* Avatar — 36px circle, identity scent on the left of every active row. */

/* Headline row: primary label + spacer + status pill + time + stop button. */

/* Subtitle: chat name · source · time. Single line, muted. */

/* Title row inside body: 14px semibold, single line on dense rows.
   Override existing .cc-card-title rule when nested under cc-card-body. */

/* Inline Andy reply preview accent. Truncates to 1 line. */

/* Stop button — visible only while Andy is mid-flight on a card. */

/* Tighten the body's gap so the title sits close to the subtitle. */

/* Override the legacy preview hide on active cards (we don't render preview anymore). */

/* Action row: keep dismiss/snooze/Open visible on mobile, fade-in on desktop hover. */

/* Card expand (inline detail) */

/* Andy instruction bar inside expanded card */

/* Confirmation preview */

/* Card states */

/* Card animations */

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

@keyframes ccCardOut {
  from { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: 8px; padding: 14px 16px; }
  to { opacity: 0; transform: translateX(-100%); max-height: 0; margin-bottom: 0; padding: 0 16px; }
}

/* Snooze time picker menu */

/* Working card status indicators */

@keyframes spin { to { transform: rotate(360deg); } }

/* Working card left border accent */

/* Completed cards */

/* Badge review highlight */

/* Context strip (provenance bar + expandable source) */

/* Legacy expandable context strip — kept for back-compat but the new
   unified dispatcher (ccRenderCardDetail) renders source content directly
   into .cc-source-detail and lets the user scroll the full detail body
   instead of capping the source half at 35vh. The strip <div> still exists
   in index.html with display:none; these rules stay so any third party
   that toggles it manually doesn't get a broken layout. */

/* Teams compact timeline in context strip */

/* Email in context strip */

/* Calendar key-value in context strip */

/* Turn Cards thread */

/* Auto-collapse for long responses */

/* File attachments within turn cards */

/* Progress log for working cards */

/* Complete button row (above input bar in footer) */

/* File attachment in detail view */

/* Quick action chips (suggested by Andy) */

/* Skeleton loading */

/* Empty state */

/* Pull to refresh indicator */

/* ── Card Detail View (full-screen slide-in) ── */

/* Empty state element only renders inside the desktop split-pane
   layout (>=1280px). On narrower viewports the entire #cc-detail-view
   is display:none until .open is added, and once open the empty
   placeholder must stay hidden so the card content fills the pane. */

@keyframes ccDetailSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Stop button in the detail header. Surfaces only when the open card is
   actively working (Andy mid-flight). Mirrors the row stop affordance in red. */

@keyframes ccDetailStopSpin {
  to { transform: rotate(360deg); }
}

/* Financial detail: prominent dollar figure for the alert. */

/* Andy's one-line summary line. Quiet caption above the source body — a
   left rule keeps it visually anchored without the heavy bg/italic/accent
   color treatment the old version used (which competed with the title). */

/* ── Unified card detail layout ──────────────────────────────────────────
   The dispatcher (ccRenderCardDetail in panels.js) renders two children
   into #cc-detail-body: .cc-source-detail (the email/teams/calendar/etc.
   block) and .cc-thread-section (turn cards + progress + status). They
   share the body's vertical scroll so the user reads source content and
   continues into the thread without a sub-scroll trap. */

/* Sandboxed email HTML iframe. Renders the server's bodyHtml as a real
   email (tables, inline styles, links). The iframe sandbox is set to
   `allow-popups allow-popups-to-escape-sandbox` only — no JS, no
   credentialed network requests, no top-frame access. White bg matches
   the email's own styling expectations; the surrounding chrome stays
   dark. min-height keeps short emails from collapsing into a sliver;
   long emails get an inner scroll. */

/* Lightweight markdown rendering for card bodies */

/* Compact variant for context strip */

/* Teams messages in detail */

/* Teams message inline attachments */

/* Email attachment section */

/* Calendar event detail */

/* Footer with chips + andy bar */

/* Ripple effect for Android (Material Design) */

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, transparent 10%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-standard), opacity 0.8s var(--md-sys-motion-easing-standard);
}

.ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* ── More view Files section ── */

/* Hide input wrapper when not in chat mode */

@media (max-width: 380px) {
  .tab-bar-item span {
    font-size: var(--md-sys-typescale-label-small-size);
  }
  .tab-bar-item svg {
    width: 20px;
    height: 20px;
  }
}

/* ── Morning Briefing Card ── */

.briefing-card { padding: 12px 8px; }

.briefing-headline {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline);
  min-height: 24px;
}

.briefing-headline.briefing-skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary, rgba(255,255,255,0.08)) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: briefingSkeleton 1.5s ease-in-out infinite;
  border-radius: var(--md-sys-shape-corner-sm);
  border-bottom: none;
}

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

/* Updated timestamp */

.briefing-updated {
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--text-muted);
  margin-top: -14px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.briefing-section {
  margin-bottom: 18px;
  padding-top: 4px;
}

.briefing-section + .briefing-section {
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
  padding-top: 14px;
}

.briefing-section-label {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Action tier sections (Waiting on You, Alerts) */

.briefing-section--action .briefing-section-label {
  color: #ff9f43;
  letter-spacing: 1px;
}

.briefing-section--action .briefing-section-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff9f43;
  margin-right: 2px;
  animation: actionPulse 2s ease-in-out infinite;
}

@keyframes actionPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Count badge */

.briefing-section-count {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 700;
  background: #ff9f43;
  color: #09090b;
  border-radius: var(--md-sys-shape-corner-md);
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

/* Overnight messages */

.briefing-item {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--text-secondary);
  padding: 6px 0;
  line-height: 1.45;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}

.briefing-item:last-child { border-bottom: none; }

.briefing-item-sender {
  font-weight: 600;
  color: var(--text);
}

.briefing-time {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--text-muted);
  margin-left: 4px;
}

/* Overflow toggle for capped sections */

.briefing-overflow-item { display: none; }

.briefing-overflow-expanded .briefing-overflow-item { display: block; }

.briefing-overflow-toggle {
  font-size: 13px;
  color: var(--accent);
  padding: 8px 0;
  cursor: pointer;
  font-weight: 500;
  min-height: 32px;
}

/* Waiting on You items */

.briefing-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 2px -8px;
  border-radius: var(--md-sys-shape-corner-sm);
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  min-height: 44px;
}

.briefing-action-item:active,
.briefing-action-item:hover { background: var(--bg-secondary); }

.briefing-action-from {
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.briefing-action-summary {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefing-action-badge {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 600;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 7px;
  border-radius: var(--md-sys-shape-corner-xs);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Calendar items */

.briefing-cal-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--text-secondary);
  padding: 6px 0;
  line-height: 1.4;
}

.briefing-cal-time {
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 90px;
  flex-shrink: 0;
}

.briefing-online-badge {
  font-size: var(--md-sys-typescale-label-small-size);
  color: #5cb87a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Tech alerts */

.briefing-alert-item {
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--md-sys-shape-corner-sm);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Stat grid (Business Signals) */

.briefing-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.briefing-stat-cell {
  padding: 10px 12px;
  background: var(--md-sys-state-lift-weak);
  border-radius: var(--md-sys-shape-corner-sm);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.briefing-stat-cell--highlight {
  grid-column: 1 / -1;
}

.briefing-stat-cell--red {
  border-left: 3px solid #ff7b72;
  background: rgba(255, 123, 114, 0.06);
}

.briefing-stat-cell--yellow {
  border-left: 3px solid #f0c674;
  background: rgba(240, 198, 116, 0.04);
}

.briefing-stat-cell--green {
  border-left: 3px solid #5cb87a;
  background: rgba(92, 184, 122, 0.04);
}

.briefing-stat-label {
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.briefing-stat-value {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.briefing-stat-cell--highlight .briefing-stat-value {
  font-size: var(--md-sys-typescale-headline-small-size);
}

.briefing-stat-context {
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Business signals flag items */

.briefing-biz-item {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--text-secondary);
  padding: 5px 0;
}

/* Signal flags */

.briefing-signal-flag--red {
  color: #ff7b72;
  background: rgba(255, 123, 114, 0.1);
  padding: 4px 8px;
  border-radius: var(--md-sys-shape-corner-sm);
  border-left: 2px solid rgba(255, 123, 114, 0.4);
}

.briefing-signal-flag--yellow {
  color: #f0c674;
  background: rgba(240, 198, 116, 0.08);
  padding: 4px 8px;
  border-radius: var(--md-sys-shape-corner-sm);
  border-left: 2px solid rgba(240, 198, 116, 0.3);
}

.briefing-signal-flag--green {
  color: #5cb87a;
  background: rgba(92, 184, 122, 0.08);
  padding: 4px 8px;
  border-radius: var(--md-sys-shape-corner-sm);
  border-left: 2px solid rgba(92, 184, 122, 0.3);
}

.briefing-unavailable {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

.briefing-all-clear {
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--text-secondary);
  text-align: center;
  padding: 20px 0;
}

.briefing-ask-andy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px;
  margin-top: 20px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: var(--md-sys-shape-corner-md);
  background: transparent;
  color: var(--accent);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.briefing-ask-andy:hover,
.briefing-ask-andy:active {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .briefing-section--action .briefing-section-label::before { animation: none; opacity: 1; }
  .briefing-headline.briefing-skeleton { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Desktop Layout (1024px+)
   All rules below are scoped to @media (min-width: 1024px).
   Mobile styles are untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tab bar → left sidebar rail ──
   Strategy: Keep #app as flex-column (don't fight JS inline style).
   Make #tab-bar a fixed left sidebar. Offset all content with margin-left.
   This avoids CSS Grid auto-placement issues with overlays/drawers. */

@media (min-width: 1024px) {
  #tab-bar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 100vh;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    justify-content: flex-start;
    padding: 60px 0 12px;
    gap: 4px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg, #09090b);
    z-index: 100;
  }

  .tab-bar-item {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 10px 0 8px;
    border-radius: 0;
  }

  /* Active indicator: left edge instead of top edge */
  .tab-bar-item.active::after {
    top: 50%;
    left: 0;
    right: auto;
    bottom: auto;
    width: 3px;
    height: 24px;
    border-radius: 0 2px 2px 0;
    transform: translateY(-50%);
  }

  .tab-bar-item .tab-bar-badge {
    top: 6px;
    left: auto;
    right: 50%;
    transform: translateX(20px);
  }

  /* Offset everything else to make room for the sidebar */
  #header {
    margin-left: 72px;
  }

  #chat,
  #command-view,
  #more-view,
  #files-view {
    margin-left: 72px;
  }

  #input-wrapper {
    margin-left: 72px;
  }

  #scroll-bottom-btn {
    margin-left: 72px;
  }

  /* Remove bottom padding that was for the mobile tab bar */
  #chat,
  #command-view,
  #more-view,
  #files-view {
    padding-bottom: 0;
  }

  /* History drawer: offset by sidebar width */
  #history-overlay {
    left: 72px;
  }

  #history-drawer {
    left: 72px;
  }
}

/* ── 2. Command Center multi-column card grid ── */

/* ── 3. Desktop scrollbars ── */

@media (min-width: 1024px) {
  #chat,
  .cc-feed,
  #tools-launcher,
  #panel-content,
  #history-list,
  .files-list,
  .cc-detail-body {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-state-lift-strong) transparent;
  }

  #chat::-webkit-scrollbar,
  .cc-feed::-webkit-scrollbar,
  #tools-launcher::-webkit-scrollbar,
  #panel-content::-webkit-scrollbar,
  #history-list::-webkit-scrollbar,
  .files-list::-webkit-scrollbar,
  .cc-detail-body::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  #chat::-webkit-scrollbar-track,
  .cc-feed::-webkit-scrollbar-track,
  #tools-launcher::-webkit-scrollbar-track,
  #panel-content::-webkit-scrollbar-track,
  #history-list::-webkit-scrollbar-track,
  .files-list::-webkit-scrollbar-track,
  .cc-detail-body::-webkit-scrollbar-track {
    background: transparent;
  }

  #chat::-webkit-scrollbar-thumb,
  .cc-feed::-webkit-scrollbar-thumb,
  #tools-launcher::-webkit-scrollbar-thumb,
  #panel-content::-webkit-scrollbar-thumb,
  #history-list::-webkit-scrollbar-thumb,
  .files-list::-webkit-scrollbar-thumb,
  .cc-detail-body::-webkit-scrollbar-thumb {
    background: var(--md-sys-state-lift-strong);
    border-radius: 3px;
  }

  #chat::-webkit-scrollbar-thumb:hover,
  .cc-feed::-webkit-scrollbar-thumb:hover,
  #tools-launcher::-webkit-scrollbar-thumb:hover,
  #panel-content::-webkit-scrollbar-thumb:hover,
  #history-list::-webkit-scrollbar-thumb:hover,
  .files-list::-webkit-scrollbar-thumb:hover,
  .cc-detail-body::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-on-surface-variant);
  }
}

/* ── 4. Chat width constraint ── */

@media (min-width: 1024px) {
  #chat {
    padding: 24px 0;
  }

  #messages {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
  }

  #empty-state {
    max-width: 720px;
    margin: 0 auto;
  }

  .message.user {
    max-width: 560px;
  }

  #input-area {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Staged-attachment chips must ride the same centered 720px column as the
     composer; without this they span full width and the chip strands at the
     far left while #input-area is centered. Match #input-area's 24px side
     padding so the chip left-aligns with the composer pill. */
  #file-preview {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  #convo-strip {
    max-width: 720px;
    margin: 0 auto;
  }

  #input-wrapper {
    border-top: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 24px 16px;
  }
}

/* ── 5. Tools/More view card grid ── */

@media (min-width: 1024px) {
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    max-width: 900px;
  }

  .tool-launcher-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
  }

  .tool-launcher-card:last-child {
    border-bottom: 1px solid var(--border);
  }

  .tool-launcher-card:hover {
    background: var(--bg-elevated);
    border-color: var(--md-sys-state-lift-strong);
    transform: translateY(-1px);
  }
}

/* ── 6. Panel content max-widths ── */

/* ── 7. Hover states ── */

/* ── 8. Touch target reduction ── */

/* ── 9. Finance/Marketing max-widths ── */

/* ── 10. History drawer ── */

@media (min-width: 1024px) {
  #history-drawer {
    max-width: 360px;
    width: 360px;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
  }
}

/* ── 11. Logs Panel (Control Room) ── */

/* Panel header bar with live indicator */

@keyframes logs-live-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Stats bar */

@keyframes logs-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Loki offline banner */

/* Error spotlight */

/* 7-day error group summary */

/* Tool filter chips */

/* Live feed list */

/* Session grouping */

/* Row */

/* Tool badge with color */

/* Status dot */

/* Detail view */

/* Add Gotcha button */

/* Logs panel - new controls */

/* ── 12. Reduced motion for desktop animations ── */

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 3a: Command Center true split-pane (≥1280px)
   The 1024-1279 range keeps the existing 520px slide-in.
   At ≥1280, the detail pane is persistent on the right; an empty placeholder
   shows when no card is selected.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 2-col cards once the feed pane has room (~720px+ available). */

/* Right-click context-menu danger style (Delete, Dismiss, etc.) */

/* ── Phase 3b: Keyboard shortcut sheet (? overlay) ── */

#shortcut-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.shortcut-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.shortcut-sheet-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-xl);
  box-shadow: var(--md-sys-elevation-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shortcut-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.shortcut-sheet-header h2 {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: 600;
  color: var(--text);
}

.shortcut-sheet-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--md-sys-typescale-headline-small-size);
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.shortcut-sheet-close::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .shortcut-sheet-close:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.shortcut-sheet-close:active::after { opacity: var(--md-sys-state-pressed-opacity); }

@media (pointer: coarse) {
  .shortcut-sheet-close { width: 48px; height: 48px; }
}

.shortcut-sheet-body {
  overflow-y: auto;
  padding: 16px 20px 20px;
}

.shortcut-sheet-group + .shortcut-sheet-group {
  margin-top: 18px;
}

.shortcut-sheet-group-title {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.shortcut-row span {
  flex: 1;
  margin-left: 12px;
}

.shortcut-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--md-sys-shape-corner-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 600;
  color: var(--text);
}

/* Card keyboard navigation highlight (j/k focus ring) */

/* ── Phase 3b: Compact density (pointer:fine devices only) ── */

@media (pointer: fine) {
  #app.density-compact .cc-card {
    padding: 8px 10px;
    gap: 6px;
  }
  #app.density-compact .cc-card-row {
    gap: 8px;
  }
  #app.density-compact .cc-card-headline {
    gap: 6px;
  }
  #app.density-compact .cc-feed {
    padding: 8px 14px;
  }
  #app.density-compact #cc-cards {
    gap: 6px;
  }
  #app.density-compact #history-list .m3-list-item {
    padding: 6px 12px;
    min-height: 48px;
  }
  #app.density-compact .file-row {
    padding: 6px 10px;
    min-height: 36px;
  }
  #app.density-compact .message {
    margin-bottom: 12px;
  }
  #app.density-compact .tab-bar-item {
    min-height: 36px;
    padding: 6px 12px;
  }
  #app.density-compact .panel-section {
    padding: 12px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 3a: Three-column chat + expanded nav rail (≥1280px)
   • Nav rail expands from 72 → 200, with labels next to icons
   • Chat-mode adds a persistent conversation list (260) right of the rail
   • #app.nav-collapsed (Phase 3b Cmd+B) collapses the rail back to 72
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  :root { --nav-rail: 64px; --convo-drawer: 280px; }
  /* nav-collapsed at this width = hide labels but keep the 64dp rail.
     We're already at compact rail width by default so the toggle is mostly
     a no-op visually; labels still hide to keep the prior keyboard shortcut
     useful. */

  #tab-bar {
    width: var(--nav-rail);
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 0 12px;
    gap: 4px;
    height: 100vh;
    transition: width var(--md-sys-motion-duration-short4) var(--ease-out);
    border-top: 0;
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }

  /* Andy brand disc at the top of the rail. Inserted via ::before so we
     don't have to touch index.html or the switchMode tab tracking. */
  #tab-bar::before {
    content: 'A';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 700;
    font-size: var(--md-sys-typescale-title-medium-size);
    margin: 0 auto 16px;
    flex-shrink: 0;
  }

  /* Match M3 nav-rail-item atom: 56dp wide column with 32dp circular icon
     target on top, label below at label-medium. */
  .tab-bar-item {
    flex: 0 0 auto;
    width: 56px;
    height: auto;
    margin: 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    padding: 6px 0 8px;
    border-radius: 0;
    min-height: 56px;
  }

  /* Pill sits behind the icon only (top portion of the item). On select
     it expands to the M3 56dp width. */
  .tab-bar-item::before {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%) scaleX(1);
    width: 32px;
    height: 32px;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized-decel),
                background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  }
  .tab-bar-item.active::before {
    background: var(--md-sys-color-secondary-container);
    width: 56px;
  }

  .tab-bar-item span {
    font-size: var(--md-sys-typescale-label-small-size);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56px;
  }

  .tab-bar-item svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 5px; /* center inside 32dp pill (pill top:6, h:32, icon h:22) */
  }

  .tab-bar-item.active {
    color: var(--md-sys-color-on-secondary-container);
  }

  .tab-bar-item .tab-bar-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    left: auto;
    transform: none;
    margin-left: 0;
  }

  /* Collapsed state: hide labels for a 56dp icon-only rail. */
  #app.nav-collapsed .tab-bar-item span { display: none; }
  #app.nav-collapsed .tab-bar-item { height: 48px; }

  /* Offset all main content to clear the rail. */
  #header,
  #chat,
  #command-view,
  #more-view,
  #files-view,
  #input-wrapper,
  #scroll-bottom-btn {
    margin-left: var(--nav-rail);
    transition: margin-left var(--md-sys-motion-duration-short4) var(--ease-out);
  }

  #history-overlay,
  #history-drawer {
    left: var(--nav-rail);
    transition: left var(--md-sys-motion-duration-short4) var(--ease-out);
  }

  /* ── Chat-mode: persistent conversation list (third column) ── */
  #app.chat-mode #history-drawer {
    transform: none !important;
    transition: left var(--md-sys-motion-duration-short4) var(--ease-out) !important;
    box-shadow: none;
    width: var(--convo-drawer);
    max-width: var(--convo-drawer);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    z-index: 50;
  }

  #app.chat-mode #history-drawer .drawer-close {
    display: none;
  }

  #app.chat-mode #history-overlay {
    display: none !important;
  }

  #app.chat-mode #header,
  #app.chat-mode #chat,
  #app.chat-mode #input-wrapper,
  #app.chat-mode #scroll-bottom-btn {
    margin-left: calc(var(--nav-rail) + var(--convo-drawer));
  }
}

/* ── Phase 3b: 44px touch minimums on coarse-pointer devices ──
   Belt-and-suspenders. Most controls already meet WCAG 2.5.5 (Target Size)
   at typical sizes, but small icon buttons and period chips can fall under
   on mid-range phones. This block guarantees ≥44px on coarse-pointer inputs
   only — desktop/mouse keeps the denser sizes. */

@media (pointer: coarse) {
  .panel-btn-sm,
  .cc-snooze-option,
  .tab-bar-item,
  .shortcut-sheet-close,
  .cc-detail-back,
  .file-row .panel-btn-sm {
    min-height: 48px;
    min-width: 48px;
  }
  .ctx-menu .cc-snooze-option {
    min-height: 48px;
  }
}

/* ── Phase 2.2: save-to-memory chip on assistant messages ── */
.msg-save-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
  opacity: 0;
}
.message:hover .msg-save-btn,
.msg-save-btn--saved { opacity: 1; }
.msg-save-btn:hover { color: var(--accent); background: var(--accent-subtle); }
.msg-save-btn:active { transform: scale(0.9); }
.msg-save-btn:disabled { cursor: default; }
.msg-save-btn--saved { color: #22c55e; }
.msg-save-btn--saved:hover { background: rgba(34, 197, 94, 0.12); }

/* ── andy-pick: interactive multi-choice question card ── */
.andy-pick {
  margin: 10px 0;
  padding: 16px;
  background: var(--md-sys-color-surface-container-high);
  border: none;
  border-radius: var(--md-sys-shape-corner-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.andy-pick-question {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}
.andy-pick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* M3 assist chip */
.andy-pick-opt {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-sm);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  min-height: 32px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}
.andy-pick-opt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  .andy-pick-opt:hover:not(:disabled)::after { opacity: var(--md-sys-state-hover-opacity); }
}
.andy-pick-opt:active:not(:disabled)::after { opacity: var(--md-sys-state-pressed-opacity); }
.andy-pick-opt.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.andy-pick-opt:disabled { cursor: default; opacity: 0.6; }
.andy-pick-opt.selected:disabled { opacity: 0.85; }

/* M3 filled button */
.andy-pick-submit {
  align-self: flex-start;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  min-height: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}
.andy-pick-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  .andy-pick-submit:hover:not(:disabled) { box-shadow: var(--md-sys-elevation-1); }
  .andy-pick-submit:hover:not(:disabled)::after { opacity: var(--md-sys-state-hover-opacity); }
}
.andy-pick-submit:active:not(:disabled)::after { opacity: var(--md-sys-state-pressed-opacity); }
.andy-pick-submit:disabled { opacity: 0.38; cursor: default; }

.andy-pick-other {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* M3 filled text field (inline) */
.andy-pick-other-input {
  flex: 1;
  min-width: 0;
  background: var(--md-sys-color-surface-container-highest);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0;
  padding: 12px 16px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  min-height: 48px;
  outline: none;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.andy-pick-other-input:focus {
  border-bottom: 2px solid var(--md-sys-color-primary);
  padding-bottom: 11px;
}
.andy-pick-other-input:disabled { opacity: 0.5; }

/* M3 outlined button */
.andy-pick-other-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  min-height: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}
.andy-pick-other-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  .andy-pick-other-btn:hover:not(:disabled)::after { opacity: var(--md-sys-state-hover-opacity); }
}
.andy-pick-other-btn:active:not(:disabled)::after { opacity: var(--md-sys-state-pressed-opacity); }
.andy-pick-other-btn:disabled { opacity: 0.38; cursor: default; }

.andy-pick-error {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  font-style: italic;
}
@media (max-width: 480px), (pointer: coarse) {
  .andy-pick-opt { min-height: 48px; padding: 10px 16px; }
  .andy-pick-submit, .andy-pick-other-btn { min-height: 48px; }
  .andy-pick-other-input { min-height: 56px; }
}

/* ── Scheduled Jobs panel + shared M3 form primitives ── */
.m3-panel { padding: 12px 16px 32px; }
.m3-section {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.m3-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 12px;
}
.m3-field { margin-bottom: 14px; }
.m3-label {
  display: block;
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 6px;
}
.m3-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-family: inherit;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 12px;
  padding: 11px 12px;
}
.m3-input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
}
textarea.m3-input { resize: vertical; min-height: 64px; }
.m3-help {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 6px;
}
.m3-help--ok { color: var(--md-sys-color-primary); }
.m3-help--error { color: var(--md-sys-color-on-error-container); }
.m3-btn {
  font-size: 15px;
  font-family: inherit;
  border-radius: 20px;
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--md-sys-color-on-surface);
}
.m3-btn--filled {
  background: var(--md-sys-color-primary);
  color: #fff;
}
.m3-btn--text { padding: 8px 12px; color: var(--md-sys-color-primary); }
.m3-btn--danger { color: var(--md-sys-color-on-error-container); }
.m3-btn:disabled { opacity: 0.5; cursor: default; }
.m3-note { font-size: 13px; margin-top: 10px; }
.m3-note--error { color: var(--md-sys-color-on-error-container); }
.m3-empty {
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
  padding: 8px 0;
}
.jobs-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.jobs-item:last-child { border-bottom: none; }
.jobs-item-name { font-size: 15px; font-weight: 600; color: var(--md-sys-color-on-surface); }
.jobs-item-sched { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }
.jobs-item-status { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.jobs-status--ok { color: var(--md-sys-color-primary); }
.jobs-status--error { color: var(--md-sys-color-on-error-container); }
.jobs-status--running { color: var(--md-sys-color-tertiary); animation: jobs-running-pulse 1.6s ease-in-out infinite; }
@keyframes jobs-running-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.jobs-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.m3-switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.m3-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.m3-switch-track {
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 13px;
  transition: background 0.15s;
}
.m3-switch-track::before {
  content: '';
  position: absolute;
  left: 4px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-on-surface-variant);
  transition: transform 0.15s, background 0.15s;
}
.m3-switch input:checked + .m3-switch-track { background: var(--md-sys-color-primary); border-color: transparent; }
.m3-switch input:checked + .m3-switch-track::before { transform: translateX(18px); background: #fff; }

/* ── First-run onboarding wizard ── */
/* Full-screen M3 surface over the app. Never blocks the app underneath in a
   destructive way: it overlays it, and "I'll do this later" dismisses it. */
.onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--md-sys-color-surface);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow-y: auto;
  animation: onbFade 0.2s ease;
}
@keyframes onbFade { from { opacity: 0; } to { opacity: 1; } }
body.onb-open { overflow: hidden; }
.onb-surface {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.onb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: env(safe-area-inset-top);
  margin-bottom: 12px;
}
.onb-progress { display: flex; gap: 7px; align-items: center; }
.onb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--md-sys-color-surface-container-highest);
  transition: background 0.2s, width 0.2s;
}
.onb-dot--active { width: 22px; border-radius: 4px; background: var(--md-sys-color-primary); }
.onb-dot--done { background: var(--md-sys-color-on-surface-variant); }
.onb-later { white-space: nowrap; }
.onb-body { flex: 1; padding: 6px 0 16px; }
.onb-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.onb-actions-right { display: flex; align-items: center; gap: 8px; }
.onb-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin: 4px 0 10px;
  line-height: 1.25;
}
.onb-lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 16px;
}
.onb-fine {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 14px;
}
.onb-checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onb-checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--md-sys-color-on-surface);
}
.onb-checklist li::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
}
.onb-hero { text-align: center; padding: 24px 0 8px; }
.onb-hero .onb-title { font-size: 28px; }
.onb-hero .onb-lead, .onb-hero .onb-checklist { text-align: left; }
.onb-mark {
  width: 64px; height: 64px;
  border-radius: 20px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background: var(--md-sys-color-primary);
}
.onb-mark--done { box-shadow: 0 0 0 6px var(--md-sys-color-surface-container); }
.onb-apps { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.onb-app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 14px;
}
.onb-app-mono {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--md-sys-color-surface-container-highest);
}
.onb-app-label { flex: 1; font-size: 15px; color: var(--md-sys-color-on-surface); }
.onb-preview {
  margin-top: 8px;
  padding: 14px;
  border-radius: 14px;
  background: var(--md-sys-color-surface-container);
}
.onb-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
}
.onb-push-action { margin-top: 16px; }