/* ============================================================
   read-aloud.css — Leitura acompanhada / karaokê TTS (AnaDita Blog)
   PORTADO da LP (landing/index.html, CSS ~340-540) — "sem inventar nada".
   Os 4 pontos de adaptação da spec (blog-tts-karaoke-spec.md §4/§6/§9):
     · cor do highlight → token do BLOG (--color-accent / Ouro Ativo #D4AF37),
       NÃO o #FFD700 da LP (§9).
     · seletores de chunk → corpo do artigo (.content ...) — feito no JS (§4.4).
   O resto é AS-IS. Tokens de cor locais (--rd-*) isolam o motor das vars da LP
   (--ouro/--preto/--verde-fundo) que não existem no blog.
   ============================================================ */

:root {
  /* Mapeamento fixo→token do blog. Ouro Ativo é o realce da palavra atual ("o dedo"). */
  --rd-gold: var(--color-accent);            /* #D4AF37 Ouro Ativo (substitui --ouro #FFD700 da LP) */
  --rd-ink: var(--color-foreground);         /* texto escuro sobre o ouro — contraste AA */
  --rd-bar-bg: var(--color-primary);         /* barra de velocidade: Verde Progresso (=--verde-fundo da LP) */
  --rd-orange: #C75A1B;                      /* laranja "ouvir" da Ana (=--laranja da LP) */
}

/* Bloco tocável: contexto de posição (a LP usa o canto; no blog o botão fica no topo). */
[data-tts-id] { position: relative; }

/* ---------- LEITURA NO PRÓPRIO TEXTO (karaokê) ---------- */
/* .rd-w   = palavra tokenizada (wrapper)
   .is-done = já lida (rastro neutro/transparente)
   .is-now  = palavra ATUAL: fundo ouro + texto escuro ("o dedo" que acompanha) */
.rd-w { border-radius: 5px; padding: 0 1px; transition: background-color .12s ease, color .12s ease; }
.rd-w.is-done { background: transparent; }
.rd-w.is-now { background: var(--rd-gold); color: var(--rd-ink); font-weight: 700; }

/* Realce do bloco/frase em leitura (overlay ouro suave). §4.4: seletores de chunk
   do blog (.content p/li/h2/h3/blockquote) recebem esta classe via JS. */
.rd-chunk-now {
  background: color-mix(in srgb, var(--rd-gold) 16%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--rd-gold), 0 6px 18px rgba(21, 18, 16, .08) !important;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .rd-w { transition: none; } }

/* ---------- BOTÃO "OUVIR ESTE ARTIGO" (espelha a .ouvir-tudo da LP) ---------- */
/* Microcopy de marca (§9 + ADR-brand-identity-attribution): "Ouvir este artigo".
   Conveniência/acessibilidade pra empresários — igual pra igual, nunca tutela. */
.rd-ouvir {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; margin: 0 0 8px;
  border: 2px solid var(--color-border-hairline); border-radius: 9999px; cursor: pointer;
  background: var(--color-surface); color: var(--color-foreground);
  font-family: var(--font-ui, inherit); font-weight: 600; font-size: 1rem;
  box-shadow: 0 2px 10px rgba(21, 18, 16, .08);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.rd-ouvir:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21, 18, 16, .12); }
.rd-ouvir:active { transform: translateY(0); }
.rd-ouvir:focus-visible { outline: 3px solid var(--rd-gold); outline-offset: 2px; }
.rd-ouvir svg { width: 24px; height: 24px; fill: currentColor; flex: 0 0 auto; display: block; }
/* Estado ATIVO (lendo): vira "Parar a leitura", realce ouro. */
.rd-ouvir.is-on { background: var(--rd-gold); color: var(--rd-ink); border-color: var(--rd-gold); }

/* ---------- VARIANTE HERO — botão de destaque no topo do artigo ----------
   Decisão UX 2026-06-18: pra quem não lê, "Ouvir" precisa ser a 1ª ação que
   salta aos olhos. Grande, fundo Ouro Ativo, full-width no mobile. */
.rd-ouvir-hero {
  width: 100%; min-height: 60px; margin: 0 0 24px;
  padding: 16px 28px; gap: 12px;
  background: var(--rd-gold); color: var(--rd-ink);
  border-color: var(--rd-gold);
  font-size: 1.15rem; font-weight: 700;
  box-shadow: 0 4px 16px rgba(212, 175, 55, .35);
}
.rd-ouvir-hero:hover { box-shadow: 0 8px 24px rgba(212, 175, 55, .45); }
.rd-ouvir-hero svg { width: 30px; height: 30px; }
/* No estado ativo (lendo) mantém o ouro — escurece só a borda p/ feedback. */
.rd-ouvir-hero.is-on { border-color: var(--rd-ink); }
@media (min-width: 640px) {
  .rd-ouvir-hero { width: auto; min-width: 280px; font-size: 1.2rem; }
}

/* ---------- GATILHO POR BLOCO (.tts-btn) — portado AS-IS (não usado na v1, mas o motor o referencia) ---------- */
.tts-btn {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 56px; height: 56px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 3px solid #fff; border-radius: 50%; cursor: pointer;
  background: var(--rd-orange); color: #fff;
  box-shadow: 0 4px 14px rgba(199, 90, 27, .40), 0 0 0 1px rgba(0, 0, 0, .04);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tts-btn:hover { transform: scale(1.06); }
.tts-btn:active { transform: scale(.94); }
.tts-btn svg { width: 26px; height: 26px; display: block; fill: currentColor; pointer-events: none; }
.tts-btn .tts-ic-pause, .tts-btn .tts-ic-load { display: none; }
.tts-btn.is-loading { background: var(--rd-bar-bg); }
.tts-btn.is-loading .tts-ic-speaker { display: none; }
.tts-btn.is-loading .tts-ic-load { display: block; animation: tts-spin 1s linear infinite; }
.tts-btn.is-playing { background: var(--rd-gold); color: var(--rd-ink); box-shadow: 0 3px 12px rgba(212, 175, 55, .45); }
.tts-btn.is-playing .tts-ic-speaker { display: none; }
.tts-btn.is-playing .tts-ic-pause { display: block; }
@keyframes tts-spin { to { transform: rotate(360deg); } }

/* Realce do BLOCO ativo (overlay ouro) — independe de animação. */
.tts-tocando {
  box-shadow: 0 0 0 3px var(--rd-gold), 0 8px 26px rgba(212, 175, 55, .30), inset 0 0 0 2000px color-mix(in srgb, var(--rd-gold) 7%, transparent) !important;
  border-radius: 16px;
}

/* ---------- BARRA DE VELOCIDADE (aparece durante a narração) — portado AS-IS ---------- */
.tts-speed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px; background: var(--rd-bar-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .30);
  transform: translateY(-110%); transition: transform .3s ease;
}
.tts-speed.is-visible { transform: translateY(0); }
/* Transporte (▶/⏸ e ⏹) — sempre visível mesmo se o botão do bloco saiu da tela. */
.tts-trans {
  display: flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 56px; padding: 6px 10px;
  border: 2px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
}
.tts-trans:hover { background: rgba(255, 255, 255, .30); }
.tts-trans.tts-trans-play { background: var(--rd-gold); color: var(--rd-ink); }
.tts-trans svg { width: 26px; height: 26px; display: block; fill: currentColor; pointer-events: none; }
.tts-speed-sep { width: 2px; align-self: stretch; margin: 6px 2px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
.tts-speed-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 72px; min-height: 56px; padding: 6px 12px;
  border: 2px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-family: var(--font-ui, sans-serif); font-weight: 600; font-size: .82rem; line-height: 1; cursor: pointer;
}
.tts-speed-opt .emoji { font-size: 1.55rem; line-height: 1; }
.tts-speed-opt:hover { background: rgba(255, 255, 255, .20); }
.tts-speed-opt[aria-pressed="true"] { background: var(--rd-gold); color: var(--rd-ink); border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .tts-speed { transition: none; } }
/* Telas estreitas: velocidade vira só emoji (cabe transporte + 3 velocidades numa linha). */
@media (max-width: 410px) {
  .tts-speed-opt span:not(.emoji) { display: none; }
  .tts-speed-opt { min-width: 52px; padding: 6px 8px; }
  .tts-trans { min-width: 50px; padding: 6px 8px; }
}