/* ═══════════════════════════════════════════════════
   IMI Executive Assistant — Design System
   ───────────────────────────────────────────────────
   Brand: Institute for Methods Innovation (IMI)
   Source of truth: IMI brand skill (institute-for-methods-innovation-brand)
   Palette: deep purple cornerstone, neutrals, cool secondary spectrum.
   No gradients. No pink as primary. Montserrat exclusively.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── IMI brand palette (raw tokens — use these directly when composing
        new surfaces; the semantic tokens below alias them for legacy CSS) ── */
  --imi-purple: #3D1F5C;          /* cornerstone */
  --imi-purple-hover: #2C1644;    /* slightly darker for press/hover */
  --imi-purple-soft: rgba(61, 31, 92, 0.10);
  --imi-bright-grey: #EFEBF8;     /* tinted background — pull-quotes, panels */
  --imi-silver-sand: #C0C1C2;     /* dividers, secondary UI, disabled */
  --imi-cultured: #F7F8F9;        /* near-white page bg */
  --imi-white: #FFFFFF;
  /* Cool secondary spectrum — accents for charts/infographics */
  --imi-tapestry: #A34888;        /* warning-but-not-error */
  --imi-studio: #78508E;
  --imi-powder: #515284;
  --imi-deep-blue: #364F71;
  --imi-dusk: #2F4858;
  --imi-fti-pink: #C74074;        /* secondary; never primary on IMI */

  /* ── Semantic surface tokens — Light mode (IMI brand default) ── */
  --bg-primary: var(--imi-cultured);
  --bg-secondary: var(--imi-white);
  --bg-tertiary: var(--imi-bright-grey);
  --bg-sidebar: var(--imi-purple);     /* sidebar reads as a brand panel */
  --bg-input: var(--imi-white);
  --bg-hover: var(--imi-bright-grey);
  --bg-active: var(--imi-purple-soft);
  --bg-message-user: var(--imi-purple);
  --bg-message-assistant: var(--imi-bright-grey);
  --bg-recording: #fee2e2;          /* functional red — semantic, not brand */

  --text-primary: #1f1633;          /* near-black with a violet undertone */
  --text-secondary: #5b5470;
  --text-tertiary: #908a9e;
  --text-inverse: var(--imi-white);
  /* White at 0.78 was too dim against IMI Purple — text shifted toward
     the bg colour and read as muted purple. 0.95 keeps a hairline step
     below pure white (so active items still pop) but stays clearly
     readable. Aaron 2026-05-03. */
  --text-sidebar: rgba(255, 255, 255, 0.95);
  --text-sidebar-active: var(--imi-white);
  --text-message-user: var(--imi-white);
  --text-message-assistant: var(--imi-purple);
  --text-link: var(--imi-purple);

  --border-light: var(--imi-silver-sand);
  --border-focus: var(--imi-purple);

  --accent: var(--imi-purple);
  --accent-hover: var(--imi-purple-hover);
  --accent-light: var(--imi-purple-soft);
  /* Functional status colors stay semantic — errors must read as errors. */
  --danger: #ef4444;
  --success: #10b981;
  --warning: var(--imi-tapestry);   /* shifted to cool palette per brand */

  --shadow-sm: 0 1px 3px rgba(31, 22, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 22, 51, 0.08);
  --shadow-lg: 0 8px 30px rgba(31, 22, 51, 0.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Montserrat is the IMI typeface. Inter and system stack are fallbacks
     only — leave them in place so partially-loaded pages don't reflow. */
  --font: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sidebar-width: 280px;

  --transition: 200ms ease;
}

/* Dark mode — keeps the structural dark surfaces (admin / portals reuse
   this for low-light operator viewing) but swaps in IMI Purple as the
   accent so brand identity survives the theme. */
[data-theme="dark"] {
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d28;
  --bg-tertiary: #252836;
  --bg-sidebar: #0d0e16;
  --bg-input: #1a1d28;
  --bg-hover: #252836;
  --bg-active: rgba(61, 31, 92, 0.20);
  --bg-message-user: var(--imi-purple);
  --bg-message-assistant: #1e2030;
  --bg-recording: #3b1c1c;

  --text-primary: #e8eaf0;
  --text-secondary: #8891a5;
  --text-tertiary: #5a6477;
  --text-message-assistant: #e8eaf0;
  /* Lift link colour on dark surfaces — IMI Purple at 100% reads as near-black
     against #1a1d28. Use a cool-spectrum alternative that stays on-brand. */
  --text-link: var(--imi-studio);

  --border-light: #2a2d3a;
  --border-focus: var(--imi-studio);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ── Reset ──────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Screens ────────────────────────────────────────── */

.screen {
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

/* ── Login ──────────────────────────────────────────── */

/* IMI cover-page recipe: solid IMI Purple (no gradient), white card on
   top, white wave on the right side at low opacity. The wave is a CSS
   placeholder approximation — replace with the official IMI wave SVG
   asset when supplied. */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--imi-purple);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Placeholder wave: layered SVG curves on the right edge. Replace the
   inline data URI with the official IMI wave artwork when available. */
#login-screen::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  max-width: 520px;
  pointer-events: none;
  opacity: 0.18;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round'><path d='M40 60 Q 200 240 80 460 Q -40 680 200 780'/><path d='M80 40 Q 260 220 140 440 Q 20 660 240 760'/><path d='M120 30 Q 320 200 200 420 Q 80 640 280 740'/><path d='M170 25 Q 370 180 260 400 Q 140 620 320 720'/><path d='M220 30 Q 410 170 320 380 Q 200 600 360 700'/></svg>");
}

.login-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

/* IMI mark: solid IMI Purple disc with white "EA" knockout. No gradient,
   per brand spec. The product (EA) sits inside the IMI brand frame. */
.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--imi-purple);
  border-radius: var(--radius-full);
  color: white;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.logo-icon.small {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: var(--radius-full);
}

.logo-icon.large {
  width: 80px;
  height: 80px;
  font-size: 28px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.login-logo h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.login-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

/* ── Lock Screen (soft lock) ────────────────────────── */

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  animation: lockFadeIn 0.4s ease;
}

.lock-screen.hidden {
  display: none;
}

@keyframes lockFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lock-card {
  text-align: center;
  animation: lockCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lockCardIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.lock-card h2 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin-top: 16px;
}

.lock-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 32px;
}

.lock-continue {
  width: 200px;
  padding: 14px 32px;
  font-size: 16px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(79, 70, 229, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.lock-continue:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 32px rgba(79, 70, 229, 0.5);
}

.lock-continue:active {
  transform: translateY(0);
}

.lock-signout {
  display: block;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  transition: color 0.15s ease;
}

.lock-signout:hover {
  color: rgba(255, 255, 255, 0.7);
}

.input-group {
  margin-bottom: 16px;
}

.input-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color var(--transition);
  outline: none;
}

.input-group input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: 8px;
}

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

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-text {
  color: var(--danger);
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
  min-height: 20px;
}

/* ── App Layout ─────────────────────────────────────── */

#app-screen {
  display: flex;
  height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  overflow: hidden;
}

.sidebar.collapsed {
  margin-left: calc(-1 * var(--sidebar-width));
  opacity: 0;
  pointer-events: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-sidebar-active);
  font-weight: 600;
  font-size: 14px;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.conv-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-sidebar);
  cursor: pointer;
  /* Match body 15px — Aaron 2026-05-03 flagged 13px as too small. The
     extra 2px reads materially better on the IMI Purple sidebar. */
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition);
  margin-bottom: 2px;
}

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

.conv-delete {
  display: none;
  background: none;
  border: none;
  color: var(--text-sidebar);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0.5;
  transition: all var(--transition);
  flex-shrink: 0;
}

.conv-item:hover .conv-delete {
  display: block;
}

.conv-delete:hover {
  opacity: 1;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
}

.conv-delete.armed {
  display: block !important;
  opacity: 1;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.2);
  font-weight: 700;
}

.conv-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-sidebar-active);
}

.conv-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-sidebar-active);
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

/* IMI brand mark in sidebar footer — small disc + wordmark, fades back
   so it doesn't compete with the EA product identity above. Hover lifts
   opacity to full as a subtle "this is clickable" cue. */
.imi-brand-mark {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: var(--text-sidebar);
  opacity: 0.55;
  transition: opacity var(--transition);
}
.imi-brand-mark:hover { opacity: 1; }
.imi-brand-mark-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--imi-white);
  color: var(--imi-purple);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}
.imi-brand-mark-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.version-badge {
  flex-basis: 100%;
  text-align: right;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-sidebar);
  opacity: 0.35;
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.btn-text {
  background: none;
  border: none;
  color: var(--text-sidebar);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.btn-text:hover {
  opacity: 1;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-sidebar);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-sidebar-active);
}

/* ── Sidebar Toggle ─────────────────────────────────── */

.sidebar-toggle {
  display: none; /* hidden when sidebar is visible */
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 100;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: opacity 200ms ease, transform 200ms ease;
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
  box-shadow: var(--shadow-md);
}

/* Show toggle when sidebar is collapsed on desktop */
.sidebar.collapsed ~ .sidebar-toggle {
  display: flex;
}

.sidebar-collapse-btn {
  color: var(--text-sidebar);
  padding: 4px;
}

.sidebar-collapse-btn:hover {
  color: var(--text-sidebar-active);
}

/* ── Chat Area ──────────────────────────────────────── */

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Welcome state */
.welcome-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-content {
  text-align: center;
  max-width: 520px;
  padding: 24px;
}

.welcome-content h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.welcome-content p {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 32px;
}

/* Briefing button */
.briefing-action {
  margin-bottom: 12px;
}

.quick-action.briefing {
  width: 100%;
  background: var(--imi-purple);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 16px;
  /* Flex centering — SVG + label sit together, gap is the visual stem */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.quick-action.briefing:hover {
  background: var(--imi-purple-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61, 31, 92, 0.35);
  color: #fff;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-action {
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
  /* SVG-icon layout (Aaron 2026-05-03 — prefers SVG over emoji): align
     the leading icon with the label using flex + gap. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Icons: brand-coloured by default (IMI Purple on light surface),
   currentColor on the briefing-button (which is already white-on-purple). */
.quick-action svg {
  flex-shrink: 0;
  color: var(--accent);
}
.quick-action.briefing svg {
  color: currentColor;
}

.quick-action:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Service status strip */
.service-status {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  opacity: 0.6;
  font-size: 11px;
  color: var(--text-tertiary);
  transition: opacity 0.2s;
}

.service-status:hover {
  opacity: 1;
}

.service-status-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.ok {
  background: #22c55e;
}

.status-dot.issue {
  background: #f59e0b;
  animation: pulse-dot 2s infinite;
}

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

/* Messages */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0;
}

.messages {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Per-conversation thread containers. Only the active one is visible;
   hidden threads keep streaming in the background so in-flight replies
   survive conversation switches. */
.thread {
  display: none;
}
.thread.active {
  display: block;
}

/* Sidebar "assistant is working" pulse next to an in-flight conversation. */
.conv-in-flight {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  flex-shrink: 0;
}
.conv-in-flight span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.5;
  animation: conv-pulse 1.2s infinite ease-in-out;
}
.conv-in-flight span:nth-child(2) { animation-delay: 0.2s; }
.conv-in-flight span:nth-child(3) { animation-delay: 0.4s; }
@keyframes conv-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

.message {
  margin-bottom: 24px;
  animation: fadeInUp 300ms ease;
}

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

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.message-avatar.user {
  background: var(--accent);
  color: white;
}

.message-avatar.assistant {
  background: var(--imi-purple);
  color: white;
}

.message-meta {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: 12px;
}

.message-content {
  padding-left: 36px;
  color: var(--text-primary);
  line-height: 1.7;
}

.message-content p {
  margin-bottom: 12px;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.message-content pre {
  background: var(--bg-tertiary);
  padding: 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 12px 0;
}

.message-content pre code {
  background: none;
  padding: 0;
}

.message-content ul, .message-content ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.message-content strong {
  font-weight: 600;
}

.voice-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding-left: 36px;
  padding-top: 4px;
}

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

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

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.typing-status {
  width: auto !important;
  height: auto !important;
  background: none !important;
  animation: none !important;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 6px;
  align-self: center;
}

/* ── Input Area ─────────────────────────────────────── */

.input-area {
  padding: 16px 24px 24px;
  background: var(--bg-primary);
}

.input-wrapper {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 8px 8px 8px 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input-wrapper:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.model-selector select {
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
}

.model-selector-pill {
  flex-shrink: 0;
}

.model-selector-pill select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 5px 24px 5px 10px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: all var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.model-selector-pill select:hover {
  border-color: var(--border-focus);
  background-color: var(--bg-hover);
}

.model-selector-pill select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.input-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#message-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  resize: none;
  max-height: 150px;
  line-height: 1.5;
  padding: 6px 0;
}

#message-input::placeholder {
  color: var(--text-tertiary);
}

.input-actions {
  display: flex;
  gap: 4px;
}

.input-actions .btn-icon {
  color: var(--text-tertiary);
  padding: 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
}

.input-actions .btn-icon svg,
.attach-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.attach-btn {
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
}

.input-actions .btn-icon:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.send-btn:not(:disabled) {
  color: var(--accent) !important;
}

.voice-btn.recording {
  color: var(--danger) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Attachment Menu ───────────────────────────────────── */

.attach-menu-container {
  position: relative;
  flex-shrink: 0;
}

.attach-btn {
  color: var(--text-tertiary) !important;
  padding: 8px !important;
  border-radius: 50% !important;
  transition: all var(--transition);
}

.attach-btn:hover {
  color: var(--text-primary) !important;
  background: var(--bg-tertiary) !important;
}

.attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 180px;
  z-index: 50;
  animation: menuSlideIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

.attach-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition);
}

.attach-option:hover {
  background: var(--bg-hover);
}

.attach-option svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── User Info (sidebar footer) ─────────────────────────── */

.user-info {
  color: var(--text-sidebar);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Attachment Chips (staged, above input) ────────────── */

.attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 4px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.attachment-chip.uploading {
  opacity: 0.6;
}

.attachment-chip svg { color: var(--accent); flex-shrink: 0; }

.chip-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
  transition: color var(--transition);
}
.chip-remove:hover { color: var(--danger); }

.chip-loading { font-size: 11px; }

/* Image chips show a small thumbnail in place of the paperclip icon. */
.attachment-chip.image-chip { padding-left: 4px; }
.attachment-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
}

/* Drop-target visual when an image is dragged over the input. */
.input-wrapper.drop-target {
  outline: 2px dashed var(--accent, #8b5cf6);
  outline-offset: -2px;
  background: rgba(139, 92, 246, 0.06);
}

/* ── Message Attachment Chips (in sent messages) ──────── */

.msg-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px 44px;
}

.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--accent-light);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.msg-chip svg { flex-shrink: 0; }

/* Inline image chip in user message bubble — small thumbnail + filename. */
.msg-image-chip {
  padding: 3px 8px 3px 4px;
  gap: 6px;
}
.msg-image-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
}

/* ── Retry card (replaces scary red error text) ──────── */

.message-retry { margin: 8px 0; }

.retry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  max-width: 520px;
}

.retry-card .retry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent);
}

.retry-card .retry-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.retry-card .retry-msg {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.retry-card .retry-btn {
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.retry-card .retry-btn:hover { opacity: 0.9; }
.retry-card .retry-btn:active { opacity: 0.75; }

/* ── Google Link Chips (in AI responses) ──────────────── */

.google-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  text-decoration: none !important;
  color: var(--text-primary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  margin: 4px 2px;
  vertical-align: middle;
}

.google-link-chip:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(138, 103, 255, 0.15);
}

.glc-icon { font-size: 16px; flex-shrink: 0; }

.glc-label {
  color: var(--text-primary);
  font-weight: 600;
}

.glc-id {
  color: var(--text-tertiary);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}

.glc-external {
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-left: 2px;
  transition: color var(--transition);
}

.google-link-chip:hover .glc-external { color: var(--accent); }

/* ── One-click action chips ─────────────────────────────
   Emitted by the model as [label](ea-action:draft?msg=...) in briefing
   output, rendered by transformActionChips() (public/js/app.js) as
   clickable buttons that prefill + send a fresh chat prompt. Visually
   a cousin of the google-link-chip but with an accent-tinted fill to
   telegraph "click me" without shouting.                                    */

.ea-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 4px 2px;
  background: var(--accent-light, rgba(138, 103, 255, 0.12));
  border: 1px solid var(--accent, #8a67ff);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--transition, 180ms ease);
  vertical-align: middle;
}

.ea-action-chip:hover {
  background: var(--accent, #8a67ff);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(138, 103, 255, 0.25);
}

.ea-action-chip:focus-visible {
  outline: 2px solid var(--accent, #8a67ff);
  outline-offset: 2px;
}

.ea-action-chip:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Disabled chip ("spent" — already actioned, can't double-fire). */
.ea-action-chip[disabled],
.ea-action-chip.ea-chip-spent {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.5);
  transform: none;
  box-shadow: none;
}

/* Tinted chip flavours — visible at rest in both light and dark mode.
   Aaron 2026-04-25: 12% backgrounds read as "ghost grey" on the dev light
   theme; bumping to 22% (rest) / fuller saturation (hover) so the user
   sees the green/amber/blue family at-a-glance. Borders also tightened
   to 0.75 opacity for better edge definition on light surfaces. */

/* Dismiss-flavour chip — softer green tint to read as "done / resolve". */
.ea-action-chip.ea-chip-dismiss {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.75);
  color: var(--text-primary, #0c5132);
}
.ea-action-chip.ea-chip-dismiss:hover {
  background: rgba(34, 197, 94, 0.85);
  border-color: rgba(34, 197, 94, 0.95);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Snooze-flavour chip — amber tint for "later". */
.ea-action-chip.ea-chip-snooze {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.75);
  color: var(--text-primary, #7a3e0b);
}
.ea-action-chip.ea-chip-snooze:hover {
  background: rgba(245, 158, 11, 0.9);
  border-color: rgba(245, 158, 11, 1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Promote-flavour chip — blue tint for "upgrade / escalate". Used on
   Finance & Cross-Entity Flags rows to bump priority into the high tier. */
.ea-action-chip.ea-chip-promote {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.75);
  color: var(--text-primary, #1e3a8a);
}
.ea-action-chip.ea-chip-promote:hover {
  background: rgba(59, 130, 246, 0.9);
  border-color: rgba(59, 130, 246, 1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Survey submit chip — distinguished from per-item chips by being a fuller
   block. Sits at the bottom of the top-attention section. */
.ea-action-chip.ea-survey-submit {
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 14px;
  background: var(--accent, #8a67ff);
  color: #fff;
  border-color: var(--accent, #8a67ff);
}
.ea-action-chip.ea-survey-submit:hover {
  background: var(--accent-hover, #7a57e8);
  border-color: var(--accent-hover, #7a57e8);
  box-shadow: 0 3px 12px rgba(138, 103, 255, 0.4);
}

/* Survey radio options — inline, mutually exclusive via shared name attr.
   Each is a <label> wrapping an <input type="radio"> + label text. */
.ea-survey-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition, 180ms ease);
  user-select: none;
}
.ea-survey-option:hover {
  background: rgba(138, 103, 255, 0.12);
  border-color: var(--accent, #8a67ff);
}
.ea-survey-option:has(input:checked) {
  background: var(--accent-light, rgba(138, 103, 255, 0.18));
  border-color: var(--accent, #8a67ff);
  color: var(--text-primary);
  font-weight: 600;
}
.ea-survey-option input[type="radio"] {
  margin: 0;
  accent-color: var(--accent, #8a67ff);
  cursor: pointer;
}
.ea-survey-option input[type="radio"]:disabled {
  cursor: not-allowed;
}
.ea-survey-option:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Visual confirmation that an item has been actioned — strikethrough +
   fade applied by fadeOutChipParent() in app.js. */
.ea-chip-handled {
  opacity: 0.55;
  transition: opacity 220ms ease;
}
.ea-chip-handled > *:first-child,
.ea-chip-handled p:first-child,
.ea-chip-handled strong:first-child {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* Pre-submit visual feedback on survey radios (Eric bug #33, 2026-04-27).
   When user picks resolved/snooze/drop on a survey radio, immediately
   fade the item so it feels marked for removal. Reversible — clicking
   "keep" lifts the fade. Final fade-to-spent happens on submit. */
.ea-survey-marked {
  opacity: 0.4;
  transition: opacity 200ms ease;
}
.ea-survey-marked h1,
.ea-survey-marked h2,
.ea-survey-marked h3,
.ea-survey-marked h4,
.ea-survey-marked h5,
.ea-survey-marked h6 {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

/* ── Chip toast ─────────────────────────────────────────
   Bottom-right ephemeral confirmation for chip-driven actions
   (dismiss/snooze/survey submit). Stacks vertically when several
   fire in quick succession. Auto-dismisses after 3s.                       */
.chip-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}
.chip-toast {
  pointer-events: auto;
  padding: 10px 16px;
  background: var(--bg-elevated, rgba(30, 30, 46, 0.95));
  color: var(--text-primary, #fff);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md, 10px);
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 180ms ease, transform 180ms ease;
  max-width: 320px;
}
.chip-toast.chip-toast-show {
  opacity: 1;
  transform: translateX(0);
}
.chip-toast-success {
  border-left: 3px solid #22c55e;
}
.chip-toast-warn {
  border-left: 3px solid #f59e0b;
}
.chip-toast-error {
  border-left: 3px solid #ef4444;
}

/* ── Drive Search Modal ───────────────────────────────── */

.drive-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 150ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drive-modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 540px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.drive-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.drive-modal-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.drive-modal-close:hover { color: var(--text-primary); }

.drive-search-bar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
}

.drive-search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.drive-search-bar input:focus { border-color: var(--accent); }

.btn-sm {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-sm:hover { filter: brightness(1.1); }

.drive-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
  max-height: 400px;
}

.drive-hint {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 24px;
}

.drive-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.drive-file:hover { background: var(--bg-hover); }
.drive-file.loading { opacity: 0.5; cursor: wait; }

/* Multi-select checkmark */
.drive-file-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.drive-file-check svg { opacity: 0; transition: opacity 150ms ease; }

.drive-file.selected .drive-file-check {
  background: var(--accent);
  border-color: var(--accent);
}
.drive-file.selected .drive-file-check svg {
  opacity: 1;
  stroke: white;
}

.drive-file.already-loaded {
  opacity: 0.4;
  cursor: default;
}
.drive-file.already-loaded .drive-file-check {
  background: var(--text-tertiary);
  border-color: var(--text-tertiary);
}
.drive-file.already-loaded .drive-file-check svg {
  opacity: 1;
  stroke: white;
}

.drive-file-icon { font-size: 20px; flex-shrink: 0; }

.drive-file-info { display: flex; flex-direction: column; min-width: 0; }

.drive-file-name {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drive-file-name small {
  color: var(--text-tertiary);
  font-weight: 400;
}

.drive-file-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Drive modal mode toggle */
.drive-modal-mode {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-light);
}

.drive-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.drive-mode-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.drive-mode-hint {
  color: var(--text-tertiary);
  font-size: 11px;
}

/* Drive modal footer */
.drive-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-tertiary);
}

.drive-modal-footer span {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.btn-primary {
  background: var(--accent) !important;
  color: white !important;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Deep Context Bar ─────────────────────────────────── */

.context-bar {
  padding: 0 24px;
  animation: slideDown 200ms ease;
}

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

.context-bar-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  /* Bright Grey panel — IMI tinted-background recipe for callouts/pull-quotes. */
  background: var(--imi-bright-grey);
  border: 1px solid rgba(61, 31, 92, 0.18);
  border-radius: var(--radius-lg);
  font-size: 13px;
}

.context-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.context-bar-label svg { stroke: var(--accent); }

.context-bar-count {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 11px;
}

.context-bar-docs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.context-bar-docs::-webkit-scrollbar { display: none; }

.context-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.context-doc-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
  border-radius: 50%;
  transition: color var(--transition);
}
.context-doc-remove:hover { color: var(--danger); }

.context-bar-clear {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all var(--transition);
  font-family: var(--font);
}
.context-bar-clear:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}


.recording-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--danger);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin-top: 6px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.recording-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.recording-label {
  color: var(--text-secondary);
  font-style: italic;
}

#recording-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
}

.recording-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.recording-control-btn.cancel {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}
.recording-control-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.recording-control-btn.done {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
.recording-control-btn.done:hover {
  background: rgba(34, 197, 94, 0.25);
  transform: scale(1.1);
}

.recording-dot {
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}

/* ── Theme Toggle ───────────────────────────────────── */

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  /* Aaron 2026-05-03: prior hover only shifted icon colour — on dark
     mode the bg stayed near-black so the hover state read as "icon got
     a bit darker", not as a clear interaction affordance. Lift bg +
     border so the button visibly responds. */
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

/* ── Narrow desktop / Tablet ───────────────────────── */

@media (max-width: 900px) {
  .model-selector-pill { display: none; }
}

/* ── Mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    z-index: 200;
    transition: left 300ms ease;
    box-shadow: var(--shadow-lg);
    width: 280px;
    margin-left: 0 !important; /* override desktop collapse */
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sidebar.open {
    left: 0;
  }

  /* Dark overlay behind open sidebar */
  .sidebar.open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .sidebar-toggle {
    display: flex !important; /* always show on mobile */
  }

  /* Smaller welcome logo on mobile */
  .welcome-content .message-avatar.assistant {
    width: 56px;
    height: 56px;
    font-size: 18px;
    border-radius: 14px;
  }

  .welcome-content h2 {
    font-size: 22px;
  }

  .welcome-content p {
    font-size: 14px;
  }

  /* Quick actions: 2-column on mobile */
  .quick-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .quick-action {
    padding: 12px;
    font-size: 13px;
  }

  /* Briefing button: full width on mobile */
  .quick-action.briefing {
    font-size: 15px;
    padding: 14px;
  }

  .messages {
    padding: 0 12px;
  }

  .message-content {
    font-size: 14px;
  }

  .input-area {
    padding: 8px 12px 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .chat-input {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .model-selector-pill {
    display: none;
  }

  .input-wrapper {
    gap: 4px;
    padding: 6px 6px 6px 10px;
  }

  .input-actions {
    gap: 2px;
  }

  .input-actions .btn-icon {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
  }

  /* Floating buttons top-right on mobile */
  .theme-toggle {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .bug-report-btn {
    top: 54px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  /* Service status: smaller text on mobile */
  .service-status {
    font-size: 11px;
    gap: 12px;
  }
}

/* ── Scrollbar ──────────────────────────────────────── */

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

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

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}

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

/* ── Sidebar Search ────────────────────────────────────── */

.sidebar-search {
  padding: 0 12px 8px;
  position: relative;
}

.sidebar-search .search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(199, 210, 232, 0.4);
  pointer-events: none;
}

.sidebar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-sidebar);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.sidebar-search input::placeholder {
  color: rgba(199, 210, 232, 0.4);
}

.sidebar-search input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}

/* ── Conversation Rename ───────────────────────────────── */

.conv-rename-input {
  width: 100%;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text-sidebar-active);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
}

/* ── Copy Button ───────────────────────────────────────── */

.msg-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
  margin-left: auto;
  display: flex;
  align-items: center;
}

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

.msg-copy-btn:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.msg-copy-btn.copied {
  color: var(--success);
  opacity: 1;
}

/* ── Markdown Rendered Content ─────────────────────────── */

.message-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13.5px;
}

.message-content th,
.message-content td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--border-light);
}

.message-content th {
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}

.message-content tr:hover td {
  background: var(--bg-hover);
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
  margin: 16px 0 8px;
  font-weight: 600;
  line-height: 1.3;
}

.message-content h1 { font-size: 1.3em; }
.message-content h2 { font-size: 1.15em; }
.message-content h3 { font-size: 1.05em; }
.message-content h4 { font-size: 0.95em; color: var(--text-secondary); }

.message-content pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  overflow-x: auto;
  margin: 12px 0;
  font-size: 13px;
}

.message-content code {
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.9em;
}

.message-content :not(pre) > code {
  background: var(--bg-tertiary);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}

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

.message-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 12px 0;
  padding: 4px 16px;
  color: var(--text-secondary);
  background: var(--accent-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.message-content ol,
.message-content ul {
  padding-left: 24px;
  margin: 8px 0;
}

.message-content li {
  margin: 4px 0;
}

.message-content a {
  color: var(--text-link);
  text-decoration: none;
}

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

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

.message-content p:first-child {
  margin-top: 0;
}

.message-content p:last-child {
  margin-bottom: 0;
}

/* ── Bug Report Button ─────────────────────── */
.bug-report-btn {
  position: fixed;
  top: 64px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100;
  opacity: 0.6;
}

.bug-report-btn:hover {
  opacity: 1;
  color: #ef4444;
  border-color: #ef4444;
  transform: scale(1.1);
}

/* ── Modal ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.modal-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--border);
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

[data-theme="dark"] .modal-card {
  background: #1e1e2e;
}

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

.modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  /* Flex so the SVG modal-title-icon aligns with the title text. Older
     emoji-prefixed titles inherit cleanly — this just adds the layout
     scaffolding for the SVG variants. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal-title-icon {
  flex-shrink: 0;
  color: var(--accent);
}
.backup-codes-section h5 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modal-body {
  padding: 20px;
}

.modal-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
}

.modal-body textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
}

.modal-body textarea:focus {
  border-color: var(--primary);
}

.screenshot-area {
  margin-top: 12px;
}

.screenshot-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: border-color 0.2s;
}

.screenshot-label:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.screenshot-preview {
  margin-top: 8px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: contain;
  width: 100%;
}

.modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   Security Features — v1.1.0
   ═══════════════════════════════════════════════════ */

/* ── Emulation Banner ──────────────────────────────── */
.emulation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  /* Emulation banner: Tapestry (cool-spectrum warning) on white text.
     Brand spec avoids yellow/orange — Tapestry signals "you're in a
     non-default state" without breaking the IMI register. */
  background: var(--imi-tapestry);
  color: var(--imi-white);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(163, 72, 136, 0.3);
  animation: slideDown 300ms ease;
}

.emulation-banner .emulation-exit {
  color: var(--imi-white);
  text-decoration: underline;
  font-weight: 700;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

body.emulating #app-screen { padding-top: 40px; }
body.emulating .sidebar { top: 40px; height: calc(100vh - 40px); }

/* ── Settings Button ───────────────────────────────── */
.settings-btn {
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 100;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.settings-btn:hover {
  /* Match theme-toggle: lift bg so hover reads on dark mode. */
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(45deg);
}


/* ── Admin Dashboard Button ──────────────────────── */
#admin-btn {
  bottom: 134px;
  /* Solid IMI Purple — brand spec forbids gradients. */
  background: var(--imi-purple);
  border-color: transparent;
  color: #fff;
}

#admin-btn:hover {
  /* Lift to a slightly brighter purple + IMI-Purple-tinted glow.
     Prior box-shadow rgba was stale indigo (102, 126, 234) — replaced
     with brand-correct IMI Purple values. */
  background: var(--imi-purple-hover);
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(61, 31, 92, 0.45);
}

/* ── Settings Modal ────────────────────────────────── */
.settings-modal-card {
  max-width: 440px;
  width: 90vw;
}

.settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}

.settings-section:last-child { border-bottom: none; }

.settings-section h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.password-rules {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin: 4px 0 12px;
}

.success-text {
  color: var(--success);
  font-size: 0.82rem;
  margin-top: 8px;
}

.btn-sm {
  font-size: 0.82rem;
  padding: 8px 16px;
}

.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-danger:hover {
  background: #dc2626;
}

/* ── 2FA Status Badge ──────────────────────────────── */
.twofa-status {
  margin-bottom: 12px;
}

.twofa-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
}

.twofa-badge.on {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.twofa-badge.off {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* ── 2FA Login Screen ──────────────────────────────── */
#twofa-screen .login-card { text-align: center; }

.twofa-alt {
  margin-top: 12px;
  text-align: center;
}

/* ── 2FA Setup Modal ──────────────────────────────── */
.twofa-setup-card {
  max-width: 480px;
  width: 92vw;
}

.twofa-setup-body {
  text-align: center;
}

.twofa-setup-body p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.qr-wrapper {
  margin: 16px auto;
  padding: 16px;
  background: white;
  border-radius: var(--radius-md);
  display: inline-block;
  box-shadow: var(--shadow-sm);
}

.qr-wrapper img {
  width: 200px;
  height: 200px;
}

.manual-entry {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin: 8px 0 16px;
}

.manual-entry code {
  background: var(--bg-tertiary);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: all;
}

.backup-codes-section {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 16px 0;
  text-align: left;
}

.backup-codes-section h5 {
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.backup-codes-grid code {
  background: var(--bg-secondary);
  padding: 4px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  text-align: center;
  letter-spacing: 1px;
  border: 1px solid var(--border-light);
}

/* ── Dark mode overrides ───────────────────────────── */
[data-theme="dark"] .emulation-banner {
  color: var(--imi-white);
}

[data-theme="dark"] .qr-wrapper {
  background: white;
}

[data-theme="dark"] .backup-codes-grid code {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

/* ── Forgot/Reset Password ───────────────────── */
#forgot-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg-primary);
}
#forgot-screen .login-card { text-align: center; }

.forgot-link {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
}
.forgot-link a {
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.forgot-link a:hover { opacity: 1; text-decoration: underline; }

.success-text {
  color: #22c55e;
  font-size: 13px;
  margin-top: 8px;
  text-align: center;
}

.password-rules {
  font-size: 11px;
  color: var(--text-secondary);
  margin: -4px 0 10px;
  text-align: center;
  opacity: 0.7;
}

#reset-code {
  text-align: center;
  letter-spacing: 6px;
  font-size: 20px;
  font-weight: 600;
}

/* ── Intake banner (welcome-state pill) ─────────────── */

.intake-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.2rem;
  margin-bottom: 1.5rem;
  /* Solid IMI Purple — brand spec forbids gradients. */
  background: var(--imi-purple);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  /* IMI Purple shadow (was stale indigo rgba 79,70,229). */
  box-shadow: 0 4px 14px rgba(61, 31, 92, 0.32);
  transition: var(--transition);
}
.intake-banner-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(61, 31, 92, 0.42);
}
.intake-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.intake-banner-label svg {
  flex-shrink: 0;
}
.intake-banner-arrow {
  font-size: 1.1rem;
  opacity: 0.9;
}

.intake-success-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 0.7rem 1.1rem;
  background: var(--success);
  color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  z-index: 100;
  animation: fade-in 200ms ease;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Focus rings (Aaron 2026-05-03 — a11y + brand) ──────
   The codebase liberally uses `input:focus { outline: none }` to
   suppress the default browser ring. That leaves keyboard-only users
   with no indication of where focus is. Replace the suppression with
   an IMI Purple ring that ONLY appears on `:focus-visible` — keyboard
   focus shows the ring, mouse clicks don't (modern accessibility
   pattern). Placed at the end of the file so source order beats the
   earlier `outline: none` declarations on equal specificity. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Skeleton loaders (Aaron 2026-05-03 — first-paint polish) ──
   Used while async fetches resolve. The shimmer is a left-to-right
   gradient sweep on a subtle base so the silhouette of pending content
   is visible before the data lands. */
.skeleton-pulse {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 0%,
    color-mix(in srgb, var(--bg-tertiary) 60%, var(--bg-secondary)) 50%,
    var(--bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Conversation date-group header (Aaron 2026-05-03) ──
   Splits the sidebar conversation list into Today / Yesterday / This
   week / This month / Older bands. Header is small-caps and sits
   slightly indented so the conv-item titles read as the dominant level. */
.conv-date-group {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sidebar);
  opacity: 0.55;
  padding: 12px 12px 4px;
  margin-top: 4px;
}
.conv-date-group:first-child { margin-top: 0; }

/* ─────────────────────────────────────────────────────────
   Print stylesheet
   ─────────────────────────────────────────────────────────
   Aaron 2026-05-06: "I want to send you the entire page to review easier.
   Can you set 'print' somehow so it pulls in the entire chat?"

   Browser default print clipped the chat at one page because
   .messages-container has `overflow-y: auto` inside a flex layout that
   constrains height to 100vh. For print we need to:

   1. Hide chrome (sidebar, composer, model picker, attach menu, toggles)
   2. Drop overflow / max-height on the message area so the full thread
      renders at natural height
   3. Force a clean white background regardless of theme (dark mode
      prints muddy)
   4. Add sensible page-break hints (avoid orphans on h2, avoid breaking
      tables across pages)
   5. Style chips as text-with-border so they print as legible labels
      rather than empty boxes

   Triggered automatically by Cmd-P / "Save as PDF" — no code changes
   needed in app.js.
   ───────────────────────────────────────────────────────── */
@media print {
  /* Force light backgrounds — print works better on white regardless of
     the user's theme setting. Override the design tokens at :root level. */
  :root,
  [data-theme="dark"] {
    --bg-primary: #ffffff !important;
    --bg-secondary: #ffffff !important;
    --bg-card: #ffffff !important;
    --bg-card-hover: #ffffff !important;
    --bg-sidebar: #ffffff !important;
    --text-primary: #000000 !important;
    --text-secondary: #333333 !important;
    --border-light: #cccccc !important;
  }

  body, html {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Hide everything that isn't the conversation content. */
  .sidebar,
  .sidebar-toggle,
  .sidebar-collapse-btn,
  .input-area,
  .attach-menu-container,
  .attach-menu,
  .model-selector-pill,
  #model-select,
  .voice-btn,
  .send-btn,
  .welcome-state,
  #welcome-state,
  #service-status,
  .service-status,
  .toast,
  .auto-promote-pill,
  .image-staging-chip,
  .input-actions,
  .quick-actions,
  .briefing-action {
    display: none !important;
  }

  /* Let the chat area + messages render at natural height — no overflow
     cap, no flex-driven 100vh constraint. */
  .app-shell,
  .chat-area,
  main.chat-area {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .messages-container {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .messages-container.hidden {
    display: block !important; /* show even if the welcome-state took focus */
  }

  .messages {
    max-width: 100% !important;
    padding: 0 12pt !important;
    margin: 0 !important;
  }

  /* Each message is the unit. Allow long messages (briefings) to break
     across pages where they have to — but try not to split short ones. */
  .message {
    page-break-inside: auto !important;
    break-inside: auto !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    margin-bottom: 12pt !important;
  }

  .message-content,
  .message-content p,
  .message-content ul,
  .message-content ol,
  .message-content li {
    color: #000000 !important;
    background: #ffffff !important;
  }

  /* Tables: avoid breaking a single table across pages where possible;
     repeat the header row on the next page if a long table does break. */
  .message-content table {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .message-content thead {
    display: table-header-group !important;
  }
  .message-content th,
  .message-content td {
    border: 1px solid #999 !important;
    padding: 4pt 6pt !important;
    color: #000 !important;
  }

  /* Avoid orphan headings — keep them with the section that follows */
  h1, h2, h3, h4 {
    page-break-after: avoid !important;
    break-after: avoid !important;
    color: #000 !important;
  }

  /* Chip clusters: render as bordered labels so the action affordance
     is legible on paper even though it's not clickable. */
  .ea-action-chip,
  button.ea-action-chip {
    display: inline-block !important;
    border: 1px solid #888 !important;
    background: #f4f4f6 !important;
    color: #000 !important;
    box-shadow: none !important;
    padding: 1pt 5pt !important;
    margin: 1pt !important;
    border-radius: 3pt !important;
    text-decoration: none !important;
  }

  /* Strip glassmorphism / shadows that don't translate to print */
  .message-bubble,
  .ea-tool-card {
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* A4 portrait with reasonable margins. The user can still override
     via the print dialog's Layout / Margins controls. */
  @page {
    size: A4;
    margin: 1.5cm 1.2cm;
  }
}