/* Vox PWA — mobile-first capture UI · Rapid Rise canon */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --paper: #FBFAF7;
  --cream: #F2F0EA;
  --hairline: #DDD6C7;
  --ink: #0E2851;
  --ink-soft: #2A4570;
  --mute: #6E7A8A;
  --bleu: #1A7BD9;
  --bleu-deep: #0A45A8;
  --brass: #B8924B;
  --good: #2D8A5C;
  --warn: #D9871A;
  --bad: #C13B3B;
  --display: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', 'Courier New', monospace;

  --safe-bottom: env(safe-area-inset-bottom);
  --safe-top: env(safe-area-inset-top);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: var(--display);
  background: var(--paper);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body {
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.mono { font-family: var(--mono); }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
.brand {
  display: flex; align-items: center; gap: 10px;
}
.brand-mark { width: 28px; height: 28px; }
.brand-text {
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.status.online .dot { background: var(--good); }
.status.offline .dot { background: var(--warn); }

/* Mic state banner */
.mic-state {
  background: var(--cream);
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.mic-state-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
}
.mic-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mute);
  flex-shrink: 0;
}
.mic-state.granted .mic-pulse {
  background: var(--good);
  animation: pulse 2s ease-in-out infinite;
}
.mic-state.denied .mic-pulse { background: var(--bad); }
.mic-state.recording .mic-pulse {
  background: var(--bad);
  animation: pulse 0.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}
.enable-mic {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 6px;
  padding: 10px 16px;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  cursor: pointer;
}
.enable-mic:active { background: var(--bleu-deep); }

/* Record area */
.app { flex: 1; display: flex; flex-direction: column; }
.record-area {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px 20px;
  min-height: 320px;
}
.record-circle {
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  pointer-events: none;  /* ring is decorative — never intercepts taps */
}
.record-circle::before {
  content: ''; position: absolute; inset: 0;
  border: 2px solid var(--hairline); border-radius: 50%;
  pointer-events: none;
}
/* Make the actual button fill the entire 220x220 visible area so ANY tap on
   the circle reaches the button — no more "looks like a button but it's the ring" trap. */
.record-btn {
  position: absolute; inset: 0;
  width: 220px; height: 220px;
  border: none; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-size: 72px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: rgba(217,135,26,0.4);
  pointer-events: auto;
  touch-action: manipulation;
}
.record-btn:disabled { background: var(--mute); cursor: not-allowed; opacity: 0.5; }
.record-btn:not(:disabled):active { transform: scale(0.92); background: var(--warn); box-shadow: 0 0 0 12px rgba(217,135,26,0.3); }
.record-btn:not(:disabled):hover { transform: scale(1.02); }
.record-icon { line-height: 1; pointer-events: none; }
.record-btn.recording {
  background: var(--bad);
  animation: record-pulse 1s ease-in-out infinite;
}
@keyframes record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193,59,59,0.7); }
  50% { box-shadow: 0 0 0 24px rgba(193,59,59,0); }
}
.record-btn.recording .record-icon { content: '■'; }

.record-label {
  margin-top: 24px;
  font-size: 16px; color: var(--ink-soft);
  font-weight: 500;
}
.record-timer {
  margin-top: 6px;
  font-size: 22px;
  color: var(--mute);
  letter-spacing: 0.05em;
}
.record-timer.live { color: var(--bad); font-weight: 600; }

/* Config */
.config {
  padding: 18px;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}
.config-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.config-row + .config-row { border-top: 1px solid var(--hairline); }
.config-key {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute); width: 80px;
}
.config-row select {
  flex: 1;
  font-family: var(--display); font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper); color: var(--ink);
}

/* Queue */
.queue {
  padding: 18px;
  border-top: 1px solid var(--hairline);
}
.queue-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.queue-title {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
}
.queue-clear {
  background: none; border: none;
  font-family: var(--mono); font-size: 10px;
  color: var(--bleu); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.queue-list { list-style: none; }
.queue-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.queue-list li .when {
  font-family: var(--mono); font-size: 11px;
  color: var(--mute);
}
.queue-list li .dur {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink);
}
.queue-empty {
  font-size: 13px; color: var(--mute);
  font-style: italic;
}

/* Install prompt */
.install-prompt {
  background: var(--ink); color: var(--paper);
  padding: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.install-prompt p {
  font-size: 13px; flex: 1; color: var(--paper);
}
.install-btn {
  background: var(--bleu); color: var(--paper);
  border: none; border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  cursor: pointer;
}

/* Footer */
.footer {
  padding: 14px 18px;
  font-size: 10px; color: var(--mute);
  letter-spacing: 0.04em; text-align: center;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

/* ── Demo button (always usable · no mic required) ────────────────────────── */
.demo-btn {
  display: block;
  margin: 18px auto 0;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.demo-btn:active { opacity: 0.85; }
.demo-btn:hover { opacity: 0.92; }

/* ── Demo output (fake-success pipeline) ──────────────────────────────────── */
.demo-output {
  margin: 16px 18px 4px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 20px;
  animation: demo-fade-in 0.4s ease-out;
}
@keyframes demo-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.demo-banner {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--warn);
  background: rgba(217, 135, 26, 0.10);
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 16px;
  line-height: 1.45;
}
.demo-pipeline { display: grid; gap: 12px; }
.demo-step {
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 8px;
  border-left: 3px solid var(--ink);
}
.demo-step.processing { animation: demo-pulse 1.4s ease-in-out infinite; }
@keyframes demo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.demo-step-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.demo-step-body { font-size: 13px; line-height: 1.55; color: var(--ink); }
.demo-step-body.mono { font-family: var(--mono); font-size: 12px; line-height: 1.65; }
.demo-extraction {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  margin-top: 4px;
}