/* ============================================================
   voice.css — Entrada por voz reutilizável (window.VoiceInput / VoiceMic).
   Microfone autotranscritor: grava, transcreve e organiza a fala em
   campos. Usa exclusivamente os tokens do design system.
   ============================================================ */

.vi { font-family: var(--font-body); }

/* ---- Bloco hero (entrada primária) ---- */
.vi-hero {
  border: 1.5px solid var(--green-300);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-brand) 9%, transparent), transparent 60%),
    var(--green-50);
  padding: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.vi-hero[data-status="recording"] { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 6%, var(--color-surface)); }
.vi-hero[data-status="processing"] { border-color: var(--color-brand); }
.vi-hero[data-status="done"] { border-color: var(--green-400); background: var(--green-50); }

/* ---- Microfone (botão circular) ---- */
.vi-mic {
  position: relative; flex: none;
  width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand); color: var(--stone-50);
  border: none; cursor: pointer;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--color-brand) 70%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.vi-bar .vi-mic { width: 46px; height: 46px; }
.vi-mic:hover { background: var(--color-brand-strong); transform: scale(1.05); }
.vi-mic:active { transform: scale(0.97); }
.vi-mic-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-brand) 45%, transparent); opacity: 0; }
.vi-mic:hover .vi-mic-ring { animation: viRing 1.6s var(--ease-out) infinite; }
.vi-mic:hover .vi-mic-ring.r2 { animation-delay: .55s; }
@keyframes viRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.65); opacity: 0; } }

.vi-mic.recording { background: var(--color-brand); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-brand) 70%, transparent); }
.vi-mic.recording:hover { background: var(--color-brand-strong); }
.vi-mic-pulse { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-brand); animation: viPulse 1.3s var(--ease-out) infinite; }
@keyframes viPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---- Estado: ocioso ---- */
.vi-idle { display: flex; align-items: center; gap: var(--space-3); }
.vi-idle .vi-idle-tx { order: 1; }
.vi-idle .vi-mic { order: 2; }
.vi-idle .vi-prefer { order: 3; }
.vi-idle-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vi-idle-tx strong { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.vi-idle-tx span { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-snug); }
.vi-prefer {
  flex: none; align-self: stretch;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted);
  cursor: pointer; white-space: nowrap; transition: all var(--dur-fast);
}
.vi-prefer:hover { color: var(--color-text); border-color: var(--color-text-faint); background: var(--stone-50); }

/* ---- Estado: gravando ---- */
.vi-rec { display: flex; align-items: flex-start; gap: var(--space-3); }
.vi-rec .vi-rec-mid { order: 1; }
.vi-rec .vi-mic { order: 2; }
.vi-rec-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.vi-rec-top { display: flex; align-items: center; gap: 8px; }
.vi-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand); animation: viBlink 1s steps(2, jump-none) infinite; }
@keyframes viBlink { 50% { opacity: .25; } }
.vi-rec-label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-brand-strong); }
.vi-timer { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.vi-timer.is-urgent { color: var(--warning); font-weight: var(--weight-semibold); }

.vi-wave { display: flex; align-items: center; gap: 2px; height: 40px; }
.vi-wave span { flex: 1; min-width: 2px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-brand) 45%, var(--green-300)); transition: height 90ms linear; }
.vi-wave.is-on span { background: var(--color-brand); }

/* barra de progresso do limite de tempo */
.vi-rec-bar { height: 4px; border-radius: var(--radius-pill); background: var(--green-100); overflow: hidden; }
.vi-rec-bar span { display: block; height: 100%; background: var(--color-brand); border-radius: var(--radius-pill); transition: width .25s linear; }
.vi-rec-bar.is-urgent span { background: var(--warning); }

.vi-live { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text); max-height: 84px; overflow-y: auto; }
.vi-live em { color: var(--color-text-muted); font-style: normal; }
.vi-live-hint { color: var(--color-text-faint); font-style: italic; }
.vi-rec-hint { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.vi-rec-hint strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.vi-stop-btn {
  flex: none; align-self: stretch;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  background: var(--stone-900); color: var(--stone-50); border: none; border-radius: var(--radius-md);
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; white-space: nowrap; transition: background var(--dur-fast);
}
.vi-stop-btn:hover { background: var(--stone-800); }

/* ---- Estado: processando ---- */
.vi-proc { display: flex; align-items: flex-start; gap: var(--space-3); }
.vi-spin { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--green-200); border-top-color: var(--color-brand); animation: viSpin .8s linear infinite; }
.vi-spin.sm { width: 17px; height: 17px; border-width: 2px; }
@keyframes viSpin { to { transform: rotate(360deg); } }
.vi-proc-tx { flex: 1; }
.vi-proc-tx > strong { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); display: block; margin-bottom: 8px; }
.vi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vi-steps li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-faint); transition: color var(--dur-base); }
.vi-steps li.now { color: var(--color-text); }
.vi-steps li.done { color: var(--color-text-muted); }
.vi-step-ic { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--color-brand); }
.vi-step-ic i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-300); }
.vi-steps li.now .vi-step-ic i { background: var(--color-brand); animation: viBlink .9s ease-in-out infinite; }

/* ---- Estado: concluído ---- */
.vi-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--space-3); }
.vi-done-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-100); color: var(--green-600); display: inline-flex; align-items: center; justify-content: center; }
.vi-done-tx { flex: 1; min-width: 140px; font-size: var(--text-sm); color: var(--color-text-muted); }
.vi-done-tx strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.vi-done-actions { display: inline-flex; gap: var(--space-3); }
.vi-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-brand-strong); }
.vi-link:hover { color: var(--color-brand); text-decoration: underline; }
.vi-transcript { flex-basis: 100%; margin: 4px 0 0; padding: 8px 12px; background: var(--color-surface); border-left: 3px solid var(--green-300); border-radius: var(--radius-sm); font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); line-height: var(--leading-normal); }

/* ---- Microfone compacto (acoplado a input) ---- */
.vi-mic-btn {
  flex: none; width: 38px; height: 38px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-brand-strong);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.vi-mic-btn:hover { border-color: var(--color-brand); background: var(--green-50); }
.vi-mic-btn.recording { width: auto; padding: 0 12px; background: var(--danger); border-color: var(--danger); color: var(--stone-50); }
.vi-mic-btn.busy { color: var(--color-text-muted); cursor: default; }
.vi-mic-btn-time { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* ---- Realce de campo preenchido por voz ---- */
@keyframes viFilled {
  0% { background: color-mix(in srgb, var(--color-brand) 22%, var(--color-surface)); border-color: var(--color-brand); }
  100% { background: var(--color-surface); }
}
.vi-filled { animation: viFilled 1.4s var(--ease-out) both; }
.vi-prio-seg-flash button.active { transition: all var(--dur-base) var(--ease-out); }

/* ---- Segmento Falar / Digitar ---- */
.vi-mode-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--stone-100); border-radius: var(--radius-pill); }
.vi-mode-seg button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: none; border: none; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted);
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.vi-mode-seg button:hover { color: var(--color-text); }
.vi-mode-seg button.active { background: var(--color-surface); color: var(--color-brand-strong); box-shadow: var(--shadow-xs); }

/* ---- Linha de campo com mic embutido ---- */
.vi-field-row { display: flex; gap: 6px; align-items: stretch; }
.vi-field-row .sug-input { flex: 1; }

/* ---- Campos anunciados pelo microfone (metadados do formulário) ---- */
.vi-campos { margin-top: var(--space-3); background: color-mix(in srgb, var(--color-brand) 6%, var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.vi-campos-head { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-brand-strong); margin-bottom: var(--space-2); }
.vi-campos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.vi-campos-list li { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }
.vi-campos-k { font-family: var(--font-heading); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-brand); }
.vi-campos-h { min-width: 0; line-height: var(--leading-snug); }

/* ---- Cabeçalho de modo no formulário de reporte ---- */
.sug-form-modes { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }

@container portal (max-width: 560px) {
  .vi-idle, .vi-rec { flex-wrap: wrap; }
  .vi-prefer, .vi-stop-btn { width: 100%; justify-content: center; padding: 9px; }
  .vi-rec-mid { order: 3; flex-basis: 100%; }
}