/* Figma Design Tokens — Product Design */

/* ── Base Tones (raw palette from Figma) ───────── */
:root {
  --tone-purple-0: #000000; --tone-purple-10: #0E006B; --tone-purple-20: #1A00DB;
  --tone-purple-30: #4434FF; --tone-purple-40: #5A4AFF; --tone-purple-50: #7568FF;
  --tone-purple-60: #9186FF; --tone-purple-70: #ACA4FF; --tone-purple-80: #C8C3FF;
  --tone-purple-90: #D6D5FF; --tone-purple-95: #E3E1FF; --tone-purple-98: #F5F5FF;
  --tone-purple-100: #FFFFFF;

  --tone-cyan-0: #000000; --tone-cyan-10: #01586A; --tone-cyan-20: #1C97B0;
  --tone-cyan-30: #2FC1E0; --tone-cyan-40: #4FD8F5; --tone-cyan-50: #5AE1FD;
  --tone-cyan-60: #86E9FD; --tone-cyan-70: #A5EFFD; --tone-cyan-80: #C3F4FE;
  --tone-cyan-90: #D7F8FE; --tone-cyan-95: #E1FAFE; --tone-cyan-98: #F5FDFF;
  --tone-cyan-100: #FFFFFF;

  --tone-blue-0: #000000; --tone-blue-10: #01456A; --tone-blue-20: #038ED8;
  --tone-blue-30: #2BB3FC; --tone-blue-40: #5AC4FD; --tone-blue-50: #72CDFD;
  --tone-blue-60: #86D4FD; --tone-blue-70: #A5DEFD; --tone-blue-80: #BDE5FB;
  --tone-blue-90: #D2EFFE; --tone-blue-95: #E6F6FE; --tone-blue-98: #F5FBFF;
  --tone-blue-100: #FFFFFF;

  --tone-green-0: #000000; --tone-green-10: #033A2D; --tone-green-20: #045743;
  --tone-green-30: #046B53; --tone-green-40: #048064; --tone-green-50: #038B6C;
  --tone-green-60: #41AD8B; --tone-green-70: #6FC5A2; --tone-green-80: #ADE7C1;
  --tone-green-90: #C8EFD5; --tone-green-95: #E1F7E9; --tone-green-98: #F4FCF7;
  --tone-green-100: #FFFFFF;

  --tone-yellow-energy-0: #000000; --tone-yellow-energy-10: #2E3602;
  --tone-yellow-energy-20: #434F03; --tone-yellow-energy-30: #546204;
  --tone-yellow-energy-40: #6D8005; --tone-yellow-energy-50: #94AD00;
  --tone-yellow-energy-60: #B2D100; --tone-yellow-energy-70: #C3E500;
  --tone-yellow-energy-80: #D5F427; --tone-yellow-energy-90: #E1FD3F;
  --tone-yellow-energy-95: #F3FFAD; --tone-yellow-energy-98: #FCFFEB;
  --tone-yellow-energy-100: #FFFFFF;

  --tone-green-energy-0: #000000; --tone-green-energy-10: #02361C;
  --tone-green-energy-20: #034F29; --tone-green-energy-30: #046233;
  --tone-green-energy-40: #058042; --tone-green-energy-50: #00994D;
  --tone-green-energy-60: #00B259; --tone-green-energy-70: #00CC66;
  --tone-green-energy-80: #00E573; --tone-green-energy-90: #00FD7F;
  --tone-green-energy-95: #ADFFD6; --tone-green-energy-98: #EBFFF5;
  --tone-green-energy-100: #FFFFFF;

  --tone-neutral-warm-0: #000000; --tone-neutral-warm-10: #23221A;
  --tone-neutral-warm-20: #38372F; --tone-neutral-warm-30: #4F4E45;
  --tone-neutral-warm-40: #67665D; --tone-neutral-warm-50: #807F76;
  --tone-neutral-warm-60: #9A9990; --tone-neutral-warm-70: #B4B3AA;
  --tone-neutral-warm-80: #DDDCD3; --tone-neutral-warm-90: #ECEBE1;
  --tone-neutral-warm-95: #FAF9F0; --tone-neutral-warm-98: #FFFEF8;
  --tone-neutral-warm-100: #FFFFFF;

  --tone-neutral-cool-0: #000000; --tone-neutral-cool-10: #1C1B22;
  --tone-neutral-cool-15: #2A2932; /* bg-1 dark mode — between cool-10 and cool-20 */
  --tone-neutral-cool-20: #2E2D3A; --tone-neutral-cool-30: #414054;
  --tone-neutral-cool-40: #555272; --tone-neutral-cool-50: #716E92;
  --tone-neutral-cool-60: #B1AFC5; --tone-neutral-cool-70: #CAC9D9;
  --tone-neutral-cool-80: #E1E0EB; --tone-neutral-cool-90: #F0F0F5;
  --tone-neutral-cool-95: #F6F6F9; --tone-neutral-cool-98: #F9F9FB;
  --tone-neutral-cool-100: #FFFFFF;

  --tone-neutral-gray-0: #000000; --tone-neutral-gray-10: #1F1F1F;
  --tone-neutral-gray-20: #343434; --tone-neutral-gray-30: #4A4A4A;
  --tone-neutral-gray-40: #626262; --tone-neutral-gray-50: #808080;
  --tone-neutral-gray-60: #959595; --tone-neutral-gray-70: #AFAFAF;
  --tone-neutral-gray-80: #CCCCCC; --tone-neutral-gray-90: #E6E6E6;
  --tone-neutral-gray-95: #F5F5F5; --tone-neutral-gray-98: #FBFBFB;
  --tone-neutral-gray-100: #FFFFFF;
}

/* ── Product Color Tokens ──────────────────────── */
:root {
  /* Text */
  --text-primary: #0E006B;
  --text-secondary: #555272;
  --text-tertiary: #B1AFC5;
  --text-disabled: #E1E0EB;
  --text-contrast: #FFFFFF;

  /* Primary */
  --primary: #5A4AFF;
  --primary-light: #9186FF;
  --primary-lighter: #C8C3FF;
  --primary-dark: #4434FF;
  --purple-90: #D6D5FF;

  /* Secondary */
  --secondary-blue-light: #BDE5FB;
  --secondary-cyan: #5AE1FD;
  --secondary-cyan-dark: #01586A;
  --secondary-green-light: #ADE7C1;
  --secondary-green: #038B6C;
  --secondary-warm: #DDDCD3;

  /* Accent */
  --accent-yellow: #D5F427;
  --accent-green: #00FD7F;

  /* Backgrounds */
  --bg-0: #FFFFFF;
  --bg-1: #F9F9FB;
  --bg-2: #F6F6F9;
  --bg-3: #F0F0F5;
  --bg-4: #E1E0EB;
  --bg-viewport: #F0F0F5;
  --bg-surface: #FFFFFF;
  --bg-overlay: rgba(14,0,107,0.35);
  --bg-blur: rgba(255,255,255,0.92);
  --bg-blur-heavy: rgba(255,255,255,0.96);

  /* Borders */
  --border: #F0F0F5;
  --border-light: #F6F6F9;
  --border-avatar: rgba(14,0,107,0.1);

  /* Shadows */
  --shadow-phone: 0px 4px 30px rgba(0,0,0,0.08), 0px 0px 90px rgba(0,0,0,0.35);
  --shadow-modal: 0 12px 40px rgba(0,0,0,0.18);

  /* Semantic */
  --danger: #FA4646;
  --warning: #F0AF32;
  --success: #32DB62;

  /* Component aliases */
  --chip-border: var(--primary);
  --chip-hover: var(--tone-purple-95);
  --action-card-hover-bg: var(--tone-purple-95);
  --bubble-user-bg: var(--primary);
  --bubble-agent-bg: var(--bg-2);
  --bubble-social-bg: var(--purple-90);
  --widget-weather-bg: var(--bg-4);
  --widget-flight-bg: var(--secondary-blue-light);
  --widget-flight-text: var(--tone-blue-20);
  --widget-calendar-bg: var(--tone-green-95);
  --widget-calendar-text: var(--tone-green-30);
  --widget-email-bg: #FFF3E0;
  --widget-email-text: #E65100;
  --widget-news-bg: #F3E5F5;
  --widget-news-text: #7B1FA2;
  --signin-bg: var(--primary);

  /* Icon fills — consumed by inline SVGs via svg-inject.js */
  --fill-0: #0E006B;   /* primary ink (outlines, lines) */
  --fill-1: #9186FF;   /* secondary fill (interiors on dual-color icons) */

  /* Spacing scale — mirrors design-system/tokens.css until tokens.css is linked */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;

  /* Radius scale — mirrors design-system/tokens.css until tokens.css is linked */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Debug tooling */
  --debug-bg: var(--tone-neutral-gray-10);
  --debug-bg-elevated: var(--tone-neutral-gray-20);
  --debug-text: var(--tone-neutral-gray-80);
  --debug-text-dim: var(--tone-neutral-gray-60);
  --debug-border: var(--tone-neutral-gray-30);
  --debug-accent: var(--primary);
}

/* ── Dark Mode ──────────────────────────────────── */
body.dark-mode {
  /* Text — derived from opposite-luminance base tone stops */
  --text-primary: var(--tone-purple-90);
  --text-secondary: var(--tone-neutral-cool-70);
  --text-tertiary: var(--tone-neutral-cool-50);
  --text-disabled: var(--tone-neutral-cool-30);
  --text-contrast: #FFFFFF;

  /* Icon fills */
  --fill-0: var(--tone-purple-80);  /* light purple — readable on dark surfaces */
  --fill-1: var(--tone-purple-50);  /* medium purple — distinct fill for dual-color icons */

  /* Primary — shifted up the purple scale */
  --primary: var(--tone-purple-60);
  --primary-light: var(--tone-purple-70);
  --primary-lighter: var(--tone-purple-30);
  --primary-dark: var(--tone-purple-40);
  --purple-90: var(--tone-purple-20);

  /* Secondary */
  --secondary-blue-light: var(--tone-blue-10);
  --secondary-cyan: var(--tone-cyan-60);
  --secondary-cyan-dark: var(--tone-cyan-80);
  --secondary-green-light: var(--tone-green-10);
  --secondary-green: var(--tone-green-70);
  --secondary-warm: var(--tone-neutral-warm-20);

  /* Accent */
  --accent-yellow: var(--tone-yellow-energy-70);
  --accent-green: var(--tone-green-energy-80);

  /* Backgrounds — dark surface scale from Neutral Cool */
  --bg-0: var(--tone-neutral-cool-10);
  --bg-1: var(--tone-neutral-cool-15);
  --bg-2: var(--tone-neutral-cool-20);
  --bg-3: var(--tone-neutral-cool-30);
  --bg-4: var(--tone-neutral-cool-40);
  --bg-viewport: #0E0C14;
  --bg-surface: var(--tone-neutral-cool-20);
  --bg-overlay: rgba(0,0,0,0.55);
  --bg-blur: rgba(28,27,34,0.92);
  --bg-blur-heavy: rgba(28,27,34,0.96);

  /* Borders */
  --border: var(--tone-neutral-cool-30);
  --border-light: var(--tone-neutral-cool-30);
  --border-avatar: rgba(200,195,255,0.15);

  /* Shadows */
  --shadow-phone: 0px 4px 30px rgba(0,0,0,0.3), 0px 0px 90px rgba(0,0,0,0.6);
  --shadow-modal: 0 12px 40px rgba(0,0,0,0.4);

  /* Semantic */
  --danger: #FF6B6B;
  --warning: #FFB74D;
  --success: #81C784;

  /* Component aliases */
  --chip-border: var(--primary);
  --chip-hover: var(--tone-purple-20);
  --bubble-user-bg: var(--tone-purple-40);
  --bubble-agent-bg: var(--bg-2);
  --bubble-social-bg: var(--bg-3);
  --widget-weather-bg: var(--bg-1);
  --widget-flight-bg: var(--bg-1);
  --widget-flight-text: var(--tone-blue-70);
  --widget-calendar-bg: var(--tone-green-20);
  --widget-calendar-text: var(--tone-green-70);
  --widget-email-bg: var(--tone-cyan-10);
  --widget-email-text: var(--secondary-cyan);
  --widget-news-bg: var(--tone-neutral-warm-20);
  --widget-news-text: var(--tone-neutral-warm-80);
  --signin-bg: var(--bg-viewport);
}
body.dark-mode .signin-sheet { background: var(--bg-0); }
body.dark-mode .signin-sheet-body { background: var(--bg-0); }
body.dark-mode .signin-sheet .bottom-safe { background: var(--bg-0); }
body.dark-mode .signin-btn { background: var(--bg-1); border-color: var(--border); }
body.dark-mode .signin-home { background: var(--bg-0); }
body.dark-mode .action-card { background: linear-gradient(0deg, rgba(255,255,255,0.006) 0%, rgba(255,255,255,0) 100%), var(--bg-1); border-color: rgba(255,255,255,0.28); }
body.dark-mode .bubble-action-inline { background: var(--bg-1); border-color: var(--primary); }
body.dark-mode .action-card.neutral { background: var(--bg-1); border: 1px solid var(--border); }
body.dark-mode .msg-list-item { background: var(--bg-1); border-bottom-color: var(--border); }
body.dark-mode .msg-list-item.agent-row { background: linear-gradient(90deg, rgba(90,74,255,0.18), rgba(90,74,255,0.08)); }
/* NEEDS FIXING — inline var() bg tokens below have no dark-mode override in the token layer */
body.dark-mode .card-avatar[style*="tone-green-95"] { background: rgba(3, 139, 108, 0.22) !important; }
body.dark-mode .card-avatar[style*="tone-blue-95"]  { background: rgba(43, 179, 252, 0.18) !important; }
body.dark-mode .card-avatar[style*="tone-purple-98"] { background: rgba(90, 74, 255, 0.16) !important; }
body.dark-mode .chat-chip { background: var(--bg-2); color: var(--text-secondary); }
body.dark-mode .chat-chip:hover { background: var(--bg-3); }
body.dark-mode .chat-chip.selected { background: var(--primary); color: var(--text-contrast); }
body.dark-mode .chat-chip.dimmed { opacity: 0.3; }
body.dark-mode .status-bar.sb-dark .sb-right img,
body.dark-mode .status-bar.sb-dark .sb-right svg { filter: invert(1); }
body.dark-mode .home-bar { background: var(--tone-neutral-cool-80); }
/* ── Icon color variables — map to existing palette tokens ── */
/* SVGs use fill="var(--fill-0, fallback)" and fill="var(--fill-1, fallback)" */
/* Inline SVGs inherit these from the page context automatically              */
:root {
  --fill-0: var(--tone-purple-10); /* #0E006B — icon primary, dark on light bg */
  --fill-1: var(--tone-purple-60); /* #9186FF — icon accent (agent bubble, send arrow) */
}
body.dark-mode {
  --fill-0: var(--tone-purple-80); /* #C8C3FF — light purple on dark bg */
  /* --fill-1 stays the same — mid-tone accent works on dark too */
}
/* Context-specific fill overrides */
.action-check-24 { --fill-0: #fff; }          /* white checkmark on colored circle, always */
.flight-widget   { --fill-0: var(--widget-flight-text); } /* blue flight icons match widget text */

/* ── Icon base class (inline SVG sizing + display) ── */
/* Color comes from --fill-0/--fill-1 resolved inside the SVG's fill attrs   */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-viewport);
  -webkit-font-smoothing: antialiased;
}

/* Phone frame — 390×844 at 1x, 32px radius per Figma */
.phone {
  width: 390px;
  height: 844px;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  box-shadow: var(--shadow-phone);
}

/* Top bar (status + nav) — full width at top */
.top-bar {
  flex-shrink: 0;
  width: 100%;
  background: var(--sb-bg, var(--bg-blur));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

/* Status bar — full width, foreground color via --sb-color; default dark */
.status-bar {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px 0;
  color: var(--sb-color, var(--text-primary));
  box-sizing: border-box;
}
/* Icon color variants */
.status-bar.sb-light { --sb-color: var(--text-contrast); }
.status-bar.sb-dark  { --sb-color: var(--text-primary); }

/* Background variants — default is transparent */
.status-bar.sb-bg-white       { background: var(--bg-0); }
.status-bar.sb-bg-transparent { background: transparent; }

.sb-left { display: flex; align-items: center; }
.sb-time {
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-color, var(--text-primary));
  letter-spacing: -0.3px;
  line-height: 1;
}
.sb-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-right img {
  display: block;
  /* inherit currentColor via filter is not needed — we use SVG currentColor */
  color: var(--sb-color, var(--text-primary));
}
/* Tint SVG assets to match --sb-color.
   Using filter is the simplest cross-browser solution for
   black-base SVGs switching between black and white. */
.status-bar.sb-light .sb-right img {
  filter: invert(1);
}
.status-bar.sb-dark .sb-right img,
.sb-right img {
  filter: none;
}

/* Nav bar variants — full width */
.nav-bar {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  box-sizing: border-box;
}
.nav-bar-tall {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  box-sizing: border-box;
}
.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.nav-subtitle {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: center;
  line-height: 16px;
}
.nav-left, .nav-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.nav-left { left: 16px; }
.nav-right { right: 16px; }
.nav-bar-tall .nav-left,
.nav-bar-tall .nav-right {
  top: calc(50% - 8px);
}
.nav-avatar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: center;
  line-height: 16px;
}

/* Scrollable content */
.content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar { display: none; }

/* Bottom bar */
.bottom-bar {
  flex-shrink: 0;
  background: var(--bg-blur);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.tab-bar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
  padding: 0 48px;
}
.tab {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
/* Two-state icon: line (inactive) and filled (active) */
.tab .icon-line,
.tab .icon-filled {
  width: 100%; height: 100%;
  display: block;
  position: absolute; inset: 0;
}
.tab .icon-line  { opacity: 1; }
.tab .icon-filled { opacity: 0; }
.tab.active .icon-line  { opacity: 0; }
.tab.active .icon-filled { opacity: 1; }
.tab-avatar {
  width: 32px; height: 32px;
  border-radius: 90px;
  border: 1px solid var(--border-avatar);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
.tab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }
.tab-avatar.active { border-color: var(--primary); border-width: 2px; }
.bottom-safe {
  height: 34px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
}
.home-bar {
  width: 134px; height: 5px;
  border-radius: 100px;
  background: var(--text-primary);
}

/* Chat input bar */
.input-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 16px;
}
.input-add {
  width: 48px; height: 48px;
  border-radius: 16px;
  border: 1px solid var(--bg-3);
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
}
.input-add img, .input-add .icon { width: 24px; height: 24px; object-fit: contain; }
.input-field {
  flex: 1;
  min-height: 48px;
  max-height: 112px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--bg-0);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 12px 16px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.input-field.focused { border-color: var(--primary); }
.input-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.408px;
  line-height: 22px;
  min-height: 22px;
  max-height: 88px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  display: block;
  scrollbar-width: thin;
}
.input-textarea::placeholder { color: var(--text-tertiary); }
.input-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-icon img, .input-icon .icon { width: 24px; height: 24px; display: block; }

/* Message bubbles */
.bubble {
  border-radius: 16px;
  padding: 14px 16px;
  max-width: var(--component-bubble-max-width);
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.408px;
  color: var(--text-primary);
}
.bubble-agent {
  background: var(--bubble-agent-bg);
}
.bubble-social-agent {
  background: var(--bubble-social-bg);
}
.bubble-person {
  background: var(--bg-3);
}
.bubble-user {
  background: var(--bubble-user-bg);
  color: var(--text-contrast);
  width: fit-content;
}
.bubble-action {
  background: var(--primary-lighter);
  border: 2px solid var(--primary-light);
}
.bubble-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  white-space: nowrap;
}
.bubble-sender {
  font-size: 13px;
  color: var(--primary);
  opacity: 0.9;
  letter-spacing: -0.078px;
  line-height: 18px;
}
.bubble-time {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.9;
  line-height: 16px;
}

/* Message rows */
.msg-left {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 0 42px 0 16px;
}
.msg-right {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 16px 0 54px;
}
.msg-avatar {
  width: 30px; height: 30px;
  border-radius: 90px;
  flex-shrink: 0;
  overflow: hidden;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Date pill */
.date-pill {
  display: flex;
  justify-content: center;
  padding: 12px 56px;
}
.date-pill span {
  background: var(--bg-3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 16px;
}

/* Message list items */
.msg-list-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 16px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--bg-3);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.05s ease, background 0.05s ease;
}
.msg-list-item.agent-row {
  background: linear-gradient(90deg, rgba(90,74,255,0.05), rgba(90,74,255,0.03));
}
.msg-list-avatar {
  width: 36px; height: 36px;
  border-radius: 90px;
  flex-shrink: 0;
  overflow: hidden;
}
.msg-list-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-list-header { display: flex; justify-content: space-between; align-items: center; }
.msg-list-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 20px;
}
.msg-list-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 20px;
  flex-shrink: 0;
}
.msg-list-time img, .msg-list-time .icon { width: 5px; height: 8px; }
.msg-list-preview {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 21px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chat layout */
.chat-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 0 24px;
  gap: 10px;
  min-height: 100%;
}
.msg-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Date & system pills in chat */
.date-pill-chat {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
}
.date-pill-chat span {
  background: var(--bg-3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 16px;
}
.system-pill {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
}
.system-pill span {
  background: var(--bg-3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 16px;
}

/* Action bubble (check + label) — matches msg-search-bar pattern */
.bubble-action-inline {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: var(--component-bubble-max-width);
}
.action-check-24 {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.action-check-24 img, .action-check-24 .icon { width: 12px; height: 12px; }
.action-spinner {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.action-spinner img { width: 16px; height: 16px; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
   PERMISSION PICKER
   Stacked radio card group used as an agent response.
   Outer container clips child corners with greater rounding
   than the items, creating a connected-card visual rhythm.
   ═══════════════════════════════════════════════ */
.perm-picker {
  display: flex;
  flex-direction: column;
  gap: 2px; /* structural gap — hardcoded intentionally, not a spacing token */
  border-radius: var(--radius-lg); /* 16px — clips first/last child corners */
  overflow: hidden;
  max-width: var(--component-bubble-max-width);
}
.perm-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--bubble-agent-bg);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--radius-xs);
}
.perm-option-body { flex: 1; min-width: 0; }
.perm-option-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 22px;
  letter-spacing: -0.408px;
}
.perm-option-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 20px;
  margin-top: var(--spacing-1);
}
.perm-option-radio {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
  box-sizing: border-box;
}
.perm-option--selected .perm-option-radio {
  border-color: var(--primary);
  background: var(--primary);
  position: relative;
}
.perm-option--selected .perm-option-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--bg-0);
  border-radius: 50%;
}
.perm-picker--locked { cursor: default; }
.perm-picker--locked .perm-option { cursor: default; }

/* Settings components */
.section { margin-bottom: 32px; }
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.section-title.danger { color: var(--danger); }
.rows { border-radius: 16px; overflow: hidden; }
.row {
  height: 54px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0 15px 0 17px;
  transition: filter 0.05s ease, background 0.05s ease;
  position: relative;
}
.row + .row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--bg-3);
}
.row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.9;
  line-height: 20px;
}
.row-label.danger { color: var(--danger); opacity: 1; }
.row-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5;
  flex-shrink: 0;
  padding-right: var(--spacing-1);
}
.row-icon img, .row-icon .icon { width: 8px; height: 13px; }

/* Pinned item */
.pinned-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-2);
  background: var(--bg-0);
  flex-shrink: 0;
}
.pinned-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  line-height: 17px;
  opacity: 0.9;
  padding: 4px 8px;
}
.pinned-chevron {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.pinned-chevron img, .pinned-chevron .icon { width: 6px; height: 10px; }

/* Action row in bubble */
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.action-check {
  width: 24px; height: 24px;
  border-radius: 120px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.action-check img { width: 12px; height: 12px; }
.action-label {
  flex: 1;
  font-size: var(--typography-size-body);
  font-weight: var(--typography-weight-regular);
  color: var(--text-primary);
  letter-spacing: -0.408px;
  line-height: 22px;
}
.action-arrow {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.action-arrow img, .action-arrow .icon { width: 6px; height: 10px; }

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  gap: 5px;
  padding: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-add {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.filter-add img, .filter-add .icon { width: 12px; height: 12px; }
.filter-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  background: var(--bg-2);
  color: var(--text-secondary);
  user-select: none;
  transition: filter 0.05s ease, background 0.05s ease;
}
.filter-pill.active { background: var(--primary); color: var(--text-contrast); }

/* ── Home Cards ── */
.home-cards { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 8px; }
.action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--primary-lighter);
  background-color: var(--bg-0);
  background-image: linear-gradient(164deg, rgba(90,74,255,0.1) 5%, rgba(90,74,255,0) 100%);
  cursor: pointer;
  transition: filter 0.3s ease-out, background-color 0.3s ease-out;
}
.action-card.neutral {
  border: none;
  background: var(--bg-2);
}
.card-avatar {
  width: 36px; height: 36px;
  border-radius: 96px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.408px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.action-card .card-sub-accent {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 16px;
}
.card-arrow { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-arrow img, .card-arrow .icon { width: 6px; height: 10px; }
.card-has-gap { gap: 12px; padding-bottom: 18px; }

/* ═══════════════════════════════════════════════
   APP SHELL — tab/detail navigation layout
   ═══════════════════════════════════════════════ */
.phone { position: relative; }
.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.tab-screen { display: none; flex-direction: column; height: 100%; }
.tab-screen.active { display: flex; }
.detail-screen {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  z-index: 10;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
}
.detail-screen.active { transform: translateX(0); }
.detail-screen-deep { z-index: 20; }
.bottom-chrome { flex-shrink: 0; z-index: 5; }
.bottom-chrome.hidden { display: none; }

/* ═══════════════════════════════════════════════
   HOME SCREEN
   ═══════════════════════════════════════════════ */
.home-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-0);
  flex-shrink: 0;
}
.home-header {
  padding: 49px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.greeting {
  font-family: 'Inter', sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 46px;
  letter-spacing: -2px;
}
.greeting-row { display: flex; align-items: center; gap: 8px; }
.sun-icon { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; }
.sun-icon img { width: 88px; height: 88px; display: block; object-fit: contain; }
.home-subtitle { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 22px; }
.home-subtitle b { color: var(--primary); font-weight: 500; }

/* ═══════════════════════════════════════════════
   WIDGETS
   ═══════════════════════════════════════════════ */
.widget-row { display: flex; gap: 4px; }
.widget {
  width: 177px;
  border-radius: 20px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  transition: filter 0.05s ease, background 0.05s ease;
}
.weather-widget { background: var(--widget-weather-bg); height: 148px; flex: 1 1 0; min-width: 0; width: 0; }
.flight-widget { background: var(--widget-flight-bg); height: 148px; flex: 1 1 0; min-width: 0; width: 0; }
.widget-label { display: flex; align-items: center; gap: 4px; }
.widget-label img, .widget-label .icon { width: 24px; height: 24px; }
.widget-label span { font-size: 12px; font-weight: 500; letter-spacing: -0.408px; }
.weather-label span { color: var(--text-secondary); }
.flight-label span { color: var(--widget-flight-text); }
.weather-temp { font-size: 54px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.408px; line-height: 1; }
.weather-city { display: flex; align-items: center; justify-content: space-between; }
.weather-city span { font-size: 12px; font-weight: 500; color: var(--text-secondary); letter-spacing: -0.408px; }
.weather-city img, .weather-city .icon { width: 5px; height: 8px; }
.flight-codes { display: flex; align-items: center; justify-content: space-between; position: relative; }
.flight-code { font-size: 28px; font-weight: 700; color: var(--widget-flight-text); letter-spacing: -0.18px; line-height: 1; }
.flight-sub { font-size: 10px; font-weight: 500; color: var(--widget-flight-text); opacity: 0.5; margin-top: 6px; }
.flight-sub.right { text-align: right; }
.flight-dash { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 20px; height: 1px; }
.flight-bottom { display: flex; align-items: center; justify-content: space-between; }
.flight-bottom span { font-size: 12px; font-weight: 500; color: var(--widget-flight-text); letter-spacing: -0.408px; }
.flight-bottom img, .flight-bottom .icon { width: 6px; height: 10px; }

/* New widgets */
.calendar-widget { background: var(--widget-calendar-bg); height: 148px; flex: 1 1 0; min-width: 0; width: 0; }
.calendar-label span { color: var(--widget-calendar-text); }
.calendar-label svg { stroke: var(--widget-calendar-text); }
.calendar-event-time { font-size: 28px; font-weight: 700; color: var(--widget-calendar-text); line-height: 1; }
.calendar-event-title { font-size: 13px; font-weight: 600; color: var(--widget-calendar-text); margin-top: 4px; }
.calendar-event-loc { font-size: 11px; color: var(--widget-calendar-text); opacity: 0.7; margin-top: 2px; }

.email-widget { background: var(--widget-email-bg); height: 148px; flex: 1 1 0; min-width: 0; width: 0; }
.email-label span { color: var(--widget-email-text); }
.email-label svg { stroke: var(--widget-email-text); }
.email-badge-row { margin-top: 4px; }
.email-unread-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--bg-0); color: var(--widget-email-text);
  padding: 2px 8px; border-radius: 10px;
}
.email-preview { font-size: 13px; font-weight: 600; color: var(--widget-email-text); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-preview-sub { font-size: 11px; color: var(--widget-email-text); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.news-widget { background: var(--widget-news-bg); min-height: 100px; }
.news-label span { color: var(--widget-news-text); }
.news-label svg { stroke: var(--widget-news-text); }
.news-headline { font-size: 15px; font-weight: 600; color: var(--widget-news-text); margin-top: 8px; line-height: 1.4; }
.news-source { font-size: 11px; color: var(--widget-news-text); opacity: 0.7; margin-top: 4px; }

/* ═══════════════════════════════════════════════
   CHAT DETAIL SCREENS
   ═══════════════════════════════════════════════ */
.detail-nav { flex-shrink: 0; width: 100%; box-sizing: border-box; }
.detail-nav .nav-bar-tall {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  box-sizing: border-box;
}
.detail-content { flex: 1; min-height: 0; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.detail-content::-webkit-scrollbar { display: none; }
.detail-content.chat-viewport { overflow: hidden; }
.chat-track { position: relative; will-change: transform; }
.detail-bottom {
  flex-shrink: 0;
  background: var(--bg-blur);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.chat-messages {
  display: flex;
  flex-direction: column;
  padding: 18px 0 24px;
}
.msg-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
/* Consecutive messages from the same sender collapse to 4px gap.
   Left rule excludes .bubble-person so Bob→Carol in group chats stays at standard gap. */
.msg-group:has(.msg-left):not(:has(.bubble-person)) + .msg-group:has(.msg-left):not(:has(.bubble-person)),
.msg-group:has(.msg-right) + .msg-group:has(.msg-right) {
  margin-top: calc(var(--spacing-1) - 10px);
}
.chat-waiting { cursor: pointer; }
.back-btn { cursor: pointer; }

/* ═══════════════════════════════════════════════
   BUBBLE VARIANTS
   ═══════════════════════════════════════════════ */
/* Group chat person bubble — gray bg, max-width matches bubble system */
.bubble-person {
  background: var(--bg-3);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.408px;
  color: var(--text-primary);
}
/* User bubble in group context — constrained width */
.bubble--group { max-width: var(--component-bubble-max-width); }
/* Hide consecutive avatars without removing space */
.msg-avatar--hidden { opacity: 0; }

/* ═══════════════════════════════════════════════
   AGENT AVATAR SYSTEM
   Add .agent-avatar to any avatar container to
   switch from image-fill to centered-mark mode.
   ═══════════════════════════════════════════════ */
.agent-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-lighter);
}
/* Override the cover-fill img rule from all avatar containers */
.agent-avatar img {
  width: 52%;
  height: 52%;
  object-fit: contain;
  filter: none;
}
/* Personal agent — full PNG (gradient + logo built in) */
.agent-avatar--personal { background: none; }
.agent-avatar--personal img { width: 100%; height: 100%; object-fit: cover; filter: none; }
/* Social agent — full PNG (lavender + logo built in) */
.agent-avatar--social { background: none; }
.agent-avatar--social img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════
   NAV ICON SIZING — all 24px
   ═══════════════════════════════════════════════ */
.nav-left img, .nav-left .icon   { height: 24px; width: 24px; }
.nav-right img, .nav-right .icon { width: 24px;  height: 24px; }

/* ═══════════════════════════════════════════════
   SETTINGS COMPONENTS
   ═══════════════════════════════════════════════ */
.account-block {
  height: 69px;
  margin-top: 16px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-avatar { width: 56px; height: 56px; border-radius: 90px; overflow: hidden; flex-shrink: 0; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-info { flex: 1; min-width: 0; }
.account-name { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 20px; }
.account-email { font-size: 13px; color: var(--text-primary); line-height: 18px; opacity: 0.8; }
.account-signout { font-size: 13px; font-weight: 600; color: var(--danger); flex-shrink: 0; }
.version-footer { font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-align: center; padding: 12px 0 24px; }

/* ═══════════════════════════════════════════════
   SIGN-IN SCREEN
   ═══════════════════════════════════════════════ */
.signin-screen {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--signin-bg);
  display: flex;
  flex-direction: column;
  /* No border-radius here — .phone overflow:hidden handles corner clipping.
     A second border-radius causes double-antialiasing artifacts at corners. */
}
.signin-screen.hidden { display: none; }
.signin-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in;
}
.signin-logo-img { width: 235px; height: auto; }
.signin-sheet { flex-shrink: 0; background: var(--bg-surface); border-radius: 24px 24px 0 0; transition: transform 0.4s cubic-bezier(0.4,0,1,1), opacity 0.3s ease-in; }
.signin-handle {
  width: 36px; height: 5px;
  background: var(--text-primary);
  border-radius: 100px;
  margin: 10px auto 6px;
  opacity: 0.18;
}
.signin-sheet-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
}
.signin-sheet-title { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; }
.signin-sheet-body { background: var(--bg-2); padding: 28px 48px 0; display: flex; flex-direction: column; gap: 8px; }
.signin-sheet .bottom-safe { background: var(--bg-2); }
.signin-btn {
  width: 100%;
  height: 48px;
  background: var(--bg-surface);
  border: 1px solid var(--border-avatar);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  font-family: inherit;
}
.signin-btn:active { opacity: 0.75; }
.signin-btn.guest {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  height: 44px;
  margin-top: 4px;
}
.signin-btn-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.signin-home { background: var(--bg-0); padding-bottom: 8px; }

/* ═══════════════════════════════════════════════
   LOGS SCREEN
   ═══════════════════════════════════════════════ */
.logs-screen {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
}
.logs-screen.active { visibility: visible; pointer-events: auto; }
.logs-screen a { text-decoration: none; color: inherit; }
.logs-nav { flex-shrink: 0; background: var(--bg-3); }
.logs-notice { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 20px 16px 8px; }
.logs-notice img, .logs-notice .icon { width: 16px; height: 16px; opacity: 0.7; }
.logs-notice span { font-size: 12px; color: var(--text-secondary); opacity: 0.9; line-height: 16px; }
.logs-entries { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }
.logs-entries::-webkit-scrollbar { display: none; }
.log-group { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.log-entry { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.log-entry-user { background: var(--bg-2); border: 1px dashed var(--bg-0); }
.log-entry-agent { background: var(--bg-2); }
.log-top { display: flex; align-items: center; justify-content: space-between; }
.log-sender { font-size: 13px; color: var(--primary); line-height: 18px; letter-spacing: -0.078px; opacity: 0.9; }
.log-time { font-size: 12px; color: var(--text-secondary); line-height: 16px; opacity: 0.9; }
.log-body { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 22px; letter-spacing: -0.408px; color: var(--text-primary); max-width: 288px; }
body.logs-open .status-bar { background: transparent !important; }
#group-chat.logs-open {
  transform: translateX(-100%) !important;
  transition: transform 450ms cubic-bezier(0.33, 0, 0.02, 1) !important;
}

/* ═══════════════════════════════════════════════
   DOCUMENT / ITINERARY SCREENS
   ═══════════════════════════════════════════════ */
.itin-tabs {
  display: flex;
  background: var(--bg-2);
  border-radius: 110px;
  margin: 0 16px;
  flex-shrink: 0;
}
.itin-tab {
  flex: 1;
  min-width: 100px;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  border-radius: 92px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 16px;
}
.itin-tab.active { background: var(--primary); color: var(--text-contrast); font-weight: 700; }
.itin-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg-1); }
.itin-content::-webkit-scrollbar { display: none; }
.itin-modules { display: flex; flex-direction: column; gap: 32px; padding: 32px 16px; }
.itin-module { display: flex; flex-direction: column; gap: 8px; }
.itin-category { font-size: 14px; font-weight: 600; color: var(--text-secondary); line-height: 22px; }
.itin-title { font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 24px; }
.itin-body { font-size: 17px; color: var(--text-secondary); line-height: 22px; letter-spacing: -0.408px; }
.itin-body ul { list-style: disc; padding-left: 26px; margin: 0; }
.itin-body li { margin-bottom: 0; }

/* ═══════════════════════════════════════════════
   CREATE CHAT SCREEN
   ═══════════════════════════════════════════════ */
.create-chat-form {
  padding: 25px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.create-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.create-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}
.create-input-wrap {
  width: 100%;
}
.create-name-input {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 2px solid var(--border);
  padding: 0 16px;
  font-size: 17px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-0);
  outline: none;
  box-sizing: border-box;
  letter-spacing: -0.408px;
  line-height: 22px;
}
.create-name-input::placeholder { color: var(--text-tertiary); }
.create-name-input:focus { border-color: var(--primary); }
.create-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.create-row {
  height: 54px;
  background: var(--bg-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 17px;
}
.create-row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.9;
  line-height: 20px;
}
.create-row-agent {
  background: linear-gradient(96deg, rgba(200,195,255,0.2) 2%, rgba(68,52,255,0.2) 100%), var(--bg-2);
  border: 1.5px solid rgba(90,75,255,0.3);
  padding: 0 12px;
  gap: 10px;
}
.create-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}
.create-row-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
}
.create-row-close:hover { opacity: 1; }
.create-add-btn {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid var(--bg-2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.create-add-btn:hover { border-color: var(--bg-3); background: var(--bg-1); }
.create-add-icon { width: 24px; height: 24px; opacity: 0.7; }
.create-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  background: var(--primary);
  color: var(--text-contrast);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.create-submit-btn:hover { background: var(--primary-dark); }

/* Desktop overrides for create chat */
.layout-desktop .create-chat-form { padding: 25px 24px; }
.layout-desktop .create-name-input { max-width: 100%; }

/* ═══════════════════════════════════════════════
   DESKTOP LAYOUT — .layout-desktop overrides
   Strict 800px centered column; full-bleed header
   ═══════════════════════════════════════════════ */

/* ── Desktop: Site Header ── */
.layout-desktop .site-header {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 88px;
  background: var(--bg-blur-heavy);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 9000;
  flex-shrink: 0;
}
.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}
.site-header-left {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-4) * 2);
}
.site-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}
.site-logo {
  display: inline-block;
  height: 22px;
  width: 113px;
  background-color: var(--text-primary);
  -webkit-mask: url(assets/Continua\ Mark\ and\ Logotype.svg) no-repeat center / contain;
  mask: url(assets/Continua\ Mark\ and\ Logotype.svg) no-repeat center / contain;
  flex-shrink: 0;
}
.site-nav {
  display: flex;
  gap: 8px;
}
.site-nav-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.site-nav-item:hover { background: var(--bg-2); color: var(--text-primary); }
.site-nav-item.active { color: var(--text-primary); font-weight: 600; background: var(--bg-2); }
.site-nav-icon { display: none; }
.site-header-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.site-header-bell:hover { background: var(--bg-2); color: var(--text-primary); }
.site-header-bell svg { display: block; }
.site-header-account {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border-avatar);
}
.site-header-account img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Desktop: Body & Phone Frame ── */
.layout-desktop { background: var(--bg-viewport); }

.layout-desktop #phone-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  overflow: visible;
}

.layout-desktop .phone {
  width: 100%;
  max-width: 800px;
  height: auto;
  min-height: 0;
  flex: 1;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding-bottom: 48px;
}

/* ── Desktop: Hidden Mobile Chrome ── */
.layout-desktop .status-bar { display: none !important; }
.layout-desktop .bottom-chrome { display: none !important; }
.layout-desktop .bottom-safe { display: none !important; }
.layout-desktop .home-bar { display: none !important; }
.layout-desktop #signin-screen .status-bar { display: none !important; }

/* ── Desktop: App Body ── */
.layout-desktop .app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: calc(100vh - 56px);
}

/* ── Desktop: Content & Spacing ── */
.layout-desktop .tab-screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.layout-desktop .content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Desktop: Detail Screens ── */
.layout-desktop .detail-screen {
  position: fixed;
  top: 88px;
  left: 0; right: 0;
  width: 100%;
  max-width: 800px;
  height: calc(100vh - 88px);
  margin: 0 auto;
  transform: translateX(100vw);
  z-index: 9001;
  border-radius: 0;
  transition: none !important;
}
.layout-desktop .detail-screen.active {
  transform: translateX(0);
}
.layout-desktop .detail-screen-deep { z-index: 9002; }

/* ── Logs screen in desktop ────────────────────── */
.layout-desktop .logs-screen {
  position: fixed;
  top: 88px;
  left: 0; right: 0;
  width: 100%;
  max-width: 800px;
  height: calc(100vh - 88px);
  margin: 0 auto;
}

/* ── Desktop: Chat Bubbles ── */
.layout-desktop .bubble { max-width: var(--component-bubble-max-width-desktop); }
.layout-desktop .bubble-agent { max-width: var(--component-bubble-agent-max-width-desktop); }
.layout-desktop .bubble-social-agent { max-width: var(--component-bubble-max-width-desktop); }
.layout-desktop .bubble-person { max-width: var(--component-bubble-max-width-desktop); }
.layout-desktop .bubble--group { max-width: var(--component-bubble-max-width-desktop); }
.layout-desktop .bubble-action-inline { max-width: var(--component-bubble-agent-max-width-desktop); }
.layout-desktop .perm-picker { max-width: var(--component-bubble-agent-max-width-desktop); }

/* ── Desktop: Widgets ── */
.layout-desktop .widget-row { display: flex; gap: 8px; width: 100%; }
.layout-desktop .widget-row > .widget { flex: 1 1 0; min-width: 0; width: 0; }

/* ── Desktop: Home Cards ── */
.layout-desktop .home-cards { max-width: 100%; gap: 8px; }
.layout-desktop .action-card { max-width: 100%; padding-top: 16px; padding-bottom: 16px; }

/* ── Hover interactions (desktop prototype only) ── */
@media (hover: hover) {
  /* Shared transition — 0.3s filter for all hoverable items */
  .layout-desktop .msg-list-item:hover,
  .layout-desktop .widget:hover,
  .layout-desktop .filter-pill:hover,
  .layout-desktop .row:hover { transition: filter 0.3s ease-out; }
  /* Action card also transitions background-color */
  .layout-desktop .action-card:hover { transition: filter 0.3s ease-out, background-color 0.3s ease-out; }

  /* Light mode — active card: purple tint + darken */
  .layout-desktop .action-card:not(.neutral):hover { filter: brightness(0.88); background-color: var(--action-card-hover-bg); }
  /* Light mode — neutral card: half darkening, no purple tint */
  .layout-desktop .action-card.neutral:hover { filter: brightness(0.94); }
  /* Light mode — other elements */
  .layout-desktop .msg-list-item.agent-row:hover { filter: brightness(0.90); }
  .layout-desktop .widget:hover,
  .layout-desktop .filter-pill:hover,
  .layout-desktop .row:hover,
  .layout-desktop .msg-list-item:not(.agent-row):hover { filter: brightness(0.92); }

  /* Dark mode — brighten instead (chained selectors: both classes on body) */
  body.dark-mode.layout-desktop .action-card:not(.neutral):hover { filter: brightness(1.28); }
  body.dark-mode.layout-desktop .action-card.neutral:hover { filter: brightness(1.18); }
  body.dark-mode.layout-desktop .msg-list-item.agent-row:hover { filter: brightness(1.22); }
  body.dark-mode.layout-desktop .widget:hover,
  body.dark-mode.layout-desktop .filter-pill:hover,
  body.dark-mode.layout-desktop .row:hover,
  body.dark-mode.layout-desktop .msg-list-item:not(.agent-row):hover { filter: brightness(1.22); }
}

.layout-desktop .home-header { padding: 48px 24px 0; }
.layout-desktop .filter-bar { padding: 16px 24px; }
.layout-desktop .home-cards { padding: 0 24px 25px; }

/* ── Desktop: Message List ── */
.layout-desktop .msg-left { padding: 0 48px 0 24px; }
.layout-desktop .msg-right { padding: 0 24px 0 64px; }

/* ── Desktop: Input Bar ── */
.layout-desktop .input-bar { padding: 12px 24px; }

.layout-desktop .msg-list-item { padding: 18px 24px; }

.layout-desktop .detail-content { flex: 1; min-height: 0; }

/* ── Desktop: Itinerary ── */
.layout-desktop .itin-content { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Desktop: Sign-in Modal ── */
.layout-desktop #signin-screen {
  position: fixed;
  inset: 0;
  z-index: 9010;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.layout-desktop #signin-screen.hidden { display: none; }
.layout-desktop .signin-hero {
  flex: none;
  width: 100%;
  max-width: 400px;
  margin: 0 24px;
  padding: 48px 0 36px;
  background: var(--primary);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-modal);
}
.layout-desktop .signin-logo-img { width: 180px; }
.layout-desktop .signin-handle { display: none; }
.layout-desktop .signin-sheet {
  border-radius: 0 0 20px 20px;
  max-width: 400px;
  width: 100%;
  margin: 0 24px;
  box-shadow: var(--shadow-modal);
  transform: none !important;
}
.layout-desktop .signin-sheet-body { padding: 28px 32px 24px; border-radius: 0 0 20px 20px; }
.layout-desktop .signin-sheet .bottom-safe { display: none; }
.layout-desktop .signin-btn.guest { margin-bottom: 0; }

/* ── Desktop greeting ── */
.layout-desktop .greeting { font-size: 54px; line-height: 56px; }
.layout-desktop .home-subtitle { margin-bottom: 12px; }

/* ── Log body width override ───────────────────── */
.layout-desktop .log-body { max-width: 100%; }

/* ── Desktop: Settings ── */
.layout-desktop #settings-tab .content { padding: 0 24px; }
.layout-desktop .settings-nav { padding-top: 24px; }
.layout-desktop .settings-nav .nav-bar { justify-content: flex-start; padding: 0 24px; }
.layout-desktop .settings-nav .nav-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.layout-desktop .settings-nav .nav-right { position: static; transform: none; margin-left: auto; }

/* ── Desktop: Memory screen nav ── */
.layout-desktop #memory-screen .detail-nav { padding-top: 24px; }
.layout-desktop #memory-screen .detail-nav .nav-bar { justify-content: flex-start; padding: 0 24px; }
.layout-desktop #memory-screen .detail-nav .nav-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.layout-desktop #memory-screen .detail-nav .nav-left { display: none; }

/* ── Desktop: Messages tab header ── */
.layout-desktop .messages-nav { padding-top: 24px; }
.layout-desktop .top-bar,
.layout-desktop .detail-nav { border-bottom: none !important; }
.layout-desktop .messages-nav .nav-left { display: none; }
.layout-desktop .messages-nav .nav-right { position: static; transform: none; margin-left: auto; }
.layout-desktop .messages-nav .nav-bar { justify-content: flex-start; padding: 0 24px; }
.layout-desktop .messages-nav .nav-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }

/* ── Desktop: Chat header (nav-bar-tall) ── */
/* Mobile default — hide the desktop identity block */
.nav-identity { display: none; }

.layout-desktop .detail-nav { width: 100%; box-sizing: border-box; }
.layout-desktop .detail-nav .nav-bar-tall {
  height: 72px;
  padding: 0 24px;
  justify-content: flex-start;
  gap: 12px;
}
/* Reset absolute positioning from mobile layout */
.layout-desktop .detail-nav .nav-bar-tall .nav-left,
.layout-desktop .detail-nav .nav-bar-tall .nav-right {
  position: static;
  transform: none;
  flex-shrink: 0;
}
.layout-desktop .detail-nav .nav-bar-tall .nav-right { margin-left: auto; }
.layout-desktop .detail-nav .nav-bar-tall .nav-avatar {
  position: static;
  transform: none;
  top: auto;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
/* Original name used on mobile — hidden on desktop */
.layout-desktop .detail-nav .nav-bar-tall .nav-name { display: none; }
/* Desktop identity block: name + activity stacked */
.layout-desktop .detail-nav .nav-bar-tall .nav-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.layout-desktop .detail-nav .nav-name-d {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-desktop .detail-nav .nav-activity {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ── Proto bar hidden in desktop for clean look ── */
/* Keep proto-bar visible — it's the dev control bar */

/* ── Responsive within 800px ───────────────────── */
@media (max-width: 800px) {
  .layout-desktop .phone { max-width: 100%; }
  .site-header-inner { padding: 0 16px; }
  .layout-desktop .home-header { padding: 49px 16px 0; }
  .layout-desktop .filter-bar { padding: 16px; }
  .layout-desktop .home-cards { padding: 0 16px 24px; }
  .layout-desktop .msg-left { padding: 0 42px 0 16px; }
  .layout-desktop .msg-right { padding: 0 16px 0 54px; }
  .layout-desktop .input-bar { padding: 12px 16px; }
}

/* ── Desktop: Create Chat — modal overlay ── */
.layout-desktop #create-chat {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  z-index: 9100;
  /* Override position/size from .layout-desktop .detail-screen */
  top: 0 !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  /* Override the slide-in transform */
  transform: none !important;
  /* Hidden until .active */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  border-radius: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.layout-desktop #create-chat.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
/* Modal card: nav header + content scroll area together */
.layout-desktop #create-chat > * {
  /* Prevent children from stretching full width */
  flex-shrink: 0;
}
.layout-desktop #create-chat .detail-nav,
.layout-desktop #create-chat .detail-content {
  max-width: 480px;
  width: calc(100% - var(--spacing-6) * 2);
}
/* Nav bar + content together form the modal card.
   Shadow is applied to the content block which visually anchors both. */
.layout-desktop #create-chat .detail-nav {
  background: var(--bg-0);
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid var(--border);
  position: static;
  /* Clip overflow so border-radius shows cleanly */
  overflow: hidden;
}
/* Content area = lower half of the card */
.layout-desktop #create-chat .detail-content {
  background: var(--bg-0);
  border-radius: 0 0 20px 20px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  flex: none;
  min-height: auto;
}
.layout-desktop #create-chat .detail-bottom {
  display: none;
}
.layout-desktop #create-chat .create-chat-form {
  padding: var(--spacing-6);
}
/* People-picker overlay inside modal stays above the card */
.layout-desktop #create-chat .people-picker-overlay {
  position: fixed;
  z-index: 9200;
}

/* ── Desktop: Create Chat ── */
.create-people-picker { display: flex; flex-direction: column; gap: 4px; }
.create-people-picker.hidden { display: none; }
.create-person-toggle {
  height: 48px; border-radius: 12px; background: var(--bg-1);
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
  cursor: pointer; border: 1.5px solid transparent; transition: border-color 0.15s, background 0.15s;
}
.create-person-toggle.selected { border-color: var(--primary); background: rgba(90,74,255,0.05); }
.create-person-toggle img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.create-person-name { font-size: 14px; font-weight: 500; color: var(--text-primary); flex: 1; }
.create-person-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg-3); display: flex; align-items: center; justify-content: center; }
.create-person-toggle.selected .create-person-check { background: var(--primary); border-color: var(--primary); }
.create-person-check::after { content: ''; display: none; }
.create-person-toggle.selected .create-person-check::after { display: block; width: 6px; height: 6px; background: var(--text-contrast); border-radius: 50%; }

/* ── Design System Violation Flagging ──────────── */
.ds-violation { /* no-op by default */ }
body.show-violations .ds-violation {
  outline: 2px dashed var(--danger) !important;
  outline-offset: 2px;
  position: relative;
}
body.show-violations .ds-violation::after {
  content: attr(data-ds-issue);
  position: absolute;
  top: -8px;
  left: 4px;
  background: var(--danger);
  color: var(--text-contrast);
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  line-height: 1.4;
}

/* Message reveal animation */
/* msg-revealing kept for backward compat but spring handles motion now */
.msg-group.msg-revealing { animation: none; }