/* VoiceScribe v2 — dark-first, card-driven, mobile-app shell.
   Signature element: the waveform strip under the header — an ambient
   audio-level meter at rest that becomes the transcription progress
   indicator, instead of a generic spinner. */

:root {
  --bg: #0a0c16;
  --bg-elevated: #10131f;
  --surface: #141829;
  --surface-2: #1a2036;
  --border: #262c42;
  --border-strong: #333a56;
  --text: #eef0f7;
  --muted: #8b93ad;
  --muted-strong: #aab0c6;

  --accent: #5b52e8;
  --accent-hover: #6d64f5;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(91, 82, 232, 0.16);

  --secure: #22d3a5;
  --secure-soft: rgba(34, 211, 165, 0.14);

  --danger: #ff6b6b;
  --danger-bg: #241118;
  --danger-border: rgba(255, 107, 107, 0.35);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --nav-h: 76px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f4f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f3fb;
  --border: #e3e5f0;
  --border-strong: #cdd0e2;
  --text: #14162a;
  --muted: #6b7189;
  --muted-strong: #4c5170;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: rgba(79, 70, 229, 0.09);

  --secure: #0e9c76;
  --secure-soft: rgba(14, 156, 118, 0.1);

  --danger: #d9364a;
  --danger-bg: #fdecef;
  --danger-border: rgba(217, 54, 74, 0.3);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f3f4f9;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f3fb;
    --border: #e3e5f0;
    --border-strong: #cdd0e2;
    --text: #14162a;
    --muted: #6b7189;
    --muted-strong: #4c5170;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: rgba(79, 70, 229, 0.09);

    --secure: #0e9c76;
    --secure-soft: rgba(14, 156, 118, 0.1);

    --danger: #d9364a;
    --danger-bg: #fdecef;
    --danger-border: rgba(217, 54, 74, 0.3);

    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: calc(1rem + var(--safe-top)); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(1rem + var(--safe-top)) 1.25rem 0.85rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; }
.brand-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--secure);
  color: var(--secure);
  background: var(--secure-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge svg { flex-shrink: 0; }

/* ---------- Waveform signature strip ---------- */

.wavebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
  padding: 0.4rem 1.25rem 0;
  background: var(--bg);
  opacity: 0.4;
  transition: opacity 0.3s;
}
.wavebar span {
  flex: 1 1 auto;
  max-width: 3px;
  min-width: 2px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0.25);
  animation: wavepulse 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.08s);
  animation-duration: calc(1.4s + (var(--i, 0) % 5) * 0.18s);
}
.wavebar.is-active { opacity: 0.95; }
.wavebar.is-active span { animation-duration: calc(0.5s + (var(--i, 0) % 5) * 0.07s); }

@keyframes wavepulse {
  0%, 100% { transform: scaleY(0.18); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .wavebar span { animation: none; transform: scaleY(0.55); }
}

/* ---------- Content ---------- */

.content {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem calc(var(--nav-h) + var(--safe-bottom) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel { display: flex; flex-direction: column; gap: 1rem; animation: rise 0.25s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
}

.import-card, .file-card, .error-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.import-card:hover, .import-card:focus-visible, .import-card.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.import-card.dragover .card-icon { color: var(--accent-hover); }

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

.file-card .card-icon { background: var(--surface-2); color: var(--muted-strong); }
.error-card { cursor: default; border-color: var(--danger-border); background: var(--danger-bg); }
.error-card .card-icon { background: rgba(255, 107, 107, 0.14); color: var(--danger); }

.card-copy { flex: 1; min-width: 0; }
.card-copy h2, .card-copy h3 { margin: 0 0 0.15rem; font-size: 1rem; }
.card-copy p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.error-card .card-copy p { color: var(--text); opacity: 0.85; }

#file-name, #file-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.65rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }

.btn-pill { border-radius: var(--radius-pill); flex-shrink: 0; }

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

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; padding: 0.85rem 1rem; font-size: 0.95rem; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Result & error ---------- */

.result-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#result-text {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  font-family: inherit;
}

.result-card .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.result-card .actions .btn { flex: 1 1 8rem; }

/* ---------- History ---------- */

.empty-card { text-align: center; color: var(--muted); padding: 2.5rem 1.25rem; }
.empty-card p { margin: 0; }

.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.history-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.history-item-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.history-item-info { flex: 1; min-width: 0; }
.history-item-info .date { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.history-item-info .name {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item-info .preview {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item .chevron { color: var(--muted); flex-shrink: 0; transition: transform 0.15s; }
.history-item.open .chevron { transform: rotate(180deg); }

.history-item-body {
  display: none;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--border);
}
.history-item.open .history-item-body { display: block; padding-top: 0.85rem; }

.history-item-body p {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.history-item-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.history-item-actions .btn { flex: 1 1 auto; padding: 0.45rem 0.8rem; font-size: 0.82rem; }

/* ---------- Settings ---------- */

.settings-group { display: flex; flex-direction: column; gap: 0.6rem; }

.group-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.option-grid-3 { grid-template-columns: repeat(3, 1fr); }

.group-hint { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

.option-card {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 0.75rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.option-card:hover { border-color: var(--border-strong); }
.option-card[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted-strong);
  transition: transform 0.2s, background 0.2s;
}
.switch[aria-checked="true"] { background: var(--secure-soft); border-color: var(--secure); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); background: var(--secure); }

.server-info { margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.server-info > div { display: flex; justify-content: space-between; font-size: 0.88rem; }
.server-info dt { color: var(--muted); margin: 0; }
.server-info dd { margin: 0; font-weight: 600; }

.note-card p, .guide-card p { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.note-card p:last-child, .guide-card p:last-child { margin-bottom: 0; }
.guide-card h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }

/* ---------- Bottom nav ---------- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + var(--safe-bottom));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}

.nav-btn {
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-btn[aria-current="page"] { background: var(--accent); color: var(--accent-contrast); }

/* ---------- Auth gate ---------- */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1.25rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: rise 0.3s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.auth-brand .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
.auth-brand .brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.auth-mode { display: flex; flex-direction: column; gap: 0.9rem; }

.auth-loading { align-items: center; text-align: center; padding: 1rem 0; }
.auth-loading p { margin: 0; color: var(--muted); }
.auth-spinner {
  border-color: var(--border-strong);
  border-top-color: var(--accent);
  width: 22px;
  height: 22px;
}

.auth-mode h1 { margin: 0; font-size: 1.25rem; text-align: center; }
.auth-sub { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; text-align: center; }

.auth-field { display: flex; flex-direction: column; gap: 0.35rem; }
.auth-field span { font-size: 0.78rem; font-weight: 600; color: var(--muted-strong); }
.auth-field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 1rem;
}
.auth-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.auth-error {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: 0.85rem;
}
.auth-ok {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--secure-soft);
  border: 1px solid var(--secure);
  color: var(--secure);
  font-size: 0.85rem;
}

.auth-card .btn-block { margin-top: 0.25rem; }

/* ---------- Account (settings) ---------- */

.account-card { display: flex; flex-direction: column; gap: 1rem; }
.account-form { display: flex; flex-direction: column; gap: 0.75rem; }
.account-form .btn, .account-card > .btn { align-self: flex-start; }

/* ---------- Misc ---------- */

[hidden] { display: none !important; }

@media (min-width: 640px) {
  .content { padding-top: 1.75rem; }
}