/* 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) ──
 * Lifted byte-for-byte from
 *   ~/projects/andy-android/designsystem/.../Color.kt
 *   ~/projects/andy-android/designsystem/.../Type.kt
 * Do not edit values without updating Android first. 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);
  --care-blue:      #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);
  --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;
}

/* ── 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 ── */

#login {
  display: flex;
  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;
}

@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%;
}

@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 {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xl);
}

.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 {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border: none;
  border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xs);
}

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

/* ── TTS button ── */

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

.tts-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) {
  .tts-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

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

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

.tts-btn.playing {
  color: var(--accent);
}

@media (pointer: coarse) {
  .tts-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: rgba(255, 255, 255, 0.06);
  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 ── */

.tool-card {
  background: var(--tool-bg);
  border: 1px solid var(--tool-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 10px 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  isolation: isolate;
  -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: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  font-size: var(--md-sys-typescale-body-medium-size);
  min-height: 36px;
}

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

.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-muted);
  margin-left: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.tool-card .tool-detail {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--md-sys-shape-corner-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  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(--border-subtle);
}

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

.tool-card.tool-result {
  border-color: rgba(92, 184, 122, 0.2);
  background: rgba(92, 184, 122, 0.03);
}

.tool-card.tool-result .tool-header {
  color: var(--success);
}

.tool-card.tool-error {
  border-color: rgba(224, 96, 96, 0.2);
  background: rgba(224, 96, 96, 0.03);
}

.tool-card.tool-error .tool-header {
  color: var(--error);
}

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

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

.tool-group {
  background: var(--tool-bg);
  border: 1px solid var(--tool-border);
  border-radius: var(--radius-sm);
  margin: 10px 0;
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
}

.tool-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  min-height: 44px;
  transition: background var(--duration-fast);
}

.tool-group-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tool-group-header:active {
  background: rgba(255, 255, 255, 0.05);
}

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

.tool-group-body .tool-card {
  margin: 4px 0;
  border-color: var(--border-subtle);
}

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

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

.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 ── */

.activity-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 8px;
  background: var(--accent-subtle);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--md-sys-shape-corner-sm);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.activity-status .activity-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(59, 130, 246, 0.2);
  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;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ── Input area ── */

#input-wrapper {
  flex-shrink: 0;
  background: rgba(9, 9, 11, 0.88);
  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);
}

/* 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: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── 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: rgba(255, 255, 255, 0.08); border-radius: 2px; }

::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }

/* ── 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: rgba(9, 9, 11, 0.88);
  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-unknown { background: var(--bg-tertiary); color: var(--text-muted); }

/* ── Finance KPIs ── */

.alert-sep { color: rgba(224, 96, 96, 0.3); margin: 0 4px; }

/* ── Charts ── */

/* ── Marketing Dashboard ── */

/* ── Cohort retention table (C5) ── */

.cohort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cohort-table th, .cohort-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.cohort-table th {
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.cohort-table td:first-child { text-align: left; font-weight: 500; }

.ret-good { color: var(--success); font-weight: 600; }

.ret-ok { color: #d4a843; font-weight: 600; }

.ret-bad { color: var(--error); font-weight: 600; }

@media (max-width: 500px) {
  .cohort-col-optional { display: none; }
}

/* ── Data health indicator (C12) ── */

.data-health {
  font-size: var(--md-sys-typescale-body-small-size);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-align: center;
  margin-top: 12px;
}

/* ── Finance alert warning level ── */

/* ── 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 */

/* ── Command Center mode ── */

/* Finance view */

#finance-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  overscroll-behavior-y: contain;
}

/* Marketing view */

#marketing-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  overscroll-behavior-y: contain;
}

/* ── 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 in Care& Blue. 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 rgba(255, 255, 255, 0.12);
  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: rgba(255, 255, 255, 0.03);
  border-radius: var(--md-sys-shape-corner-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.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,
  #finance-view,
  #marketing-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,
  #finance-view,
  #marketing-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,
  #finance-content,
  #marketing-content,
  #tools-launcher,
  #panel-content,
  #history-list,
  .files-list,
  .cc-detail-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }

  #chat::-webkit-scrollbar,
  .cc-feed::-webkit-scrollbar,
  #finance-content::-webkit-scrollbar,
  #marketing-content::-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,
  #finance-content::-webkit-scrollbar-track,
  #marketing-content::-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,
  #finance-content::-webkit-scrollbar-thumb,
  #marketing-content::-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: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  #chat::-webkit-scrollbar-thumb:hover,
  .cc-feed::-webkit-scrollbar-thumb:hover,
  #finance-content::-webkit-scrollbar-thumb:hover,
  #marketing-content::-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: rgba(255, 255, 255, 0.2);
  }
}

/* ── 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;
  }

  #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: rgba(255, 255, 255, 0.1);
    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,
  #finance-view,
  #marketing-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 3c: Stripe-pattern dashboard layout (≥1280px)
   Sticky left section-nav alongside a single-scroll content column.
   At ≥1440px, sibling cards inside a section sit side-by-side (KPI hero
   spans both columns via :has(.finance-kpis)).
   Below 1280, this CSS is inert — the existing tabbed UI is rendered instead.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 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,
  .mkt-period-btn,
  .mkt-segment-btn,
  .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;
  }
}

/* Tables side-by-side at ≥1440px */

@media (min-width: 1440px) {
  .dash-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  /* Hero KPI cards always span the full row */
  .dash-section > .finance-card:has(> .finance-kpis),
  .dash-section > .finance-card.mkt-scoreboard,
  .dash-section > .mkt-notice,
  .dash-section > .mkt-bar-container,
  .dash-section > .mkt-period-toggle {
    grid-column: 1 / -1;
  }
}

/* ── 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; }
}