/* ==========================================================================
   RECADO EM AUDIO  ·  prefixo .tva-
   --------------------------------------------------------------------------
   Existe porque escrever e a barreira. Quem tem 70 anos, tremor nas maos ou
   pouca escolaridade desiste de um formulario e nao desiste de falar.

   Tres decisoes que mandam no desenho:
   1. UM botao por vez na tela. A pessoa nunca escolhe entre dois caminhos no
      mesmo momento: grava, ouve, envia.
   2. O estado gravando precisa ser obvio SEM cor: ponto pulsando, relogio
      correndo e as barras mexendo. Quem nao distingue vermelho ainda ve.
   3. Alvo grande em tudo. O botao de gravar tem 96px, os outros 56px.

   Prefixo `tva-` e nao `tv-`: `gt-chrome.css` ja define `.tv-btn` global e
   ganharia o desempate (esta escrito no CLAUDE.md, ja quebrou o layout uma vez).
   ========================================================================== */

.tva{
  --tva-vinho:#772A25;
  --tva-terra:#BB5A1C;
  --tva-terra-ink:#9C4B17;
  --tva-rec:#C2321F;
  --tva-ink:#2A1512;
  --tva-ink2:#5E4038;
  --tva-line:#E3D0BC;
  --tva-card:#FFFAF3;
  --tva-pa:#FBF0E4;
  --tva-zap:#128C4B;

  border:1.5px solid var(--tva-line);border-radius:16px;
  background:var(--tva-card);padding:clamp(18px,2.4vw,26px);
  color:var(--tva-ink)
}
.tva[hidden]{display:none}

/* ── cabecalho ─────────────────────────────────────────────────────────── */
.tva__hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.tva__ic{
  flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:13px;
  background:rgba(187,90,28,.12);color:var(--tva-terra-ink);font-size:21px
}
.tva__t{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--tva-vinho)}
.tva__s{margin:5px 0 0;font-size:16px;line-height:1.5;color:var(--tva-ink2)}

/* ── palcos: so um aparece por vez ─────────────────────────────────────── */
.tva__palco[hidden]{display:none}

/* ── botao principal ───────────────────────────────────────────────────── */
.tva-b{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:56px;padding:14px 26px;border:0;border-radius:14px;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background-color .18s,border-color .18s,transform .18s
}
.tva-b:active{transform:translateY(1px)}
.tva-b--rec{
  width:100%;min-height:96px;font-size:19px;
  background:var(--tva-vinho);color:#FFF6EA
}
.tva-b--rec:hover{background:#5F1F1B}
.tva-b--rec i{font-size:26px}
.tva-b--parar{width:100%;background:var(--tva-rec);color:#fff}
.tva-b--parar:hover{background:#A2291A}
.tva-b--env{flex:1 1 auto;background:var(--tva-terra);color:#fff}
.tva-b--env:hover{background:var(--tva-terra-ink)}
.tva-b--of{
  flex:0 0 auto;background:transparent;color:var(--tva-ink);
  border:1.5px solid var(--tva-line)
}
.tva-b--of:hover{border-color:var(--tva-terra);background:var(--tva-pa)}
.tva-b--zap{width:100%;background:var(--tva-zap);color:#fff}
.tva-b--zap:hover{background:#0E6E3B}
.tva-b[disabled]{opacity:.55;cursor:default}
/* Enquanto nao chega aos 20 segundos o botao de parar fica travado mostrando
   quanto falta. Opacidade sozinha nao basta: em vermelho a 55% ele ainda
   parece clicavel para quem enxerga pouco. Fica neutro, e volta ao vermelho no
   momento em que a gravacao pode ser encerrada. */
.tva-b--parar[disabled]{
  opacity:1;background:var(--tva-pa);color:var(--tva-ink2);
  border:1.5px solid var(--tva-line);cursor:default
}
.tva-b--parar[disabled]:hover{background:var(--tva-pa)}

/* ── gravando ──────────────────────────────────────────────────────────── */
.tva-rec__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tva-rec__pt{
  flex:none;width:15px;height:15px;border-radius:50%;background:var(--tva-rec);
  animation:tva-pulso 1.1s ease-in-out infinite
}
@keyframes tva-pulso{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(194,50,31,.5)}
  50%    {transform:scale(1.14);box-shadow:0 0 0 9px rgba(194,50,31,0)}
}
.tva-rec__lb{font-size:17px;font-weight:700;color:var(--tva-rec);letter-spacing:.02em}
.tva-rec__t{
  margin-left:auto;font-size:22px;font-weight:700;color:var(--tva-ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.tva-rec__t small{font-size:15px;font-weight:600;color:var(--tva-ink2)}

/* a onda: canvas, porque sao dezenas de barras a 60 quadros e DOM nao aguenta */
.tva-onda{
  width:100%;height:88px;display:block;border-radius:12px;
  background:var(--tva-pa);border:1px solid var(--tva-line);margin-bottom:14px
}
/* barra de tempo restante: mostra que a gravacao tem fim, sem contar ao contrario */
.tva-rec__bar{height:6px;border-radius:3px;background:var(--tva-line);overflow:hidden;margin-bottom:16px}
.tva-rec__fill{display:block;height:100%;width:0;background:var(--tva-rec);transition:width .25s linear}

/* ── ouvir o que gravou ────────────────────────────────────────────────── */
.tva-ouv{
  display:grid;gap:13px;padding:15px;border-radius:13px;
  background:var(--tva-pa);border:1px solid var(--tva-line);margin-bottom:16px
}
.tva-ouv__lb{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;color:var(--tva-ink)}
.tva-ouv__lb i{color:var(--tva-terra-ink)}
.tva-ouv audio{width:100%;min-height:44px}
.tva__acts{display:flex;flex-wrap:wrap;gap:11px}

/* ── nome e whatsapp ───────────────────────────────────────────────────── */
.tva-f{display:grid;gap:7px;margin-bottom:15px}
.tva-f label,.tva-f .tva-f__lb{display:block;font-size:16px;font-weight:650;color:var(--tva-ink)}
.tva-f input{
  width:100%;min-height:56px;padding:14px 16px;font:inherit;font-size:17px;
  color:var(--tva-ink);background:var(--tva-pa);
  border:1.5px solid var(--tva-line);border-radius:12px
}
.tva-f input:focus{border-color:var(--tva-terra);outline:none;box-shadow:0 0 0 3px rgba(187,90,28,.16)}
@media(min-width:620px){.tva__dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}}

/* a isca fica FORA da tela, nunca com display:none: leitor de tela pula pelo
   aria-hidden e o preenchimento automatico do navegador nao a enxerga aqui */
.tva-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.tva-lgpd{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;
  font-size:15px;line-height:1.5;color:var(--tva-ink2)
}
.tva-lgpd input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--tva-terra)}

/* ── recados de estado ─────────────────────────────────────────────────── */
.tva-msg{
  display:none;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:12px;
  font-size:16px;line-height:1.5;margin-bottom:15px
}
.tva-msg.on{display:flex}
.tva-msg--erro{background:#FCEDEA;border:1px solid #E7B7AE;color:#8A2318}
.tva-msg--ok{background:#EDF6EF;border:1px solid #B9DCC3;color:#1C5C31}
.tva-msg i{margin-top:2px;flex:none}

.tva-fim{text-align:center;padding:6px 0 2px}
.tva-fim__ic{
  width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:#EDF6EF;color:#1C5C31;font-size:28px
}
.tva-fim__t{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--tva-vinho)}
.tva-fim__s{margin:0 0 18px;font-size:16px;line-height:1.55;color:var(--tva-ink2)}

.tva__dica{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--tva-ink2)}

@media(prefers-reduced-motion:reduce){
  .tva-rec__pt{animation:none}
  .tva-b:active{transform:none}
}

/* No escuro (a secao de contato da home e vinho) o cartao continua claro de
   proposito: campo de formulario claro e o que este publico reconhece. */
.tvh-sec--dark .tva{box-shadow:0 20px 44px -30px rgba(0,0,0,.6)}

/* ══════════════════════════════════════════════════════════════════════
   TRANSCRICAO
   Duas pecas. A primeira aparece DURANTE a gravacao e existe por um motivo de
   confianca, nao de utilidade: quem tem 70 anos e nunca gravou audio no site
   de ninguem precisa ver alguma coisa acontecer para acreditar que o microfone
   pegou. Texto surgindo enquanto fala e a prova mais direta disso.
   A segunda aparece na revisao e e EDITAVEL, porque o reconhecimento do
   navegador erra nome proprio e termo juridico, e quem falou e quem sabe o que
   disse.
   ══════════════════════════════════════════════════════════════════════ */
.tva-tr{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  background:var(--tva-pa);border:1px solid var(--tva-line)
}
.tva-tr__lb{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
  font-size:15px;font-weight:700;color:var(--tva-terra-ink)
}
.tva-tr__lb i{font-size:14px}
.tva-tr__tx{
  margin:0;max-height:104px;overflow-y:auto;
  font-size:16px;line-height:1.55;color:var(--tva-ink);
  /* o cursor piscando no fim reforca que ainda esta escrevendo */
  min-height:1.55em
}
.tva-tr__tx:empty::after{
  content:"Pode falar…";color:var(--tva-ink2);font-style:normal
}

/* campo editavel da revisao */
.tva-f--tr{margin-bottom:14px}
.tva-f--tr textarea{
  width:100%;padding:12px 14px;border-radius:12px;resize:vertical;
  border:1.5px solid var(--tva-line);background:#fff;
  font:inherit;font-size:16px;line-height:1.55;color:var(--tva-ink)
}
.tva-f--tr textarea:focus-visible{
  outline:0;border-color:var(--tva-terra);box-shadow:0 0 0 4px rgba(187,90,28,.15)
}
.tva-f--tr .tva-f__lb b{color:var(--tva-terra-ink);font-weight:700}
.tva-f__hint{
  display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--tva-ink2)
}