/* ══════════════════════════════════════════════
   Pevra — Signal Design System
══════════════════════════════════════════════ */
/* Generic utility — must come first so compound selectors can refine it */
.hidden { display: none !important; }
:root {
  /* ── Ink scale — warm espresso dark (Studio) ── */
  --ink-0: #0d0b08;
  --ink-1: #181410;
  --ink-2: #211c17;
  --ink-3: #2a241e;
  --ink-4: #332c24;
  --ink-5: #3d352b;

  /* ── Borders (warm hairlines on the ink channel) ── */
  --line:   rgba(255,248,238,.07);
  --line-2: rgba(255,248,238,.13);
  --line-3: rgba(255,248,238,.22);
  --line-4: rgba(255,248,238,.32);

  /* ── Text — warm cream ramp ── */
  --fg:   #f4eee4;
  --fg-2: #c2b8ab;
  --fg-3: #8f857a;
  --fg-4: #635b51;

  /* ── Accent (ember) ── */
  --accent:      #F2693E;
  --accent-d:    #E5552F;
  --accent-l:    #FF8A63;
  --accent-wash: rgba(242,105,62,.12);
  --accent-tint: rgba(242,105,62,.20);
  --accent-glow: rgba(242,105,62,.30);
  --accent-ink:  #1A1410;

  /* Ambient warm wash behind the canvas — the Studio system's signature depth.
     Kept as a background-image so any element setting `background-color`
     (Markets pins its own) still paints over it cleanly. */
  --aura: radial-gradient(1100px 700px at 88% -10%, rgba(242,105,62,.07), transparent 60%),
          radial-gradient(900px 800px at -8% 110%, rgba(232,166,72,.05), transparent 55%);

  /* ── Mode colours (warm-retuned) ── */
  --c-chat:  #E5552F;
  --c-trade: #43C088;
  --c-web:   #4FB3D4;
  --c-logs:  #9A8CE0;
  --c-conn:  #E8A648;

  /* ── Status ── */
  --pos:      #43C088;
  --pos-wash: rgba(67,192,136,.14);
  --neg:      #E86A6A;
  --neg-wash: rgba(232,106,106,.14);
  --warn:     #E8A648;

  /* ── Shape (softened for a friendlier feel) ── */
  --r:  6px;
  --r2: 8px;
  --r3: 12px;

  /* ── Typography ── */
  --sans: "Instrument Sans","Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display: "Bricolage Grotesque","Geist",Georgia,serif;
  --code: "Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  /* --mono now resolves to the warm sans, so the hundreds of UI labels,
     timestamps and figures that reference it stop reading like a code editor.
     Genuine code uses --code. Small caps/label rhythm is kept via the
     letter-spacing + uppercase already on those rules. */
  --mono: var(--sans);

  /* Pevra eclipse mark as a mask (tint via background-color, adapts to accent) */
  --pevra-mark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%2096'%3E%3Ccircle%20cx='48'%20cy='48'%20r='28'%20fill='none'%20stroke='%23000'%20stroke-width='9'/%3E%3Ccircle%20cx='59'%20cy='39'%20r='15'%20fill='none'%20stroke='%23000'%20stroke-width='9'/%3E%3Ccircle%20cx='59'%20cy='39'%20r='6'%20fill='%23000'/%3E%3C/svg%3E");

  /* ── Layout ── */
  --rail-w:   68px;
  --sidebar-w:256px;

  /* ── Legacy aliases (keep JS working) ── */
  --bg:         var(--ink-1);
  --bg-2:       var(--ink-2);
  --bg-3:       var(--ink-3);
  --bg-4:       var(--ink-4);
  --bg-hover:   var(--ink-4);
  --border:     var(--line-2);
  --text:       var(--fg);
  --text-dim:   var(--fg-2);
  --text-faint: var(--fg-3);
  --accent-2:   var(--accent-d);
  --green:      var(--pos);
  --red:        var(--neg);
  --yellow:     var(--warn);
  --blue:       var(--c-web);
  --radius:     var(--r2);
  --shadow:     0 4px 32px rgba(0,0,0,.6);
}

/* ── Light mode — warm bone paper (Studio) ── */
html[data-theme="light"] {
  --ink-0: #FFFFFF; --ink-1: #F6F1E9; --ink-2: #FCFAF6;
  --ink-3: #EDE7DC; --ink-4: #E2DACB; --ink-5: #D6CBB6;
  --line:   rgba(33,28,23,.07);
  --line-2: rgba(33,28,23,.12);
  --line-3: rgba(33,28,23,.20);
  --line-4: rgba(33,28,23,.32);
  --fg:   #211C17; --fg-2: #5A5149; --fg-3: #8A8076; --fg-4: #B4A99C;
  --bg: #F6F1E9; --bg-2: #FCFAF6; --bg-3: #EDE7DC; --bg-4: #E2DACB;
  --shadow: 0 4px 24px rgba(33,28,23,.10);
  /* Light keeps the deeper ember (it sits on paper, not on ink) and puts white
     on top of it — near-black text on a mid-ember fill never cleared AA. */
  --accent: #E5552F; --accent-d: #C8431F; --accent-l: #F2693E;
  --accent-wash: rgba(229,85,47,.10);
  --accent-tint: rgba(229,85,47,.16);
  --accent-glow: rgba(229,85,47,.24);
  --accent-ink: #FFFFFF;
  --aura: radial-gradient(1100px 700px at 88% -10%, rgba(229,85,47,.05), transparent 60%),
          radial-gradient(900px 800px at -8% 110%, rgba(217,138,43,.04), transparent 55%);
  --c-chat: #E5552F; --c-trade: #2F9E6B; --c-web: #2D8FB0; --c-logs: #7A6CC4; --c-conn: #D98A2B;
  --pos: #2F9E6B; --pos-wash: rgba(47,158,107,.12);
  --neg: #D14545; --neg-wash: rgba(209,69,69,.12);
  --warn: #D98A2B;
  color-scheme: light;
}
/* Explicit overrides so nothing is missed */
/* background-COLOR, not the shorthand: the shorthand resets background-image
   and would wipe the aura off the canvas. */
html[data-theme="light"],
html[data-theme="light"] body { background-color: #F6F1E9 !important; color: #211C17; }
/* The shell panels stay transparent so the body's aura reads through the whole
   canvas instead of being covered by an opaque sheet of paper. */
html[data-theme="light"] .rail,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .main,
html[data-theme="light"] .view,
html[data-theme="light"] .app-topbar { background-color: transparent !important; }
html[data-theme="light"] .conv-item:hover,
html[data-theme="light"] .rail-btn:hover { background: #EDE7DC; }
html[data-theme="light"] .rail-btn.active,
html[data-theme="light"] .conv-item.active { background: #EDE7DC; }
html[data-theme="light"] .msg.assistant { background: rgba(229,85,47,.07) !important; }
html[data-theme="light"] .composer-inner { background: #FCFAF6; box-shadow: 0 2px 14px rgba(33,28,23,.08); }
html[data-theme="light"] .settings-card,
html[data-theme="light"] .modal { background: #FCFAF6; }

/* ── Markets is pinned to its pre-redesign look on purpose (out of scope for
   the visual redesign) — re-declare the tokens it resolves against, in both
   themes, so it renders identically no matter what the rest of the app's
   palette becomes. ── */
#view-markets {
  --ink-0: #06070a; --ink-1: #0b0d11; --ink-2: #11141a;
  --ink-3: #171b22; --ink-4: #1f242c; --ink-5: #272d36;
  --line:   rgba(231,238,250,.06);
  --line-2: rgba(231,238,250,.10);
  --line-3: rgba(231,238,250,.18);
  --line-4: rgba(231,238,250,.28);
  --fg:   #f0f4f8; --fg-2: #b8c0cc; --fg-3: #8e97a6; --fg-4: #5a6170;
  --bg: #0b0d11; --bg-2: #11141a; --bg-3: #171b22; --bg-4: #1f242c;
  --pos: #5cdb95; --pos-wash: rgba(92,219,149,.12);
  --neg: #ff6b6b; --neg-wash: rgba(255,107,107,.12);
  --warn: #f7c948;
  --c-trade: #5cdb95; --c-web: #5dd9f0; --c-logs: #a78bfa; --c-conn: #ff8a5b;
  --shadow: 0 4px 32px rgba(0,0,0,.6);
  color-scheme: dark;
  /* Painted, not just tokenised: the canvas behind it is warm now, and Markets
     is meant to look exactly as it did before the redesign in BOTH themes. */
  background-color: #0b0d11;
  background-image: none;
}
html[data-theme="light"] #view-markets {
  color-scheme: dark;
  background: #0b0d11 !important;
  color: #f0f4f8;
}

/* ── Personality accent colour overrides ── */
[data-personality="unhinged"] {
  --accent: #E5291F; --accent-d: #C71E15; --accent-l: #F04A41;
  --accent-wash: rgba(229,41,31,.10); --accent-glow: rgba(229,41,31,.25);
  --c-chat: #E5291F;
}
[data-personality="calm"] {
  --accent: #5B8DEF; --accent-d: #3B6FD8; --accent-l: #7AAAF5;
  --accent-wash: rgba(91,141,239,.10); --accent-glow: rgba(91,141,239,.25);
  --c-chat: #5B8DEF;
}
[data-personality="kind"] {
  --accent: #F59E0B; --accent-d: #D97706; --accent-l: #FBBF24;
  --accent-wash: rgba(245,158,11,.10); --accent-glow: rgba(245,158,11,.25);
  --c-chat: #F59E0B;
}
/* "general" stays with the default #E5552F */

/* ── App-native feel ── */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], .rail-btn, .mode-card, .conv-item, .pers-opt, .topbar-pill, .pf-btn, .dash-action-btn {
  touch-action: manipulation;
}

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

html, body {
  height: 100%;
  background-color: var(--ink-1);
  background-image: var(--aura);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.005em;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Accessibility: Bold text — heavier weight for low-vision readability.
   Geist is a variable font (300–700 loaded), so intermediate weights render
   crisply. Bumps body-inherited text and the key reading surfaces. ── */
html[data-bold="1"] body { font-weight: 560; }
html[data-bold="1"] .msg-content,
html[data-bold="1"] .msg-content p,
html[data-bold="1"] .msg-content li,
html[data-bold="1"] .msg-content span:not(.stream-caret),
html[data-bold="1"] .msg .nb,
html[data-bold="1"] .empty-greeting,
html[data-bold="1"] .empty-when,
html[data-bold="1"] .prompt-chip,
html[data-bold="1"] .conv-item-title,
html[data-bold="1"] .settings-label,
html[data-bold="1"] .settings-value-sm,
html[data-bold="1"] .composer textarea,
html[data-bold="1"] .composer textarea::placeholder,
html[data-bold="1"] .form-input,
html[data-bold="1"] .disclaimer { font-weight: 620 !important; }

/* ── scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 3px; }

/* ══════════════════════════
   APP SHELL
══════════════════════════ */
.app {
  display: grid;
  /* minmax(0,1fr) lets the main column shrink to the viewport instead of
     being forced wider by its content (prevents off-screen clipping). */
  grid-template-columns: var(--rail-w) var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  max-width: 100%;
}

/* ══════════════════════════
   RAIL
══════════════════════════ */
.rail {
  width: var(--rail-w);
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  padding: 10px 0;
  gap: 2px;
  z-index: 20;
}

.rail-logo {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(229,85,47,.35));
  animation: railLogoGlow 5s var(--ease-in-out, cubic-bezier(.65,0,.35,1)) infinite;
}
@keyframes railLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 11px rgba(229,85,47,.32)); }
  50%      { filter: drop-shadow(0 0 21px rgba(229,85,47,.62)); }
}

.rail-modes { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; padding: 0 7px; }
.rail-bottom { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 7px 4px; }

.rail-btn {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--fg-3);
  cursor: pointer;
  padding: 7px 2px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: background 120ms, color 120ms, transform 140ms cubic-bezier(.22,1,.36,1);
  position: relative;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0;
}
.rail-btn svg { width: 20px; height: 20px; display: block; flex-shrink: 0;
  transition: transform .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.rail-btn span { line-height: 1; }
.rail-btn:hover { background: var(--ink-3); color: var(--fg); }
.rail-btn:hover svg { transform: translateY(-2px) scale(1.14); }
.rail-btn.active { background: var(--ink-3); color: var(--accent); }
.rail-btn.active svg { transform: scale(1.08); }

/* Gliding active indicator — slides between modes (the "magic line") */
.rail-indicator {
  position: absolute; left: 0; width: 3px; height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  opacity: 0; z-index: 2; pointer-events: none;
  transition: top .45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              background .35s ease, opacity .3s ease, box-shadow .35s ease;
}

/* Static per-button indicator removed in favour of the gliding one */
.rail-btn.active::before { display: none; }

/* Staggered entrance for the rail buttons on load */
.rail-modes .rail-btn { animation: railIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
.rail-modes .rail-btn:nth-child(1) { animation-delay: .03s; }
.rail-modes .rail-btn:nth-child(2) { animation-delay: .07s; }
.rail-modes .rail-btn:nth-child(3) { animation-delay: .11s; }
.rail-modes .rail-btn:nth-child(4) { animation-delay: .15s; }
.rail-modes .rail-btn:nth-child(5) { animation-delay: .19s; }
.rail-modes .rail-btn:nth-child(6) { animation-delay: .23s; }
.rail-modes .rail-btn:nth-child(7) { animation-delay: .27s; }
.rail-modes .rail-btn:nth-child(8) { animation-delay: .31s; }
.rail-modes .rail-btn:nth-child(9) { animation-delay: .35s; }
@keyframes railIn {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Notification bell badge on the rail */
.rail-btn .notif-badge {
  position: absolute;
  top: 4px; right: 12px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  display: none; align-items: center; justify-content: center;
  line-height: 1;
}
.rail-btn .notif-badge.show { display: flex; }

/* mode-specific active colours */
.rail-btn[data-mode="trading"].active   { color: var(--c-trade); }
.rail-btn[data-mode="trading"].active::before { background: var(--c-trade); }
.rail-btn[data-mode="website"].active   { color: var(--c-web); }
.rail-btn[data-mode="website"].active::before { background: var(--c-web); }
.rail-btn[data-mode="integrations"].active { color: var(--c-conn); }
.rail-btn[data-mode="integrations"].active::before { background: var(--c-conn); }
.rail-btn[data-mode="search"].active { color: var(--c-web); }
.rail-btn[data-mode="search"].active::before { background: var(--c-web); }

/* ══════════════════════════
   SIDEBAR
══════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.sidebar-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sidebar-panel.hidden { display: none; }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sidebar-title {
  font-size: 13px; font-weight: 600;
  color: var(--fg);
  letter-spacing: -.005em;
  display: inline-flex; align-items: center; gap: 7px;
}
/* Pevra mark before every sidebar title (accent-coloured via mask, adapts to Custom Pevra) */
.sidebar-title::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px;
  background: var(--accent);
  -webkit-mask: var(--pevra-mark) center / contain no-repeat;
  mask: var(--pevra-mark) center / contain no-repeat;
}

.sidebar-stats {
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--fg-3);
  flex-shrink: 0;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  display: flex; flex-direction: column;
}

.conv-item {
  display: flex; align-items: center;
  padding: 9px 16px;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: var(--fg-3);
  font-size: 13px;
  transition: background 100ms, color 100ms;
  gap: 8px;
  user-select: none;
}
.conv-item:hover { background: var(--ink-2); color: var(--fg-2); }
.conv-item.active {
  background: var(--ink-3);
  color: var(--fg);
  border-left-color: var(--accent);
}
.conv-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-del {
  opacity: 0; background: none; border: none; color: var(--fg-4);
  cursor: pointer; padding: 2px 4px; border-radius: var(--r); font-size: 14px;
  transition: opacity .12s, color .12s; line-height: 1;
}
.conv-item:hover .conv-del { opacity: 1; }
.conv-del:hover { color: var(--neg); }

/* sidebar footer */
.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
}
.usage-bar-wrap {}
.usage-row-top { display: flex; justify-content: space-between; margin-bottom: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.usage-count-text { color: var(--fg-2); }
.usage-track { height: 3px; background: var(--ink-3); border-radius: 2px; overflow: hidden; }
.usage-fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-d) 100%); border-radius: 2px; transition: width .4s; }
.usage-fill.warn { background: var(--warn); }
.usage-fill.danger { background: var(--neg); }

.role-preview {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 10px;
  border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line-2);
}
.role-preview[hidden] { display: none; }
.role-preview-pill {
  padding: 4px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--fg-3);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.role-preview-pill.active { background: var(--accent); color: var(--accent-ink); }
.role-preview-pill:active { transform: scale(.94); }

.user-chip { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 26px; height: 26px; border-radius: var(--r);
  background: var(--ink-3); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  color: var(--accent); flex-shrink: 0;
}
.user-meta-small { overflow: hidden; flex: 1; min-width: 0; }
.user-email-sm { font-size: 11.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.admin-link { font-family: var(--mono); font-size: 10px; color: var(--fg-3); text-decoration: none; letter-spacing: .02em; }
.admin-link:hover { color: var(--accent); }

/* ══════════════════════════
   MAIN CONTENT
══════════════════════════ */
.main {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--ink-1);
  min-width: 0; /* allow shrink below content width on narrow screens */
}

.view { display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; }
.view.hidden { display: none; }
.view.active { display: flex; }

/* ── view header ── */
.view-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px;
  height: 44px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
  flex-shrink: 0;
}
.view-brand {
  display: inline-flex; align-items: center; flex-shrink: 0; margin-right: -4px;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.view-brand svg { width: 22px; height: 22px; display: block; }

/* Subtle Pevra watermark behind the chat */
#view-general { position: relative; }
.chat-watermark {
  position: absolute; inset: 44px 0 0 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: .05;
}
.chat-watermark svg { width: min(155%, 1000px); height: auto; max-height: 130%; color: var(--accent); }
#view-general .messages, #view-general .composer, #view-general .disclaimer { position: relative; z-index: 1; }
.view-title { font-size: 15px; font-weight: 600; flex: 1; letter-spacing: -.005em; color: var(--fg); }

.mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .10em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--accent); background: var(--accent-wash);
}
.mode-pill::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.pill-general      { color: var(--c-chat); background: rgba(229,85,47,.08); }
.pill-general::before { background: var(--c-chat); }
.pill-trading      { color: var(--c-trade); background: rgba(92,219,149,.08); }
.pill-trading::before { background: var(--c-trade); }
.pill-website      { color: var(--c-web); background: rgba(45,143,176,.08); }
.pill-website::before { background: var(--c-web); }
.pill-integrations { color: var(--c-conn); background: rgba(255,138,91,.08); }
.pill-integrations::before { background: var(--c-conn); }

/* ── buttons ── */
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border: none;
  padding: 8px 14px; border-radius: var(--r); cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  transition: filter 120ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border: none; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: filter .15s; }
.btn-accent:hover { filter: brightness(1.1); }

.btn-action {
  background: transparent; color: var(--fg-2); border: 1px solid var(--line-2);
  padding: 5px 11px; border-radius: var(--r); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  text-decoration: none;
  transition: border-color 120ms, color 120ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-action:hover { border-color: var(--line-3); color: var(--fg); }

.btn-sm {
  background: transparent; color: var(--fg-2); border: 1px solid var(--line-2);
  padding: 4px 9px; border-radius: var(--r); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  transition: border-color 120ms, color 120ms;
}
.btn-sm:hover { border-color: var(--line-3); color: var(--fg); }

.btn-ghost {
  background: transparent; color: var(--fg-3); border: 1px solid transparent;
  padding: 5px 10px; border-radius: var(--r); cursor: pointer;
  font-size: 13px;
  transition: background 120ms, color 120ms;
}
.btn-ghost:hover { background: var(--ink-3); color: var(--fg); }

.icon-btn {
  background: none; border: none; color: var(--fg-3); cursor: pointer;
  padding: 6px; border-radius: var(--r); font-size: 16px;
  transition: background 120ms, color 120ms; line-height: 1;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--ink-3); color: var(--fg); }

.full-width { width: 100%; }

/* ══════════════════════════
   GENERAL CHAT VIEW
══════════════════════════ */
.messages {
  flex: 1; overflow-y: auto;
  padding: 28px 0 14px;
  display: flex; flex-direction: column; gap: 28px;
}

/* inner thread container */
.messages > * { max-width: 860px; margin: 0 auto; width: 100%; padding: 0 32px; }

.empty-state {
  margin: auto;
  text-align: center;
  max-width: 560px;
  padding: 40px 20px 30px;
}
.empty-logo {
  width: 72px; height: 72px;
  display: block;
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 24px rgba(229,85,47,.45));
}
.empty-state h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; letter-spacing: -.02em; }
.empty-state p { color: var(--fg-2); margin-bottom: 28px; font-size: 14px; }

.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; margin-bottom: 8px; }
.mode-card {
  background: var(--ink-1); border-right: 1px solid var(--line);
  padding: 16px 14px; cursor: pointer; text-align: left;
  transition: background 150ms;
}
.mode-card:last-child { border-right: none; }
.mode-card { transition: background .15s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.mode-card:hover { background: var(--ink-2); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.mode-card:active { transform: translateY(0) scale(.97); box-shadow: none; }
.mc-icon { font-size: 18px; margin-bottom: 8px; }
.mc-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
.mc-desc { font-size: 11px; color: var(--fg-3); line-height: 1.5; }

/* messages */
@keyframes msgReveal {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.msg {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  animation: msgReveal .38s cubic-bezier(.16,1,.3,1) both;
}
.msg-avatar {
  width: 26px; height: 26px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
/* Pevra message — subtle warm background wash */
.msg.assistant {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  background: rgba(229,85,47,.042); /* fallback */
  border-radius: var(--r2);
  padding: 14px 16px;
  /* Was margin: 0 -16px (a "bleed to the container edge" trick) — but
     .messages/.main have ZERO horizontal padding to bleed into, so this
     pushed every assistant row 16px past the viewport on each side, and
     .main's overflow:hidden hard-clipped it (avatar/message visibly cut
     off at the screen edge). No matching inset exists, so don't bleed. */
  margin: 0;
}
.msg.user .msg-avatar { background: var(--ink-3); border: 1px solid var(--line-2); color: var(--fg); }
.msg.assistant .msg-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  color: #fff;
  /* SVG mark inherits currentColor */
}
/* Pevra Plus — glowing avatar */
body.is-plus .msg.assistant .msg-avatar {
  box-shadow: 0 0 0 2px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.msg-body { flex: 1; min-width: 0; }
.msg-role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--fg-3);
}
.msg.assistant .msg-role { color: var(--accent); }
.model-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; padding: 3px 9px;
  border-radius: 6px; font-size: 10px; font-family: var(--mono);
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
  font-weight: 700; opacity: 1;
}
.badge-claude {
  background: rgba(229,85,47,.18);
  color: var(--accent); border: 1px solid rgba(229,85,47,.4);
}
.badge-gemini {
  background: rgba(124,58,237,.18);
  color: #b57bff; border: 1px solid rgba(124,58,237,.4);
  animation: badgeGlow 2.5s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 10px rgba(124,58,237,.4); }
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 10px rgba(124,58,237,.35); }
}
.badge-chatgpt { background: rgba(16,163,127,.15); color: #10A37F; border: 1px solid rgba(16,163,127,.25); }
.badge-deep {
  background: linear-gradient(135deg, rgba(229,85,47,.18), rgba(124,58,237,.16));
  color: var(--accent); border: 1px solid rgba(229,85,47,.45);
  animation: badgeGlow 2.5s ease-in-out infinite;
}
.badge-other   { background: var(--ink-3); color: var(--fg-3); border: 1px solid var(--line-2); }

/* Pevra Plus — plan badges + upgrade card */
.plan-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.plan-plus { background: linear-gradient(135deg, rgba(229,85,47,.16), rgba(217,138,43,.16)); color: var(--accent); border: 1px solid rgba(229,85,47,.3); }
.plan-free { background: var(--ink-3); color: var(--fg-3); border: 1px solid var(--line-2); }
.plus-card { border: 1px solid rgba(229,85,47,.28); background: linear-gradient(160deg, rgba(229,85,47,.06), transparent 70%); }
.plus-blurb { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 12px; }
.plus-features { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plus-features li { font-size: 14px; color: var(--fg-2); line-height: 1.4; }
.plus-cta { font-size: 13px; color: var(--accent); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--line-2); }

.msg-content { color: var(--fg); line-height: 1.65; font-size: 15px; }
.msg.user .msg-content { color: var(--fg-2); }

/* markdown */
.msg-content p { margin-bottom: 10px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content h1,.msg-content h2,.msg-content h3 { font-weight: 600; margin: 14px 0 6px; letter-spacing: -.01em; }
.msg-content h1 { font-size: 18px; } .msg-content h2 { font-size: 16px; } .msg-content h3 { font-size: 14px; }
.msg-content ul,.msg-content ol { padding-left: 18px; margin-bottom: 10px; }
.msg-content li { margin-bottom: 4px; }
.msg-content code {
  font-family: var(--code);
  /* Accent-tinted "chip" with NORMAL text colour — accent-coloured text on a
     surface was borderline-illegible on several themes (linen/sunrise/signal).
     --fg on an accent wash keeps the colour-coded look but is readable on
     every theme, light or dark, since --fg always contrasts its surface. */
  background: var(--accent-wash); border: 1px solid var(--accent-wash);
  padding: 1px 6px; border-radius: 4px; font-size: 12px;
  color: var(--fg);
}
.msg-content pre {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 14px 16px; overflow-x: auto; margin-bottom: 12px;
}
.msg-content pre code { background: none; border: none; padding: 0; font-size: 13px; color: var(--fg); }
.msg-content strong { font-weight: 600; color: var(--fg); }
.msg-content em { font-style: italic; }
.msg-content a { color: var(--accent); text-decoration: underline; }
.msg-content table { border-collapse: collapse; width: 100%; margin-bottom: 10px; font-size: 13px; }
.msg-content th,.msg-content td { border: 1px solid var(--line-2); padding: 7px 10px; }
.msg-content th { background: var(--ink-3); font-weight: 600; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.msg-content blockquote {
  border-left: 2px solid var(--accent); padding-left: 12px; color: var(--fg-3);
  margin-left: 0; margin-bottom: 10px;
}

/* Save to Word button */
.save-word-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; padding: 5px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: transparent; color: var(--fg-2); border: 1px solid var(--line-2);
  border-radius: var(--r); cursor: pointer; text-decoration: none;
  transition: border-color 120ms, color 120ms;
}
.save-word-btn:hover { border-color: var(--line-3); color: var(--fg); }

/* ── Message action row (Copy / Retry / Save) ── */
.msg-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  opacity: 0; transform: translateY(2px);
  transition: opacity .2s ease, transform .2s ease;
}
.msg.assistant:hover .msg-actions,
.msg.assistant:focus-within .msg-actions { opacity: 1; transform: none; }
@media (hover: none) { .msg-actions { opacity: 1; transform: none; } } /* always show on touch */
.msg-act {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 0; padding: 5px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: transparent; color: var(--fg-2); border: 1px solid var(--line-3);
  border-radius: var(--r); cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.msg-act:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.msg-act:active { transform: scale(.95); }
.msg-act.done { color: var(--pos); border-color: rgba(92,219,149,.4); }
.msg-act .ma-ico { font-size: 12px; line-height: 1; }
.regen-btn:hover .ma-ico { animation: maSpin .5s ease; }
@keyframes maSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Suggested follow-up chips ── */
.followups {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line-3);
}
.followup-chip {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%; padding: 8px 13px;
  font-family: inherit; font-size: 13px; line-height: 1.25; text-align: left;
  color: var(--fg-2); background: var(--accent-wash);
  border: 1px solid var(--line-3); border-radius: 999px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s, transform .1s;
  opacity: 0; transform: translateY(4px);
  animation: fuIn .34s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * .06s + .04s);
}
.followup-chip:hover {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.followup-chip:active { transform: scale(.97); }
.followup-chip .fu-arrow {
  font-size: 12px; color: var(--accent); flex: 0 0 auto;
  transition: transform .16s;
}
.followup-chip:hover .fu-arrow { transform: translate(1px, -1px); }
.followup-chip .fu-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes fuIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .followup-chip { animation: none; opacity: 1; transform: none; }
}

/* ── Inline citations ── */
sup.cite {
  font-size: 0.68em; line-height: 0; vertical-align: super; margin: 0 1px 0 2px;
  font-weight: 700; color: var(--accent); cursor: default;
}
sup.cite .cite-link {
  color: var(--accent); text-decoration: none;
  padding: 1px 4px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  transition: background .15s;
}
sup.cite .cite-link:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ── Quick-refine chips ── */
.refine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.refine-lead { font-size: 11.5px; color: var(--fg-3); font-weight: 600; margin-right: 1px; }
.refine-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500; font-family: inherit;
  color: var(--fg-2); background: transparent; border: 1px solid var(--line-3);
  border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.refine-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash, color-mix(in srgb, var(--accent) 9%, transparent)); }
.refine-chip:active { transform: scale(.96); }
.refine-chip .rf-ico { font-size: 11px; color: var(--accent); }

/* "Add SEE.L to my markets" — same family as the refine chips, one step
   louder, because it does something rather than asking something. */
.follow-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.follow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500; font-family: inherit;
  color: var(--fg-2); background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line-3));
  border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .1s, opacity .15s;
}
.follow-chip:hover { border-color: var(--accent); color: var(--accent);
  background: var(--accent-wash, color-mix(in srgb, var(--accent) 9%, transparent)); }
.follow-chip:active { transform: scale(.96); }
.follow-chip .fc-plus { color: var(--accent); font-weight: 700; }
.follow-chip .fc-name { color: var(--fg-3); }
.follow-chip[disabled] { cursor: default; }
.follow-chip.added { border-color: color-mix(in srgb, var(--ok, #2F9E6B) 45%, var(--line-3));
  color: var(--fg-3); }
.follow-chip.added .fc-plus { color: var(--ok, #2F9E6B); }

/* ── In-message charts (SVG, drawn client-side, theme-aware) ── */
.chart-card {
  margin: 14px 0; padding: 14px 14px 12px;
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03)));
  border: 1px solid var(--line-3); border-radius: 14px;
}
.chart-title {
  font-family: var(--font-display, inherit); font-size: 13.5px; font-weight: 600;
  color: var(--fg); margin-bottom: 8px; letter-spacing: .01em;
}
.chart-svg-wrap { width: 100%; overflow: hidden; }
.chart-svg { width: 100%; height: auto; max-height: 260px; display: block; }
.chart-svg-pie { max-width: 240px; margin: 2px auto; }
.chart-grid { stroke: var(--line-3); stroke-width: 1; opacity: .55; }
.chart-axis { fill: var(--fg-3); font-size: 10px; font-family: var(--mono, ui-monospace, monospace); }
.chart-axis-y { text-anchor: end; }
.chart-axis-x { text-anchor: middle; }
.chart-val { fill: var(--fg-2); font-size: 10px; font-weight: 600; text-anchor: middle; font-family: var(--mono, ui-monospace, monospace); }
.chart-pie-val { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; }
.chart-donut-hole { fill: var(--bg-2, var(--bg, #fff)); }
.chart-bar { animation: chartBar .5s cubic-bezier(.2,.7,.3,1) backwards; transform-origin: bottom; animation-delay: calc(var(--i,0) * .04s); }
.chart-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: chartLine 1s ease forwards; }
.chart-slice { animation: chartFade .5s ease backwards; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; padding-top: 4px; }
.chart-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); }
.chart-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
@keyframes chartBar { from { transform: scaleY(0); opacity: .3; } }
@keyframes chartLine { to { stroke-dashoffset: 0; } }
@keyframes chartFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chart-bar, .chart-line, .chart-slice { animation: none; stroke-dashoffset: 0; }
}
/* Price trend charts tint green/red by the day's move (CSS wins over the SVG
   fill/stroke attributes, so no per-point recolouring needed). */
.chart-card.trend-up .chart-line { stroke: var(--pos, #2fb87a); }
.chart-card.trend-up .chart-svg polygon { fill: var(--pos, #2fb87a) !important; }
.chart-card.trend-up .chart-svg circle { fill: var(--pos, #2fb87a); }
.chart-card.trend-down .chart-line { stroke: var(--neg, #e5554e); }
.chart-card.trend-down .chart-svg polygon { fill: var(--neg, #e5554e) !important; }
.chart-card.trend-down .chart-svg circle { fill: var(--neg, #e5554e); }

/* ── Markets (Stocks & Crypto) tab ── */
.mk-admin-flag {
  font-size: 10.5px; font-family: var(--mono, monospace); letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--line-3); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}
.mk-scroll { flex: 1; overflow-y: auto; padding: 16px clamp(12px, 4vw, 28px) 40px; -webkit-overflow-scrolling: touch; }
.mk-section { margin-bottom: 26px; }
.mk-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.mk-section-title { font-family: var(--font-display, inherit); font-size: 16px; font-weight: 600; color: var(--fg); }
.mk-updated { font-size: 11px; color: var(--fg-3); font-family: var(--mono, monospace); }
.mk-skeleton, .mk-empty { color: var(--fg-3); font-size: 13.5px; padding: 18px; text-align: center;
  border: 1px dashed var(--line-3); border-radius: 14px; }

/* overview strip */
.mk-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mk-tile {
  text-align: left; cursor: pointer; padding: 12px 13px 10px; border-radius: 14px;
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); border: 1px solid var(--line-3);
  display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, transform .1s;
  position: relative; overflow: hidden;
}
.mk-tile:hover { border-color: var(--accent); }
.mk-tile:active { transform: scale(.98); }
.mk-tile-label { font-size: 12px; color: var(--fg-3); font-weight: 500; }
.mk-tile-price { font-size: 18px; font-weight: 700; color: var(--fg); letter-spacing: -.01em; }
.mk-tile-chg { font-size: 12px; font-weight: 600; font-family: var(--mono, monospace); }
.mk-tile.up .mk-tile-chg { color: var(--pos, #2fb87a); }
.mk-tile.down .mk-tile-chg { color: var(--neg, #e5554e); }
.mk-tile svg { margin-top: 4px; width: 100%; height: 26px; opacity: .8; }
.mk-tile.up svg polyline, .mk-tile.up svg path { stroke: var(--pos, #2fb87a); }
.mk-tile.down svg polyline, .mk-tile.down svg path { stroke: var(--neg, #e5554e); }

/* add form */
.mk-add { display: flex; gap: 8px; margin-bottom: 6px; }
.mk-add-input {
  flex: 1; min-width: 0; padding: 11px 14px; font-size: 14px; font-family: inherit;
  color: var(--fg); background: var(--bg-2, var(--glass, rgba(0,0,0,.03)));
  border: 1px solid var(--line-3); border-radius: 12px;
}
.mk-add-input:focus { outline: none; border-color: var(--accent); }
.mk-add-btn {
  padding: 11px 18px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  color: #fff; background: var(--accent); border: none; border-radius: 12px; white-space: nowrap;
  transition: filter .15s, transform .1s;
}
.mk-add-btn:hover { filter: brightness(1.05); }
.mk-add-btn:active { transform: scale(.97); }
.mk-add-btn:disabled { opacity: .55; cursor: default; }
.mk-add-msg { min-height: 16px; font-size: 12.5px; color: var(--fg-3); margin-bottom: 12px; }

/* watchlist cards */
.mk-watchlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mk-card {
  padding: 13px 14px 12px; border-radius: 16px; border: 1px solid var(--line-3);
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); display: flex; flex-direction: column; gap: 8px;
}
.mk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-card-id { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.mk-card-id b { font-size: 15px; color: var(--fg); }
.mk-card-id span { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-x {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--fg-3); font-size: 19px; line-height: 1; transition: background .15s, color .15s;
}
.mk-card-x:hover { background: color-mix(in srgb, var(--neg, #e5554e) 14%, transparent); color: var(--neg, #e5554e); }
.mk-card-row { display: flex; align-items: baseline; gap: 10px; }
.mk-card-price { font-size: 22px; font-weight: 700; color: var(--fg); letter-spacing: -.015em; }
.mk-card-chg { font-size: 13px; font-weight: 600; font-family: var(--mono, monospace); }
.mk-card-row.up .mk-card-chg { color: var(--pos, #2fb87a); }
.mk-card-row.down .mk-card-chg { color: var(--neg, #e5554e); }
.mk-card-chart { margin: 0 -4px; }
.mk-card-chart.chart-card { padding: 4px 4px 2px; background: transparent; border: none; margin: 0; }
.mk-card-chart .chart-svg { max-height: 90px; }
.mk-card-ask {
  align-self: flex-start; font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--accent); background: var(--accent-wash, color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid var(--line-3); border-radius: 999px; padding: 6px 12px; transition: border-color .15s;
}
.mk-card-ask:hover { border-color: var(--accent); }
.mk-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-card-analyse {
  font-size: 12px; font-weight: 600; cursor: pointer; color: #fff;
  background: var(--accent); border: none; border-radius: 999px; padding: 6px 13px;
  transition: filter .15s, transform .1s;
}
.mk-card-analyse:hover { filter: brightness(1.06); }
.mk-card-analyse:active { transform: scale(.97); }
.mk-card-analyse:disabled { opacity: .6; cursor: default; }

/* Expanded analysis panel */
.mk-analysis {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-3);
  display: flex; flex-direction: column; gap: 12px;
  animation: mkAnIn .3s ease;
}
@keyframes mkAnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mk-an-top { display: flex; flex-direction: column; gap: 1px; }
.mk-an-top b { font-size: 13.5px; color: var(--fg); }
.mk-an-top span { font-size: 11px; color: var(--fg-3); }
.mk-an-sec { display: flex; flex-direction: column; gap: 4px; }
.mk-an-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.mk-an-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.mk-an-row span { color: var(--fg-3); }
.mk-an-row b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-an-row b.pos { color: var(--pos, #2fb87a); }
.mk-an-row b.neg { color: var(--neg, #e5554e); }
.mk-an-row b.warn { color: #e0912f; }
.mk-an-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.mk-an-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  background: var(--line-3); color: var(--fg-2); }
.mk-an-pill.pos { background: color-mix(in srgb, var(--pos, #2fb87a) 20%, transparent); color: var(--pos, #2fb87a); }
.mk-an-pill.neg { background: color-mix(in srgb, var(--neg, #e5554e) 20%, transparent); color: var(--neg, #e5554e); }
.mk-an-pill.warn { background: color-mix(in srgb, #e0912f 20%, transparent); color: #c47a1f; }
.mk-an-summary { font-size: 12px; line-height: 1.5; color: var(--fg-3); margin: 0; }
.mk-an-ask button {
  width: 100%; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--accent);
  background: var(--accent-wash, color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid var(--line-3); border-radius: 10px; padding: 9px; transition: border-color .15s;
}
.mk-an-ask button:hover { border-color: var(--accent); }
.mk-an-disc { font-size: 10.5px; color: var(--fg-3); text-align: center; margin: 0; opacity: .8; }
.mk-an-rank { font-size: 11px; font-weight: 600; color: var(--accent); vertical-align: middle; }
.mk-an-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-an-grid > div { display: flex; flex-direction: column; gap: 1px; padding: 6px 4px; border-radius: 8px; background: var(--glass, rgba(0,0,0,.03)); text-align: center; }
.mk-an-grid > div span { font-size: 10px; color: var(--fg-3); }
.mk-an-grid > div b { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fg); }
.mk-an-grid > div b.pos { color: var(--pos, #2fb87a); }
.mk-an-grid > div b.neg { color: var(--neg, #e5554e); }

/* crypto market sentiment strip */
.mk-crypto-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mk-cx { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px;
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); border: 1px solid var(--line-3); flex: 1 1 auto; min-width: 130px; }
.mk-cx span { font-size: 10.5px; color: var(--fg-3); }
.mk-cx b { font-size: 14px; color: var(--fg); font-variant-numeric: tabular-nums; }
.mk-cx b i { font-style: normal; font-size: 11.5px; }
.mk-cx b .pos, .mk-cx b.pos { color: var(--pos, #2fb87a); }
.mk-cx b .neg, .mk-cx b.neg { color: var(--neg, #e5554e); }
.mk-cx b.warn { color: #e0912f; }
.mk-cx-trend b { font-size: 12.5px; }

/* ── Markets: entrance stagger + live price flash ── */
.mk-tile.mk-in { animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--mki,0) * .045s); }
.mk-card.mk-in { animation: vizPop .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--mki,0) * .05s); }
.mk-cx.mk-in { animation: vizIn .45s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--cxi,0) * .06s); }
/* analysis panel sections cascade when the panel opens */
.mk-analysis .mk-an-sec, .mk-analysis .mk-an-top { animation: vizIn .4s ease both; }
.mk-analysis .mk-an-sec:nth-of-type(2) { animation-delay: .05s; }
.mk-analysis .mk-an-sec:nth-of-type(3) { animation-delay: .11s; }
.mk-analysis .mk-an-sec:nth-of-type(4) { animation-delay: .17s; }
.mk-analysis .mk-an-sec:nth-of-type(5) { animation-delay: .23s; }
/* live price flash — a halo + colour pulse when a price changes on refresh */
.mk-tile-price, .mk-card-price { border-radius: 6px; }
@keyframes pxUp { 0% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pos, #2fb87a) 26%, transparent); color: var(--pos, #2fb87a); } 100% { box-shadow: 0 0 0 5px transparent; } }
@keyframes pxDown { 0% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--neg, #e5554e) 26%, transparent); color: var(--neg, #e5554e); } 100% { box-shadow: 0 0 0 5px transparent; } }
.mk-tile-price.px-up, .mk-card-price.px-up { animation: pxUp 1.3s ease; }
.mk-tile-price.px-down, .mk-card-price.px-down { animation: pxDown 1.3s ease; }
/* live "updated" pulse dot */
.mk-updated::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos, #2fb87a); margin-right: 6px; vertical-align: middle; animation: mkLive 2s ease-in-out infinite; }
@keyframes mkLive { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .mk-tile.mk-in, .mk-card.mk-in, .mk-cx.mk-in, .mk-analysis .mk-an-sec, .mk-analysis .mk-an-top {
    animation: none !important; opacity: 1 !important; transform: none !important; }
  .mk-updated::before { animation: none; }
}

/* ── Rich everyday answer blocks: callouts, pros/cons, steps ── */
.callout {
  margin: 14px 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-3); border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.callout-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--fg); }
.callout-i { font-size: 15px; line-height: 1; }
.callout-b { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.callout-b p { margin: 0; }
.callout-b ul { margin: 2px 0 0; padding-left: 18px; }
.callout-b li { margin: 3px 0; }
.callout-tip { border-left-color: #e0912f; background: color-mix(in srgb, #e0912f 8%, transparent); }
.callout-warn { border-left-color: var(--neg, #e5554e); background: color-mix(in srgb, var(--neg, #e5554e) 8%, transparent); }
.callout-danger { border-left-color: var(--neg, #e5554e); background: color-mix(in srgb, var(--neg, #e5554e) 12%, transparent); }
.callout-success { border-left-color: var(--pos, #2fb87a); background: color-mix(in srgb, var(--pos, #2fb87a) 8%, transparent); }
.callout-important { border-left-color: var(--accent); }
.callout-tldr { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (max-width: 460px) { .proscons { grid-template-columns: 1fr; } }
.pc-col { padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-3); }
.pc-pros { background: color-mix(in srgb, var(--pos, #2fb87a) 8%, transparent); }
.pc-cons { background: color-mix(in srgb, var(--neg, #e5554e) 8%, transparent); }
.pc-h { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.pc-pros .pc-h { color: var(--pos, #2fb87a); }
.pc-cons .pc-h { color: var(--neg, #e5554e); }
.pc-col ul { margin: 0; padding-left: 18px; }
.pc-col li { margin: 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }

.steps { margin: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.step { display: flex; gap: 12px; padding: 4px 0; position: relative; }
.step-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #fff; background: var(--accent);
  z-index: 1;
}
.step:not(:last-child) .step-n::after {
  content: ""; position: absolute; left: 12px; top: 30px; bottom: -2px; width: 2px;
  background: var(--line-3);
}
.step-b { flex: 1; padding-top: 3px; font-size: 14px; line-height: 1.55; color: var(--fg-2); min-width: 0; }

/* Mermaid diagrams */
.mmd { margin: 16px 0; padding: 14px; border-radius: 14px; border: 1px solid var(--line-3);
  background: var(--bg-2, var(--glass, rgba(0,0,0,.02))); overflow-x: auto; text-align: center; }
.mmd svg { max-width: 100%; height: auto; }
.mmd-loading { color: var(--fg-3); font-size: 13px; padding: 20px; }
.mmd-fail { color: var(--fg-3); font-size: 12.5px; padding: 12px; }
.mmd .code-card { text-align: left; margin: 0; }

/* Rating / score bars */
.ratings { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.rating-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 10px; }
.rating-label { font-size: 13.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-bar { height: 9px; border-radius: 999px; background: var(--line-3); overflow: hidden; }
.rating-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transform-origin: left; animation: ratingIn .6s cubic-bezier(.2,.8,.3,1); }
.rating-fill.good { background: var(--pos, #2fb87a); }
.rating-fill.mid { background: #e0912f; }
.rating-fill.low { background: var(--neg, #e5554e); }
.rating-val { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); min-width: 34px; text-align: right; }
@keyframes ratingIn { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .rating-fill { animation: none; } }

/* Weather card */
.wx-card {
  margin: 14px 0; padding: 16px; border-radius: 16px; border: 1px solid var(--line-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-2, #fbf7f1)), var(--bg-2, #fbf7f1));
}
.wx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wx-loc { font-size: 13px; color: var(--fg-3); font-weight: 500; }
.wx-temp { font-size: 34px; font-weight: 800; color: var(--fg); letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; }
.wx-cond { font-size: 13px; color: var(--fg-2); margin-top: 2px; }
.wx-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.wx-forecast { display: flex; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-3); }
.wx-day { flex: 1 1 0; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.wx-day-n { font-size: 11px; color: var(--fg-3); font-weight: 600; }
.wx-day-ic { font-size: 20px; line-height: 1; }
.wx-day-hi { font-size: 13.5px; font-weight: 700; color: var(--fg); }
.wx-day-lo { font-size: 12px; color: var(--fg-3); }
.wx-day-rain { font-size: 10px; color: #3d8fd6; min-height: 13px; }

/* Sports scorecards */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 14px 0; }
.sp-card { padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line-3); background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); }
.sp-card.live { border-color: color-mix(in srgb, var(--neg, #e5554e) 45%, var(--line-3)); }
.sp-league { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.sp-live { color: var(--neg, #e5554e); font-size: 9.5px; animation: spPulse 1.6s ease-in-out infinite; }
@keyframes spPulse { 50% { opacity: .45; } }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0; }
.sp-team { font-size: 13.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-score { font-size: 16px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.sp-status { font-size: 11px; color: var(--fg-3); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-3); }

/* ── Player analysis card ── */
.pl-card { margin: 14px 0; padding: 15px; border-radius: 18px; border: 1px solid var(--line-3);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--bg-2, transparent)), var(--bg-2, rgba(0,0,0,.02))); overflow: hidden; }
.pl-head { display: flex; align-items: center; gap: 14px; }
.pl-photo-wrap { position: relative; flex: 0 0 auto; }
.pl-photo, .pl-photo.ph-fallback { width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2, #ddd)); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.pl-photo.ph-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; color: var(--accent); }
.pl-id { min-width: 0; }
.pl-name { font-size: 19px; font-weight: 800; color: var(--fg); line-height: 1.15; }
.pl-team { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2, var(--fg-3)); margin-top: 3px; }
.pl-crest { width: 18px; height: 18px; object-fit: contain; }
.pl-league { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--fg-3); margin-top: 4px; }
.pl-bio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.pl-bio-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--glass, rgba(0,0,0,.03))); }
.pl-bio-item span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
.pl-bio-item b { font-size: 13.5px; color: var(--fg); }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-top: 13px;
  padding-top: 13px; border-top: 1px solid var(--line-3); }
.pl-stat { text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--glass, rgba(0,0,0,.03)); }
.pl-stat-v { font-size: 18px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.pl-stat-l { font-size: 10px; color: var(--fg-3); margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }

/* ── Game / match analysis card ── */
.gm-card { margin: 14px 0; padding: 15px; border-radius: 18px; border: 1px solid var(--line-3);
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); overflow: hidden; }
.gm-league { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.gm-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.gm-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.gm-team span { font-size: 13px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gm-crest, .gm-crest.ph-fallback { width: 44px; height: 44px; object-fit: contain; }
.gm-crest.ph-fallback { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800;
  font-size: 15px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-2, #ddd)); }
.gm-nums { font-size: 30px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; }
.gm-nums span { color: var(--fg-3); font-weight: 600; }
.gm-vs { font-size: 15px; }
.gm-status { text-align: center; font-size: 11.5px; color: var(--fg-3); margin-top: 8px; }
.gm-stats { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-3); display: flex; flex-direction: column; gap: 11px; }
.gm-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg); }
.gm-stat-row span { color: var(--fg-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.gm-stat-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.gm-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; margin-top: 5px; background: var(--line-3); }
.gm-bar-h { background: var(--accent); }
.gm-bar-a { background: color-mix(in srgb, var(--fg-3) 55%, transparent); }
.gm-events { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-3); display: flex; flex-direction: column; gap: 6px; }
.gm-ev { display: flex; gap: 10px; font-size: 12.5px; color: var(--fg); }
.gm-ev-t { flex: 0 0 40px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.gm-ev-x { color: var(--fg-2, var(--fg)); }

/* ── Politician (facts-only) card ── */
.pol-card { --pc: #6b7280; margin: 14px 0; padding: 15px; border-radius: 18px; border: 1px solid var(--line-3);
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); overflow: hidden; border-left: 4px solid var(--pc);
  animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; }
.pol-con { --pc: #0087dc; } .pol-lab { --pc: #e4003b; } .pol-ld { --pc: #faa61a; }
.pol-grn { --pc: #6ab023; } .pol-snp { --pc: #fdf38e; } .pol-ref { --pc: #12b6cf; }
.pol-dup { --pc: #d46a4c; } .pol-sf { --pc: #326760; } .pol-pc { --pc: #005b54; }
.pol-dem { --pc: #3b5cd0; } .pol-gop { --pc: #d1332e; } .pol-ind { --pc: #6b7280; }
.pol-head { display: flex; align-items: center; gap: 14px; }
.pol-photo-wrap { flex: 0 0 auto; }
.pol-photo, .pol-photo.ph-fallback { width: 68px; height: 68px; border-radius: 14px; object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--pc) 55%, transparent);
  background: color-mix(in srgb, var(--pc) 14%, var(--bg-2, #ddd)); }
.pol-photo.ph-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: var(--pc); }
.pol-id { min-width: 0; }
.pol-name { font-size: 18px; font-weight: 800; color: var(--fg); line-height: 1.15; }
.pol-party { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fg-2, var(--fg)); margin-top: 3px; }
.pol-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); display: inline-block; }
.pol-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.pol-region { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--fg-3);
  border: 1px solid var(--line-3); border-radius: 6px; padding: 1px 6px; margin-top: 5px; }
.pol-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.pol-fact { display: flex; flex-direction: column; gap: 1px; padding: 6px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--pc) 7%, var(--glass, rgba(0,0,0,.03))); }
.pol-fact span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
.pol-fact b { font-size: 13px; color: var(--fg); }
.pol-votes { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-3); }
.pol-votes-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); margin-bottom: 8px; }
.pol-vote { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.pol-vote-t { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-vote-v { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(120,120,120,.15); color: var(--fg-3); }
.pol-vote-v.pol-aye { background: color-mix(in srgb, #4fd1a5 26%, transparent); color: #1f7a5a; }
.pol-vote-v.pol-no { background: color-mix(in srgb, #ff7a90 26%, transparent); color: #a33; }
.pol-foot { font-size: 10.5px; color: var(--fg-3); margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line-3); }
@media (hover: hover) { .pol-card { transition: transform .18s ease, box-shadow .18s ease; }
  .pol-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--pc) 16%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pol-card { animation: none !important; } }

/* player/game cards animate in like the other data blocks */
.pl-card, .gm-card { animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; }
.pl-stat { animation: vizPop .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i,0) * .06s + .15s); }
.gm-stat { animation: vizIn .45s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i,0) * .07s + .1s); }
.gm-bar-h, .gm-bar-a { animation: gmBarGrow .6s cubic-bezier(.3,.9,.3,1) both; animation-delay: calc(var(--i,0) * .07s + .2s); transform-origin: left; }
@keyframes gmBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) {
  .pl-card, .gm-card { transition: transform .18s ease, box-shadow .18s ease; }
  .pl-card:hover, .gm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-card, .gm-card, .pl-stat, .gm-stat, .gm-bar-h, .gm-bar-a { animation: none !important; transform: none !important; }
}

/* ── Animated football pitch / shot-map ── */
.pitch-card { margin: 14px 0; padding: 13px; border-radius: 18px; border: 1px solid var(--line-3);
  background: var(--bg-2, var(--glass, rgba(0,0,0,.03))); overflow: hidden; animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; }
.pitch-err { font-size: 13px; color: var(--fg-3); }
.pitch-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.pitch-title { font-size: 14px; font-weight: 800; color: var(--fg); }
.pitch-teams { font-size: 12px; color: var(--fg-2, var(--fg-3)); }
.pitch-teams span { color: var(--fg-3); }
.pitch-svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.pt-grass { fill: #2f8f4e; }
.pt-stripe { fill: rgba(255,255,255,.045); }
@media (prefers-color-scheme: dark) { .pt-grass { fill: #256b3c; } }
:root[data-theme="dark"] .pt-grass { fill: #256b3c; }
:root[data-theme="light"] .pt-grass { fill: #2f8f4e; }
/* markers pop in, staggered by their inline --d delay */
.pt-mark { animation: ptPop .4s cubic-bezier(.2,1.4,.4,1) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes ptPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
/* goal marker: a ring that pulses out once, then keeps a soft beat */
.pt-goal-ring { animation: ptRing 1.1s ease-out both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes ptRing { 0% { opacity: .9; transform: scale(1); } 60% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
.pt-goal { filter: drop-shadow(0 0 1.2px rgba(0,0,0,.4)); }
/* shot trajectory line draws toward goal, then the ball rolls along (SMIL) */
.pt-traj { stroke-dasharray: 3.4; stroke-dashoffset: 120; opacity: .8;
  animation: ptTraj .55s ease-out both; animation-delay: calc(var(--d, 0s) + .15s); }
@keyframes ptTraj { to { stroke-dashoffset: 0; } }
.pt-ball { opacity: 0; animation: ptBall .2s ease both; animation-delay: calc(var(--d, 0s) + .12s); }
@keyframes ptBall { to { opacity: 1; } }
.pitch-svg.no-anim .pt-mark, .pitch-svg.no-anim .pt-goal-ring { animation: none; opacity: 1; transform: none; }
.pitch-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: 11px; color: var(--fg-3); }
.pitch-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pitch-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pitch-legend .pl-goal { background: var(--accent); }
.pitch-legend .pl-shot { border: 1.5px solid #5b9df9; }
.pitch-legend .pl-chance { border: 1.5px dashed #f6b73c; }
.pitch-legend .pl-assist { background: var(--accent); border-radius: 2px; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .pitch-card, .pt-mark, .pt-goal-ring, .pt-traj, .pt-ball { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Entrance & stagger animations for the visual blocks ── */
@keyframes vizIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vizPop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.callout, .proscons, .ratings, .steps, .wx-card, .sp-cards, .mmd-ready {
  animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both;
}
/* pros/cons columns settle in with a tiny offset */
.proscons .pc-pros { animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: .05s; }
.proscons .pc-cons { animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: .13s; }
/* steps drop in one after another */
.steps .step { animation: vizIn .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--si,0) * .08s + .05s); }
/* rating rows + their fills cascade */
.ratings .rating-row { animation: vizIn .45s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--ri,0) * .07s); }
.rating-fill { animation-delay: calc(var(--ri,0) * .07s + .12s); animation-fill-mode: both; }
/* weather: card in, then forecast days ripple across */
.wx-forecast .wx-day { animation: vizPop .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--wxi,0) * .06s + .18s); }
.wx-ic { display: inline-block; animation: wxFloat 3.2s ease-in-out infinite; }
@keyframes wxFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-4deg); } }
/* sports cards fan in; live badge already pulses */
.sp-cards .sp-card { animation: vizPop .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--spi,0) * .07s); }
.sp-score { animation: vizPop .5s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--spi,0) * .07s + .2s); }
/* mermaid diagram fades/scales in when rendered */
.mmd-ready { animation: vizIn .55s cubic-bezier(.2,.8,.3,1) both; }
.mmd-ready svg { animation: mmdSvgIn .6s cubic-bezier(.2,.8,.3,1) both .05s; }
@keyframes mmdSvgIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* gentle hover lift on the data cards (desktop) */
@media (hover: hover) {
  .wx-card, .sp-card, .mkt-card { transition: transform .18s ease, box-shadow .18s ease; }
  .wx-card:hover, .sp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .callout, .proscons, .ratings, .steps, .wx-card, .sp-cards, .mmd-ready, .mmd-ready svg,
  .proscons .pc-pros, .proscons .pc-cons, .steps .step, .ratings .rating-row,
  .wx-forecast .wx-day, .sp-cards .sp-card, .sp-score {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .wx-ic { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MARKETS — one-time cinematic intro (Plus). Self-contained dark stage
   so it looks premium regardless of the user's theme.
   ══════════════════════════════════════════════════════════════════ */
#markets-intro {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #1c130d 0%, #0d0a08 60%, #060504 100%);
  color: #f4ece2; overflow: hidden; opacity: 0;
  transition: opacity .5s ease;
  -webkit-tap-highlight-color: transparent;
}
#markets-intro.show { opacity: 1; }
#markets-intro.closing { opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform .6s ease; }

/* animated backdrop */
.mi-bg { position: absolute; inset: 0; overflow: hidden; }
.mi-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen; will-change: transform; }
.mi-blob.b1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -12vmax;
  background: radial-gradient(circle, var(--accent), transparent 65%); animation: miBlob1 14s ease-in-out infinite; }
.mi-blob.b2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 8vmax;
  background: radial-gradient(circle, #2f7d5b, transparent 65%); animation: miBlob2 17s ease-in-out infinite; }
.mi-blob.b3 { width: 38vmax; height: 38vmax; left: 20vmax; bottom: -16vmax;
  background: radial-gradient(circle, #7a4bd0, transparent 68%); opacity: .35; animation: miBlob3 20s ease-in-out infinite; }
.mi-grid { position: absolute; inset: -50%; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 46px 46px; transform: perspective(500px) rotateX(62deg) translateY(0);
  animation: miGrid 8s linear infinite; mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 62%); }
@keyframes miBlob1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vmax,4vmax) scale(1.12)} }
@keyframes miBlob2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vmax,6vmax) scale(1.1)} }
@keyframes miBlob3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vmax,-5vmax) scale(1.15)} }
@keyframes miGrid { to { background-position: 0 46px, 46px 0; } }

.mi-skip {
  position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; z-index: 3;
  background: rgba(255,255,255,.08); color: #f4ece2; border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-family: var(--mono, monospace);
  cursor: pointer; letter-spacing: .04em; backdrop-filter: blur(6px);
  opacity: 0; animation: miFade .6s ease .9s forwards; transition: background .15s, border-color .15s;
}
.mi-skip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); }

.mi-stage {
  position: relative; z-index: 2; width: min(560px, 92vw);
  max-height: 100vh; overflow-y: auto; padding: 24px 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  -ms-overflow-style: none; scrollbar-width: none;
}
.mi-stage::-webkit-scrollbar { display: none; }

.mi-logo { width: 76px; height: 76px; filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--accent) 55%, transparent));
  opacity: 0; animation: miLogoIn 1s cubic-bezier(.2,.8,.25,1) .15s forwards; }
.mi-logo svg { width: 100%; height: 100%; }
.mi-ring { stroke-dasharray: 138; stroke-dashoffset: 138; animation: miDraw 1.1s ease .35s forwards; }
.mi-ring.r2 { animation-delay: .6s; }
.mi-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: miPop .5s cubic-bezier(.2,1.4,.4,1) 1.15s forwards; }
@keyframes miLogoIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes miDraw { to { stroke-dashoffset: 0; } }
@keyframes miPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.mi-kicker { margin-top: 18px; font-size: 11.5px; letter-spacing: .32em; font-weight: 600;
  color: var(--accent); font-family: var(--mono, monospace);
  opacity: 0; animation: miUp .7s ease .7s forwards; }
.mi-title { margin: 8px 0 0; font-family: var(--font-display, Georgia, serif); font-weight: 700;
  font-size: clamp(38px, 11vw, 62px); line-height: 1; letter-spacing: -.02em; color: #fdf8f1;
  opacity: 0; animation: miTitle 1s cubic-bezier(.2,.8,.2,1) .85s forwards; }
.mi-title span { background: linear-gradient(100deg, var(--accent), #f0b978 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mi-sub { margin: 12px 0 0; font-size: clamp(14px, 4vw, 16px); color: rgba(244,236,226,.72);
  opacity: 0; animation: miUp .8s ease 1.05s forwards; }
@keyframes miTitle { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes miUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes miFade { to { opacity: 1; } }

.mi-tiles { display: flex; gap: 9px; margin-top: 26px; width: 100%; justify-content: center; }
.mi-tile { flex: 1 1 0; min-width: 0; max-width: 160px; text-align: left; padding: 11px 12px 8px;
  border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px); opacity: 0; transform: translateY(18px) scale(.96);
  animation: miTileIn .7s cubic-bezier(.2,.9,.3,1) var(--d, 1s) forwards; }
.mi-tile-l { font-size: 11px; color: rgba(244,236,226,.6); }
.mi-tile-p { font-size: clamp(15px, 4.6vw, 19px); font-weight: 700; color: #fff; letter-spacing: -.01em; margin-top: 1px; }
.mi-tile-c { font-size: 11px; font-weight: 600; font-family: var(--mono, monospace); margin-top: 1px; }
.mi-tile.up .mi-tile-c { color: #4fe0a0; }
.mi-tile.down .mi-tile-c { color: #ff8a8a; }
.mi-tile .mk-spark { margin-top: 5px; width: 100%; height: 22px; }
.mi-tile svg polyline { fill: none; stroke-width: 2; }
.mi-tile.up svg polyline { stroke: #4fe0a0; }
.mi-tile.down svg polyline { stroke: #ff8a8a; }
@keyframes miTileIn { to { opacity: 1; transform: none; } }

.mi-hero { width: 100%; margin-top: 16px; padding: 14px 15px 8px; border-radius: 18px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(20px) scale(.97); animation: miTileIn .8s cubic-bezier(.2,.9,.3,1) 1.7s forwards; }
.mi-hero-head { display: flex; align-items: center; justify-content: space-between; }
.mi-hero-head b { font-size: 14px; color: #fdf8f1; letter-spacing: .01em; }
.mi-hero-chg { font-size: 13px; font-weight: 700; color: #4fe0a0; font-family: var(--mono, monospace); }
.mi-hero-price { font-size: clamp(26px, 8vw, 34px); font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 2px 0 2px; text-align: left; }
.mi-hero .mi-card-chart.chart-card { background: transparent; border: none; padding: 0; margin: 0; }
.mi-hero .chart-svg { max-height: 120px; }

/* legible chart internals on the dark stage */
#markets-intro .chart-axis { fill: rgba(244,236,226,.5); }
#markets-intro .chart-grid { stroke: rgba(255,255,255,.12); }

.mi-feats { list-style: none; margin: 22px 0 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 10px; }
.mi-feats li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: rgba(244,236,226,.9);
  opacity: 0; transform: translateX(-14px); animation: miFeat .6s cubic-bezier(.2,.9,.3,1) var(--d, 2.5s) forwards; }
.mi-fic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 24%, transparent); font-size: 16px; }
@keyframes miFeat { to { opacity: 1; transform: none; } }

.mi-cta { position: relative; margin-top: 28px; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
  color: #1a120c; background: linear-gradient(100deg, var(--accent), #f0b978);
  border: none; border-radius: 999px; letter-spacing: .01em;
  opacity: 0; transform: translateY(14px) scale(.96);
  animation: miCta .7s cubic-bezier(.2,1.3,.4,1) 3.1s forwards, miGlow 2.6s ease-in-out 4s infinite; }
.mi-cta b { font-weight: 800; transition: transform .2s; }
.mi-cta:hover b { transform: translateX(4px); }
@keyframes miCta { to { opacity: 1; transform: none; } }
@keyframes miGlow { 0%,100% { box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 10px 54px color-mix(in srgb, var(--accent) 72%, transparent); } }

/* Reduced motion: reveal everything immediately, no looping motion */
#markets-intro.mi-reduce .mi-blob, #markets-intro.mi-reduce .mi-grid { animation: none; }
#markets-intro.mi-reduce .mi-logo, #markets-intro.mi-reduce .mi-kicker, #markets-intro.mi-reduce .mi-title,
#markets-intro.mi-reduce .mi-sub, #markets-intro.mi-reduce .mi-tile, #markets-intro.mi-reduce .mi-hero,
#markets-intro.mi-reduce .mi-feats li, #markets-intro.mi-reduce .mi-cta, #markets-intro.mi-reduce .mi-skip {
  animation: none !important; opacity: 1 !important; transform: none !important; }
#markets-intro.mi-reduce .mi-ring { stroke-dashoffset: 0; animation: none; }
#markets-intro.mi-reduce .mi-dot { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
  #markets-intro .mi-blob, #markets-intro .mi-grid, #markets-intro .mi-cta { animation-iteration-count: 1; }
}

/* ══ Plans grid (Settings) ══ */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.plan-card {
  position: relative; padding: 16px 15px; border-radius: 16px;
  border: 1px solid var(--line-3); background: var(--bg-2, var(--glass, rgba(0,0,0,.03)));
  border-top: 3px solid var(--pa, var(--accent));
}
.plan-card.current { border-color: var(--pa, var(--accent)); box-shadow: 0 0 0 1px var(--pa, var(--accent)) inset; }
.plan-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--pa, var(--accent)); padding: 2px 8px; border-radius: 999px; }
.plan-name { font-family: var(--font-display, inherit); font-size: 16px; font-weight: 700; color: var(--fg); }
.plan-price { font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -.02em; margin: 4px 0 2px; }
.plan-price small { font-size: 12px; font-weight: 500; color: var(--fg-3); }
.plan-tokens { font-size: 11.5px; color: var(--pa, var(--accent)); font-weight: 600; font-family: var(--mono, monospace); }
.plan-blurb { font-size: 12.5px; color: var(--fg-3); margin: 8px 0; line-height: 1.5; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.plan-feats li { font-size: 12.5px; color: var(--fg-2); padding-left: 18px; position: relative; line-height: 1.4; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--pa, var(--accent)); font-weight: 700; }
.plan-cta, .plan-alt {
  width: 100%; border-radius: 10px; font: 700 12.5px/1 var(--sans);
  cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.plan-cta {
  margin-top: 14px; padding: 11px 13px; color: #fff;
  border: 1px solid color-mix(in srgb, var(--pa, var(--accent)) 72%, white);
  background: var(--pa, var(--accent)); box-shadow: 0 8px 20px color-mix(in srgb, var(--pa, var(--accent)) 22%, transparent);
}
.plan-cta.ghost { color: var(--fg); background: transparent; box-shadow: none; border-color: var(--line-3); }
.plan-alt { margin-top: 7px; padding: 7px 10px; color: var(--fg-3); border: 0; background: transparent; }
.plan-cta:hover, .plan-alt:hover { transform: translateY(-1px); }
.plan-cta:disabled, .plan-alt:disabled { opacity: .55; cursor: wait; transform: none; }

/* One-tap Plus trial, shown before the paid plan cards. */
.trial-offer {
  position: relative; grid-column: 1 / -1; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  isolation: isolate; overflow: hidden; padding: 22px;
  border: 1px solid rgba(229,85,47,.42); border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(229,85,47,.15), rgba(217,138,43,.07) 52%, rgba(167,139,250,.08)),
    var(--bg-2);
  box-shadow: 0 18px 55px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.06);
  animation: trialOfferIn .5s cubic-bezier(.16,1,.3,1) both;
}
.trial-offer-glow {
  position: absolute; z-index: -1; width: 240px; height: 240px; right: -70px; top: -120px;
  border-radius: 50%; background: rgba(229,85,47,.22); filter: blur(55px);
  animation: trialOfferGlow 5s ease-in-out infinite alternate;
}
.trial-offer-mark {
  width: 54px; height: 54px; border-radius: 16px;
  background-color: #f2693e; -webkit-mask: var(--pevra-mark) center/44px 44px no-repeat;
  mask: var(--pevra-mark) center/44px 44px no-repeat;
  filter: drop-shadow(0 8px 16px rgba(229,85,47,.32));
}
.trial-offer-copy { min-width: 0; }
.trial-offer-kicker {
  display: block; margin-bottom: 5px; color: #f58a68;
  font: 750 10px/1.2 var(--mono); letter-spacing: .16em;
}
.trial-offer h3 {
  margin: 0; color: var(--fg); font: 750 clamp(20px,3vw,26px)/1.1 var(--display);
  letter-spacing: -.02em;
}
.trial-offer p { margin: 7px 0 11px; color: var(--fg-2); font-size: 13px; line-height: 1.45; }
.trial-offer-features { display: flex; flex-wrap: wrap; gap: 6px; }
.trial-offer-features span {
  padding: 5px 8px; border: 1px solid rgba(229,85,47,.22); border-radius: 999px;
  background: rgba(229,85,47,.07); color: var(--fg-2); font-size: 10.5px; font-weight: 650;
}
.trial-offer-cta {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  min-height: 46px; padding: 0 17px; border: 1px solid #f58a68; border-radius: 13px;
  color: #17100c; background: linear-gradient(135deg,#f58a68,#e5552f);
  box-shadow: 0 12px 28px rgba(229,85,47,.25); cursor: pointer;
  font: 750 13px/1 var(--sans); transition: transform .18s ease, box-shadow .18s ease;
}
.trial-offer-cta i { font-style: normal; font-size: 18px; transition: transform .18s ease; }
.trial-offer-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(229,85,47,.32); }
.trial-offer-cta:hover i { transform: translateX(3px); }
.trial-offer-cta:disabled { opacity: .62; cursor: wait; transform: none; }
@keyframes trialOfferIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes trialOfferGlow { to { transform: translate(-34px, 24px) scale(1.16); } }
@media (max-width: 650px) {
  .trial-offer { grid-template-columns: auto 1fr; gap: 13px; padding: 17px; }
  .trial-offer-mark { width: 44px; height: 44px; border-radius: 13px;
    -webkit-mask-size: 38px 38px; mask-size: 38px 38px; }
  .trial-offer-cta { grid-column: 1 / -1; justify-content: center; width: 100%; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .trial-offer, .trial-offer-glow { animation: none; }
  .trial-offer-cta, .trial-offer-cta i, .plan-cta, .plan-alt { transition: none; }
}

/* ══ Plans intro — slider splash ══ */
#plans-intro {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #1c130d 0%, #0d0a08 62%, #060504 100%);
  color: #f4ece2; overflow: hidden; opacity: 0; transition: opacity .5s ease;
}
#plans-intro.show { opacity: 1; }
#plans-intro.closing { opacity: 0; transform: scale(1.02); transition: opacity .5s ease, transform .5s ease; }
.pi-bg { position: absolute; inset: 0; overflow: hidden; }
.pi-blob { position: absolute; border-radius: 50%; filter: blur(75px); opacity: .5; mix-blend-mode: screen; }
.pi-blob.b1 { width: 44vmax; height: 44vmax; left: -12vmax; top: -10vmax; background: radial-gradient(circle, var(--accent), transparent 65%); animation: piB1 16s ease-in-out infinite; }
.pi-blob.b2 { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -12vmax; background: radial-gradient(circle, #7a4bd0, transparent 66%); opacity: .38; animation: piB2 19s ease-in-out infinite; }
@keyframes piB1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vmax,4vmax) scale(1.1); } }
@keyframes piB2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vmax,-4vmax) scale(1.12); } }
.pi-skip { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; z-index: 3;
  background: rgba(255,255,255,.08); color: #f4ece2; border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-family: var(--mono, monospace); cursor: pointer;
  opacity: 0; animation: piFade .5s ease .5s forwards; }
.pi-skip:hover { background: rgba(255,255,255,.16); }
.pi-head { position: relative; z-index: 2; text-align: center; margin-bottom: 18px; padding: 0 16px;
  opacity: 0; animation: piUp .7s cubic-bezier(.2,.8,.2,1) .15s forwards; }
.pi-logo { width: 52px; height: 52px; margin: 0 auto 10px; filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--accent) 55%, transparent)); }
.pi-logo svg { width: 100%; height: 100%; }
.pi-title { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: clamp(26px, 8vw, 40px);
  line-height: 1.05; letter-spacing: -.02em; color: #fdf8f1; margin: 0; }
.pi-sub { font-size: 14px; color: rgba(244,236,226,.7); margin: 8px 0 0; }
.pi-viewport { position: relative; z-index: 2; width: min(440px, 92vw); overflow: hidden; border-radius: 20px; }
.pi-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.15,1); }
.pi-slide { flex: 0 0 100%; box-sizing: border-box; padding: 22px 22px 24px; text-align: left;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  border-top: 4px solid var(--pa, var(--accent)); min-height: 320px; }
.pi-kicker { font-size: 10.5px; letter-spacing: .28em; font-weight: 700; color: var(--pa, var(--accent)); font-family: var(--mono, monospace); }
.pi-name { font-family: var(--font-display, Georgia, serif); font-size: 30px; font-weight: 700; color: #fff; margin: 8px 0 0; letter-spacing: -.01em; }
.pi-price { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 6px 0 2px; }
.pi-price small { font-size: 14px; font-weight: 500; color: rgba(244,236,226,.6); }
.pi-tokens { font-size: 12.5px; color: rgba(244,236,226,.8); font-family: var(--mono, monospace); }
.pi-tokens b { color: var(--pa, var(--accent)); }
.pi-blurb { font-size: 14px; color: rgba(244,236,226,.82); line-height: 1.5; margin: 12px 0; }
.pi-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pi-feats li { font-size: 13.5px; color: rgba(244,236,226,.92); padding-left: 22px; position: relative; opacity: 0; }
.pi-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--pa, var(--accent)); font-weight: 700; }
.pi-slide.active .pi-feats li { animation: piFeat .5s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(var(--fi,0) * .09s + .1s); }
@keyframes piFeat { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.pi-dots { position: relative; z-index: 2; display: flex; gap: 8px; margin: 20px 0 16px; }
.pi-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(255,255,255,.25); cursor: pointer; transition: width .3s, background .3s; }
.pi-dot.on { width: 22px; background: var(--accent); }
.pi-cta { position: relative; z-index: 2; padding: 14px 34px; font-size: 15.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  color: #1a120c; background: linear-gradient(100deg, var(--accent), #f0b978); border: none; border-radius: 999px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: 0; animation: piUp .6s cubic-bezier(.2,1.3,.4,1) .5s forwards; transition: transform .12s; }
.pi-cta:active { transform: scale(.97); }
@keyframes piUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes piFade { to { opacity: 1; } }
#plans-intro.pi-reduce .pi-blob { animation: none; }
#plans-intro.pi-reduce .pi-head, #plans-intro.pi-reduce .pi-cta, #plans-intro.pi-reduce .pi-skip,
#plans-intro.pi-reduce .pi-feats li { animation: none !important; opacity: 1 !important; transform: none !important; }
#plans-intro.pi-reduce .pi-track { transition: none; }

/* ══ Trial finished — direct-to-payment plans splash ═══════════════ */
#trial-ended-plans{position:fixed;inset:0;z-index:100002;overflow:auto;overscroll-behavior:contain;
  display:grid;place-items:center;padding:max(72px,env(safe-area-inset-top)) 18px max(32px,env(safe-area-inset-bottom));
  color:#f7f1e8;background:radial-gradient(90% 70% at 50% -5%,#2a160f 0%,#100b08 54%,#070504 100%);
  opacity:0;transition:opacity .42s ease}
#trial-ended-plans.show{opacity:1}
#trial-ended-plans.closing{opacity:0;transition-duration:.36s}
.tep-aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.tep-aurora i{position:absolute;width:45vmax;height:45vmax;border-radius:50%;filter:blur(90px);opacity:.22;
  animation:tepFloat 14s ease-in-out infinite alternate}
.tep-aurora i:nth-child(1){left:-14vmax;top:-18vmax;background:#E5552F}
.tep-aurora i:nth-child(2){right:-16vmax;bottom:-20vmax;background:#7750cb;animation-delay:-5s}
.tep-aurora i:nth-child(3){left:38%;top:32%;width:25vmax;height:25vmax;background:#d58b4b;opacity:.1;animation-delay:-9s}
@keyframes tepFloat{to{transform:translate(5vmax,4vmax) scale(1.12)}}
.tep-later{position:fixed;z-index:3;right:18px;top:max(18px,env(safe-area-inset-top));padding:9px 15px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.07);color:rgba(247,241,232,.7);
  font:500 12px var(--mono,monospace);cursor:pointer;backdrop-filter:blur(12px);opacity:0;animation:tepIn .55s .65s forwards}
.tep-later:hover{color:#fff;background:rgba(255,255,255,.12)}
.tep-shell{position:relative;z-index:2;width:min(1040px,100%);text-align:center}
.tep-mark{width:58px;height:58px;margin:0 auto 13px;display:grid;place-items:center;border-radius:18px;
  color:#fff;background:linear-gradient(145deg,#E5552F,#a9361a);box-shadow:0 15px 45px rgba(229,85,47,.34);
  opacity:0;animation:tepMark .8s cubic-bezier(.16,1.4,.3,1) .08s forwards}
.tep-mark span{font-size:25px;animation:tepSpark 2.4s ease-in-out infinite}
.tep-kicker{margin:0 0 10px;color:#f08b69;font:700 10.5px var(--mono,monospace);letter-spacing:.24em;
  opacity:0;animation:tepIn .6s .18s forwards}
.tep-shell>h1{margin:0;font-family:var(--font-display,Georgia,serif);font-size:clamp(35px,7vw,68px);line-height:.95;
  letter-spacing:-.045em;color:#fffaf3;opacity:0;animation:tepUp .72s cubic-bezier(.16,1,.3,1) .22s forwards}
.tep-sub{max-width:590px;margin:16px auto 26px;color:rgba(247,241,232,.64);font-size:clamp(14px,2vw,17px);line-height:1.55;
  opacity:0;animation:tepUp .68s cubic-bezier(.16,1,.3,1) .3s forwards}
.tep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:13px;align-items:stretch;text-align:left}
.tep-card{position:relative;display:flex;flex-direction:column;min-height:350px;padding:24px;border-radius:22px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 65px rgba(0,0,0,.24);backdrop-filter:blur(14px);opacity:0;transform:translateY(26px) scale(.97);
  animation:tepCard .72s cubic-bezier(.16,1,.3,1) calc(.38s + var(--tep-i)*.1s) forwards}
.tep-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--tep-accent,#E5552F)}
.tep-card.featured{background:linear-gradient(155deg,rgba(229,85,47,.17),rgba(255,255,255,.045));border-color:rgba(229,85,47,.5)}
.tep-popular{align-self:flex-start;margin:-4px 0 14px;padding:5px 9px;border-radius:999px;background:rgba(229,85,47,.16);
  color:#f49473;font:700 9.5px var(--mono,monospace);letter-spacing:.16em}
.tep-card h2{margin:0;color:#fff;font:700 25px var(--font-display,Georgia,serif);letter-spacing:-.025em}
.tep-price{margin:8px 0 5px;color:#fff;font-size:32px;font-weight:800;letter-spacing:-.035em}
.tep-price small{font-size:13px;font-weight:500;color:rgba(247,241,232,.55)}
.tep-card>p{margin:7px 0 15px;color:rgba(247,241,232,.62);font-size:13px;line-height:1.48}
.tep-card ul{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;padding:0;list-style:none;color:rgba(247,241,232,.86);font-size:12.5px}
.tep-card li::before{content:'✓';margin-right:8px;color:var(--tep-accent,#E5552F);font-weight:800}
.tep-select{width:100%;margin-top:auto;padding:13px 17px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:13px;
  color:#fff;background:var(--tep-accent,#E5552F);font:700 14px var(--font-ui,system-ui,sans-serif);cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.25);
  transition:transform .18s cubic-bezier(.16,1,.3,1),filter .18s}
.tep-select:hover{transform:translateY(-2px);filter:brightness(1.09)}
.tep-select span{font-size:18px;transition:transform .18s}.tep-select:hover span{transform:translateX(3px)}
.tep-select:disabled{cursor:not-allowed;opacity:.45;box-shadow:none;transform:none;filter:none}
.tep-note{margin:18px 0 0;color:rgba(247,241,232,.35);font:500 11px var(--mono,monospace);opacity:0;animation:tepIn .55s .85s forwards}
@keyframes tepMark{from{opacity:0;transform:scale(.35) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes tepSpark{50%{transform:scale(1.16) rotate(8deg);filter:drop-shadow(0 0 9px #fff)}}
@keyframes tepUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tepIn{to{opacity:1}}
@keyframes tepCard{to{opacity:1;transform:none}}
@media(max-width:580px){
  #trial-ended-plans{display:block;padding-left:14px;padding-right:14px}
  .tep-shell>h1{font-size:40px}.tep-sub{margin-bottom:20px}.tep-card{min-height:0;padding:21px}
  .tep-later{position:absolute}.tep-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  #trial-ended-plans,.tep-card,.tep-mark,.tep-kicker,.tep-shell>h1,.tep-sub,.tep-later,.tep-note{animation:none!important;opacity:1;transform:none}
  .tep-aurora i,.tep-mark span{animation:none!important}.tep-select{transition:none}
}

/* ── Send button → Stop state while generating ── */
.send-btn.is-stopping { background: var(--neg, #ff6b6b); }
.send-btn.is-stopping svg { display: none; }
.send-btn.is-stopping::before {
  content: ""; width: 11px; height: 11px; border-radius: 3px; background: #fff;
  animation: stopPulse 1.1s ease-in-out infinite;
}
@keyframes stopPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Deep Research live progress (chips + beams + merge) ── */
.deep-prog { display: flex; flex-direction: column; gap: 4px; padding: 2px 0; min-width: 240px; }
.dp-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-2);
}
.dp-head .dp-spark {
  color: var(--accent-l);
  animation: deSparkSpin 3s ease-in-out infinite;
}
.dp-headtxt { flex: 1; min-width: 0; }
.dp-timer { color: var(--fg-4); font-variant-numeric: tabular-nums; }
.dp-chips { display: flex; gap: 8px; }
.dp-chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg-3);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-2);
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s;
  animation: dpIn .35s ease both;
}
.dp-chip:nth-child(2) { animation-delay: .06s; }
.dp-chip:nth-child(3) { animation-delay: .12s; }
.dp-chip .dp-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #06070a;
  background: var(--line-3); transition: background .3s, box-shadow .3s;
}
.dp-chip.claude .dp-dot { animation: dpPulse 1.3s ease-in-out infinite; background: rgba(229,85,47,.5); }
.dp-chip.gpt .dp-dot    { animation: dpPulse 1.3s ease-in-out infinite .25s; background: rgba(16,163,127,.5); }
.dp-chip.gem .dp-dot    { animation: dpPulse 1.3s ease-in-out infinite .5s; background: rgba(124,58,237,.5); }
@keyframes dpPulse { 0%,100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
.dp-chip.done { color: var(--fg); }
.dp-chip.claude.done { border-color: rgba(229,85,47,.5); box-shadow: 0 0 14px rgba(229,85,47,.2); }
.dp-chip.gpt.done    { border-color: rgba(16,163,127,.5); box-shadow: 0 0 14px rgba(16,163,127,.2); }
.dp-chip.gem.done    { border-color: rgba(124,58,237,.5); box-shadow: 0 0 14px rgba(124,58,237,.2); }
.dp-chip.done .dp-dot { animation: none; }
.dp-chip.claude.done .dp-dot { background: #E5552F; }
.dp-chip.gpt.done .dp-dot    { background: #10A37F; }
.dp-chip.gem.done .dp-dot    { background: #b57bff; }
.dp-chip.failed { color: var(--neg); opacity: .7; }
.dp-chip.failed .dp-dot { background: var(--neg); animation: none; }
.dp-beams { width: 100%; height: 26px; display: block; overflow: visible; }
.dp-beam { fill: none; stroke-width: 2; stroke-linecap: round; opacity: .18;
  stroke-dasharray: 90; stroke-dashoffset: 90; transition: opacity .3s; }
.dp-beam.b-claude { stroke: #E5552F; } .dp-beam.b-openai { stroke: #10A37F; } .dp-beam.b-gemini { stroke: #b57bff; }
.dp-beam.flow { opacity: .9; animation: dpFlow .7s ease forwards; }
@keyframes dpFlow { to { stroke-dashoffset: 0; } }
.dp-merge {
  display: flex; align-items: center; gap: 9px; margin-top: 2px;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); transition: color .3s;
}
.dp-merge.active { color: var(--accent-l); }
.dp-mspark { font-size: 16px; color: var(--fg-4); transition: color .3s; }
.dp-merge.active .dp-mspark { color: var(--accent-l); animation: deSparkSpin 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(229,85,47,.6)); }
@keyframes dpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dp-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line-3); border-top-color: var(--accent);
  display: inline-block; animation: dpSpin .7s linear infinite;
}
@keyframes dpSpin { to { transform: rotate(360deg); } }

/* ── Finished Deep answer: entrance, badge, stat, sources, takes ── */
.deep-answer { animation: deepMergeIn .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes deepMergeIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* The assistant card is always a light "paper" surface, so deep-answer
   sub-elements use explicit dark-on-light colours (theme vars would flip to
   light text in deep-mode and vanish on the light card). */
.deep-took { font-family: var(--mono); font-size: 10.5px; color: #6b665c; letter-spacing: .04em; }
.msg-content.typing::after {
  content: "▍"; color: var(--accent); margin-left: 1px;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.deep-sources { margin-top: 12px; }
.ds-title, .deep-takes summary {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #5a554c;
}
.ds-title { margin-bottom: 7px; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 240px;
  padding: 5px 10px; border-radius: 99px;
  font-size: 11px; color: #3a352e; text-decoration: none;
  background: rgba(33,28,23,.05); border: 1px solid rgba(33,28,23,.20);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s, color .15s, background .15s;
}
.ds-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(229,85,47,.08); }
.deep-takes { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.deep-takes summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.deep-takes summary::-webkit-details-marker { display: none; }
.deep-takes .dt-chev { transition: transform .2s; display: inline-block; }
.deep-takes[open] .dt-chev { transform: rotate(90deg); }
.dt-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px;
  animation: dpIn .3s ease both; }
.dt-item { border-left: 2px solid var(--line-3); padding-left: 12px; }
.dt-item.dt-claude { border-color: #E5552F; }
.dt-item.dt-gpt    { border-color: #10A37F; }
.dt-item.dt-gem    { border-color: #b57bff; }
.dt-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; margin-bottom: 5px; }
.dt-item.dt-claude .dt-label { color: #C8431F; }
.dt-item.dt-gpt .dt-label    { color: #0d8f6f; }
.dt-item.dt-gem .dt-label    { color: #6d28d9; }
.dt-text { font-size: 13px; color: #3a352e; line-height: 1.55; }
.dt-text > *:last-child { margin-bottom: 0; }
#ms-upload-drop:hover { border-color: var(--accent) !important; background: var(--ink-2); }

/* typing indicator */
.typing-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 3px;
  animation: tp 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes tp {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%            { opacity: 1;   transform: translateY(-2px); }
}

/* ── Floating pill composer ── */

.composer {
  /* Column so the attachment strip stacks ABOVE the input. As a row it sat
     beside .composer-inner and squeezed the message box narrower. */
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 8px 20px 20px;
  border-top: none;
  background: transparent;
  flex-shrink: 0;
  position: relative;
}
/* Fade gradient so messages don't abruptly end behind the composer */
.composer::before {
  content: "";
  position: absolute; top: -28px; left: 0; right: 0; height: 28px;
  background: linear-gradient(to bottom, transparent, var(--ink-1));
  pointer-events: none;
}
.composer-inner {
  flex: 1; display: flex; align-items: flex-end;
  border: 1px solid var(--line-3);
  border-radius: 28px;
  background: var(--ink-3);
  /* width:100% is REQUIRED now the composer is a column: with only
     `margin: 0 auto` the auto side-margins make this box size to its content
     (buttons + textarea intrinsic width) instead of the container, so it
     overflowed the viewport and clipped the send button off the right edge.
     100% + max-width + auto margins = fill on mobile, centre on desktop. */
  width: 100%; max-width: 860px; margin: 0 auto;
  box-sizing: border-box;
  min-width: 0; /* allow shrink to fit narrow viewports */
  position: relative; z-index: 1;
  box-shadow: 0 4px 22px rgba(0,0,0,.22);
  transition: border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.composer-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash), 0 6px 28px rgba(0,0,0,.28);
}
.composer textarea {
  flex: 1;
  min-width: 0; /* override textarea's intrinsic cols width so it can shrink */
  background: transparent; border: none; outline: none;
  color: var(--fg); padding: 13px 18px;
  font-family: var(--sans); font-size: 15px; resize: none;
  max-height: 200px; line-height: 1.55;
  border-radius: 28px 0 0 28px;
}
.composer textarea::placeholder { color: var(--fg-4); }
.send-btn {
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: 50%;
  margin: 6px 6px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: filter 120ms, transform 100ms;
}
.send-btn svg { width: 14px; height: 14px; }
.send-btn:hover { filter: brightness(1.1); transform: scale(1.04); }
.send-btn:disabled { background: var(--ink-4); color: var(--fg-4); cursor: not-allowed; filter: none; transform: none; }

/* ── Deep Research toggle button ── */
.deep-btn {
  display: none; /* hidden for free users; shown via body.is-plus */
  align-self: flex-end;
  align-items: center; gap: 6px;
  height: 36px;
  margin: 0 2px 6px 0;
  padding: 0 14px;
  border-radius: 99px;
  font-size: 12px; font-weight: 700; font-family: var(--mono);
  letter-spacing: .04em;
  /* Off state is now a clear ember-tinted pill (not a muted grey icon) */
  color: var(--accent-l);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  cursor: pointer; flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .1s ease;
}
body.is-plus .deep-btn { display: inline-flex; }
.deep-btn .deep-ico {
  font-size: 13px; line-height: 1; color: var(--accent);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .2s ease;
}
.deep-btn .deep-label { line-height: 1; }

/* Hover (off state) */
.deep-btn:hover {
  color: var(--fg);
  background: var(--ink-3);
  border-color: rgba(229,85,47,.4);
}
.deep-btn:hover .deep-ico { transform: rotate(90deg) scale(1.12); color: var(--accent); }

/* Press */
.deep-btn:active { transform: scale(.95); }

/* ON state — armed, premium gradient with animated shimmer + glow */
.deep-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent) 0%, #F2693E 35%, #D98A2B 70%, var(--accent) 100%);
  background-size: 220% 100%;
  box-shadow: 0 3px 16px rgba(229,85,47,.45), 0 0 0 1px rgba(229,85,47,.35);
  animation: deepFlow 4.5s ease infinite;
}
.deep-btn.active .deep-ico {
  color: #fff;
  animation: deepSpark 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
}
.deep-btn.active:hover { filter: brightness(1.06); }
.deep-btn.active:hover .deep-ico { transform: none; }

@keyframes deepFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes deepSpark {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(180deg) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .deep-btn.active, .deep-btn.active .deep-ico { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   DEEP RESEARCH MODE — whole-app transformation while armed
   (body.deep-mode toggled with the Deep button)
   ══════════════════════════════════════════════════════════ */
/* Smooth retint of the major surfaces when entering / leaving deep mode */
body, .app-topbar, .rail, .sidebar, .main, .view,
.composer-inner, .msg.assistant .msg-body, .send-btn, .stat-bar {
  transition: background-color .5s ease, border-color .5s ease,
              box-shadow .5s ease, color .35s ease;
}

body.deep-mode {
  /* Accent shifts to a research violet — the fusion of all three models */
  --accent:      #9b6dff;
  --accent-d:    #7c4dff;
  --accent-l:    #b794ff;
  --accent-wash: rgba(155,109,255,.12);
  --accent-glow: rgba(155,109,255,.32);
  --c-chat:      #9b6dff;
  /* A clearly violet-tinted research space — distinct from the neutral dark
     theme (so switching from dark reads as a real hue shift, not dark→dark). */
  --ink-1: #0c0920;
  --ink-2: #120e2a;
  --ink-3: #191534;
  --ink-4: #221b42;
  --ink-5: #2b2250;
  --line-3: rgba(183,148,255,.24);
  background: #0c0920;
}

/* Aurora wash behind the chat column (tri-model colours, gently drifting) */
.main { position: relative; }
body.deep-mode .main::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 52% at 50% 26%, rgba(139,92,255,.26), transparent 72%),
    radial-gradient(50% 44% at 10% 2%,  rgba(124,77,255,.34), transparent 70%),
    radial-gradient(46% 42% at 97% 12%, rgba(16,163,127,.22), transparent 70%),
    radial-gradient(54% 48% at 82% 99%, rgba(229,85,47,.22),  transparent 70%);
  animation: deepAuraIn .75s ease both, deepAura 16s ease-in-out .75s infinite alternate;
}
body.deep-mode .main > * { position: relative; z-index: 1; }

@keyframes deepAuraIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes deepAura {
  0%   { transform: translate3d(0,0,0)      scale(1);   }
  50%  { transform: translate3d(2%,-1.5%,0) scale(1.06);}
  100% { transform: translate3d(-1.5%,1%,0) scale(1.03);}
}

/* Top ribbon announcing the mode (transient, non-blocking) */
body.deep-mode::after {
  content: "✦  DEEP RESEARCH  ·  CLAUDE + CHATGPT + GEMINI";
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .26em;
  white-space: nowrap; overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #E5552F, #10A37F, #7c4dff, #E5552F);
  background-size: 300% 100%;
  box-shadow: 0 2px 26px rgba(124,77,255,.55);
  pointer-events: none;
  animation: deepBarIn .45s cubic-bezier(.22,1,.36,1) both, deepFlow 7s linear infinite;
}
@keyframes deepBarIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Composer becomes the focal point: animated tri-model gradient border + glow */
body.deep-mode .composer-inner {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    linear-gradient(120deg, #E5552F, #10A37F, #7c4dff, #E5552F) border-box;
  background-size: 100% 100%, 280% 100%;
  box-shadow: 0 0 28px rgba(124,77,255,.28), 0 6px 30px rgba(0,0,0,.45);
  animation: deepFlow 7s linear infinite;
}
body.deep-mode .composer-inner:focus-within {
  box-shadow: 0 0 0 2px rgba(155,109,255,.55), 0 0 44px rgba(124,77,255,.4);
}
/* Typed text turns research-violet while Deep Research is armed */
body.deep-mode .composer textarea {
  color: #d9c9ff;
  caret-color: #b794ff;
}
/* In deep-mode the user bubble background goes dark, so its text must go light */
body.deep-mode .msg.user .msg-content { color: #ece7f7; }
body.deep-mode .msg.user .msg-role { color: rgba(236,231,247,.6); }
body.deep-mode .composer textarea::placeholder { color: rgba(183,148,255,.55); }

/* Greeting becomes "Deep Research active" with a flowing tri-model gradient */
body.deep-mode .empty-greeting {
  background: linear-gradient(110deg, #F2693E, #10A37F 35%, #b794ff 65%, #F2693E);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(124,77,255,.4));
  animation: deepFlow 5s linear infinite, deBreathe 3.4s ease-in-out infinite;
}
body.deep-mode .empty-when {
  color: var(--accent-l); letter-spacing: .16em;
  animation: deFadePulse 3s ease-in-out infinite;
}
/* Hide the quick-prompt chips while in Deep Research — keep the focus clean */
body.deep-mode .prompt-chips { display: none !important; }

/* Logo gains a pulsing violet halo in deep mode */
body.deep-mode .empty-logo {
  filter: drop-shadow(0 0 22px rgba(124,77,255,.55));
  animation: deLogoFloat 4s ease-in-out infinite;
}
@keyframes deBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes deFadePulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes deLogoFloat {
  0%,100% { transform: translateY(0); filter: drop-shadow(0 0 18px rgba(124,77,255,.45)); }
  50%     { transform: translateY(-6px); filter: drop-shadow(0 0 30px rgba(124,77,255,.7)); }
}

/* Pevra's avatar + active rail item pick up the research glow */
body.deep-mode .rail-btn.active { box-shadow: 0 0 0 1px var(--accent-wash), 0 0 14px rgba(155,109,255,.3); }

@media (prefers-reduced-motion: reduce) {
  body.deep-mode .main::before,
  body.deep-mode::after,
  body.deep-mode .composer-inner { animation: none; }
}

/* ── Deep Research explainer card (floats above composer when armed) ── */
.deep-explainer {
  position: fixed;
  left: 50%;
  bottom: 152px;
  width: min(430px, calc(100vw - 28px));
  z-index: 60;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(22px) scale(.94);
  background: linear-gradient(165deg, rgba(22,19,36,.97), rgba(11,10,19,.97));
  border: 1px solid rgba(155,109,255,.32);
  border-radius: 20px;
  padding: 18px 18px 15px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 50px rgba(124,77,255,.22), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
body.deep-mode .deep-explainer:not(.dismissed) {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: deCardGlow 4s ease-in-out infinite;
}
@keyframes deCardGlow {
  0%,100% { box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 40px rgba(124,77,255,.18), inset 0 1px 0 rgba(255,255,255,.05); }
  50%     { box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 64px rgba(124,77,255,.36), inset 0 1px 0 rgba(255,255,255,.05); }
}

/* moving sheen across the top */
.de-shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #E5552F, #10A37F, #b794ff, transparent);
  background-size: 200% 100%;
}
body.deep-mode .deep-explainer:not(.dismissed) .de-shimmer { animation: deSheen 3.5s linear infinite; }
@keyframes deSheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.de-close {
  position: absolute; top: 11px; right: 11px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--fg-3); font-size: 11px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .2s;
}
.de-close:hover { background: rgba(255,255,255,.12); color: #fff; transform: rotate(90deg); }

/* staggered reveal of inner blocks */
body.deep-mode .deep-explainer:not(.dismissed) .de-head,
body.deep-mode .deep-explainer:not(.dismissed) .de-models,
body.deep-mode .deep-explainer:not(.dismissed) .de-flow,
body.deep-mode .deep-explainer:not(.dismissed) .de-result,
body.deep-mode .deep-explainer:not(.dismissed) .de-foot {
  animation: deRise .5s cubic-bezier(.16,1,.3,1) both;
}
body.deep-mode .deep-explainer:not(.dismissed) .de-head   { animation-delay: .08s; }
body.deep-mode .deep-explainer:not(.dismissed) .de-models { animation-delay: .16s; }
body.deep-mode .deep-explainer:not(.dismissed) .de-flow   { animation-delay: .24s; }
body.deep-mode .deep-explainer:not(.dismissed) .de-result { animation-delay: .30s; }
body.deep-mode .deep-explainer:not(.dismissed) .de-foot   { animation-delay: .38s; }
@keyframes deRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.de-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding-right: 22px; }
.de-spark {
  font-size: 24px; line-height: 1;
  background: linear-gradient(135deg, #F2693E, #10A37F, #b794ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 8px rgba(155,109,255,.5));
  animation: deSparkSpin 3s ease-in-out infinite;
}
@keyframes deSparkSpin { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.18); } }
.de-title { font-family: var(--serif, var(--sans)); font-size: 15px; font-weight: 800; color: #F5F0E8; letter-spacing: -.01em; }
.de-sub   { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }

.de-models { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.de-model {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 10px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
}
.de-model b { font-size: 12px; color: var(--fg); font-weight: 600; }
.de-model small { font-size: 9.5px; color: var(--fg-3); line-height: 1.2; }
.de-dot { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 2px; }
.de-model.claude .de-dot { background: #E5552F; box-shadow: 0 0 8px #E5552F; }
.de-model.gpt    .de-dot { background: #10A37F; box-shadow: 0 0 8px #10A37F; }
.de-model.gem    .de-dot { background: #b57bff; box-shadow: 0 0 8px #b57bff; }
body.deep-mode .deep-explainer:not(.dismissed) .de-model.claude .de-dot { animation: dePulse 1.6s ease-in-out infinite; }
body.deep-mode .deep-explainer:not(.dismissed) .de-model.gpt    .de-dot { animation: dePulse 1.6s ease-in-out infinite .3s; }
body.deep-mode .deep-explainer:not(.dismissed) .de-model.gem    .de-dot { animation: dePulse 1.6s ease-in-out infinite .6s; }
@keyframes dePulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.55); opacity: 1; } }

.de-flow { position: relative; width: 2px; height: 22px; margin: 7px auto 6px;
  background: linear-gradient(rgba(155,109,255,.12), rgba(155,109,255,.55)); }
.de-trav { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; border-radius: 50%;
  transform: translateX(-50%); background: #b794ff; box-shadow: 0 0 10px #b794ff; opacity: 0; }
body.deep-mode .deep-explainer:not(.dismissed) .de-trav { animation: deTravel 1.5s ease-in-out infinite; }
@keyframes deTravel { 0% { top: -3px; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { top: 22px; opacity: 0; } }

.de-result {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto; padding: 9px 16px; width: fit-content;
  font-size: 12.5px; font-weight: 700; color: #fff;
  border-radius: 99px;
  background: linear-gradient(120deg, rgba(229,85,47,.22), rgba(16,163,127,.18), rgba(124,77,255,.24));
  border: 1px solid rgba(155,109,255,.4);
}
.de-rspark { color: #b794ff; animation: deSparkSpin 3s ease-in-out infinite .5s; }
.de-foot { margin-top: 13px; font-size: 11px; line-height: 1.5; color: var(--fg-3); text-align: center; }

/* result pill breathes its glow */
body.deep-mode .deep-explainer:not(.dismissed) .de-result { animation: deResultGlow 2.6s ease-in-out infinite; }
@keyframes deResultGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(155,109,255,0); }
  50%     { box-shadow: 0 0 22px 2px rgba(155,109,255,.4); }
}
/* head spark gently floats */
body.deep-mode .deep-explainer:not(.dismissed) .de-spark { animation: deSparkSpin 3s ease-in-out infinite, deLogoFloat 4.5s ease-in-out infinite; }

/* "Don't show again" */
.de-hide {
  display: block; margin: 12px auto 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--fg-4); text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.de-hide:hover { color: var(--accent-l); }
/* add it to the staggered reveal */
body.deep-mode .deep-explainer:not(.dismissed) .de-hide {
  animation: deRise .5s cubic-bezier(.16,1,.3,1) both .44s;
}


@media (max-width: 760px) {
  .deep-explainer { bottom: 150px; padding: 15px 15px 13px; }
  .de-model small { display: none; }
  }
@media (max-width: 480px) {
  /* keep the deep-mode ribbon on one line on small phones */
  body.deep-mode::after { font-size: 8.5px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .deep-explainer, .deep-explainer * { animation: none !important; }
}

.disclaimer {
  text-align: center; font-family: var(--mono); font-size: 10px;
  color: var(--fg-4); padding: 6px 0 0; letter-spacing: .04em;
  max-width: 860px; margin: 0 auto; width: 100%;
}

/* ══════════════════════════
   STATS BAR
══════════════════════════ */
.stats-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
  flex-shrink: 0;
  overflow-x: auto;
}
.stat-card {
  padding: 14px 22px 16px;
  border-right: 1px solid var(--line);
  min-width: 110px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card:last-child { border-right: none; }
.stat-val { font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.stat-key { font-family: var(--mono); font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .10em; }

/* ══════════════════════════
   SPLIT LAYOUT
══════════════════════════ */
.split-layout {
  display: flex; flex: 1; overflow: hidden;
}
.split-left {
  flex: 1.2; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); overflow: hidden;
}
.split-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
  flex-shrink: 0; height: 44px;
}
.panel-title { font-size: 13px; font-weight: 600; color: var(--fg); }

/* ══════════════════════════
   TRADING VIEW
══════════════════════════ */
.filter-tabs { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ftab {
  background: none; border: none; border-right: 1px solid var(--line);
  color: var(--fg-3);
  padding: 4px 11px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  transition: background 120ms, color 120ms;
}
.ftab:last-child { border-right: none; }
.ftab:hover { background: var(--ink-3); color: var(--fg); }
.ftab.active { background: var(--ink-3); color: var(--fg); }

.trade-table-wrap { flex: 1; overflow-y: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  font-family: var(--mono); color: var(--fg-3); text-transform: uppercase;
  font-size: 10px; letter-spacing: .10em; font-weight: 500;
  padding: 10px 22px; text-align: left;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1); position: sticky; top: 0; z-index: 1;
}
.data-table td { padding: 11px 22px; border-bottom: 1px solid var(--line); color: var(--fg); }
.data-table tr:hover td { background: var(--ink-2); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); padding: 2px 7px; border-radius: 3px;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
}
.badge-paper  { background: rgba(45,143,176,.08); color: var(--c-web); border: 1px solid rgba(45,143,176,.3); }
.badge-live   { background: var(--pos-wash); color: var(--pos); border: 1px solid rgba(92,219,149,.3); }
.badge-closed { background: transparent; color: var(--fg-3); border: 1px solid var(--line-2); }
.badge-buy    { background: var(--pos-wash); color: var(--pos); border: 1px solid rgba(92,219,149,.3); }
.badge-sell   { background: var(--neg-wash); color: var(--neg); border: 1px solid rgba(255,107,107,.3); }

.pnl-pos { color: var(--pos); font-family: var(--mono); font-weight: 500; }
.pnl-neg { color: var(--neg); font-family: var(--mono); font-weight: 500; }

.empty-table { text-align: center; padding: 40px; color: var(--fg-3); font-size: 13px; }

.sub-messages {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.sub-composer {
  border-top: 1px solid var(--line);
  padding: 10px 14px 10px;
  background: var(--ink-1);
}
.sub-composer textarea {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line-2);
  color: var(--fg); padding: 8px 12px; border-radius: var(--r);
  font-family: var(--sans); font-size: 13px; resize: none; outline: none;
  max-height: 120px; line-height: 1.5; display: block;
  transition: border-color 150ms;
}
.sub-composer textarea:focus { border-color: var(--accent); }

/* ══════════════════════════
   WEBSITE VIEW
══════════════════════════ */
.website-layout { display: flex; flex: 1; overflow: hidden; }
.website-tools {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); overflow-y: auto;
}
.website-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.tool-card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 8px; cursor: pointer; text-align: center;
  transition: background 150ms, border-color 150ms;
}
.tool-card:hover { background: var(--ink-3); border-color: var(--accent); }
.tc-icon { font-size: 18px; margin-bottom: 4px; }
.tc-label { font-size: 11px; font-weight: 600; color: var(--fg); }

/* ── shared form helpers ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--fg-3); }
.form-input {
  background: var(--ink-2); border: 1px solid var(--line-2); color: var(--fg);
  padding: 9px 11px; border-radius: var(--r); font-family: var(--sans); font-size: 13px;
  outline: none; transition: border-color 120ms, box-shadow 120ms;
  -webkit-appearance: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.form-input::placeholder { color: var(--fg-4); }
select.form-input { cursor: pointer; }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.form-input-sm { padding: 5px 8px; font-size: 12px; }

/* ══════════════════════════
   SEARCH VIEW
══════════════════════════ */
.search-wrap { flex: 1; overflow-y: auto; padding: 24px 32px; max-width: 800px; }
.search-bar-row { display: flex; gap: 8px; margin-bottom: 20px; }
.search-main-input {
  flex: 1; padding: 10px 14px; font-size: 15px;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--fg); outline: none;
  font-family: var(--sans);
  transition: border-color 150ms, box-shadow 150ms;
}
.search-main-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.search-loading, .search-empty { color: var(--fg-3); padding: 20px 0; font-family: var(--mono); font-size: 12px; }
.search-result-card {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 8px;
  transition: border-color .12s;
}
.search-result-card:hover { border-color: var(--line-2); }
.search-result-domain { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-bottom: 4px; letter-spacing: .04em; }
.search-result-title { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; display: block; margin-bottom: 6px; letter-spacing: -.01em; }
.search-result-title:hover { text-decoration: underline; }
.search-result-snippet { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin-bottom: 8px; }
.search-result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-result-url { font-family: var(--mono); font-size: 10px; color: var(--fg-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }

/* ══════════════════════════
   SETTINGS / INTEGRATIONS
══════════════════════════ */
.settings-wrap { flex: 1; overflow-y: auto; padding: 24px 32px; max-width: 680px; }
.settings-section { margin-bottom: 28px; }
.settings-heading {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  margin-bottom: 12px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .12em;
}
.settings-desc { font-size: 13px; color: var(--fg-2); margin-bottom: 10px; line-height: 1.5; }
.settings-info-banner {
  font-size: 13px; line-height: 1.6; color: var(--fg-2);
  background: rgba(51,128,255,.08); border: 1px solid rgba(51,128,255,.25);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 12px;
}
.push-health-panel { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.push-health-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); }
.push-health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.push-health-dot.ok { background: #22c55e; }
.push-health-dot.fail { background: #ef4444; }
.push-health-dot.warn { background: #f59e0b; }
.push-health-dot.pending { background: var(--fg-4); }
.brief-preview {
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--line);
  white-space: pre-wrap; font-size: 13px; line-height: 1.7; color: var(--fg-2);
}
.brief-preview .brief-title { font-weight: 600; color: var(--fg); font-size: 14px; margin-bottom: 8px; }
.settings-card {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 10px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.settings-value { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.settings-value-sm { font-family: var(--mono); font-size: 10px; color: var(--fg-4); margin-top: 2px; letter-spacing: .04em; }

.memory-add-row { display: flex; gap: 8px; margin-top: 8px; }
.memory-add-row .form-input { flex: 1; }
.memory-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.memory-item:last-child { border-bottom: none; }
.mem-key { font-family: var(--mono); font-weight: 600; font-size: 11px; min-width: 80px; color: var(--accent); }
.mem-val { flex: 1; font-size: 13px; color: var(--fg-2); }
.mem-del { background: none; border: none; color: var(--fg-4); cursor: pointer; font-size: 14px; transition: color .12s; padding: 2px 4px; line-height: 1; }
.mem-del:hover { color: var(--neg); }

/* Integrations */
.intg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.intg-card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; display: flex; align-items: center; gap: 12px;
}
.intg-card.connected { border-color: rgba(92,219,149,.3); }
.intg-icon { font-size: 24px; flex-shrink: 0; }
.intg-info { flex: 1; min-width: 0; }
.intg-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.intg-account { font-family: var(--mono); font-size: 10px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.intg-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 3px; flex-shrink: 0;
}
.intg-badge.on  { background: var(--pos-wash); color: var(--pos); border: 1px solid rgba(92,219,149,.3); }
.intg-badge.off { background: transparent; color: var(--fg-3); border: 1px solid var(--line-2); }

.intg-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.intg-tabs {
  display: flex; gap: 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.intg-tab {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg-3);
  padding: 8px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  transition: color .12s, border-color .12s;
}
.intg-tab:hover { color: var(--fg-2); }
.intg-tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.intg-tab-panel { }
.intg-tab-panel.hidden { display: none; }

.file-list { display: flex; flex-direction: column; gap: 4px; }
.file-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 12px;
}
.file-item-icon { font-size: 14px; flex-shrink: 0; }
.file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--fg); }
.file-item-meta { font-family: var(--mono); color: var(--fg-4); font-size: 10px; }
.file-item a { color: var(--accent); text-decoration: none; font-family: var(--mono); font-size: 10px; }
.file-item a:hover { text-decoration: underline; }

.file-browser { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 0; }
.fentry {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 5px 10px; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; gap: 6px;
  transition: border-color .12s, background .12s;
}
.fentry:hover { border-color: var(--accent); background: var(--ink-3); }
.fentry.file { color: var(--fg-2); }
.fentry.dir  { color: var(--accent); }

.monitor-auto-badge {
  font-family: var(--mono); font-size: 10px; color: var(--pos);
  background: var(--pos-wash); padding: 2px 8px; border-radius: 3px;
  border: 1px solid rgba(92,219,149,.3); letter-spacing: .04em;
}
.site-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 5px;
}
.site-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.site-status.up   { background: var(--pos); box-shadow: 0 0 6px var(--pos); }
.site-status.down { background: var(--neg); box-shadow: 0 0 6px var(--neg); }
.site-status.unknown { background: var(--fg-4); }
.site-info { min-width: 0; }
.site-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.site-url-text { font-family: var(--mono); font-size: 10px; color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.site-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.site-status-badge { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; letter-spacing: .04em; }
.site-status-badge.up   { color: var(--pos); background: var(--pos-wash); }
.site-status-badge.down { color: var(--neg); background: var(--neg-wash); }
.site-status-badge.unknown { color: var(--fg-3); background: transparent; }
.site-ms { font-family: var(--mono); font-size: 10px; color: var(--fg-4); }
.site-actions { display: flex; gap: 4px; flex-shrink: 0; }

.uptime-dots { display: flex; gap: 2px; align-items: center; }
.uptime-dot { width: 5px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.uptime-dot.up   { background: var(--pos); }
.uptime-dot.down { background: var(--neg); }
.uptime-dot.unknown { background: var(--ink-4); }

.history-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fg-2);
}
.history-row:last-child { border-bottom: none; }
.history-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.history-dot.up   { background: var(--pos); }
.history-dot.down { background: var(--neg); }

.activity-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); font-size: 12px;
}
.activity-item:last-child { border-bottom: none; }
.activity-service {
  font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 6px; border-radius: 3px;
  background: var(--ink-3); color: var(--fg-3); flex-shrink: 0;
}
.activity-action { flex: 1; color: var(--fg-2); }
.activity-time { font-family: var(--mono); font-size: 10px; color: var(--fg-4); flex-shrink: 0; }
.activity-item.error .activity-action { color: var(--neg); }

/* ══════════════════════════
   MODALS
══════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r2); padding: 24px; width: 460px; max-width: 95vw;
  box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ══════════════════════════
   TOAST
══════════════════════════ */
.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 10px 16px;
  font-family: var(--mono); font-size: 12px;
  box-shadow: var(--shadow); max-width: 320px;
  animation: slideUp .2s ease;
}
.toast.hidden { display: none; }
.toast.success { border-color: rgba(92,219,149,.4); color: var(--pos); }
.toast.error   { border-color: rgba(255,107,107,.4); color: var(--neg); }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Gentle "new version — tap to update" pill for long-open sessions */
.pevra-update-banner {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); z-index: 500;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink, #fff); border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  padding: 10px 18px; border-radius: 999px; max-width: calc(100vw - 32px);
  box-shadow: 0 10px 34px -6px var(--accent-glow, rgba(229,85,47,.5)), 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .35s ease, transform .45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.pevra-update-banner.show { opacity: 1; transform: translate(-50%, 0); }
.pevra-update-banner:hover { filter: brightness(1.06); }
.pevra-update-banner:active { transform: translate(-50%, 1px) scale(.98); }
.pevra-update-banner.updating { opacity: .6; pointer-events: none; }
.pevra-update-banner .bub-spark { font-size: 12px; }

/* ══════════════════════════
   NOTIFICATIONS PANEL
══════════════════════════ */
.notif-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.4);
}
.notif-overlay.hidden { display: none; }
.notif-panel {
  position: absolute;
  left: calc(var(--rail-w) + 8px);
  bottom: 12px;
  width: 340px; max-width: calc(100vw - 24px);
  max-height: 70vh;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r2); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp .15s ease;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.notif-head .t { font-size: 13px; font-weight: 600; }
.notif-head .mark-all {
  background: none; border: none; color: var(--fg-3); cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
}
.notif-head .mark-all:hover { color: var(--accent); }
.notif-list { flex: 1; overflow-y: auto; }
.notif-item {
  position: relative;
  display: flex; gap: 12px; padding: 13px 16px 13px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .18s ease;
}
.notif-item:hover { background: var(--ink-3); }
/* unread: accent left-bar + faint wash, both melt away when marked read */
.notif-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 0 2px 2px 0;
  transform: scaleY(0); transform-origin: center;
  transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.notif-item.unread { background: rgba(229,85,47,.05); }
.notif-item.unread::before { transform: scaleY(1); }

.notif-item .ni-chip {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
  background: var(--ink-4, rgba(255,255,255,.05)); color: var(--fg-2);
  border: 1px solid var(--glass-line, var(--line-2));
}
.notif-item .ni-chip.brief  { background: rgba(255,176,90,.14); color: #ffb968; border-color: rgba(255,176,90,.28); }
.notif-item .ni-chip.ok     { background: rgba(34,197,94,.14);  color: #34d778; border-color: rgba(34,197,94,.28); }
.notif-item .ni-chip.danger { background: rgba(239,68,68,.15);  color: #f26d6d; border-color: rgba(239,68,68,.30); }
.notif-item .ni-chip.accent { background: var(--accent-wash, rgba(229,85,47,.14)); color: var(--accent); border-color: rgba(229,85,47,.30); }

.notif-item .body-wrap { flex: 1; min-width: 0; }
.notif-item .ni-top { display: flex; align-items: baseline; gap: 8px; }
.notif-item .nt {
  font-size: 13px; font-weight: 600; color: var(--fg); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item .ntime { flex-shrink: 0; font-size: 10.5px; color: var(--fg-4); letter-spacing: .01em; }
.notif-item .nb {
  font-size: 12px; color: var(--fg-2); line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-empty { padding: 34px 14px; text-align: center; color: var(--fg-3); font-size: 13px; line-height: 1.6; }

/* date section headers */
.notif-section {
  position: sticky; top: 0; z-index: 1;
  padding: 11px 16px 6px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--fg-4);
  background: linear-gradient(var(--ink-2), var(--ink-2) 68%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* collapsible "earlier morning briefs" group */
.notif-group { border-bottom: 1px solid var(--line); }
.notif-group .ng-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 13px 14px; background: none; border: none; cursor: pointer;
  color: var(--fg-2); font-size: 13px; font-weight: 500; text-align: left;
}
.notif-group .ng-head:hover { background: var(--ink-3); }
.notif-group .ng-label { flex: 1; }
.notif-group .ng-chev { color: var(--fg-4); font-size: 16px; line-height: 1; transition: transform .25s var(--ease-out, ease); }
.notif-group.open .ng-chev { transform: rotate(90deg); }
.notif-group .ng-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out, ease); }
.notif-group.open .ng-body { max-height: 1600px; }
.notif-group .ng-body .notif-item { padding-left: 22px; background: rgba(0,0,0,.06); }

/* ── notification panel motion ── */
.notif-panel.opening { animation: notifPanelIn .32s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); transform-origin: bottom left; }
@keyframes notifPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.notif-panel.opening .notif-item,
.notif-panel.opening .notif-section,
.notif-panel.opening .notif-group {
  animation: notifRowIn .4s var(--ease-out, ease) both;
  animation-delay: calc(var(--i, 0) * 28ms + 60ms);
}
@keyframes notifRowIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.notif-panel.opening .ni-chip {
  animation: chipPop .5s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
  animation-delay: calc(var(--i, 0) * 28ms + 120ms);
}
@keyframes chipPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.bell-ring svg { animation: bellRing .9s var(--ease-out, ease); transform-origin: 50% 4px; }
@keyframes bellRing {
  0%,100% { transform: rotate(0); }
  10% { transform: rotate(15deg); } 22% { transform: rotate(-12deg); }
  34% { transform: rotate(9deg); }  46% { transform: rotate(-6deg); }
  58% { transform: rotate(3deg); }  70% { transform: rotate(-1deg); }
}
.topbar-notif-badge.pop, .notif-badge.pop { animation: badgePop .45s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes badgePop { 0% { transform: scale(.3); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Notification preference toggles */
.notif-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.notif-toggle-row:last-child { border-bottom: none; }
.notif-toggle-row .lbl { font-size: 13px; color: var(--fg); }
.notif-toggle-row .sub { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

/* ── Premium notifications section ─────────────────────────────── */
.notif-status {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--glass-line, var(--line-2)); border-radius: 14px;
  background: var(--glass-bg-2, var(--ink-2));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.notif-status .ns-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--fg-4); }
.notif-status .ns-text { flex: 1; min-width: 0; }
.notif-status .ns-title { font-size: 13.5px; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.notif-status .ns-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.notif-status .ns-action {
  flex-shrink: 0; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 10px;
  background: var(--grad-accent, var(--accent)); color: #fff;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.notif-status .ns-action:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px var(--accent-glow); }
.notif-status .ns-action:active { transform: translateY(0) scale(.97); }
.notif-status .ns-action.hidden { display: none; }
.notif-status[data-state="on"]      { border-color: rgba(34,197,94,.4); }
.notif-status[data-state="on"] .ns-dot { background: #22c55e; animation: nsPulse 2.4s ease infinite; }
.notif-status[data-state="off"] .ns-dot     { background: var(--fg-4); }
.notif-status[data-state="warn"] .ns-dot    { background: #f59e0b; }
.notif-status[data-state="blocked"]         { border-color: rgba(239,68,68,.35); }
.notif-status[data-state="blocked"] .ns-dot { background: #ef4444; }
.notif-status[data-state="unavailable"] .ns-dot { background: var(--fg-4); }
@keyframes nsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.nt-group-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-4); margin: 0 2px 8px;
}
.nt-group-label + .settings-card { margin-top: 0; }
.settings-card + .nt-group-label { margin-top: 18px; }

.notif-toggle-row .ntr-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.notif-toggle-row .ntr-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; border-radius: 9px; background: var(--ink-3, rgba(255,255,255,.04));
}

.notif-toggle-row.nt-child {
  overflow: hidden; max-height: 80px; opacity: 1;
  transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
}
.notif-toggle-row.nt-child .ntr-icon { background: transparent; }
.notif-toggle-row.nt-child.collapsed {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom: none;
}

.notif-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn-sm.ghost { background: transparent; }
.notif-result { margin-top: 10px; font-size: 12px; color: var(--fg-3); line-height: 1.6; }
.notif-result:empty { display: none; }

.notif-diag { margin-top: 16px; border-top: 1px solid var(--line); }
.notif-diag summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 12px 2px 4px;
  font-size: 12px; color: var(--fg-3); user-select: none;
}
.notif-diag summary::-webkit-details-marker { display: none; }
.notif-diag summary:hover { color: var(--fg-2); }
.notif-diag .nd-chevron { transition: transform .2s ease; font-size: 16px; color: var(--fg-4); line-height: 1; }
.notif-diag[open] .nd-chevron { transform: rotate(90deg); }
.notif-diag .nd-body { padding: 6px 2px 4px; }
.notif-diag .nd-body .btn-sm { margin-top: 12px; }

/* ── Home Screen Widget setup ── */
.widget-setup { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.widget-step { font-size: 13px; color: var(--fg-2); line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.widget-step .ws-n {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 1px;
  background: var(--accent-wash, rgba(229,85,47,.14)); color: var(--accent);
}
.widget-step a { color: var(--accent); font-weight: 600; }
.widget-step code {
  font-family: var(--mono, monospace); font-size: 11.5px;
  background: var(--ink-3, rgba(255,255,255,.05)); padding: 1px 5px; border-radius: 5px;
}
.widget-url-row { display: flex; gap: 8px; align-items: center; margin-left: 30px; }
.widget-url-row .form-input { flex: 1; font-size: 11px; font-family: var(--mono, monospace); }

/* ── Connected Apps ── */
.capps-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.capps-list:empty { display: none; margin: 0; }
.capp-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--glass-line, var(--line-2)); border-radius: 12px;
  background: var(--glass-bg-2, var(--ink-2));
}
.capp-ico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--accent-wash, rgba(229,85,47,.14)); color: var(--accent);
}
.capp-main { flex: 1; min-width: 0; }
.capp-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.capp-url { font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-4); flex-shrink: 0; transition: background .2s; }
.capp-dot.ok  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.capp-dot.bad { background: #ef4444; }
.capp-del { background: none; border: none; color: var(--fg-4); cursor: pointer; font-size: 15px; padding: 4px 2px; line-height: 1; }
.capp-del:hover { color: #ef4444; }
.capps-add-btn { margin-top: 2px; }
.capps-form {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 14px;
  border: 1px solid var(--glass-line, var(--line-2)); border-radius: 12px; background: var(--ink-2);
}
.capps-form textarea.form-input { resize: vertical; font-family: inherit; line-height: 1.45; }
.capps-auth summary { cursor: pointer; font-size: 12px; color: var(--fg-3); padding: 4px 0; }
.capps-auth-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.capps-form-actions { display: flex; gap: 8px; }
.capps-form-msg { font-size: 12px; color: var(--fg-3); min-height: 1em; }
.capps-form-msg.err { color: #ef4444; }
.capps-form-msg.ok  { color: #22c55e; }
.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ink-4); border: 1px solid var(--line-2);
  border-radius: 999px; transition: background .15s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 16px; width: 16px;
  left: 2px; bottom: 2px; background: var(--fg-3);
  border-radius: 50%; transition: transform .15s, background .15s;
}
.switch input:checked + .slider { background: var(--accent-wash); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); background: var(--accent); }

/* ══════════════════════════
   MOBILE TOP BAR (hidden on desktop)
══════════════════════════ */
.app-topbar { display: none; }

/* Bottom tab bar + More sheet: removed (kept hidden) */
.bottom-nav { display: none; }
.more-sheet-overlay { display: none; }
/* Drawer nav: mobile-only (desktop uses the rail) */
.drawer-nav { display: none; }
@keyframes moreFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes moreUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ══════════════════════════
   MOBILE / RESPONSIVE
══════════════════════════ */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 44;
  background: rgba(0,0,0,.55);
}

@media (max-width: 768px) {
  :root { --topbar-h: 56px; --bottom-nav-h: 58px; }

  /* ── Top bar ── */
  .app-topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--ink-1);
    border-bottom: 1px solid var(--line);
    z-index: 50;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
  }

  /* Minimal top bar: ☰ left · Pevra wordmark centred · actions right */
  .app-topbar { justify-content: space-between; }
  .topbar-mode-pills { display: none !important; }
  .topbar-logo {
    position: absolute; left: 0; right: 0;
    top: env(safe-area-inset-top, 0px); bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    filter: none; color: var(--fg); pointer-events: none;
  }
  .topbar-wordmark {
    font-size: 17px; font-weight: 700; letter-spacing: -.02em;
    /* subtle metallic sheen that sweeps across the wordmark */
    color: var(--fg);
    background: linear-gradient(100deg, var(--fg) 0%, var(--fg) 38%, var(--accent) 50%, var(--fg) 62%, var(--fg) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wordmarkSheen 6s var(--ease-in-out, cubic-bezier(.65,0,.35,1)) 1.2s infinite;
  }
  @keyframes wordmarkSheen {
    0%, 18% { background-position: 130% center; }
    50%     { background-position: -30% center; }
    82%,100%{ background-position: -30% center; }
  }
  .topbar-hamburger, .topbar-actions { flex: 0 0 auto; }

  /* ── Top bar: premium entrance + life ── */
  .app-topbar { animation: topbarDrop .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
  @keyframes topbarDrop {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* hairline of light that glides along the bottom edge */
  .app-topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    opacity: .7; pointer-events: none;
    animation: topbarSheen 7s linear 1s infinite;
  }
  @keyframes topbarSheen {
    0%   { background-position: -40% 0; }
    60%,100% { background-position: 140% 0; }
  }

  /* staggered entrance for the bar's three zones */
  .topbar-hamburger { animation: topItemIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) .12s both; }
  .topbar-logo      { animation: topItemIn .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) .18s both; }
  .topbar-actions   { animation: topItemIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) .24s both; }
  @keyframes topItemIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* the eclipse mark gently breathes a glow */
  .topbar-logo svg { animation: markBreath 4.5s var(--ease-in-out, cubic-bezier(.65,0,.35,1)) 1s infinite; }
  @keyframes markBreath {
    0%,100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
    50%     { filter: drop-shadow(0 0 7px var(--accent-glow)); transform: scale(1.06); }
  }

  /* bell wakes up and wiggles while there are unread alerts */
  #topbar-notif-btn:has(.topbar-notif-badge.show) svg {
    animation: bellRing 4s var(--ease-in-out, cubic-bezier(.65,0,.35,1)) infinite;
    transform-origin: top center;
  }
  @keyframes bellRing {
    0%, 70%, 100% { transform: rotate(0); }
    74% { transform: rotate(14deg); }
    78% { transform: rotate(-11deg); }
    82% { transform: rotate(7deg); }
    86% { transform: rotate(-4deg); }
    90% { transform: rotate(0); }
  }

  /* ── Drawer primary navigation (mobile) ── */
  .drawer-nav {
    display: flex; flex-direction: column; gap: 1px;
    padding: 12px 10px 8px;
    border-bottom: 1px solid var(--line);
  }
  .dnav-new {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 12px; margin-bottom: 8px;
    background: var(--accent); color: var(--accent-ink, #fff);
    border: none; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: transform var(--dur-1, .14s) ease, filter var(--dur-2, .28s) ease;
  }
  .dnav-new:active { transform: scale(.97); }
  .dnav-item {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 12px; border-radius: 10px;
    background: none; border: none; cursor: pointer; text-align: left;
    color: var(--fg-2); font-family: inherit; font-size: 14.5px; font-weight: 500;
    transition: background var(--dur-2, .28s) ease, color var(--dur-2, .28s) ease;
  }
  .dnav-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--fg-3); transition: color var(--dur-2, .28s) ease; }
  .dnav-item:active { background: var(--ink-3); }
  .dnav-item.active { background: var(--accent-wash); color: var(--accent); }
  .dnav-item.active svg { color: var(--accent); }

  /* Drawer scrolls as one column; footer sits at the bottom of the content */
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* The whole drawer is ONE scrolling column, so the conversations panel must
     flow with natural height — NOT be a nested flex:1/overflow:hidden box.
     That nesting (inside a scroll container, below the tall nav) collapsed the
     history list to near-zero height on mobile, so you could never see your
     past chats. Let it flow and let the sidebar scroll to reach everything. */
  .sidebar-panel { flex: 0 0 auto; overflow: visible; }
  .conv-list { flex: 0 0 auto; overflow: visible; min-height: 0; }
  /* Keep the "Conversations" header + search in view while the list scrolls */
  .sidebar-panel[data-panel="general"] .sidebar-head,
  .sidebar-panel[data-panel="general"] .conv-search-wrap {
    position: sticky; z-index: 1; background: var(--ink-1);
  }
  .sidebar-panel[data-panel="general"] .sidebar-head { top: 0; }
  .sidebar-panel[data-panel="general"] .conv-search-wrap { top: 47px; }

  /* ── Bottom tab bar REMOVED — navigation now lives in the drawer (.drawer-nav).
     Kept hidden; the styles below are inert. ── */
  .bottom-nav { display: none !important; }
  .bnav-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: var(--fg-4);
    font-family: inherit; font-size: 10px; font-weight: 600;
    letter-spacing: .01em;
    padding: 6px 2px 4px;
    transition: color var(--dur-1, .14s) ease, transform var(--dur-1, .14s) ease;
    position: relative;
  }
  .bnav-item svg { width: 24px; height: 24px; display: block; transition: transform var(--dur-2, .28s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
  .bnav-item span { line-height: 1; }
  .bnav-item.active { color: var(--accent); }
  .bnav-item.active svg { transform: translateY(-1px) scale(1.06); }
  .bnav-item:active { transform: scale(.92); }
  /* Active pip above the lit tab */
  .bnav-item.active::before {
    content: ""; position: absolute; top: 0;
    width: 22px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
  }

  /* ── "More" destination sheet ── */
  .more-sheet-overlay {
    display: flex; align-items: flex-end;
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: moreFade .2s ease;
  }
  .more-sheet-overlay.hidden { display: none; }
  .more-sheet {
    width: 100%;
    background: var(--ink-1);
    border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
    animation: moreUp .32s var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
  .more-sheet-grip {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--line-3, rgba(255,255,255,.18));
    margin: 0 auto 14px;
  }
  .more-sheet-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--fg-3); margin: 0 4px 12px;
  }
  .more-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  }
  .more-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--r3, 12px); cursor: pointer;
    color: var(--fg-2); font-family: inherit; font-size: 11px; font-weight: 600;
    padding: 14px 6px;
    transition: transform var(--dur-1, .14s) ease, border-color var(--dur-2, .28s) ease, background var(--dur-2, .28s) ease, color var(--dur-2, .28s) ease;
  }
  .more-item svg { color: var(--fg-3); transition: color var(--dur-2, .28s) ease; }
  .more-item:active { transform: scale(.94); }
  .more-item:hover { border-color: var(--accent); color: var(--fg); }
  .more-item:hover svg { color: var(--accent); }

  /* ── App shell ── */

  .topbar-hamburger {
    background: none; border: none; color: var(--fg-3); cursor: pointer;
    padding: 6px; border-radius: var(--r); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .topbar-hamburger:hover { background: var(--ink-3); }
  .topbar-hamburger svg { width: 22px; height: 22px; display: block; }

  .topbar-logo {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    filter: drop-shadow(0 0 8px rgba(51,128,255,.45));
  }

  .topbar-mode-pills {
    flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch; padding: 2px 0;
  }
  .topbar-mode-pills::-webkit-scrollbar { display: none; }

  .topbar-pill {
    flex-shrink: 0;
    background: transparent; border: 1px solid var(--line-2);
    border-radius: 99px; padding: 5px 12px;
    font-size: 11px; color: var(--fg-3); cursor: pointer;
    white-space: nowrap; transition: background 120ms, color 120ms, border-color 120ms;
  }
  .topbar-pill:hover { background: var(--ink-3); color: var(--fg); }
  .topbar-pill.active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

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

  .topbar-icon-btn {
    background: none; border: none; color: var(--fg-3); cursor: pointer;
    padding: 8px; border-radius: var(--r); position: relative;
    display: flex; align-items: center; justify-content: center;
  }
  .topbar-icon-btn:hover { background: var(--ink-3); color: var(--fg); }
  .topbar-icon-btn svg { width: 20px; height: 20px; display: block; }

  .topbar-notif-badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 14px; height: 14px; padding: 0 3px;
    background: var(--accent); color: var(--accent-ink);
    border-radius: 7px; font-size: 8px; font-weight: 600;
    display: none; align-items: center; justify-content: center; line-height: 1;
  }
  .topbar-notif-badge.show { display: flex; }

  /* ── App shell ── */
  .app {
    grid-template-columns: minmax(0, 1fr);
    /* dvh must come LAST so it wins on supporting browsers — 100vh is taller
       than the visible viewport on mobile and pushes the composer off-screen. */
    height: 100vh;
    height: 100dvh;
    padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  }

  /* Desktop rail: hidden on mobile */
  .rail { display: none !important; }

  /* Sidebar: slide-in from left, below topbar */
  .sidebar {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    left: 0; bottom: 0;
    width: 84vw; max-width: 300px;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    display: flex !important;
  }
  .app.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 28px rgba(0,0,0,.55);
  }
  .app.sidebar-open .sidebar-backdrop { display: block; }
  .sidebar-backdrop { top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }

  /* Notification panel: full-width below topbar */
  .notif-panel {
    left: 12px; right: 12px; width: auto;
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px);
    bottom: auto; max-height: 70vh;
  }

  /* Main fills single column */
  .main { grid-column: 1; }

  /* Prevent iOS input zoom */
  input, select, textarea, .form-input, .form-input-sm, .search-main-input {
    font-size: 16px !important;
  }
  .composer textarea { font-size: 16px !important; }

  /* Deep button + persona/attach icons are flex-shrink:0 (rigid); on narrow
     phones their combined width could exceed the composer, overflowing past
     the screen edge (clipped by html/body's overflow:hidden). Collapse the
     "Deep" text label to icon-only so the row always fits. */
  .deep-btn { padding: 0 11px; gap: 5px; }
  /* Keep the "Deep" label on mobile so the button actually reads as Deep
     Research (the textarea flexes to make room). */
  .deep-btn .deep-label { display: inline; font-size: 11px; }

  /* Chat */
  .messages { padding: 12px 0 12px; gap: 14px; }
  .messages > * { padding: 0 14px; }
  .msg { gap: 8px; }
  .msg-avatar { width: 26px; height: 26px; font-size: 11px; }
  .composer { padding: 8px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer-inner { border-radius: 22px; }
  .composer textarea { border-radius: 22px 0 0 22px; }
  .send-btn { width: 34px; height: 34px; margin: 5px 5px; }
  .deep-btn { height: 34px; margin: 0 2px 5px 0; padding: 0 12px; font-size: 11px; }
  .disclaimer { font-size: 10px; padding: 2px 0 4px; }

  /* Empty state — top-aligned & scrollable so it never clips the composer */
  .empty-state { padding: 28px 18px 16px; margin: 0 auto; }
  .empty-logo { width: 48px; height: 48px; margin-bottom: 16px; }
  .empty-greeting { font-size: 24px; }
  .empty-when { font-size: 10px; margin-bottom: 14px; }
  .mode-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; border: none; }
  .mode-card { border-radius: var(--r2); border: 1px solid var(--line); }
  .mc-desc { display: none; }

  /* View header — single header on mobile. The app-topbar IS the header, so
     drop the in-view duplicate hamburger + Pevra mark (and the whole chat
     header row, since the topbar + bottom nav already cover it). */
  .view-header { padding: 0 14px; gap: 8px; height: 42px; }
  .view-title { font-size: 13px; }
  .mode-pill { display: none; }
  .view-header > .icon-btn { display: none; }
  .view-brand { display: none; }
  #view-general > .view-header { display: none; }
  #view-general .chat-watermark { inset: 0; }

  /* Stats bar */
  .stats-bar { overflow-x: auto; }
  .stat-card { padding: 10px 14px; min-width: 88px; }
  .stat-val { font-size: 18px; }
  .stat-key { font-size: 9px; }

  /* Split layout: stacked */
  .split-layout { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .split-left { border-right: none; border-bottom: 1px solid var(--line); flex: none; max-height: 44vh; }
  .split-right { flex: 1; min-height: 200px; }

  .trade-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 480px; }

  .form-grid { grid-template-columns: 1fr !important; }

  /* Modals: bottom sheet */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 90vh; overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .settings-wrap { padding: 12px; }
  .intg-toolbar { flex-wrap: wrap; gap: 6px; }
  .intg-toolbar input, .intg-toolbar select { flex: 1 1 auto; min-width: 0; }

  .site-row { grid-template-columns: 10px 1fr; gap: 6px; }
  .site-metrics, .site-actions { grid-column: 2; }
  .uptime-dots { grid-column: 1 / -1; }

  .panel-head { padding: 8px 14px; }
  .sub-messages { padding: 10px; }
  .sub-composer { padding: 8px 10px; }

  .conv-del { opacity: 1; }

  /* Toast: above safe area */
  .toast { bottom: 16px !important; right: 12px !important; }

  .msg-content pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .msg.assistant { padding: 10px 10px; margin: 0 -10px; }
  .composer::before { display: none; }
}

/* ══════════════════════════
   PERSONALISED EMPTY STATE
══════════════════════════ */
.empty-greeting {
  font-size: 30px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; margin-bottom: 8px;
  color: var(--fg);
}
.empty-when {
  font-family: var(--mono); font-size: 11px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--fg-4); margin-bottom: 18px;
}
.empty-sub {
  font-size: 14px; color: var(--fg-3); margin-bottom: 20px; line-height: 1.5;
}
.empty-memories {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 22px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 10px 14px; text-align: left;
}
.empty-memories-title {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-4); margin-bottom: 8px;
}
.empty-memory-item {
  font-size: 12px; color: var(--fg-2); line-height: 1.45;
  display: flex; gap: 8px; align-items: baseline;
}
.empty-memory-item::before {
  content: "·"; color: var(--accent); flex-shrink: 0; font-size: 16px; line-height: .9;
}

/* ══════════════════════════
   LIGHT MODE TOGGLE BUTTON
══════════════════════════ */
.theme-toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg-3); cursor: pointer;
  font-size: 12px; font-family: var(--mono);
  transition: border-color 120ms, color 120ms;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--line-3); color: var(--fg); }

/* ══════════════════════════
   LOGIN PAGE
══════════════════════════ */
.auth-page {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: var(--ink-0);
  background-image:
    radial-gradient(ellipse 600px 400px at 25% 40%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 400px 500px at 75% 80%, rgba(167,139,250,.10), transparent 65%);
}
.auth-shell {
  width: min(960px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  align-items: center; gap: clamp(48px, 8vw, 96px);
}
.auth-shell-single { display: block; width: 420px; max-width: 100%; }
.auth-story { max-width: 510px; }
.auth-eyebrow {
  margin: 0 0 16px; color: var(--accent); font-family: var(--mono); font-size: 12px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.auth-story h1 {
  max-width: 12ch; margin: 0; color: var(--fg); font-family: var(--display, var(--sans));
  font-size: clamp(38px, 5vw, 58px); line-height: 1.02; letter-spacing: -.045em;
}
.auth-story-copy {
  max-width: 51ch; margin: 22px 0 26px; color: var(--fg-2); font-size: 16px; line-height: 1.65;
}
.auth-benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; align-items: baseline; gap: 12px; color: var(--fg); font-size: 14px; line-height: 1.5; }
.auth-benefits li span {
  color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em;
}
.auth-card {
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r2); padding: 34px 30px 28px; width: 100%;
  box-shadow: var(--shadow);
}
.auth-logo {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  border-radius: 19px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin: 0 auto 16px;
  box-shadow: 0 8px 30px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation: authLogoFloat 4.5s ease-in-out infinite;
}
.auth-logo svg { width: 40px; height: 40px; }
@keyframes authLogoFloat {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 26px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.06) inset; }
  50%      { transform: translateY(-5px); box-shadow: 0 14px 38px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.06) inset; }
}
.auth-title { text-align: center; font-family: var(--display, var(--sans)); font-size: 27px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.025em; }
.auth-sub { text-align: center; color: var(--fg-2); font-family: var(--sans); font-size: 13px; letter-spacing: 0; margin-bottom: 24px; }
.auth-tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.auth-tab {
  flex: 1; background: none; border: none; color: var(--fg-3); padding: 11px 8px;
  cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.auth-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-field label { font-family: var(--sans); font-size: 11px; color: var(--fg-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-field label span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.auth-field input {
  background: var(--ink-3); border: 1px solid var(--line-2); color: var(--fg);
  min-height: 46px; width: 100%; padding: 11px 12px; border-radius: var(--r);
  font-family: var(--sans); font-size: 15px;
  outline: none; transition: border-color 150ms, box-shadow 150ms;
}
.auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.auth-password-wrap { position: relative; }
.auth-password-wrap input { padding-right: 66px; }
.auth-password-toggle {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%); min-width: 50px;
  min-height: 32px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--fg-2); cursor: pointer; font: 650 12px/1 var(--sans);
}
.auth-password-toggle:hover { background: var(--accent-wash); color: var(--fg); }
.auth-field-note { margin: 1px 0 0; color: var(--fg-3); font-size: 12px; line-height: 1.45; }
.auth-submit { justify-content: center; width: 100%; min-height: 46px; margin-top: 4px; padding: 12px; font-size: 14px; }
.auth-tab:focus-visible,
.auth-password-toggle:focus-visible,
.auth-forgot:focus-visible,
.auth-submit:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.auth-error {
  background: var(--neg-wash); border: 1px solid rgba(255,107,107,.3);
  color: var(--neg); padding: 10px 12px; border-radius: var(--r); font-size: 13px;
  margin-top: 10px; display: none;
}
.auth-pending {
  background: rgba(247,201,72,.10); border: 1px solid rgba(247,201,72,.3);
  color: var(--warn); padding: 10px 12px; border-radius: var(--r); font-size: 13px;
  margin-top: 10px; display: none;
}
.auth-disclaimer {
  margin: 20px 0 0; text-align: center; font-family: var(--sans);
  font-size: 11.5px; letter-spacing: 0; line-height: 1.5; color: var(--fg-3);
}
.auth-forgot {
  display: block; margin-top: 14px; text-align: center; color: var(--accent);
  font-size: 12.5px; font-weight: 650; text-decoration: none; background: none; border: 0;
  width: 100%; cursor: pointer; font-family: var(--sans);
  transition: color 150ms cubic-bezier(.16,1,.3,1);
}
.auth-forgot:hover { color: var(--fg); }
.auth-note {
  color: var(--fg-2); font-size: 13px; line-height: 1.55; text-align: center;
  margin: 0 0 16px;
}
.auth-done {
  background: var(--accent-wash); border: 1px solid var(--line-2);
  color: var(--fg); padding: 12px 14px; border-radius: var(--r);
  margin: 0; text-align: center;
}
@media (max-width: 760px) {
  .auth-page { align-items: flex-start; padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)); }
  .auth-shell { display: block; width: min(420px, 100%); margin: auto; }
  .auth-story { display: none; }
  .auth-card { padding: 28px 22px 24px; }
  .auth-logo { width: 58px; height: 58px; border-radius: 17px; }
  .auth-logo svg { width: 36px; height: 36px; }
  .auth-title { font-size: 25px; }
}

/* ══════════════════════════
   ADMIN PAGE
══════════════════════════ */
.admin-page { background: var(--ink-0); min-height: 100vh; }
.admin-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; background: var(--ink-1);
  border-bottom: 1px solid var(--line);
}
.admin-topbar h1 { font-size: 14px; font-weight: 600; flex: 1; letter-spacing: -.01em; }
.admin-body { max-width: 1100px; margin: 0 auto; padding: 24px; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-bottom: 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.metric-card {
  background: var(--ink-2); padding: 16px 20px;
}
.metric-val { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.metric-key { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 6px; text-transform: uppercase; letter-spacing: .10em; }
.admin-section { margin-bottom: 28px; }
.admin-section-title { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--fg-3); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.admin-table-wrap { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { padding: 10px 14px; text-align: left; background: var(--ink-1); color: var(--fg-3); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .10em; border-bottom: 1px solid var(--line); font-weight: 500; }
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--fg); }
.admin-table tr:last-child td { border-bottom: none; }
.status-tag { display: inline-block; padding: 2px 7px; border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.tag-active  { background: var(--pos-wash); color: var(--pos); }
.tag-disabled{ background: var(--neg-wash); color: var(--neg); }
.tag-pending { background: rgba(247,201,72,.12); color: var(--warn); }
.tag-admin   { background: var(--accent-wash); color: var(--accent); }

/* ══════════════════════════
   PWA BANNERS (install + push nudge)
══════════════════════════ */
.pwa-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--ink-2);
  border-top: 1px solid var(--line-2);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -6px 28px rgba(0,0,0,.28);
  animation: pwaBannerIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pwaBannerIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pwa-banner-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.pwa-banner-body { flex: 1; min-width: 0; }
.pwa-banner-title { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.pwa-banner-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.pwa-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pwa-banner-btn {
  padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: none;
  font-family: var(--sans);
  transition: opacity .15s;
}
.pwa-banner-btn:active { opacity: .75; }
.pwa-banner-btn.primary { background: var(--accent); color: #fff; }
.pwa-banner-btn.secondary { background: var(--ink-4); color: var(--fg-2); }
@media (max-width: 520px) {
  #ios-install-banner { gap: 10px; padding-left: 12px; padding-right: 12px; }
  #ios-install-banner .pwa-banner-actions { flex-direction: column; }
  #ios-install-banner .pwa-banner-btn { padding: 7px 11px; white-space: nowrap; }
}

/* ══════════════════════════
   PERSONALITY CHOOSER
══════════════════════════ */
.pers-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(6,7,10,.92);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: persFadeIn .3s ease both;
}
@keyframes persFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pers-overlay.out { animation: persFadeOut .25s ease both; }
@keyframes persFadeOut { to { opacity: 0; } }
.pers-wrap {
  max-width: 680px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: persSlideUp .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes persSlideUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pers-lens { margin-bottom: 4px; }
.pers-title { font-family: var(--display); font-size: clamp(24px,5vw,36px); font-weight: 700; letter-spacing: -.03em; color: var(--fg); text-align: center; margin: 0; }
.pers-sub { font-size: 14px; color: var(--fg-3); text-align: center; margin: 0 0 16px; line-height: 1.5; max-width: 420px; }
.pers-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; width: 100%;
}
.pers-opt {
  background: var(--ink-2); border: 1.5px solid var(--line-2);
  border-radius: 14px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  cursor: pointer; transition: border-color .18s, background .18s, transform .15s;
  font-family: var(--sans);
}
.pers-opt:hover { background: var(--ink-3); transform: translateY(-2px); }
.pers-opt:active { transform: translateY(0); }
.pers-opt[data-p="unhinged"] { --pc: #E5552F; }
.pers-opt[data-p="kind"]     { --pc: #F7C948; }
.pers-opt[data-p="general"]  { --pc: rgba(231,238,250,.5); }
.pers-opt[data-p="calm"]     { --pc: #5B8FDB; }
.pers-opt:hover, .pers-opt:focus-visible { border-color: var(--pc); outline: none; }
.pers-opt.selected { border-color: var(--pc); background: var(--ink-3); }
.pers-opt-name { font-size: 17px; font-weight: 700; color: var(--fg); letter-spacing: -.02em; }
.pers-opt[data-p="unhinged"] .pers-opt-name { color: #E5552F; }
.pers-opt[data-p="kind"]     .pers-opt-name { color: #F7C948; }
.pers-opt[data-p="calm"]     .pers-opt-name { color: #5B8FDB; }
.pers-opt-desc { font-size: 12px; color: var(--fg-2); line-height: 1.4; }

/* ── Custom Pevra (Plus) ── */
.plus-pill-mini {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 8px; padding: 2px 8px; border-radius: 99px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-wash); border: 1px solid rgba(229,85,47,.35);
}
.cb-card { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.cb-row { display: flex; flex-direction: column; gap: 10px; }
.cb-label { font-size: 13px; font-weight: 600; color: var(--fg); }
.cb-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.cb-swatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-2);
  transition: transform .12s, box-shadow .15s;
}
.cb-swatch:hover { transform: scale(1.12); }
.cb-swatch.active { box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--sw); transform: scale(1.08); }
.cb-tone {
  width: 100%; resize: vertical; min-height: 64px;
  background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.5; padding: 12px 14px;
}
.cb-tone:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.cb-tone-foot { font-family: var(--mono); font-size: 10.5px; color: var(--fg-4); text-align: right; margin-top: -4px; }
.cb-save {
  align-self: flex-start; padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  box-shadow: 0 4px 16px var(--accent-glow); transition: filter .15s, transform .1s;
}
.cb-save:hover { filter: brightness(1.08); }
.cb-save:active { transform: scale(.97); }
.cb-save:disabled { opacity: .7; cursor: default; }
.pers-opt-eg {
  font-size: 12px; color: var(--fg-3); line-height: 1.5;
  font-style: italic; margin-top: 4px;
  border-left: 2px solid var(--line-2); padding-left: 8px;
}
/* Compact version used inside Settings panel — higher contrast vs ink-1 bg */
.pers-grid-sm .pers-opt {
  padding: 12px 14px;
  background: var(--ink-3);
  border-color: rgba(231,238,250,.18);
}
.pers-grid-sm .pers-opt:hover { background: var(--ink-4); transform: translateY(-1px); }
.pers-grid-sm .pers-opt.selected {
  background: var(--ink-4);
  border-color: var(--pc);
  box-shadow: inset 0 3px 0 0 var(--pc);
}
.pers-grid-sm .pers-opt-eg { display: none; }

/* AI-generated images in chat */
.gen-img-wrap { display: inline-block; margin: 8px 0; max-width: min(440px, 100%); }
.gen-img {
  max-width: 100%;
  width: 100%; height: auto;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  display: block;
}
.gen-img-save {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-3); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  font-family: var(--sans); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.gen-img-save:hover { background: var(--ink-4); border-color: var(--accent); }
.gen-img-save:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .pers-grid { grid-template-columns: 1fr; }
  .pers-opt { padding: 14px 14px; }
  /* Account cards get full width on phones so name + status badge don't collide */
  .intg-cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════
   SETTINGS REDESIGN
══════════════════════════ */
.settings-body {
  flex: 1; overflow-y: auto;
  padding: 0 0 32px;
  display: flex; flex-direction: column; gap: 0;
}

/* ── Profile card ── */
.sett-profile {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sett-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  color: #fff; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -2px var(--accent-glow);
}
.sett-profile-info { flex: 1; min-width: 0; }
.sett-name { font-size: 16px; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.sett-email { font-size: 12px; color: var(--fg-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Plan pill */
.plan-pill-plus {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(135deg, rgba(229,85,47,.18), rgba(217,138,43,.18));
  color: var(--accent); border: 1px solid rgba(229,85,47,.3);
  flex-shrink: 0;
}
.plan-pill-free {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
  background: var(--ink-3); color: var(--fg-3); border: 1px solid var(--line-2);
  flex-shrink: 0;
}

/* ── Pevra Plus banner (for Plus users) ── */
.plus-active-banner {
  margin: 16px 20px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(229,85,47,.12) 0%, rgba(217,138,43,.08) 100%);
  border: 1px solid rgba(229,85,47,.25);
}
.plus-banner-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.plus-banner-title {
  font-size: 15px; font-weight: 700; color: var(--fg);
  background: linear-gradient(135deg, var(--accent), #D98A2B);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.plus-banner-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
  background: var(--pos-wash); color: var(--pos); border: 1px solid rgba(92,219,149,.3);
}
.plus-checks { display: flex; flex-direction: column; gap: 6px; }
.plus-check-item {
  display: grid; grid-template-columns:auto 1fr; align-items: start; gap: 2px 8px;
  font-size: 13px; color: var(--fg-2);
}
.plus-check-item::before {
  content: "✓"; grid-row:1/3; color: var(--pos); font-weight: 700; font-size: 12px;
}
.plus-check-item b { color: var(--fg); font-size: 12.5px; }
.plus-check-item span { grid-column:2; color: var(--fg-3); font-size: 11.5px; line-height:1.4; }
.plus-active-copy { margin:-4px 0 10px; color:var(--fg-2); font-size:12.5px; line-height:1.5; }
.plus-active-allowance { display:inline-flex; margin:0 0 12px; padding:4px 8px; border-radius:99px; background:rgba(229,85,47,.1); color:var(--accent); font-size:10.5px; font-weight:700; }
.plus-active-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }

/* Trial activation is confirmation, not another onboarding splash. It sits
   over Pevra briefly, offers three useful first actions, and never blocks use. */
.trial-started-nudge {
  position: fixed; z-index: 11900; left: 50%; bottom: max(22px, env(safe-area-inset-bottom));
  width: min(620px, calc(100vw - 28px)); transform: translateX(-50%);
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 15px 42px 15px 16px; border: 1px solid rgba(229,85,47,.28); border-radius: 20px;
  background: color-mix(in srgb, var(--bg-2) 92%, #16100d); color: var(--fg);
  box-shadow: 0 20px 65px rgba(0,0,0,.28), 0 0 35px rgba(229,85,47,.1);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: tsn-in .48s cubic-bezier(.16,1,.3,1) both;
}
.trial-started-nudge.out { animation: tsn-out .24s ease both; pointer-events: none; }
.tsn-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#F2693E,#C8431F); box-shadow:0 8px 24px rgba(229,85,47,.3); }
.tsn-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.tsn-copy b { font-size:13.5px; }.tsn-copy span { color:var(--fg-3); font-size:11.5px; line-height:1.4; }
.tsn-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tsn-actions button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg-3); color:var(--fg-2); font:inherit; font-size:10.5px; font-weight:600; line-height:1; cursor:pointer; }
.tsn-actions button:first-child { border-color:rgba(229,85,47,.3); color:var(--accent); }
.tsn-close { position:absolute; top:8px; right:9px; border:0; background:none; color:var(--fg-3); font-size:20px; cursor:pointer; }
@keyframes tsn-in { from { opacity:0; transform:translate(-50%,20px) scale(.97); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes tsn-out { to { opacity:0; transform:translate(-50%,12px) scale(.98); } }
@media (max-width:700px) {
  .trial-started-nudge { grid-template-columns:36px 1fr; align-items:start; padding:14px 36px 14px 14px; }
  .tsn-mark { width:36px; height:36px; }.tsn-actions { grid-column:1/-1; justify-content:stretch; display:grid; grid-template-columns:repeat(3,1fr); }
  .tsn-actions button { padding:0 5px; }
}
@media (prefers-reduced-motion:reduce) { .trial-started-nudge,.trial-started-nudge.out { animation:none; } }

/* ── Upgrade card (for Free users) ── */
.upgrade-card {
  margin: 16px 20px 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--ink-2); border: 1px solid var(--line-2);
}
.upgrade-card-title {
  font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 4px;
}
.upgrade-card-sub {
  font-size: 13px; color: var(--fg-3); margin-bottom: 14px;
}
.upgrade-features {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.upgrade-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--fg-2);
}
.upgrade-feature-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.upgrade-cta {
  font-size: 12px; color: var(--fg-3); padding-top: 12px;
  border-top: 1px solid var(--line-2); text-align: center;
}

/* ── Sections ── */
.sett-section {
  padding: 20px 20px 0;
}
.sett-section-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--fg-4);
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .sett-profile { padding: 16px; }
  .sett-avatar { width: 44px; height: 44px; font-size: 18px; border-radius: 14px; }
  .sett-section { padding: 16px 16px 0; }
  .plus-active-banner, .upgrade-card { margin-left: 16px; margin-right: 16px; }
}

/* ════════════════════════════════════════════════════════
   ANIMATIONS — native-app motion language
   ════════════════════════════════════════════════════════ */

/* ── View entrance: fade + rise when switching tabs ── */
.view.active {
  animation: viewIn .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tactile press: scale-down on tap ── */
.rail-btn:active     { transform: scale(.82); }
.send-btn:active     { transform: scale(.84) !important; }
.btn-accent:active   { transform: scale(.95); }
.btn:active          { transform: scale(.96); }
.mem-del:active      { transform: scale(.88); }

/* ── Pevra avatar: breathing ring while Pevra is typing ── */
#messages:has(.typing-dot) .msg.assistant:last-child .msg-avatar {
  animation: avatarBreath 1.6s ease-in-out infinite !important;
}
@keyframes avatarBreath {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 0 6px var(--accent-glow); }
}

/* ── Plus pill: shimmer sweep ── */
.plan-pill-plus {
  background: linear-gradient(
    110deg,
    rgba(229,85,47,.18) 0%,
    rgba(229,85,47,.35) 40%,
    rgba(217,138,43,.22) 55%,
    rgba(229,85,47,.18) 100%
  );
  background-size: 240% 100%;
  animation: pillShimmer 3.5s linear infinite;
}
@keyframes pillShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Empty state: staggered entrance ── */
.empty-greeting { animation: emptyIn .52s .04s cubic-bezier(.22,1,.36,1) both; }
.empty-when     { animation: emptyIn .48s .14s cubic-bezier(.22,1,.36,1) both; }
.empty-memories { animation: emptyIn .44s .22s cubic-bezier(.22,1,.36,1) both; }
.mode-cards     { animation: emptyIn .44s .30s cubic-bezier(.22,1,.36,1) both; }
@keyframes emptyIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Notification badge: bounce when it appears ── */
.rail-btn .notif-badge.show {
  animation: badgePop .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes badgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Toast: spring in from bottom ── */
.toast:not(.hidden) {
  animation: toastIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Memory item: fade+slide on add ── */
.mem-row {
  animation: memIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes memIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ════════════════════════════════════════════════════════
   PEVRA PLUS — premium visual layer
   ════════════════════════════════════════════════════════ */

/* ── Topbar ✦ Plus badge ── */
.topbar-plus-mark {
  display: none;
  align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  font-family: var(--mono);
  background: linear-gradient(110deg,rgba(229,85,47,.18) 0%,rgba(229,85,47,.32) 45%,rgba(217,138,43,.18) 100%);
  background-size: 240% 100%;
  color: var(--accent); border: 1px solid rgba(229,85,47,.3);
  animation: pillShimmer 3.5s linear infinite;
  flex-shrink: 0;
}
body.is-plus .topbar-plus-mark { display: inline-flex; }

/* ── Plus message wash: richer than free ── */
body.is-plus .msg.assistant {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 2px solid rgba(229,85,47,.4);
  padding-left: 14px;
  margin-left: -16px;
}

/* ── "Deciding which AI to use" typing state ── */
.typing-deciding {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-family: var(--mono);
  color: var(--fg-3); letter-spacing: .03em;
}
.typing-deciding-dots { display: inline-flex; align-items: center; gap: 3px; }

/* ── Upgrade gate card (shown instead of error for Plus-only features) ── */
.plus-gate-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(229,85,47,.1) 0%, rgba(217,138,43,.06) 100%);
  border: 1px solid rgba(229,85,47,.25); max-width: 380px;
}
.plus-gate-icon {
  font-size: 22px; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.plus-gate-title {
  font-size: 15px; font-weight: 700; color: var(--fg); letter-spacing: -.01em;
}
.plus-gate-body { font-size: 13px; color: var(--fg-2); line-height: 1.55; }
.plus-gate-btn {
  padding: 8px 18px; border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  color: #fff; font-weight: 700; font-size: 13px;
  border: none; cursor: pointer; font-family: var(--sans);
  transition: filter .15s, transform .1s;
}
.plus-gate-btn:hover  { filter: brightness(1.1); }
.plus-gate-btn:active { transform: scale(.95); }

/* ── Plus welcome overlay (first-time celebration) ── */
.plus-welcome-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  animation: persFadeIn .3s ease both;
}
.plus-welcome-overlay.out { animation: persFadeOut .25s ease both; }
.plus-welcome-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 36px; border-radius: 24px; text-align: center;
  background: var(--ink-1); border: 1px solid rgba(229,85,47,.3);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  animation: persSlideUp .38s cubic-bezier(.22,1,.36,1) both;
  max-width: 360px; width: 90%;
}
.plus-welcome-mark {
  font-size: 40px; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: markSpin 0.6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes markSpin {
  from { opacity: 0; transform: rotate(-90deg) scale(.5); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
.plus-welcome-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--fg);
}
.plus-welcome-body { font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.plus-welcome-btn {
  margin-top: 6px; padding: 10px 28px; border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  color: #fff; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer; font-family: var(--sans);
  transition: filter .15s, transform .1s;
}
.plus-welcome-btn:hover  { filter: brightness(1.1); }
.plus-welcome-btn:active { transform: scale(.95); }

/* ═══════════════════════════════════════════════════════
   LIVE STREAMING CHAT — the message breathes as Pevra thinks
═══════════════════════════════════════════════════════ */

/* Thinking: the Pevra mark gets an orbiting ring while we wait for token #1 */
.msg.assistant.thinking .msg-avatar { position: relative; }
.msg.assistant.thinking .msg-avatar::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent-l, var(--accent));
  animation: orbSpin .9s linear infinite;
}
.msg.assistant.thinking .msg-avatar::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  animation: orbBreathe 1.8s ease-in-out infinite;
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbBreathe { 50% { opacity: .35; transform: scale(1.25); } }

/* Streaming text: latest words glow, caret pulses */
.stream-text { white-space: pre-wrap; word-break: break-word; }
.msg.streaming .stream-text {
  background: linear-gradient(90deg, var(--fg) 82%, var(--accent-l, var(--accent)) 97%, transparent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stream-caret {
  display: inline-block; width: 8px; height: 15px; margin-left: 2px;
  border-radius: 2px; background: var(--accent); vertical-align: -2px;
  animation: caretGlow 1s ease-in-out infinite;
}
@keyframes caretGlow {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent-glow); }
  50% { opacity: .35; box-shadow: 0 0 2px transparent; }
}
.stream-building {
  display: inline-block; margin: 6px 0 0; font-size: 12.5px; color: var(--fg-3);
  font-family: var(--mono, monospace); animation: sbPulse 1.4s ease-in-out infinite;
}
@keyframes sbPulse { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
.msg.landed .msg-content { animation: landIn .4s cubic-bezier(.16,1,.3,1); }
@keyframes landIn { from { opacity: .6; } to { opacity: 1; } }

/* Tool activity strip — live chips showing what Pevra is doing */
.tool-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-2);
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 99px; padding: 5px 12px;
  animation: chipRise .35s cubic-bezier(.34,1.56,.64,1) both;
}
.tool-chip i { color: var(--fg-3); font-style: normal; font-weight: 500; }
.tool-chip.done { opacity: .62; }
@keyframes chipRise { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.tc-spin {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line-3); border-top-color: var(--accent);
  animation: orbSpin .7s linear infinite;
}
.tc-tick { color: var(--pos); font-weight: 800; }

/* ── Market price cards with sparklines ── */
.mkt-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin: 4px 0 12px;
}
.mkt-card {
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 11px 13px 9px; overflow: hidden;
  animation: cardPop .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.mkt-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(0,0,0,.5); }
@keyframes cardPop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.mk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-top b { font-size: 12.5px; letter-spacing: .02em; }
.mk-chg { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.mkt-card.up .mk-chg { color: var(--pos); }
.mkt-card.down .mk-chg { color: var(--neg); }
.mk-price { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 4px; }
.mk-spark { width: 100%; height: 30px; display: block; }
.mk-spark polyline {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: sparkDraw 1s cubic-bezier(.16,1,.3,1) .25s forwards;
}
.mkt-card.up .mk-spark polyline { stroke: var(--pos); }
.mkt-card.down .mk-spark polyline { stroke: var(--neg); }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

/* ── Web source citation chips ── */
.src-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.src-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-4); margin-right: 2px;
}
.src-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-2); text-decoration: none;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 99px; padding: 5px 12px 5px 6px; max-width: 260px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: chipRise .4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color .2s, transform .2s;
}
.src-chip:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--fg); }
.src-chip small { color: var(--fg-4); font-weight: 500; }
.sc-n {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-wash); color: var(--accent);
  font-size: 9.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── "Pevra will remember" chip ── */
.mem-saved-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 12px; color: var(--fg-2);
  background: linear-gradient(120deg, var(--accent-wash), transparent);
  border: 1px solid var(--accent-wash); border-left: 2px solid var(--accent);
  border-radius: 10px; padding: 7px 13px;
  animation: memGlowIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.mem-saved-chip b { color: var(--fg); font-weight: 600; }
.msc-spark { color: var(--accent); animation: sparkSpin2 3s ease-in-out 2; display: inline-block; }
@keyframes sparkSpin2 { 50% { transform: rotate(180deg) scale(1.2); } }
@keyframes memGlowIn {
  0% { opacity: 0; transform: translateX(-14px); box-shadow: 0 0 24px var(--accent-glow); }
  100% { opacity: 1; transform: none; box-shadow: none; }
}

/* ═══════════════ AMBIENT DAYPART WASH (chat feels alive) ═══════════════ */
#view-general::after {
  content: ""; position: absolute; inset: 44px 0 0; z-index: 0;
  pointer-events: none; opacity: .55;
  transition: opacity 2s ease;
  animation: ambientDrift 26s ease-in-out infinite alternate;
}
@keyframes ambientDrift { to { transform: translate3d(0, 18px, 0) scale(1.05); } }
html[data-daypart="dawn"] #view-general::after {
  background: radial-gradient(55% 42% at 82% 0%, rgba(255,146,80,.10), transparent 70%),
              radial-gradient(48% 40% at 8% 24%, rgba(255,199,120,.06), transparent 70%);
}
html[data-daypart="day"] #view-general::after {
  background: radial-gradient(55% 42% at 85% 0%, rgba(120,170,255,.07), transparent 70%),
              radial-gradient(45% 38% at 6% 30%, rgba(229,85,47,.045), transparent 70%);
}
html[data-daypart="dusk"] #view-general::after {
  background: radial-gradient(55% 42% at 82% 0%, rgba(229,85,47,.10), transparent 70%),
              radial-gradient(48% 40% at 10% 28%, rgba(167,139,250,.07), transparent 70%);
}
html[data-daypart="night"] #view-general::after {
  background: radial-gradient(55% 42% at 80% 0%, rgba(90,120,255,.08), transparent 72%),
              radial-gradient(48% 40% at 8% 30%, rgba(167,139,250,.05), transparent 70%);
}
body.deep-mode #view-general::after { display: none; }  /* deep mode has its own aurora */

/* Sent message: confident spring pop */
.msg.user.sent-pop { animation: sentPop .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes sentPop {
  0% { opacity: 0; transform: translateY(16px) scale(.94); }
  70% { transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

/* Mode switch: blur-focus crossfade (upgrades the old plain rise) */
.view.active { animation: viewIn2 .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes viewIn2 {
  from { opacity: 0; transform: translateY(10px) scale(.996); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ═══════════════════════════════════════════════════════
   THEME PACKS (Plus) — full token-swap skins
═══════════════════════════════════════════════════════ */

/* ── Midnight: deep ink-blue + warm gold ── */
html[data-skin="midnight"] {
  --ink-0:#050810; --ink-1:#0a0f1e; --ink-2:#0f1526; --ink-3:#151d33; --ink-4:#1c2542; --ink-5:#243056;
  --fg:#eef2ff; --fg-2:#b7c1dd; --fg-3:#8b96b8; --fg-4:#5b6684;
  --line:rgba(160,180,255,.07); --line-2:rgba(160,180,255,.12);
  --line-3:rgba(160,180,255,.2); --line-4:rgba(160,180,255,.3);
  --accent:#E8B84B; --accent-d:#C99A2E; --accent-l:#F2CE73;
  --accent-wash:rgba(232,184,75,.12); --accent-glow:rgba(232,184,75,.3);
  --accent-ink:#241a02;
  --c-chat:#E8B84B;
  --grad-accent:linear-gradient(135deg,#E8B84B 0%,#F2CE73 50%,#D98A2B 100%);
  --glass-bg:rgba(12,18,36,.62); --glass-bg-2:rgba(17,24,45,.55);
  --glass-line:rgba(180,200,255,.1);
}
html[data-skin="midnight"] body { background: var(--ink-1); }

/* ── Graphite: cool charcoal + glacier cyan ── */
html[data-skin="graphite"] {
  --ink-0:#0a0b0c; --ink-1:#101214; --ink-2:#15181b; --ink-3:#1b1f24; --ink-4:#23282e; --ink-5:#2c3339;
  --fg:#f2f5f7; --fg-2:#bcc5cc; --fg-3:#8e99a3; --fg-4:#5c656e;
  --line:rgba(220,235,245,.06); --line-2:rgba(220,235,245,.11);
  --line-3:rgba(220,235,245,.19); --line-4:rgba(220,235,245,.3);
  --accent:#6BC5D8; --accent-d:#4BA7BB; --accent-l:#8FD8E8;
  --accent-wash:rgba(107,197,216,.11); --accent-glow:rgba(107,197,216,.28);
  --accent-ink:#03191e;
  --c-chat:#6BC5D8;
  --grad-accent:linear-gradient(135deg,#6BC5D8 0%,#8FD8E8 50%,#5aa8d8 100%);
  --glass-bg:rgba(18,21,24,.62); --glass-bg-2:rgba(24,28,32,.55);
}
html[data-skin="graphite"] body { background: var(--ink-1); }

/* ── Sepia: warm reading light (rides the light theme, re-hued) ── */
html[data-skin="sepia"] {
  --accent:#B4552D; --accent-d:#96421F; --accent-l:#CC6A3E;
  --accent-wash:rgba(180,85,45,.1); --accent-glow:rgba(180,85,45,.24);
  --c-chat:#B4552D;
  --grad-accent:linear-gradient(135deg,#B4552D 0%,#CC6A3E 50%,#A97432 100%);
}
html[data-skin="sepia"] body,
html[data-skin="sepia"] .rail, html[data-skin="sepia"] .sidebar,
html[data-skin="sepia"] .main, html[data-skin="sepia"] .view,
html[data-skin="sepia"] .app-topbar { background: #F3EADB !important; }
html[data-skin="sepia"] { --ink-2:#EDE2CE; --ink-3:#E6D9C1; --fg:#2E2417; --fg-2:#584A35; --fg-3:#83715A; }
html[data-skin="sepia"] .composer-inner { background: #EDE2CE; }
html[data-skin="sepia"] .msg.assistant { background: rgba(180,85,45,.06) !important; }

/* Deep Research keeps its violet identity over EVERY skin */
html[data-skin] body.deep-mode {
  --accent:#9b6dff; --accent-d:#7c4dff; --accent-l:#b794ff;
  --accent-wash:rgba(155,109,255,.12); --accent-glow:rgba(155,109,255,.32);
  --c-chat:#9b6dff;
  --ink-1:#08070f; --ink-2:#0e0d18; --ink-3:#15131f; --ink-4:#1d1930; --ink-5:#251f3c;
  --line-3:rgba(183,148,255,.22);
  background:#08070f;
}

/* ── The picker ── */
.skin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.skin-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--ink-2); border:1.5px solid var(--line-2); border-radius:12px;
  padding:10px 8px; cursor:pointer; color:var(--fg-2);
  font-family:inherit; font-size:11.5px; font-weight:600;
  transition:all .25s cubic-bezier(.34,1.56,.64,1); position:relative;
}
.skin-card:hover { transform:translateY(-2px); border-color:var(--line-3); }
.skin-card.selected {
  border-color:var(--accent); color:var(--fg);
  box-shadow:0 8px 22px -10px var(--accent-glow); transform:translateY(-2px);
}
.sk-prev {
  width:100%; height:42px; border-radius:8px; position:relative;
  border:1px solid rgba(128,128,128,.25); overflow:hidden;
}
.sk-prev i {
  position:absolute; right:6px; bottom:6px; width:12px; height:12px; border-radius:50%;
  box-shadow:0 0 8px rgba(0,0,0,.3);
}
.skin-card.selected .sk-prev::after {
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); color:#fff; font-weight:800; font-size:15px;
  animation: chipRise .3s cubic-bezier(.34,1.56,.64,1);
}
.sk-lock { position:absolute; top:5px; right:7px; font-size:10px; color:var(--accent); }
.skin-card.unlocked .sk-lock { display:none; }

/* ═══ Conversation organisation: search / pin / rename ═══ */
.conv-search-wrap { padding: 8px 12px 4px; }
.conv-search {
  width: 100%; background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 7px 11px; font-family: inherit; font-size: 12.5px;
  color: var(--fg); outline: none; transition: border-color .2s;
}
.conv-search:focus { border-color: var(--accent); }
.conv-item { position: relative; }
.conv-item.pinned { background: var(--accent-wash); }
.conv-pin-dot { font-size: 10px; margin-right: 5px; flex-shrink: 0; }
.conv-acts { display: inline-flex; gap: 2px; align-items: center; flex-shrink: 0; }
.conv-act {
  background: none; border: none; cursor: pointer; color: var(--fg-4);
  font-size: 12px; padding: 3px 4px; border-radius: 6px; opacity: 0;
  transition: opacity .15s, color .15s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.conv-item:hover .conv-act { opacity: 1; }
.conv-act:hover { color: var(--accent); transform: scale(1.2); }
@media (hover: none) { .conv-act { opacity: .7; } }

/* ═══ Composer attachments ═══ */
.attach-btn {
  flex-shrink: 0; align-self: flex-end;
  width: 34px; height: 40px; margin-left: 6px;
  background: none; border: none; cursor: pointer; color: var(--fg-3);
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.attach-btn:hover { color: var(--accent); transform: rotate(-12deg) scale(1.15); }
.attach-strip {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-width: 860px; margin: 0 auto 8px; width: 100%; padding: 0 4px;
}
.att-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 11px; padding: 5px 7px 5px 9px;
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  animation: chipRise .35s cubic-bezier(.34,1.56,.64,1) both;
}
.att-chip i { color: var(--fg-4); font-weight: 400; }
.att-thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.att-x {
  background: var(--ink-4); border: none; color: var(--fg-3); cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.att-x:hover { background: var(--neg); color: #fff; }
.sent-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sent-atts span {
  font-size: 11px; background: rgba(255,255,255,.1); border-radius: 8px; padding: 3px 9px;
}

/* ═══ Pevra's schedule (proactive tasks) ═══ */
.pro-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  animation: chipRise .35s cubic-bezier(.34,1.56,.64,1) both;
}
.pro-row:last-child { border-bottom: none; }
.pro-ico { font-size: 15px; flex-shrink: 0; color: var(--accent); }
.pro-main { flex: 1; min-width: 0; }
.pro-prompt { display: block; font-size: 13px; font-weight: 500; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-when { font-family: var(--mono); font-size: 10px; color: var(--fg-4);
  text-transform: uppercase; letter-spacing: .06em; }
.pro-del {
  background: none; border: none; cursor: pointer; color: var(--fg-4);
  font-size: 16px; padding: 2px 6px; border-radius: 6px; transition: color .15s;
}
.pro-del:hover { color: var(--neg); }

/* ═══ Persona switcher ═══ */
.persona-btn { font-size: 15px; color: var(--fg-3); }
.persona-btn.active { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.persona-pop {
  position: absolute; bottom: 64px; left: 14px; z-index: 30;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 6px; min-width: 190px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.55);
  animation: chipRise .28s cubic-bezier(.34,1.56,.64,1) both;
}
.composer { position: relative; }
.pp-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--fg-2);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 12px; border-radius: 9px; transition: background .15s, color .15s;
}
.pp-item:hover { background: var(--ink-3); color: var(--fg); }
.pp-item.on { color: var(--accent); background: var(--accent-wash); }
.pp-empty { padding: 8px 12px; font-size: 11.5px; color: var(--fg-4); }
.persona-add .pa-row { display: flex; gap: 8px; margin: 10px 0 8px; }

/* ═══ Life command centre tiles ═══ */
.dash-card { position: relative; overflow: hidden; }
.dash-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0;
  transition: background-position .8s ease;
}
.dash-card:hover::after { background-position: -130% 0; }
.dash-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.dash-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dr-bg { fill: none; stroke: var(--line-2); stroke-width: 4; }
.dr-fg {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 113.1; stroke-dashoffset: 113.1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .3s;
}
.dash-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; font-family: var(--mono);
}
.dash-card-gym:hover { border-color: var(--pos); }
.dash-card-health:hover { border-color: var(--neg); }
.dash-card-sched:hover { border-color: var(--accent); }
.dash-card-sched .dash-card-icon { color: var(--accent); }

/* ═══ Motion polish pass ═══ */

/* Streamed text materialises chunk-by-chunk with a soft blur */
.stream-text .sw { animation: swIn .34s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes swIn { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: none; } }

/* Usage bar eases instead of snapping */
.usage-fill { transition: width .6s cubic-bezier(.16,1,.3,1); }

/* Skeleton shimmer — replaces bare "Loading…" text */
.skel-list { padding: 6px 12px; display: flex; flex-direction: column; gap: 8px; }
.skel-row {
  height: 34px; border-radius: 9px;
  background: linear-gradient(100deg, var(--ink-3) 30%, var(--ink-4) 50%, var(--ink-3) 70%);
  background-size: 220% 100%;
  animation: skelShimmer 1.3s linear infinite;
}
.skel-row:nth-child(2) { width: 82%; }
.skel-row:nth-child(3) { width: 68%; }
.skel-row:nth-child(4) { width: 90%; }
@keyframes skelShimmer { to { background-position: -220% 0; } }

/* View-transition crossfade — quick and clean, not a slow dissolve */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══ Empty-state exit: the eclipse warps up toward the header ═══ */
.empty-state.exiting { animation: esExit .42s cubic-bezier(.5,0,.1,1) both; pointer-events: none; }
@keyframes esExit { to { opacity: 0; transform: translateY(-42px) scale(.9); filter: blur(3px); } }
.empty-state.exiting .empty-logo {
  animation: markWarp .42s cubic-bezier(.5,0,.1,1) both;
}
@keyframes markWarp {
  to { transform: translateY(-30px) scale(.42); opacity: 0; filter: drop-shadow(0 0 14px var(--accent-glow)); }
}

/* ═══ Composer focus bloom — the message box wakes when you tap in ═══ */
.composer-inner { transition: border-color .3s var(--ease-out, ease), box-shadow .35s var(--ease-out, ease); }
.composer-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash), 0 10px 30px -14px var(--accent-glow);
}

/* ═══ Suggestion chips + composer focus glow (empty-state polish) ═══ */

/* Composer — ember focus glow so the primary surface feels alive */
.composer:focus-within .composer-inner {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 0 0 3px var(--accent-wash), 0 10px 34px rgba(229,85,47,.13);
}

/* ── Deep Research: three minds orbit the eclipse (deep-mode only) ── */
.dr-orbit { display: none; }
body.deep-mode .dr-orbit {
  display: block; position: absolute; inset: 0; z-index: 2;
  animation: drSpin 9s linear infinite;
}
.dr-mind {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px; border-radius: 50%;
  box-shadow: 0 0 12px currentColor, 0 0 4px currentColor;
  animation: drPulse 2.4s ease-in-out infinite;
}
.dr-mind.m-claude { color: #E5552F; background: #F2693E; transform: rotate(0deg)   translateX(66px); }
.dr-mind.m-gpt    { color: #10A37F; background: #12b886; transform: rotate(120deg) translateX(66px); animation-delay: .5s; }
.dr-mind.m-gem    { color: #7c4dff; background: #9b6dff; transform: rotate(240deg) translateX(66px); animation-delay: 1s; }
@keyframes drSpin  { to { transform: rotate(360deg); } }
@keyframes drPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.deep-mode .dr-orbit { animation: none; } .dr-mind { animation: none; } }

/* ═══ Deep Research: calm in-place crossfade between modes ═══
   Enabled only for the ~0.7s of the switch (html.theme-anim), so the whole app
   eases its colours / borders / glows across instead of hard-cutting. Removed
   afterwards so it never adds lag to normal interaction. */
html.theme-anim,
html.theme-anim .main,
html.theme-anim .composer-inner,
html.theme-anim .empty-greeting,
html.theme-anim .empty-when,
html.theme-anim .msg-content,
html.theme-anim .topbar,
html.theme-anim .app-topbar,
html.theme-anim .sidebar,
html.theme-anim .rail,
html.theme-anim .messages,
html.theme-anim body {
  transition: background-color .6s ease, color .55s ease, border-color .6s ease,
              box-shadow .6s ease, filter .6s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim * { transition: none !important; }
}

/* ═══ Agentic Pevra: approval card ═══ */
.plan-card {
  margin: 14px 0; padding: 15px 16px; border-radius: 16px;
  border: 1px solid var(--line-3); background: var(--ink-2);
  border-left: 3px solid var(--accent);
  animation: msgReveal .4s cubic-bezier(.16,1,.3,1) both;
}
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.plan-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 999px; }
.plan-badge-done { background: var(--pos, #2f9e6b); }
.plan-badge-failed { background: var(--neg, #d14545); }
.plan-badge-partial { background: #b7791f; }
.plan-intro { font-size: 14px; color: var(--fg); font-weight: 500; }
.plan-acts { display: flex; flex-direction: column; gap: 8px; }
.plan-act { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 10px;
  padding: 11px 12px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .15s, background .15s; }
.plan-act:hover { border-color: var(--line-3); }
.plan-chk { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-4);
  margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.plan-chk:checked + .plan-box { background: var(--accent); border-color: var(--accent); }
.plan-chk:checked + .plan-box::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; }
.plan-chk:not(:checked) ~ .plan-act-body { opacity: .5; }
.plan-act-ic { font-size: 16px; line-height: 1.3; }
.plan-act-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-act-title { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.plan-act-detail { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.plan-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.plan-run { background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: filter .15s, transform .1s; }
.plan-run:hover { filter: brightness(1.06); }
.plan-run:active { transform: scale(.97); }
.plan-run:disabled { opacity: .7; cursor: default; }
.plan-cancel { background: none; border: none; color: var(--fg-3); font-size: 13px; cursor: pointer; font-family: inherit; }
.plan-cancel:hover { color: var(--fg); }
.plan-note { font-size: 11px; color: var(--fg-3); margin-left: auto; }
.plan-err { font-size: 12px; color: var(--neg, #d14545); }
.plan-running { opacity: .85; }
.plan-done-msg { font-size: 13px; color: var(--fg-3); padding: 4px 0; }
.plan-results { display: flex; flex-direction: column; gap: 6px; }
.plan-res { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fg-2); }
.plan-res-mk { font-weight: 700; flex: 0 0 auto; }
.plan-res-ok .plan-res-mk { color: var(--pos, #2f9e6b); }
.plan-res-fail .plan-res-mk { color: var(--neg, #d14545); }
.plan-res-skip { opacity: .6; }

/* ═══ One-tap app connect (chat card + integrations) ═══ */
.connect-card {
  display: flex; align-items: center; gap: 13px;
  margin: 14px 0; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--line-3); background: var(--ink-2);
  border-left: 3px solid var(--accent);
  animation: msgReveal .4s cubic-bezier(.16,1,.3,1) both;
}
.cc-icon { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.cc-body { flex: 1; min-width: 0; }
.cc-title { font-size: 14.5px; font-weight: 700; color: var(--fg); }
.cc-reason { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; line-height: 1.45; }
.cc-btn {
  flex: 0 0 auto; background: var(--accent); color: #fff; border: none;
  border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: filter .15s, transform .1s;
}
.cc-btn:hover { filter: brightness(1.06); }
.cc-btn:active { transform: scale(.96); }

/* Integrations screen: make each card a clear connect target */
.intg-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.intg-connect {
  flex: 0 0 auto; background: var(--accent); color: #fff; border: none;
  border-radius: 9px; padding: 8px 16px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: filter .15s, transform .1s;
}
.intg-connect:hover { filter: brightness(1.06); }
.intg-connect:active { transform: scale(.96); }
.intg-card.connected { border-color: color-mix(in srgb, var(--pos, #2f9e6b) 40%, var(--line-3)); }

/* Deep Research: synthesis streaming in live before the final render */
.deep-synth-live { white-space: pre-wrap; font-size: 15px; line-height: 1.72; color: var(--fg); }
.deep-synth-live::after { content: "▌"; color: var(--accent); animation: dsBlink 1s steps(2) infinite; margin-left: 1px; }
@keyframes dsBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ═══ Scheduled tasks in the sidebar — what Pevra runs on its own ═══ */
.sched-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sched-head { display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 8px; }
.sched-title { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); }
.sched-count { font-size: 10px; font-weight: 700; color: var(--accent);
  background: var(--accent-wash); border-radius: 999px; padding: 1px 7px; }
.sched-list { display: flex; flex-direction: column; gap: 6px; }
.sched-item { padding: 9px 10px; border-radius: 10px; background: var(--ink-2);
  border: 1px solid var(--line); transition: border-color .15s; }
.sched-item:hover { border-color: var(--line-3); }
.sched-row { display: flex; align-items: flex-start; gap: 7px; }
.sched-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.sched-dot.sch-ok { background: var(--pos, #4fd1a5); box-shadow: 0 0 6px rgba(79,209,165,.5); }
.sched-dot.sch-quiet { background: var(--fg-4); }
.sched-dot.sch-err { background: var(--neg, #ff6b6b); }
.sched-text { font-size: 12px; line-height: 1.4; color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sched-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin: 5px 0 0 14px; font-size: 10.5px; color: var(--fg-4); }
.sched-when { color: var(--accent-l); font-weight: 600; }
.sched-tag { background: rgba(120,120,120,.16); border-radius: 4px; padding: 0 5px; }
.sched-last { margin: 6px 0 0 14px; font-size: 10.5px; line-height: 1.45; color: var(--fg-3);
  border-left: 2px solid var(--line-3); padding-left: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sched-acts { display: flex; gap: 6px; margin: 7px 0 0 14px; }
.sched-btn { font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
  padding: 3px 9px; border-radius: 6px; background: none; color: var(--fg-3);
  border: 1px solid var(--line-3); transition: all .15s; }
.sched-btn:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-wash); }
.sched-btn:disabled { opacity: .6; cursor: default; }
.sched-del:hover { color: var(--neg, #ff6b6b); border-color: var(--neg, #ff6b6b);
  background: rgba(255,107,107,.1); }

/* ═══ Humanizer (Connect page) ═══ */
.hz-beta { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-wash); border-radius: 999px; padding: 2px 8px;
  vertical-align: middle; margin-left: 6px; }
.hz-card { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px; }
.hz-toprow { display: flex; align-items: center; gap: 14px; }
.hz-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: 0 0 auto; cursor: pointer; }
.hz-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.hz-track { position: absolute; inset: 0; border-radius: 999px; background: var(--ink-4);
  border: 1px solid var(--line-3); transition: all .22s cubic-bezier(.22,1,.36,1); }
.hz-thumb { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--fg-3); transition: all .22s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.hz-switch input:checked ~ .hz-track { background: var(--accent); border-color: var(--accent); }
.hz-switch input:checked ~ .hz-thumb { left: 24px; background: #fff; }
.hz-state-t { font-size: 14px; font-weight: 700; color: var(--fg); }
.hz-state-s { font-size: 12px; color: var(--fg-3); margin-top: 1px; }
.hz-body { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.hz-field { margin-bottom: 14px; }
.hz-field:last-child { margin-bottom: 0; }
.hz-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 7px; }
.hz-opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-4); }
.hz-seg { display: inline-flex; gap: 4px; background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; }
.hz-seg .seg-btn { font-size: 12px; padding: 6px 14px; border-radius: 7px; border: none;
  background: none; color: var(--fg-3); cursor: pointer; font-family: inherit; transition: all .15s; }
.hz-seg .seg-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.hz-hint { font-size: 11.5px; color: var(--fg-4); margin-top: 7px; line-height: 1.45; }
.hz-voice { width: 100%; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 12px; color: var(--fg); font-family: inherit; font-size: 13px; line-height: 1.55;
  resize: vertical; }
.hz-voice:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.hz-try { margin-top: 6px; }
.hz-actions { display: flex; gap: 8px; margin-top: 10px; }
.hz-result { margin-top: 14px; }
.hz-rep-h { font-size: 12.5px; font-weight: 700; color: var(--fg); display: flex;
  justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hz-score { font-size: 15px; font-weight: 800; color: var(--accent); }
.hz-bar { height: 6px; border-radius: 999px; background: var(--ink-4); overflow: hidden; }
.hz-bar-fill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.22,1,.36,1); }
.hz-bar-fill.hz-good { background: var(--pos, #4fd1a5); }
.hz-bar-fill.hz-mid { background: #f7c948; }
.hz-bar-fill.hz-bad { background: var(--neg, #ff6b6b); }
.hz-verdict { font-size: 11.5px; color: var(--fg-3); margin-top: 6px; }
.hz-finds { margin: 9px 0 0; padding-left: 18px; font-size: 12px; color: var(--fg-2); line-height: 1.65; }
.hz-finds b { color: var(--fg); }
.hz-clean { font-size: 12px; color: var(--pos, #4fd1a5); margin-top: 8px; }
.hz-delta { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.hz-d-from { font-size: 18px; font-weight: 800; color: var(--neg, #ff6b6b); }
.hz-d-arrow { color: var(--fg-4); }
.hz-d-to { font-size: 22px; font-weight: 800; color: var(--pos, #4fd1a5); }
.hz-d-lbl { font-size: 12px; color: var(--fg-3); }
.hz-fixed { font-size: 11.5px; color: var(--fg-3); margin-bottom: 9px; }
.hz-outbox { background: var(--ink-1); border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.65; color: var(--fg);
  max-height: 320px; overflow-y: auto; }
.plan-res-link { color: var(--accent); font-weight: 600; text-decoration: none; margin-left: 4px; }
.plan-res-link:hover { text-decoration: underline; }


/* ═══ Screen share + floating Pevra window ═══ */
.screen-btn.active, .pip-btn.active { color: var(--accent); background: var(--accent-wash); }
.screen-btn.active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.screen-pill {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--accent-wash); color: var(--accent-l);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  animation: msgReveal .3s cubic-bezier(.16,1,.3,1) both;
}
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: spPulse 1.8s ease-in-out infinite; }
@keyframes spPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.sp-stop { margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--fg-3); }
.sp-stop:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .sp-dot { animation: none; } }

/* ═══ Markets: Trending ═══ */
.mk-tabs { display: inline-flex; gap: 3px; margin-left: auto; background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.mk-tab { background: none; border: none; color: var(--fg-3); cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 12px;
  border-radius: 7px; transition: all .15s; }
.mk-tab.active { background: var(--accent); color: #fff; }
.mk-trending { display: flex; flex-direction: column; gap: 2px; }
.mk-trend-row {
  display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 10px 8px; border-radius: 10px;
  border-bottom: 1px solid var(--line); transition: background .14s;
}
.mk-trend-row:last-child { border-bottom: none; }
.mk-trend-row:hover { background: var(--ink-2); }
.mk-trend-row:active { transform: scale(.995); }
.mk-trend-rank { font-size: 11px; font-weight: 700; color: var(--fg-4); text-align: center; }
.mk-trend-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-trend-sym { font-size: 13.5px; font-weight: 700; color: var(--fg); }
.mk-trend-name { font-size: 11px; color: var(--fg-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.mk-trend-price { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.mk-trend-chg { font-size: 12.5px; font-weight: 700; min-width: 62px; text-align: right; }
.mk-trend-chg.up { color: var(--pos, #4fd1a5); }
.mk-trend-chg.down { color: var(--neg, #ff6b6b); }
.mk-trend-chg.flat { color: var(--fg-4); }
.mk-trend-note { font-size: 10.5px; color: var(--fg-4); margin-top: 8px; }
.mk-trend-empty { font-size: 12.5px; color: var(--fg-3); padding: 14px 4px; }

/* ═══ Markets: Analyst view ═══ */
.mk-con-sub { font-size: 11px; color: var(--fg-4); margin-left: auto; }
.mk-consensus { display: flex; flex-direction: column; gap: 2px; }
.mk-con-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 11px 8px; border-radius: 10px;
  border-bottom: 1px solid var(--line); transition: background .14s;
}
.mk-con-row:last-child { border-bottom: none; }
.mk-con-row:hover { background: var(--ink-2); }
.mk-con-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-con-sym { font-size: 13.5px; font-weight: 700; color: var(--fg); }
.mk-con-name { font-size: 11px; color: var(--fg-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.mk-con-mid { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.mk-con-tgt { font-size: 11.5px; color: var(--fg-2); white-space: nowrap; }
.mk-con-range { color: var(--fg-4); font-size: 10.5px; }
.mk-con-up { font-size: 11.5px; font-weight: 700; }
.mk-con-up.pos { color: var(--pos, #4fd1a5); }
.mk-con-up.neg { color: var(--neg, #ff6b6b); }
.mk-con-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mk-con-rating { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mk-con-rating.buy { background: color-mix(in srgb, var(--pos, #4fd1a5) 20%, transparent); color: var(--pos, #4fd1a5); }
.mk-con-rating.hold { background: rgba(247,201,72,.18); color: #d9a520; }
.mk-con-rating.sell { background: color-mix(in srgb, var(--neg, #ff6b6b) 20%, transparent); color: var(--neg, #ff6b6b); }
.mk-con-count { font-size: 10px; color: var(--fg-4); white-space: nowrap; }

/* ═══ Markets: News ═══ */
.mk-news { display: flex; flex-direction: column; gap: 2px; }
.mk-news-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px;
  padding: 11px 8px; border-radius: 10px; text-decoration: none;
  border-bottom: 1px solid var(--line); transition: background .14s;
}
.mk-news-row:last-child { border-bottom: none; }
.mk-news-row:hover { background: var(--ink-2); }
.mk-news-sym { font-size: 10px; font-weight: 800; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-wash); border-radius: 5px;
  padding: 3px 6px; margin-top: 1px; white-space: nowrap; }
.mk-news-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-news-title { font-size: 13px; line-height: 1.4; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-news-meta { font-size: 10.5px; color: var(--fg-4); }
.mk-news-arrow { font-size: 12px; color: var(--fg-4); margin-top: 2px; }
.mk-news-row:hover .mk-news-arrow { color: var(--accent); }

/* ═══ Offline mode ═══ */
.offline-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  display: flex; align-items: center; gap: 9px; justify-content: center;
  padding: 8px 14px; font-size: 12.5px; font-weight: 500;
  background: #3a2a18; color: #f4e6d2; border-bottom: 1px solid rgba(255,255,255,.1);
  animation: obIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes obIn { from { transform: translateY(-100%); } to { transform: none; } }
.offline-bar b { color: #f7c948; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #f7c948; flex: 0 0 auto; }
.ob-dot.sending { background: var(--pos, #4fd1a5); animation: obPulse 1s ease-in-out infinite; }
@keyframes obPulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.ob-text { line-height: 1.4; }
body.is-offline .app-topbar { top: 34px; }

/* a queued (unsent) message */
.msg.queued .msg-content { opacity: .82; }
.queued-note { margin-top: 7px; font-size: 11.5px; color: #d9a520;
  background: rgba(247,201,72,.12); border-radius: 8px; padding: 6px 9px; line-height: 1.45; }

/* a conversation opened from the offline cache */
.offline-copy-note {
  font-size: 11.5px; color: var(--fg-3); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; margin-bottom: 14px; text-align: center;
}
.conv-item.cached .conv-item-title { opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .offline-bar, .ob-dot.sending { animation: none; }
}

/* ═══ Offline knowledge packs ═══ */
.pack-answer { border-left: 3px solid var(--accent); padding-left: 12px; }
.pack-src { font-size: 11.5px; color: var(--fg-3); margin-bottom: 10px; line-height: 1.45; }
.pack-src b { color: var(--accent-l); }
.pack-hit { margin-bottom: 12px; }
.pack-hit-t { font-size: 13.5px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.pack-hit-b { font-size: 14px; line-height: 1.65; color: var(--fg-2); }
.pack-note { font-size: 11px; color: var(--fg-4); font-style: italic; margin-top: 4px; }

/* Offline packs are a Heavy Researcher feature — say so on the heading, and
   replace the form with the reason rather than a dead, disabled input. */
.tier-pill {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: rgba(229, 85, 47, .12);
  border: 1px solid rgba(229, 85, 47, .3); vertical-align: middle;
}
.tier-pill.earned { color: var(--pos, #2e9e6b); background: rgba(46, 158, 107, .12);
  border-color: rgba(46, 158, 107, .3); }
.pk-locked { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px;
  background: var(--surface-2, rgba(127, 127, 127, .06));
  border: 1px solid var(--border, rgba(127, 127, 127, .18)); }
.pk-lock-top { display: flex; gap: 11px; align-items: flex-start; }
.pk-lock-ic { font-size: 17px; line-height: 1.3; flex: 0 0 auto; }
.pk-lock-t { font-size: 14px; font-weight: 700; color: var(--fg); }
.pk-lock-b { font-size: 13px; line-height: 1.5; color: var(--fg-3); margin-top: 3px; }
.pk-lock-cta { margin-top: 12px; }
/* A low-confidence hit is dimmed rather than hidden — it's sometimes still
   useful, but it must not carry the same visual authority as a real answer. */
.pack-answer.weak { border-left-color: var(--fg-4); opacity: .88; }
.pack-answer.weak .pack-src b { color: var(--fg-2); }

/* Offline packs manager */
.pk-add { display: flex; gap: 8px; margin-bottom: 10px; }
.pk-add .inp { flex: 1; background: var(--ink-1); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 10px 12px; color: var(--fg); font-family: inherit; font-size: 13.5px; }
.pk-add .inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.pk-msg { font-size: 12.5px; line-height: 1.5; min-height: 18px; margin-bottom: 10px; }
.pk-working { color: var(--fg-3); }
.pk-done { color: var(--pos, #4fd1a5); }
.pk-err { color: var(--neg, #ff6b6b); }
.pk-note { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }

/* ── Pevra Live — places ── */
.lv-privacy { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 14px;
  padding: 11px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--fg-3); background: var(--surface-2, rgba(127,127,127,.06));
  border: 1px solid var(--border, rgba(127,127,127,.16)); }
.lv-lock { flex: 0 0 auto; font-size: 14px; }
.lv-add { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.lv-add .inp { flex: 1 1 200px; }
.lv-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.lv-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--surface-2, rgba(127,127,127,.05));
  border: 1px solid var(--border, rgba(127,127,127,.14)); }
.lv-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.lv-meta { font-size: 11.5px; color: var(--fg-4); margin-top: 2px; }
.lv-watch { margin-top: 16px; }
.lv-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  color: var(--fg-2); cursor: pointer; }
.lv-caveat { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--fg-4); }
.pk-list { display: flex; flex-direction: column; gap: 8px; }
.pk-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.pk-item-main { flex: 1; min-width: 0; }
.pk-item-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pk-topic { font-size: 14px; font-weight: 700; color: var(--fg); text-transform: capitalize; }
.pk-meta { font-size: 11px; color: var(--fg-4); }
.pk-sum { font-size: 12.5px; color: var(--fg-3); line-height: 1.5; margin-top: 4px; }
.pk-del { background: none; border: none; color: var(--fg-4); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.pk-del:hover { color: var(--neg, #ff6b6b); background: rgba(255,107,107,.1); }
.pk-empty { font-size: 12.5px; color: var(--fg-3); padding: 14px 4px; }

/* ══════════════════════════════════════════════════════════════════
   DOCUMENTS — Word, Google Docs and the voice Pevra writes in.
   Split out of Connect, where all of this was crammed into a 680px
   settings column next to OAuth redirect URIs and a GitHub token box.
   The fix for "cramped" is mostly space: a wider measure, real padding,
   and room between things so each one reads as its own job.
   ══════════════════════════════════════════════════════════════════ */
.docs-wrap {
  flex: 1; overflow-y: auto;
  padding: 26px 30px 90px;
  max-width: 1080px; width: 100%; margin: 0 auto;
}
.docs-intro {
  font-size: 14.5px; line-height: 1.6; color: var(--fg-2);
  max-width: 60ch; margin: 0 0 26px;
}

.doc-card {
  margin-bottom: 22px; border-radius: 16px;
  background: var(--surface, var(--bg-2, transparent));
  border: 1px solid var(--line, rgba(127,127,127,.16));
  overflow: hidden;
}
.doc-card-head {
  padding: 20px 24px 0;
}
.doc-card-title {
  font-family: var(--serif, inherit);
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--fg); margin: 0;
}
.doc-card-sub {
  font-size: 13.5px; line-height: 1.55; color: var(--fg-3);
  margin: 6px 0 0; max-width: 62ch;
}
.doc-card-body { padding: 18px 24px 24px; }

/* The controls inside were built for a narrow column. Give them air. */
.doc-card-body .settings-desc { font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.doc-card-body .form-input,
.doc-card-body .inp { padding: 11px 13px; font-size: 14px; border-radius: 10px; }
.doc-card-body .form-textarea { min-height: 120px; line-height: 1.6; }
.doc-card-body .btn-primary { padding: 11px 18px; border-radius: 10px; font-size: 14px; }
.doc-card-body .intg-toolbar { gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-card-body .file-list { gap: 6px; }

/* Tabs were 11px uppercase mono crammed on one line — five of them on a
   phone wrapped into an unreadable smudge. Pills that wrap, and are big
   enough to hit with a thumb. */
.doc-card-body .intg-tabs {
  gap: 8px; flex-wrap: wrap; border-bottom: none;
  margin: 0 0 18px; padding-bottom: 2px;
}
.doc-card-body .intg-tab {
  border: 1px solid var(--line, rgba(127,127,127,.2));
  border-radius: 999px; padding: 8px 15px;
  font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--fg-2); background: transparent;
}
.doc-card-body .intg-tab:hover {
  color: var(--fg); border-color: var(--fg-4);
}
.doc-card-body .intg-tab.active {
  color: #fff; background: var(--accent); border-color: var(--accent);
}

/* Connection state, answerable at a glance instead of by scrolling. */
.doc-conn-chips { display: flex; gap: 7px; margin-left: auto; align-items: center; }
.doc-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line, rgba(127,127,127,.2)); color: var(--fg-3); white-space: nowrap;
}
.doc-chip.on { color: var(--pos, #2e9e6b); border-color: rgba(46,158,107,.35);
  background: rgba(46,158,107,.08); }
.mode-pill.pill-documents { background: rgba(229,85,47,.12); color: var(--accent); }

@media (max-width: 760px) {
  .docs-wrap { padding: 18px 16px 90px; }
  .doc-card-head { padding: 16px 16px 0; }
  .doc-card-body { padding: 14px 16px 18px; }
  .doc-card-title { font-size: 17px; }
  .doc-conn-chips { display: none; }   /* the header is tight enough on a phone */
}

/* A generated image whose file has gone — almost always a deploy wiping the
   disk. Without this the browser falls back to the alt text, which is the
   entire prompt, so the picture became a wall of art direction on screen. */
.gen-img-missing {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--surface-2, rgba(127,127,127,.06));
  border: 1px dashed var(--line, rgba(127,127,127,.28));
  font-size: 13.5px; color: var(--fg-2); max-width: 420px;
}
.gim-what { font-size: 12.5px; color: var(--fg-3); font-style: italic; }
.gim-hint { font-size: 12px; color: var(--fg-4); }

/* The car offer. A bar, not a takeover — an app that hijacks the screen
   because it thinks you're driving is worse than one that asks. */

/* ══════════════════════════════════════════════════════════════════════
   SETTINGS — tabbed, and built like an app rather than a long web page.

   The old screen was one column of eighteen sections: everything Pevra can
   do, stacked, so finding the notification switch meant scrolling past the
   humanizer and the offline packs. Four tabs, a fixed profile at the top,
   and grouped rows that behave like the settings list on a phone.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the segmented control ──
   A sliding indicator, not underlines: underlines read as a website's nav,
   a pill that moves reads as a control. It sticks under the header so the
   tabs are still there after scrolling half a screen of switches. */
.sett-tabs {
  position: sticky; top: 0; z-index: 6;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; margin: 14px 20px 4px; padding: 3px;
  border-radius: 13px;
  background: var(--ink-3, var(--ink-2)); border: 1px solid var(--line);
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
}
/* A translucent backdrop so rows scrolling underneath don't show through the
   gaps in the track. */
.sett-tabs::before {
  content: ""; position: absolute; inset: -14px -20px -6px;
  background: var(--ink); z-index: -2;
}
.sett-tab-ind {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: 0;
  border-radius: 10px; background: var(--ink-2);
  border: 1px solid var(--line-2, var(--line));
  box-shadow: 0 2px 8px -3px rgba(0,0,0,.55);
  transition: transform .28s cubic-bezier(.22,1,.36,1), width .28s cubic-bezier(.22,1,.36,1);
}
.sett-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 9px 6px; border-radius: 10px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: -.01em; color: var(--fg-3);
  transition: color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sett-tab:hover { color: var(--fg-2); }
.sett-tab.is-on { color: var(--fg); }
.sett-tab:active { transform: scale(.97); }
.sett-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── panels ──
   The incoming panel lifts in. Short enough not to be in the way, long
   enough that the eye follows the change rather than being teleported. */
.sett-panel[hidden] { display: none; }
.sett-panel { animation: settIn .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes settIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sett-panel { animation: none; }
  .sett-tab-ind { transition: none; }
}

/* ── grouped rows ──
   Taller targets, hairlines inset from the label the way a real settings
   list insets them, and a press state — a row that doesn't respond to a
   finger is the single biggest tell that something is a web page. */
.sett-panel .settings-card {
  border-radius: 14px; margin-bottom: 12px;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.sett-panel .settings-row {
  min-height: 52px; padding: 11px 16px; gap: 14px;
  border-bottom: 1px solid var(--line);
}
.sett-panel .settings-row:last-child { border-bottom: none; }
/* Inset the hairline so it starts under the text, not at the card edge. */
.sett-panel .settings-card > .settings-row:not(:last-child) {
  border-image: linear-gradient(to right, transparent 16px, var(--line) 16px) 1;
  border-bottom-style: solid;
}
.sett-panel .settings-row > div:first-child { min-width: 0; }
.sett-panel .settings-label { font-size: 14px; font-weight: 550; letter-spacing: -.01em; }
.sett-panel .settings-value-sm {
  font-family: inherit; font-size: 12px; letter-spacing: 0;
  color: var(--fg-3); margin-top: 3px; line-height: 1.35;
}
.sett-panel .settings-value { font-size: 12.5px; }
/* Rows that do something when pressed say so. */
.sett-panel .settings-row:has(> .btn-sm):active,
.sett-panel .settings-row:has(> button):active { background: var(--ink-3, rgba(255,255,255,.03)); }

.sett-panel .sett-section { padding: 18px 20px 0; }
.sett-panel .sett-section:first-child { padding-top: 14px; }
.sett-panel .sett-section-label {
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  text-transform: none; letter-spacing: -.01em;
  color: var(--fg-2); margin-bottom: 9px;
  display: flex; align-items: center; gap: 8px;
}
.sett-panel .settings-desc { margin-bottom: 12px; }

@media (max-width: 768px) {
  .sett-tabs { margin: 12px 16px 2px; }
  .sett-tabs::before { inset: -12px -16px -6px; }
  .sett-tab { font-size: 13px; padding: 9px 4px; }
  .sett-panel .sett-section { padding: 16px 16px 0; }
}
/* Narrow phones: four labels have to fit without wrapping. */
@media (max-width: 380px) {
  .sett-tab { font-size: 12px; letter-spacing: -.02em; }
}

/* ── inside the tabs: the last few things that still read as a web form ── */

/* Two inputs and a button in one flex row is 544px wide on a 390px phone, so
   the whole settings pane scrolled sideways. Nothing native scrolls sideways
   by accident. */
.sett-panel .memory-add-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px;
}
.sett-panel .memory-add-row .form-input { min-width: 0; }
@media (max-width: 560px) {
  .sett-panel .memory-add-row { grid-template-columns: 1fr 1fr; }
  .sett-panel .memory-add-row .btn-primary { grid-column: 1 / -1; }
}

/* The notification sub-headings were uppercase mono while the new section
   headings are sentence case. Two typographic systems on one screen is the
   thing that makes a screen look assembled rather than designed. */
.sett-panel .nt-group-label {
  font-family: inherit; font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: -.005em;
  color: var(--fg-3); margin: 0 2px 8px;
}
.sett-panel .settings-card + .nt-group-label { margin-top: 16px; }

/* Personality: four choices, one per screen-height on a phone. Two by two,
   compact, so the whole decision is visible at once. */
@media (max-width: 480px) {
  .sett-panel .pers-grid-sm { grid-template-columns: 1fr 1fr; gap: 9px; }
  .sett-panel .pers-grid-sm .pers-opt { padding: 12px 12px; border-radius: 13px; }
  .sett-panel .pers-grid-sm .pers-opt-name { font-size: 13.5px; }
  .sett-panel .pers-grid-sm .pers-opt-desc { font-size: 11.5px; line-height: 1.3; }
}

/* Room at the bottom so the last row clears the floating voice button. */
.sett-panel > .sett-section:last-child { padding-bottom: 96px; }

/* ── buttons inside settings ──
   Two rules named .btn-sm exist and the later one wins, so .btn-primary.btn-sm
   ended up with the accent's *ink* colour on a transparent background: "Save
   preferences" and "Save persona" were invisible in dark mode, 24px tall and
   11px of monospace. Inside the panels these are proper app buttons. */
.sett-panel .btn-primary {
  min-height: 44px; padding: 0 18px; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  background: var(--accent); color: var(--accent-ink); border: 0;
  justify-content: center;
}
.sett-panel .btn-primary.btn-sm { min-height: 40px; font-size: 13.5px; }
.sett-panel .btn-primary:active { transform: scale(.985); }

/* Row actions — Install, Start, Pair, Send test — as tinted pills rather than
   bordered monospace chips, which is a control panel, not an app. */
.sett-panel .settings-row .btn-sm:not(.btn-primary),
.sett-panel .notif-actions .btn-sm:not(.btn-primary),
.sett-panel .sett-section > .btn-sm:not(.btn-primary) {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0;
  min-height: 34px; padding: 0 15px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(229,85,47,.12);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent); border: 1px solid transparent;
}
.sett-panel .settings-row .btn-sm:not(.btn-primary):hover,
.sett-panel .notif-actions .btn-sm:not(.btn-primary):hover,
.sett-panel .sett-section > .btn-sm:not(.btn-primary):hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); border-color: transparent;
}
.sett-panel .settings-row .btn-sm:active { transform: scale(.96); }
.sett-panel .btn-sm.ghost, .sett-panel .btn-ghost {
  font-family: inherit; font-size: 13px; letter-spacing: 0;
  background: transparent; color: var(--fg-2);
}

/* The theme collections carried a third heading style — uppercase, 11px,
   letter-spaced — against the panel's sentence-case headings. Same system. */
.sett-panel .skin-section-title {
  font-family: inherit; font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: -.005em; color: var(--fg-3);
}

/* On a wide screen a segmented control stretched across 900px stops reading as
   a control, and settings rows a metre wide are a web page again. Everything
   sits in one column of app-ish width, centred. */
@media (min-width: 900px) {
  .sett-profile, .sett-tabs, .sett-panel {
    width: 100%; max-width: 720px; margin-left: auto; margin-right: auto;
  }
  .sett-tabs { max-width: 520px; }
  .sett-tabs::before { inset: -14px -50vw -6px; }
}


body.humaniser-open #pevra-presence { display: none !important; }


/* ══════════════════════════
   DIAL COMPOSER
   One card, three rows: a depth dial, the model chips, then the field.
   Replaces the old model-pill row + separate Deep button + effort panel —
   depth is a continuum, and past Deep the dial recruits all three models.
   ══════════════════════════ */
.dial-composer {
  --dc-track-bg: var(--ink-4);
  display: flex; flex-direction: column;
  max-width: 860px; margin: 0 auto;
  border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--ink-2);
  box-shadow: 0 4px 16px -6px rgba(40,30,20,.12), 0 1px 3px rgba(40,30,20,.06);
  overflow: hidden;
  transition: border-color .24s cubic-bezier(.16,1,.3,1);
}
/* Past Deep the whole card takes the accent — the one signal that this send
   is going to cost real time. */
.dial-composer.dc-deep { border-color: var(--accent); }

/* ── Row 1 — the depth dial ── */
.dc-dial { display: flex; align-items: center; gap: 14px; padding: 12px 16px 6px; }
.dc-track-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.dc-track { position: relative; height: 4px; border-radius: 999px; background: var(--dc-track-bg); }
.dc-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: var(--accent); overflow: hidden;
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.dc-thumb {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 6px 22px -6px var(--accent-glow);
  transition: left .45s cubic-bezier(.16,1,.3,1);
}
.dc-stops { display: flex; }
.dc-stop {
  flex: 1; min-height: 18px; padding: 3px 0; border: 0; background: transparent;
  cursor: pointer; font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
  transition: color .24s cubic-bezier(.16,1,.3,1);
}
.dc-stop:hover:not(.locked) { color: var(--fg); }
.dc-stop.active { color: var(--accent); }
.dc-stop.locked { color: var(--fg-4); cursor: not-allowed; }
.dc-stop-in { display: flex; align-items: center; gap: 4px; justify-content: center; }
.dc-stop:first-child .dc-stop-in { justify-content: flex-start; }
.dc-stop:last-child  .dc-stop-in { justify-content: flex-end; }
.dc-lock { display: none; flex: none; }
/* "Exhaustive" is too wide for the last stop on a phone. */
.dc-stop-short { display: none; }
.dc-stop.locked .dc-lock { display: block; }

.dc-time {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding-bottom: 16px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4);
  white-space: nowrap; transition: color .24s cubic-bezier(.16,1,.3,1);
}
.dial-composer.dc-deep .dc-time, .dc-time.nudging { color: var(--accent); }
.dc-time-dot {
  position: relative; display: none; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); flex: none;
}
.dial-composer.dc-deep .dc-time-dot { display: block; }
.dc-time-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--accent); animation: dcHalo 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes dcHalo { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

/* ── Dial at full — Exhaustive earns its own motion ──
   An ember sweep travels the filled track, the thumb throws a second slower
   ring, and the card's edge breathes. Only ever runs at the last stop. */
.dc-fill::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
}
.dial-composer.dc-max .dc-fill::after { opacity: 1; animation: dcSweep 1.9s cubic-bezier(.16,1,.3,1) infinite; }
.dc-thumb::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0;
}
.dial-composer.dc-max .dc-thumb { animation: dcThumbBeat 2.6s cubic-bezier(.16,1,.3,1) infinite; }
.dial-composer.dc-max .dc-thumb::after { animation: dcRing 2.6s cubic-bezier(.16,1,.3,1) infinite; }
.dial-composer.dc-max { animation: dcEdge 2.6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes dcSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes dcRing { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes dcThumbBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes dcEdge {
  0%, 100% { box-shadow: 0 4px 16px -6px rgba(40,30,20,.12), 0 0 0 0 var(--accent-wash); }
  50%      { box-shadow: 0 4px 16px -6px rgba(40,30,20,.12), 0 0 0 4px var(--accent-wash); }
}

/* ── Row 2 — model chips ── */
.dc-models {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.dc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 30px;
  padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--fg-3); cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background .24s, color .24s, border-color .24s, opacity .24s;
}
.dc-chip:hover { border-color: var(--line-3); }
.dc-chip:active { transform: scale(.96); }
.dc-chip.active { background: var(--ink-0); color: var(--fg); border-color: var(--line-3); }
.dc-chip[data-model="auto"].active {
  background: var(--accent-wash); color: var(--accent); border-color: var(--accent);
}
.dc-logo { flex: none; }
/* Each mark keeps its own signal hue, so the row reads at a glance. */
.dc-logo-claude { color: var(--accent); }
.dc-logo-openai { color: var(--c-trade); }
.dc-logo-gemini { color: var(--c-web); }
/* Past Deep the dial has taken model choice away from the chips. */
.dial-composer.dc-deep .dc-chip { opacity: .45; }

.dc-resolved {
  flex: none; margin-left: auto; padding-left: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-4); white-space: nowrap;
}
.dial-composer.dc-deep .dc-resolved, .dc-resolved.nudging { color: var(--accent); }

/* ── Row 3 — the field. It reuses .composer-inner so the existing attach,
   persona, screen-share and send wiring keeps working untouched; the pill
   chrome it carries on its own is dropped here. ── */
.dial-composer .composer-inner {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0; border-top: 1px solid var(--line) !important;
  padding: 8px 10px 8px 16px; max-width: none; margin: 0;
}

@media (max-width: 768px) {
  .dial-composer { border-radius: 20px; }
  .dc-dial { padding: 12px 14px 6px; }
  .dc-stop { font-size: 8.5px; min-height: 28px; }
  .dc-stop:last-child .dc-stop-label { display: none; }
  .dc-stop:last-child .dc-stop-short { display: inline; }
  .dc-models { padding: 9px 12px; flex-wrap: wrap; gap: 6px; }
  .dc-chip { min-height: 36px; }
  /* A nowrap row clips the fourth chip at 390px, so the note takes its own line. */
  .dc-resolved { width: 100%; margin-left: 0; padding-left: 2px; }
  .dial-composer .composer-inner { padding: 8px 10px 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-time-dot::after,
  .dial-composer.dc-max,
  .dial-composer.dc-max .dc-fill::after,
  .dial-composer.dc-max .dc-thumb,
  .dial-composer.dc-max .dc-thumb::after { animation: none; }
}

/* ── Press to open ──────────────────────────────────────────────────────
   The two control rows collapse behind a chip on the field row, so the
   composer is a field again (71px) and only costs its full height on the
   turns you are actually changing how Pevra answers. The chip carries the
   state it hides, so nothing is out of sight — only out of the way.

   Height is animated in real pixels from JS and released to `auto` at the
   end: `height: auto` is not interpolable, and a guessed max-height either
   clips the row or eases against dead space. The chips wrap to a second
   line on a phone, so the height genuinely varies and has to be measured. */
.dc-panel { height: 0; overflow: hidden; will-change: height; }
.dc-panel.dc-animating { transition: height .34s cubic-bezier(.16,1,.3,1); }
.dc-panel-in {
  opacity: 0; transform: translateY(-5px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.dial-composer.dc-open .dc-panel-in { opacity: 1; transform: none; }
/* Closed, the field row is the whole card — its divider would read as a
   stray rule across the top. */
.dial-composer:not(.dc-open) .composer-inner { border-top-color: transparent !important; }

.dc-summary {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--fg-2); cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 500; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.dc-summary:hover { border-color: var(--line-3); color: var(--fg); }
.dc-summary:active { transform: scale(.96); }
.dial-composer.dc-open .dc-summary { background: var(--ink-3); border-color: var(--line-3); color: var(--fg); }
.dc-sum-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.dc-sum-chev { flex: none; color: var(--fg-4); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.dial-composer.dc-open .dc-sum-chev { transform: rotate(180deg); }
/* Deep is worth saying out loud even while the panel is shut. */
.dial-composer.dc-deep .dc-summary { border-color: var(--accent); color: var(--accent); }

/* ── Once-only depth + model announcement ─────────────────────────── */
.cci-overlay {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  padding: 20px; overflow-y: auto; background: rgba(29,22,16,.48);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .25s ease;
}
.cci-overlay.in { opacity: 1; }
.cci-overlay.out { opacity: 0; }
.cci-card {
  position: relative; width: min(620px, 100%); padding: 34px;
  border: 1px solid var(--line-2); border-radius: 26px; overflow: hidden;
  background: var(--ink-1); color: var(--fg);
  box-shadow: 0 28px 90px rgba(28,20,13,.28);
  transform: translateY(14px) scale(.985); transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.cci-overlay.in .cci-card { transform: none; }
.cci-card::before {
  content: ""; position: absolute; width: 260px; height: 260px; right: -100px; top: -125px;
  border-radius: 50%; background: var(--accent-wash); filter: blur(2px); pointer-events: none;
}
.cci-close {
  position: absolute; z-index: 1; top: 17px; right: 18px; width: 32px; height: 32px;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--ink-2);
  color: var(--fg-3); cursor: pointer; font: 300 20px/1 var(--sans);
}
.cci-kicker { position: relative; font: 600 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); }
.cci-kicker span { display: inline-block; margin-right: 8px; padding: 5px 8px; border-radius: 999px; background: var(--accent); color: white; letter-spacing: .12em; }
.cci-card h2 { position: relative; margin: 20px 0 8px; font: 600 clamp(30px, 5vw, 45px)/.98 var(--display); letter-spacing: -.035em; }
.cci-lede { position: relative; max-width: 500px; margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.55; }
.cci-demo { margin: 25px 0 22px; padding: 18px 18px 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.cci-depth-head { display: flex; align-items: baseline; gap: 9px; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.cci-depth-head b { margin-left: auto; color: var(--accent); }
.cci-depth-head small { color: var(--fg-4); }
.cci-track { position: relative; height: 3px; margin: 16px 0 7px; border-radius: 99px; background: var(--line-2); }
.cci-track i { display: block; width: 34%; height: 100%; border-radius: inherit; background: var(--accent); }
.cci-track em { position: absolute; left: 34%; top: 50%; width: 13px; height: 13px; border: 3px solid var(--ink-2); border-radius: 50%; background: var(--accent); transform: translate(-50%,-50%); box-shadow: 0 0 0 1px var(--accent); }
.cci-stops { display: flex; justify-content: space-between; font: 500 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-4); }
.cci-stops .on { color: var(--accent); }
.cci-models { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.cci-models span { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-3); font-size: 11px; }
.cci-models span.on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.cci-explainers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cci-explainers > div { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.cci-num { color: var(--accent); font: 600 10px/1.45 var(--mono); }
.cci-explainers p { margin: 0; color: var(--fg-3); font-size: 12.5px; line-height: 1.48; }
.cci-explainers b { color: var(--fg); font-size: 13px; }
.cci-note { margin: 20px 0 0; padding: 11px 13px; border-radius: 11px; background: var(--accent-wash); color: var(--fg-2); font-size: 11.5px; line-height: 1.45; }
.cci-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.cci-actions button { min-height: 41px; padding: 0 17px; border-radius: 999px; cursor: pointer; font: 600 12.5px/1 var(--sans); }
.cci-secondary { border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); }
.cci-primary { border: 1px solid var(--accent); background: var(--accent); color: white; box-shadow: 0 8px 22px var(--accent-wash); }
@media (max-width: 580px) {
  .cci-overlay { align-items: end; padding: 10px; }
  .cci-card { padding: 28px 20px 20px; border-radius: 24px; }
  .cci-card h2 { margin-top: 17px; }
  .cci-explainers { grid-template-columns: 1fr; gap: 13px; }
  .cci-actions { flex-direction: column-reverse; }
  .cci-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cci-overlay, .cci-card { transition: none; }
}

@media (max-width: 768px) {
  /* The field already takes its own row here, so the chip shares one with the
     utility buttons and Send. At full width it overflowed that row and pushed
     Send onto a third line — which is the opposite of the point. Depth is the
     half worth carrying (it is what costs time); the model is one tap away. */
  .dc-summary { font-size: 11.5px; padding: 6px 10px; min-height: 32px; }
  .dc-sum-model { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-panel.dc-animating { transition: none; }
  .dc-panel-in { transition: none; }
  .dc-sum-chev { transition: none; }
}