/* Mobile-first styling for Sparky: the auth gate (task 3.4) and the app shell —
   header, home screen, bottom nav and shared loading/error states (task 3.5).
   Dark theme matching manifest.json; large one-handed / gloves-on touch targets. */

:root {
  --bg: #0b1220;
  --panel: #131c2e;
  --text: #eaf0fb;
  --muted: #9fb0cc;
  --accent: #f5a623; /* electrician amber */
  --danger: #ff6b6b;
  --border: #24314b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

/* --- Auth card (login / new password / TOTP) --- */
.auth-card {
  width: 100%;
  max-width: 24rem;
  margin: auto;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.auth-input {
  width: 100%;
  padding: 0.85rem 0.9rem;
  font-size: 1rem; /* >=16px avoids iOS zoom-on-focus */
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}

.auth-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth-btn {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #17233b;
  background: var(--accent);
  border: 0;
  border-radius: 0.6rem;
  min-height: 3rem; /* comfortable one-handed / gloves-on target */
  cursor: pointer;
}

.auth-btn:disabled { opacity: 0.6; cursor: default; }

.auth-notice { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0; }
.auth-error { color: var(--danger); font-size: 0.9rem; margin: 0.25rem 0; }
.auth-hint { color: var(--muted); font-size: 0.85rem; }

/* --- App shell (task 3.5) ------------------------------------------------- */

/* A fixed header, a scrollable body, and a fixed bottom nav. The body reserves
   space top and bottom so nothing hides behind the fixed bars (incl. iOS safe
   areas). */
.app-shell { min-height: 100dvh; }

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.app-brand { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }

.app-header-actions { display: flex; align-items: center; gap: 0.25rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:active { background: var(--bg); }

.icon { display: inline-flex; }
.icon svg { display: block; }

/* Scrollable content region between the two fixed bars. */
.app-body {
  min-height: 100dvh;
  padding: 1.25rem 1.25rem 1.5rem;
  padding-top: calc(3.75rem + env(safe-area-inset-top) + 0.5rem);
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom) + 0.5rem);
  outline: none;
}

.screen { display: flex; flex-direction: column; gap: 1rem; max-width: 32rem; margin: 0 auto; }
.screen-title { margin: 0; font-size: 1.4rem; }
.screen-lead { margin: 0; color: var(--muted); }

/* --- Home: primary create actions (Req 9.3) ------------------------------- */

.quick-actions { display: grid; gap: 0.85rem; }

.quick-action {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  align-items: center;
  padding: 1.1rem 1rem;
  min-height: 4.5rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0.8rem;
  text-decoration: none;
}
.quick-action:active { background: var(--bg); }
.quick-action .icon { grid-row: 1 / span 2; color: var(--accent); }
.quick-action-label { font-size: 1.1rem; font-weight: 600; }
.quick-action-hint { font-size: 0.85rem; color: var(--muted); }

.home-links { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.home-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  min-height: 3rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  text-decoration: none;
}
.home-link:active { background: var(--panel); }
.home-link .icon { color: var(--muted); }

/* --- Bottom navigation ---------------------------------------------------- */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.75rem;
  padding: 0.4rem 0.25rem;
  color: var(--muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-item.is-active { color: var(--accent); }
.nav-label { font-size: 0.72rem; }

/* --- Buttons (shared) ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  min-height: 3rem;
  font-size: 1rem;
  font-weight: 600;
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { color: #17233b; background: var(--accent); }
.btn-secondary {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
}
.btn:active { opacity: 0.9; }

/* --- Loading / error / empty states (Req 9.4) ----------------------------- */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.state-title { margin: 0; font-weight: 600; }
.state-msg { margin: 0; color: var(--muted); }
.state-error .state-title { color: var(--danger); }

.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* --- Feature screens (task 3.6) ------------------------------------------ */

/* Screen header: title row with optional right-aligned action, and a back link. */
.screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.screen-head-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.back-link {
  align-self: flex-start;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
}
.back-link:active { color: var(--text); }

/* Small button variant for inline / header actions. */
.btn-sm { min-height: 2.5rem; padding: 0.5rem 0.75rem; font-size: 0.9rem; }

.button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- Forms ---------------------------------------------------------------- */

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

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-label { font-size: 0.8rem; color: var(--muted); }
.field-hint { font-size: 0.78rem; color: var(--muted); margin: 0.1rem 0 0; }

.input {
  width: 100%;
  padding: 0.8rem 0.85rem;
  font-size: 1rem; /* >=16px avoids iOS zoom-on-focus */
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.textarea { resize: vertical; min-height: 3rem; font-family: inherit; }
.select { appearance: none; }
.input.narrow { width: 100%; }

.checkbox-field { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.checkbox { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); }
.checkbox-label { font-size: 0.95rem; }
.toolbar-toggle { margin-bottom: 0.25rem; }

.form-error { color: var(--danger); font-size: 0.9rem; margin: 0; }
.form-error:empty { display: none; }

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

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card + .card { margin-top: 0.9rem; }
.card-title { margin: 0; font-size: 1rem; }
.section-heading { margin: 0.5rem 0 0; font-size: 1.05rem; }
.muted { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* --- Detail (label / value) list ----------------------------------------- */

.detail-list { display: flex; flex-direction: column; gap: 0.4rem; }
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.detail-label { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }
.detail-value { text-align: right; word-break: break-word; }
.job-description { margin: 0; white-space: pre-wrap; }

/* --- List rows ------------------------------------------------------------ */

.list { display: flex; flex-direction: column; gap: 0.5rem; }
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  min-height: 3.25rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  text-decoration: none;
}
.list-row:active { background: var(--bg); }
.list-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.list-row-title { font-weight: 600; }
.list-row-sub { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.list-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.list-row-date { font-size: 0.78rem; color: var(--muted); }
.list-row-amount { font-weight: 600; }

/* Grouped lists (jobs/quotes/invoices by status). */
.job-group { margin-bottom: 1.25rem; }
.group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.group-title { font-weight: 600; }
.group-count { color: var(--muted); font-size: 0.8rem; }

/* Offline job-capture: pending-to-sync group (task 3.7, Req 3.6). Set apart with
   an amber accent so the electrician can see the capture is safe but not yet on
   the server. */
.pending-group {
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px dashed var(--accent);
  border-radius: 0.8rem;
}
.pending-group .muted { margin-bottom: 0.3rem; }
.pending-row { border-left: 4px solid var(--accent); }

/* --- Status badges -------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg);
  white-space: nowrap;
}
.badge-draft { color: var(--muted); }
.badge-scheduled, .badge-quoted { color: #7fb3ff; border-color: #33507f; }
.badge-in-progress { color: #ffd27f; border-color: #7f6a33; }
.badge-sent, .badge-pushed-to-quickbooks { color: #7fd0ff; border-color: #336a7f; }
.badge-completed, .badge-accepted, .badge-paid { color: #7fe0a0; border-color: #337f52; }
.badge-invoiced { color: #c69bff; border-color: #5a337f; }
.badge-rejected, .badge-expired, .badge-archived { color: var(--danger); border-color: #7f3333; }
.badge-active { color: #7fe0a0; border-color: #337f52; }
.badge-pending { color: var(--accent); border-color: #7f6a33; }

/* --- Repeatable rows (materials / labour / sites) ------------------------- */

.repeatable { display: flex; flex-direction: column; gap: 0.6rem; }
.repeat-list { display: flex; flex-direction: column; gap: 0.6rem; }

.mini-row, .site-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.mini-row .input { flex: 1 1 auto; min-width: 0; }
.mini-row .input.narrow { flex: 0 0 5rem; }
.site-row-fields { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }

/* --- Line-item editor (quotes / invoices) --------------------------------- */

.lines-editor { display: flex; flex-direction: column; gap: 0.6rem; }
.lines-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
}
.line-row { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 0.6rem; }
.line-desc { width: 100%; }
.line-nums { display: flex; gap: 0.5rem; align-items: center; }
.line-nums .input { flex: 1 1 0; min-width: 0; }
.line-total { flex: 1 1 0; text-align: right; font-weight: 600; }
.lines-subtotal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.25rem; }
.lines-subtotal-value { font-weight: 700; }

.icon-remove {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
}
.icon-remove:active { color: var(--danger); }

/* --- Read-only document lines + totals (detail screens) ------------------- */

.doc-lines { display: flex; flex-direction: column; gap: 0.5rem; }
.doc-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.doc-line-desc { font-weight: 500; }
.doc-line-qty { color: var(--muted); font-size: 0.82rem; }
.doc-line-total { text-align: right; align-self: center; grid-row: 1 / span 2; }
.totals { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.totals-row { display: flex; justify-content: space-between; }
.totals-grand { font-weight: 700; font-size: 1.05rem; }

/* --- Rate card ------------------------------------------------------------ */

.rate-row { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.rate-row:last-child { border-bottom: 0; }
.rate-row-main { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.rate-name { font-weight: 500; }
.rate-price { color: var(--muted); }
.rate-edit { display: flex; flex-direction: column; gap: 0.5rem; }

/* --- Photos --------------------------------------------------------------- */

.photo-list { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.85rem; }
.photo-item { word-break: break-all; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- AI drafting + guideline review (task 4.7) ---------------------------- */

/* Segmented mode toggle (Manual | AI draft). */
.segmented {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
}
.seg-btn {
  flex: 1 1 0;
  min-height: 2.6rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}
.seg-btn.is-active { color: #17233b; background: var(--accent); }

/* AI-unavailable fallback banner (Req 5.7 posture). */
.ai-notice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  background: var(--panel);
  border: 1px dashed var(--accent);
  border-radius: 0.7rem;
}
.ai-notice-icon { color: var(--accent); font-size: 1.1rem; line-height: 1.3; }
.ai-notice-msg { margin: 0; font-size: 0.9rem; }

/* Chips: small inline labels on draft lines (flag/confidence/price source/change). */
.line-chips, .flag-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip-flag { color: var(--accent); border-color: #7f6a33; }
.chip-warn { color: #ffd27f; border-color: #7f6a33; }
.chip-notifiable { color: #ffb3b3; border-color: #7f3333; }
.chip-added { color: #7fe0a0; border-color: #337f52; }
.chip-removed { color: var(--danger); border-color: #7f3333; }
.chip-changed { color: #ffd27f; border-color: #7f6a33; }
.chip-unchanged { color: var(--muted); }

/* Per-line AI note (flag reason / change reason), shown above the fields. */
.line-note { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* Flagged / added draft lines stand out in the editor. */
.line-flagged { border-color: var(--accent); border-left-width: 4px; }
.line-added { border-left: 4px solid #337f52; }

/* Removed lines (invoice reconciliation): reference only, not billed (Req 6.2). */
.removed-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.85;
}
.removed-line:last-child { border-bottom: 0; }
.removed-line-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.removed-line-desc { text-decoration: line-through; color: var(--muted); }
.removed-line-amount { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* Decision-support disclaimer (Req 5.5 / NFR6.3) — always visible on reviews. */
.disclaimer {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0.4rem;
}

.cert-line { margin: 0; font-size: 0.95rem; }

/* Guideline flags. */
.flag-list { display: flex; flex-direction: column; gap: 0.75rem; }
.flag-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}
.flag-item.flag-high { border-left: 4px solid var(--danger); }
.flag-item.flag-medium { border-left: 4px solid var(--accent); }
.flag-item.flag-advisory { border-left: 4px solid var(--border); }
.flag-title { margin: 0; font-weight: 600; }
.flag-reason { margin: 0; font-size: 0.9rem; }
.advisory-notes { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.85rem; }
.advisory-notes li { margin-bottom: 0.15rem; }

/* Severity + resolution badges (reuse .badge base). */
.badge.severity-high { color: #ffb3b3; border-color: #7f3333; }
.badge.severity-medium { color: var(--accent); border-color: #7f6a33; }
.badge.severity-advisory { color: var(--muted); }
.badge.resolution-open { color: #7fb3ff; border-color: #33507f; }
.badge.resolution-ack { color: #7fe0a0; border-color: #337f52; }
.badge.resolution-dismissed { color: var(--muted); }

/* --- QuickBooks integration (task 5.4) ------------------------------------ */

/* OAuth-return banner shown once on Settings after connect/disconnect. */
.qb-banner {
  padding: 0.8rem 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--panel);
}
.qb-banner-success { color: #7fe0a0; border-color: #337f52; }
.qb-banner-error { color: var(--danger); border-color: #7f3333; }

/* Status row (connection badge + environment chip / synced badge). */
.qb-status { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Synced / not-connected status badges (reuse the .badge base). */
.badge-synced { color: #7fe0a0; border-color: #337f52; }
.badge-not-connected { color: var(--muted); border-color: var(--border); }

/* The explicit confirm step before a push / disconnect. */
.qb-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}

.qb-error { color: var(--danger); font-size: 0.9rem; margin: 0; }

/* --- Voice-to-voice mode (task 7.3, Req 11.4/11.6/11.7) ------------------- */

/* Home hero: the headline hands-free entry point (Req 11, Req 9.3). */
.voice-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1rem;
  min-height: 4.5rem;
  color: #17233b;
  background: var(--accent);
  border-radius: 0.8rem;
  text-decoration: none;
}
.voice-cta:active { opacity: 0.92; }
.voice-cta .icon { color: #17233b; flex-shrink: 0; }
.voice-cta-text { display: flex; flex-direction: column; gap: 0.15rem; }
.voice-cta-label { font-size: 1.15rem; font-weight: 700; }
.voice-cta-hint { font-size: 0.85rem; opacity: 0.85; }

.voice-screen { display: flex; flex-direction: column; gap: 0.9rem; }

/* Connection status: coloured dot + label. */
.voice-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.voice-status-dot {
  width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
}
.voice-status[data-state="connecting"] .voice-status-dot { background: var(--accent); animation: voice-pulse 1s ease-in-out infinite; }
.voice-status[data-state="open"] .voice-status-dot { background: #7fe0a0; }
.voice-status[data-state="error"] .voice-status-dot { background: var(--danger); }
.voice-status[data-state="closed"] .voice-status-dot { background: var(--border); }

/* Live transcript pane (Req 11.4). */
.voice-transcript {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.85rem;
  min-height: 8rem;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.voice-transcript-empty { text-align: center; padding: 2rem 0; }
.voice-lines { display: flex; flex-direction: column; gap: 0.6rem; }
.voice-line { display: flex; flex-direction: column; gap: 0.15rem; max-width: 90%; }
.voice-line-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.voice-line-text {
  padding: 0.55rem 0.75rem;
  border-radius: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.35;
}
.voice-line-user { align-self: flex-end; align-items: flex-end; }
.voice-line-user .voice-line-text { background: var(--accent); color: #17233b; border-bottom-right-radius: 0.2rem; }
.voice-line-assistant { align-self: flex-start; }
.voice-line-assistant .voice-line-text { background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 0.2rem; }

/* Push-to-talk controls (Req 11.7). */
.voice-controls { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.voice-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 22rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* let pointer capture own the gesture, not the scroller */
  user-select: none;
}
.voice-mic:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Obvious recording state: red fill + pulsing dot (Req 11.7). */
.voice-mic.is-recording { color: #fff; background: var(--danger); border-color: var(--danger); }
.voice-rec { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: currentColor; opacity: 0.5; }
.voice-mic.is-recording .voice-rec { opacity: 1; animation: voice-pulse 0.9s ease-in-out infinite; }
.voice-mic-hint { text-align: center; font-size: 0.82rem; margin: 0; }

@keyframes voice-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-mic.is-recording .voice-rec,
  .voice-status[data-state="connecting"] .voice-status-dot { animation: none; }
}

/* Typed fallback (Req 11.6). Always present; promoted when voice can't run. */
.voice-typed { display: flex; flex-direction: column; gap: 0.35rem; }
.voice-typed-row { display: flex; gap: 0.5rem; }
.voice-typed-row .input { flex: 1 1 auto; }
.voice-typed-primary { padding: 0.9rem; background: var(--panel); border: 1px solid var(--border); border-radius: 0.8rem; }