/* ============================================================================
   Pretel — enterprise call copilot overlay
   Design system: deep-ocean glass, ONE ocean-teal accent used sparingly
   (primary action, focus, active state, the hero). Depth comes from layered
   shadows, a top light-line, and whisper-faint teal casts — never loud glow or
   rainbow gradients. Hairline borders, a precise spacing scale, real hierarchy,
   crisp micro-interactions. Layout law: #app is a fixed-height flex column with
   stable panes; only .transcript scrolls.
   ============================================================================ */

/* Inter — a world-class product typeface, bundled locally so it always loads. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter.woff2") format("woff2");
}

:root {
  /* Light, airy canvas — a subtly cool-tinted panel so pure-white cards float
     above it on real shadows (the Stripe/Linear light recipe). Near-opaque so
     the copilot stays crisp over any busy call background. */
  --bg: rgba(238, 241, 249, 0.985);
  --bg-solid: #eef1f9;
  --card: #ffffff;                       /* elevated surfaces float in white */
  --surface: #ffffff;                    /* controls read as white tiles */
  --surface-2: rgba(24, 34, 78, 0.045);
  --surface-3: rgba(24, 34, 78, 0.08);
  --border: rgba(24, 34, 78, 0.08);
  --border-2: rgba(24, 34, 78, 0.13);

  /* Ink — deep navy from the logo wordmark, softening to cool greys. */
  --text: #0d1226;
  --text-2: #414a68;
  --muted: #6b7291;
  --muted-2: #99a0ba;

  /* Brand accent: the logo's royal blue, with violet + cyan companions. */
  --accent: #2f6bff;
  --accent-hover: #1f57e6;
  --accent-weak: rgba(47, 107, 255, 0.10);
  --accent-border: rgba(47, 107, 255, 0.30);
  --violet: #7c5cff;
  --cyan: #22b8e6;
  /* The signature gradient — P-mark blue → violet → arc cyan. */
  --brand: linear-gradient(120deg, #2f6bff 0%, #7c5cff 46%, #22b8e6 100%);
  --good: #12b886;
  --record: #fa5252;

  /* Shape & elevation */
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 9px;
  /* Soft, layered light-mode shadows — depth without harsh lines. */
  --shadow:
    0 0 0 1px rgba(24, 34, 78, 0.06),
    0 18px 40px -20px rgba(24, 34, 78, 0.22),
    0 48px 80px -40px rgba(24, 34, 78, 0.28);
  --shadow-card:
    0 1px 2px rgba(24, 34, 78, 0.05),
    0 16px 34px -18px rgba(24, 34, 78, 0.22);
  --shadow-sm:
    0 1px 2px rgba(24, 34, 78, 0.05),
    0 2px 6px -3px rgba(24, 34, 78, 0.10);
  --highlight: rgba(255, 255, 255, 0.9);   /* top inner light line */
  --accent-glow: rgba(47, 107, 255, 0.22);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html, body { height: 100%; }
body {
  background: transparent;
  font-family: var(--font);
  color: var(--text);
  font-size: 8.13px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: "cv05" 1; /* Inter: lowercase l with a tail — clearer glyphs */
  overflow: hidden;
  user-select: none;
}
/* Counts and metrics line up cleanly with tabular figures. */
#kbCount, #kbPanelCount, #sourcesCount, .kb-badge, .src-score { font-variant-numeric: tabular-nums; }

kbd {
  font: 600 6.88px var(--font);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--text-2);
  white-space: nowrap;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 6.88px; }
svg { display: block; }

/* ── App shell ─────────────────────────────────────────────────────── */
#app.glass {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Deep glass with brand light spilling from the top and a faint violet pool at
     the base — gives the panel real depth without reading as a flat gradient. */
  background:
    radial-gradient(130% 78% at 50% -25%, rgba(59, 116, 255, 0.11), transparent 55%),
    radial-gradient(120% 60% at 50% 125%, rgba(124, 92, 246, 0.08), transparent 55%),
    var(--bg);
  backdrop-filter: blur(40px) saturate(135%);
  -webkit-backdrop-filter: blur(40px) saturate(135%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: appIn 0.42s var(--ease) both;
}
/* The panel eases in when it opens — a small, premium touch of life. */
@keyframes appIn {
  from { opacity: 0; transform: scale(0.985) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* A hairline of light along the top inner edge — the classic "real glass" cue. */
#app.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 1px 0 var(--highlight);
}

/* ── Title bar ─────────────────────────────────────────────────────── */
#titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: grab; }
/* A mini of the logo mark: the brand-gradient rounded square + a white play glyph. */
.logo-orb {
  position: relative;
  width: 21px; height: 21px; border-radius: 6px; flex-shrink: 0;
  background: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 8px -2px var(--accent-glow);
}
.logo-orb::after {
  content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 7px solid #fff;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.brand-name { font-weight: 650; font-size: 21.25px; letter-spacing: -0.3px; }
.brand-sub {
  font-size: 6.88px; color: var(--muted-2); font-weight: 550;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-left: 1px solid var(--border); padding-left: 9px; white-space: nowrap;
}
.titlebar-actions { display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; flex-shrink: 0; }

.icon-btn {
  -webkit-app-region: no-drag;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-sm);
  height: 34px; min-width: 34px;
  padding: 0 10px;
  font-size: 8.75px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent-border); box-shadow: 0 3px 8px -3px var(--accent-glow); }
.icon-btn.danger:hover { color: var(--record); border-color: rgba(229, 96, 110, 0.4); }

/* Visibility toggle — clear two-state button.
   Default (stealth ON = HIDDEN): green, shows the eye-off icon + "Hidden".
   .off (stealth OFF = VISIBLE): amber, shows the eye icon + "Visible". */
/* Hidden (normal) = quiet, with a small green tick. Visible = amber caution,
   because being seen on screen-share is the state worth flagging. */
.stealth-toggle {
  font-size: 7.5px; font-weight: 600;
  color: var(--text-2);
  border-color: var(--border-2);
  background: var(--surface);
}
.stealth-toggle:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.stealth-toggle .eye { display: none; align-items: center; color: var(--good); }
.stealth-toggle .eye svg { width: 15px; height: 15px; }
.stealth-toggle .eye-hidden { display: inline-flex; }   /* default = hidden state */
.stealth-toggle.off { color: #f0b447; border-color: rgba(240, 180, 71, 0.45); background: rgba(240, 180, 71, 0.12); }
.stealth-toggle.off:hover { background: rgba(240, 180, 71, 0.18); border-color: rgba(240, 180, 71, 0.6); color: #f0b447; }
.stealth-toggle.off .eye { color: #f0b447; }
.stealth-toggle.off .eye-hidden { display: none; }
.stealth-toggle.off .eye-visible { display: inline-flex; }

/* ── Main (only .transcript scrolls) ───────────────────────────────── */
#main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 15px 16px 8px;
  overflow: hidden;
}

.context-bar { flex-shrink: 0; }
.context-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  padding: 11px 13px;
  font: 8.13px var(--font);
  outline: none;
  user-select: text;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.context-input::placeholder { color: var(--muted-2); }
.context-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
/* A quiet target icon marks this as "what are you working on" context. */
.context-bar .context-input {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237d89b3' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='0.6' fill='%237d89b3' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

/* ── Best move — the dominant box: it grows to fill the panel ─────────── */
.suggestion-card {
  flex: 1 1 auto;
  min-height: 200px;
  position: relative;
  /* The hero surface — a white card with brand light pooling from the top edge,
     lifted off the panel with a soft shadow and a gentle coloured aura. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(47, 107, 255, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(124, 92, 246, 0.035), rgba(47, 107, 255, 0.01)),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: var(--shadow-card), 0 24px 60px -28px var(--accent-glow);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* A luminous light sweeping across the top edge of the hero — subtle life. */
.suggestion-card::before {
  content: "";
  position: absolute;
  top: 0; left: -40%; width: 60%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 255, 0.9), transparent);
  animation: sweep 4.5s var(--ease) infinite;
}
@keyframes sweep { 0% { left: -60%; } 60%, 100% { left: 120%; } }
.suggestion-card.thinking {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card), 0 24px 60px -24px var(--accent-glow), 0 0 0 3px var(--accent-weak);
}
.suggestion-head { display: flex; align-items: center; justify-content: space-between; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 6.56px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent);
}
.pill-ic { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
.suggestion-card.thinking .pill { color: var(--accent-hover); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); transition: background .2s; }
.live-dot.on { background: var(--record); }

.suggestion-body {
  font-size: 8.75px;
  line-height: 1.55;
  color: var(--text);
  user-select: text;
  /* Fills the hero card and scrolls internally. The answer starts from the TOP
     so it reads like a script you glance down — never centred or clipped. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
  padding-right: 4px;
}
/* The line to say — big, high-contrast, scannable in a glance. A soft accent
   rail on the left reads as "say this" without noisy quote marks. */
.suggestion-body .say {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  padding-left: 14px;
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--accent), var(--violet)) 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.suggestion-body .say.say-partial { color: var(--text-2); font-weight: 550; }

/* An information answer (a list / facts pulled from your files) — readable body
   text with proper lists, not a giant quote. */
.suggestion-body .answer { font-size: 8.13px; line-height: 1.55; color: var(--text); }
.suggestion-body .answer p { margin: 0 0 9px; }
.suggestion-body .answer p:last-child { margin-bottom: 0; }
.suggestion-body .answer strong { font-weight: 700; color: var(--text); }
.suggestion-body .answer ol, .suggestion-body .answer ul {
  list-style: none; margin: 6px 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.suggestion-body .answer li { position: relative; padding-left: 27px; }
.suggestion-body .answer ol { counter-reset: ans; }
.suggestion-body .answer ol > li::before {
  counter-increment: ans; content: counter(ans);
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--accent-weak); color: var(--accent);
  font-size: 6.56px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.suggestion-body .answer ul > li::before {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* The reasoning — quiet, set off by a hairline, out of the way. */
.suggestion-body .why {
  font-size: 7.81px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 12px;
  padding-top: 11px;
  padding-left: 14px;
  border-top: 1px solid var(--border);
}
.suggestion-body .empty-hint { color: var(--muted); font-size: 7.81px; line-height: 1.65; text-align: center; }
.ready-line { display: block; font-weight: 650; font-size: 8.44px; color: var(--text); margin-bottom: 4px; }
.suggestion-body.streaming::after {
  content: "▋"; color: var(--accent); animation: blink 1s steps(2) infinite; margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Sources — a quiet credibility chip that opens the matched past calls */
.sources { border-top: 1px solid var(--border); padding-top: 10px; }
.sources summary {
  cursor: pointer; font-size: 6.88px; color: var(--text-2); font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px 4px 10px; width: fit-content;
  transition: background .15s, border-color .15s, color .15s;
}
.sources summary:hover { background: var(--surface-2); border-color: var(--accent-border); color: var(--text); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: "›"; color: var(--accent); font-size: 8.75px; font-weight: 700; transition: transform .15s; }
.sources[open] summary::before { transform: rotate(90deg); }
.sources-list { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; max-height: 150px; overflow-y: auto; }
.source-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 10px; font-size: 7.19px; line-height: 1.45; user-select: text;
}
.source-item .src-top { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 3px; }
.source-item .src-agent { color: var(--text-2); font-weight: 600; }
.source-item .src-score { color: var(--muted-2); }
.source-item .src-move { color: var(--text-2); margin-top: 3px; }

/* Quick actions — one tidy row that scrolls sideways instead of wrapping raggedly */
.quick-actions {
  flex-shrink: 0; display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.quick-actions::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 999px; padding: 8px 14px;
  font: 600 8.13px var(--font); cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background .15s, color .15s, border-color .15s, transform .12s var(--ease), box-shadow .15s;
}
.chip:hover { color: var(--accent); border-color: var(--accent-border); transform: translateY(-1px); box-shadow: 0 4px 10px -4px var(--accent-glow); }
.chip:active { transform: translateY(0); }

/* Ask bar — type a question or request info directly */
.ask-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 5px 5px 5px 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.ask-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.ask-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font: 8.44px var(--font); padding: 8px 0; user-select: text;
}
.ask-input::placeholder { color: var(--muted-2); }
.ask-send {
  flex-shrink: 0; width: 34px; height: 34px; border: none; cursor: pointer;
  border-radius: 10px; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -8px var(--accent-glow);
  transition: background .15s, transform .12s var(--ease);
}
.ask-send:hover { background: var(--accent-hover); }
.ask-send:active { transform: scale(.94); }

/* Transcript — the single scroll region */
.transcript-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  font-size: 6.56px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600;
}
.text-btn { margin-left: auto; background: none; border: none; color: var(--muted-2); cursor: pointer; font: 6.88px var(--font); text-transform: none; letter-spacing: 0; }
.text-btn:hover { color: var(--record); }
/* Live capture health — makes a silent failure visible at a glance. */
.capture-status { display: inline-flex; gap: 11px; text-transform: none; letter-spacing: 0; }
.capture-status .cap { display: inline-flex; align-items: center; gap: 5px; font-size: 6.25px; font-weight: 600; color: var(--muted); }
.capture-status .cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); transition: background .2s; }
.capture-status .cap.live i { background: var(--good); box-shadow: 0 0 7px var(--good); }
.capture-status .cap.segment i { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.capture-status .cap.connecting i { background: #e0a23c; animation: liveFade 1s ease-in-out infinite; }
.capture-status .cap.unavailable { color: var(--record); }
.capture-status .cap.unavailable i { background: var(--record); }
.capture-status .cap.off { display: none; }

/* Transcript — a compact, fixed box beneath the hero (smaller than the suggestion) */
/* A compact live-caption strip — small, always pinned to the newest line, with
   older lines fading out at the top. Only the latest talk is in focus. */
.transcript {
  flex: 0 0 auto;
  height: 56px;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 2px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 100%);
}
.transcript::-webkit-scrollbar { width: 0; height: 0; }
.transcript-empty { font-size: 8.75px; color: var(--muted-2); padding: 8px 4px; }
/* Each line: a compact caption — tiny speaker tag + text, a coloured left tick. */
.turn {
  display: flex; align-items: baseline; gap: 6px;
  padding: 2px 8px; border-radius: 5px;
  border-left: 2px solid transparent;
  font-size: 10px; line-height: 1.42; user-select: text;
}
.turn .who {
  flex-shrink: 0;
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--muted-2);
}
.turn .said { color: var(--text-2); flex: 1; min-width: 0; }
.turn.customer { border-left-color: var(--accent); }
.turn.customer .who { color: var(--accent); }
.turn.customer .said { color: var(--text); }
.turn.agent { border-left-color: var(--good); }
.turn.agent .who { color: var(--good); }
/* Live, still-being-spoken words — softly pulsing until finalised. */
.turn.interim { border-left-color: var(--border-2); }
.turn.interim .who { color: var(--muted-2); }
.turn.interim .said { color: var(--muted); font-style: italic; }
.turn.interim { animation: liveFade 1.4s ease-in-out infinite; }
@keyframes liveFade { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* ── Footer ────────────────────────────────────────────────────────── */
#controls {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.btn {
  font: 650 8.75px var(--font); letter-spacing: -0.01em;
  border-radius: var(--r); padding: 10px 16px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
/* Primary — teal with an inner top highlight and a soft coloured cast below,
   so it feels moulded rather than painted. */
.btn.primary {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -10px var(--accent-glow);
}
.btn.primary:hover { background: var(--accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 22px -10px var(--accent-glow); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-2); }
.btn.full { width: 100%; margin-top: 4px; }
.btn.listen { flex: 1; }
/* While recording the button goes quiet with a live red dot — sophisticated,
   not a loud red slab fighting the brand blue. */
.btn.listen.active {
  background: var(--card); color: var(--text); border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn.listen.active:hover { border-color: var(--border-2); }
.listen-icon { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.btn.listen.active .listen-icon {
  border-radius: 2px; background: var(--record);
  box-shadow: 0 0 0 0 rgba(255, 107, 125, 0.55);
  animation: recPulse 1.7s var(--ease) infinite;
}
@keyframes recPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 125, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 107, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 125, 0); }
}
.btn.listen.active .listen-icon { border-radius: 2px; }

.kb-badge {
  flex-shrink: 0;
  font-size: 6.88px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 13px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.kb-badge:hover { border-color: var(--accent-border); box-shadow: 0 3px 8px -3px var(--accent-glow); }
.kb-badge #kbCount { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Full-screen overlays (welcome / setup / settings) ─────────────── */
.welcome, .setup, .settings {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--bg-solid);
}

/* Welcome */
.welcome { z-index: 40; align-items: center; justify-content: center; text-align: center; padding: 28px 26px; }
.welcome-aura { display: none; }
.welcome-inner { position: relative; max-width: 340px; width: 100%; margin: auto; }
.welcome-orb {
  width: 46px; height: 46px; margin: 0 auto 22px; border-radius: 13px;
  background: var(--brand); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px -8px var(--accent-glow);
}
/* White play glyph — the logo mark. */
.welcome-orb span {
  width: 0; height: 0; background: transparent; border-radius: 0;
  border-left: 17px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.welcome-kicker { font-size: 6.88px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.welcome-title { font-size: 15.63px; font-weight: 650; line-height: 1.18; letter-spacing: -0.5px; color: var(--text); margin-bottom: 12px; }
.welcome-title em { font-style: normal; color: var(--text); }
.welcome-sub { font-size: 8.44px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.welcome-props { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; text-align: left; }
.wp { display: flex; align-items: center; gap: 12px; padding: 11px 2px; }
.wp + .wp { border-top: 1px solid var(--border); }
.wp-ic {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent);
}
.wp-ic svg { width: 15px; height: 15px; }
.wp b { display: block; font-size: 8.13px; color: var(--text); font-weight: 550; }
.wp small { font-size: 7.19px; color: var(--muted); }
.welcome-cta { font-size: 8.75px; padding: 12px; }
.welcome-demo {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; color: var(--muted); font: 7.81px var(--font);
  cursor: pointer; transition: color .15s;
}
.welcome-demo:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.welcome-foot { font-size: 6.88px; color: var(--muted-2); margin-top: 14px; }

/* Setup */
.setup { justify-content: center; padding: 26px 24px; gap: 12px; }
.setup-head { text-align: center; margin-bottom: 6px; }
.setup h2 { font-size: 11.25px; font-weight: 600; letter-spacing: -0.3px; }
.setup p { font-size: 8.13px; margin-top: 6px; }
.perm-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 14px;
  transition: border-color .2s;
}
.perm-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.perm-ic svg { width: 16px; height: 16px; }
.perm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.perm-txt strong { font-size: 8.44px; font-weight: 550; }
.perm-txt .muted { font-size: 7.19px; }
.perm-row .btn { flex-shrink: 0; }
.perm-row.done { border-color: rgba(53, 185, 129, 0.4); }
.perm-row.done .perm-ic { color: var(--good); border-color: rgba(53, 185, 129, 0.4); }
.perm-row.done .btn { color: var(--good); pointer-events: none; background: transparent; border-color: transparent; }

/* Settings */
.settings { padding: 22px 20px; gap: 4px; }
.settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.settings-head h3 { font-size: 10px; font-weight: 600; }
.setting { display: flex; align-items: center; justify-content: space-between; font-size: 8.13px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.setting input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
/* Grouped controls moved into Settings (context field, quick prompts). */
.setting-group { padding: 12px 0; border-bottom: 1px solid var(--border); }
.setting-label { display: block; font-size: 7.5px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 9px; }
.setting-group .context-bar { margin: 0; }
#settings .quick-actions { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.shortcuts { margin-top: 14px; font-size: 7.5px; color: var(--muted); }
.shortcuts h4 { font-size: 6.56px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 10px; font-weight: 600; }
.shortcuts div { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
#backendStatus { margin-top: 16px; line-height: 1.5; }

/* ── Knowledge panel ───────────────────────────────────────────────── */
.knowledge { padding: 22px 20px; gap: 0; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 26px 18px; cursor: pointer;
  border: 1.5px dashed var(--border-2); border-radius: var(--r);
  background: var(--surface); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-weak); }
.dz-icon { color: var(--muted); margin-bottom: 2px; }
.dropzone:hover .dz-icon, .dropzone.drag .dz-icon { color: var(--accent); }
.dz-title { font-size: 8.44px; font-weight: 550; color: var(--text); }
.dz-sub { font-size: 7.19px; color: var(--muted-2); }

.kb-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; flex: 1; overflow-y: auto; min-height: 0; }
.kb-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: 7.81px;
}
.kb-item .ki-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.kb-item .ki-ic svg { width: 14px; height: 14px; }
.kb-item .ki-body { flex: 1; min-width: 0; }
.kb-item .ki-name { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-item .ki-meta { font-size: 6.88px; color: var(--muted); }
.kb-item.processing .ki-meta { color: var(--accent); }
.kb-item.error { border-color: rgba(229, 96, 110, 0.4); }
.kb-item.error .ki-meta { color: var(--record); }
.kb-item .ki-spin {
  width: 13px; height: 13px; border: 2px solid var(--border-2); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}
.kb-item .ki-done { color: var(--good); flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.kb-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; font-size: 7.81px; color: var(--text-2);
}
.kb-foot strong { color: var(--accent); }

/* Access gate */
.authgate {
  position: absolute; inset: 0; z-index: 60;
  background: var(--bg-solid);
  display: flex; align-items: center; justify-content: center; padding: 28px 26px;
}
.authgate-inner { max-width: 320px; width: 100%; text-align: center; }
.authgate h2 { font-size: 11.88px; font-weight: 600; margin-bottom: 8px; }
.authgate p { font-size: 8.13px; margin-bottom: 18px; }
.authgate .context-input { text-align: center; margin-bottom: 10px; }
#loginError { margin-top: 12px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 12px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff);
  color: var(--text, #1a1a17); font: inherit; font-size: 9.5px; font-weight: 500; }
.gbtn:hover { border-color: var(--accent, #7c5cff); }
.login-or { display: flex; align-items: center; gap: 8px; color: var(--text-dim, #8a887f);
  font-size: 7.5px; margin: 4px 0 10px; }
.login-or::before, .login-or::after { content: ""; height: 1px; background: var(--border); flex: 1; }

/* Demo affordances */
.demo-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 7px 13px; font: 600 7.5px var(--font); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.demo-btn:hover { background: var(--surface-3); border-color: var(--border-2); color: var(--text); }

/* ── Scrollbars ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

/* ── Browser mode: hide desktop-only capabilities ──────────────────── */
body.web-mode #stealthBtn,
body.web-mode #quitBtn,
body.web-mode .setting:has(#stealthToggle) { display: none; }
body.web-mode .brand { cursor: default; }

/* ── Collapsed Flow Bar (⌘H) ────────────────────────────────────────────
   When collapsed, main.js shrinks the window to a small capsule docked at the
   bottom-centre — the same idea as Wispr Flow's Flow Bar. We hide the full app
   and fill the window with one clickable capsule so the user always sees Pretel
   is there and can click to bring it back. Same glass, border and shadow as the
   app shell, so it reads as the same object folded down — seamless. */
.flowbar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  background: var(--bg);
  backdrop-filter: blur(36px) saturate(120%);
  -webkit-backdrop-filter: blur(36px) saturate(120%);
  border: 1px solid var(--border-2);
  border-radius: 999px;                /* capsule — the Flow Bar shape */
  box-shadow: var(--shadow);
  color: var(--text);
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.flowbar:hover { background: var(--surface); border-color: var(--accent-border); }
.flowbar:active { transform: scale(0.95); }
.flowbar-orb {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--brand);
  flex-shrink: 0;
}
/* A little equaliser that lives quietly when idle and dances while listening. */
.flowbar-wave { display: flex; align-items: center; gap: 2px; height: 12px; }
.flowbar-wave i {
  width: 2px; height: 3px;
  border-radius: 2px;
  background: var(--muted);
  transition: height 0.2s ease, background 0.2s ease;
}
body.listening .flowbar-wave i {
  background: var(--accent);
  animation: flowbar-wave 1s ease-in-out infinite;
}
body.listening .flowbar-wave i:nth-child(2) { animation-delay: 0.15s; }
body.listening .flowbar-wave i:nth-child(3) { animation-delay: 0.3s; }
body.listening .flowbar-wave i:nth-child(4) { animation-delay: 0.45s; }
@keyframes flowbar-wave {
  0%, 100% { height: 3px; }
  50% { height: 11px; }
}

/* ── Refined scrollbars — thin, quiet, non-generic ─────────────────────── */
.suggestion-body::-webkit-scrollbar,
.sources-list::-webkit-scrollbar,
.transcript::-webkit-scrollbar,
.settings::-webkit-scrollbar,
.knowledge::-webkit-scrollbar,
.kb-list::-webkit-scrollbar { width: 6px; }
.suggestion-body::-webkit-scrollbar-thumb,
.sources-list::-webkit-scrollbar-thumb,
.transcript::-webkit-scrollbar-thumb,
.settings::-webkit-scrollbar-thumb,
.knowledge::-webkit-scrollbar-thumb,
.kb-list::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
}
.suggestion-body::-webkit-scrollbar-thumb:hover,
.transcript::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
.suggestion-body::-webkit-scrollbar-track,
.sources-list::-webkit-scrollbar-track,
.transcript::-webkit-scrollbar-track { background: transparent; }

/* Collapsed state: swap the whole app for the Flow Bar. */
body.collapsed #app { display: none !important; }
body.collapsed .flowbar { display: flex; animation: flowbarIn 0.22s var(--ease) both; }
/* The pill pops in cleanly as the window snaps down. */
@keyframes flowbarIn {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }