/* Apenas a LIA. A regra editorial global não deve quadrar as ondas do microfone. */
html body .lia-hold .lia-hold-onda,
html body .lia-hold .lia-hold-roda::before,
html body .lia-hold .lia-hold-ponto { border-radius:50%!important; }
.lia-hold .lia-hold-barra, .lia-hold-aviso { display:none!important; }

#chatbox .lia-compose-field { position:relative; flex:1 1 0%; min-width:0; align-self:stretch; display:flex; }
#chatbox .lia-compose-field #chatInput { width:100%; min-width:0; box-sizing:border-box; }
#chatbox .lia-compose-status { display:none; position:absolute; inset:0; align-content:center; align-items:center; grid-template-columns:minmax(0,1fr) auto; gap:2px 6px; padding:4px 10px; pointer-events:none; color:#292929; font:500 12px/1.25 system-ui,sans-serif; }
#chatbox .lia-compose-field:is(.is-recording,.is-notice) #chatInput { color:transparent; caret-color:transparent; }
#chatbox .lia-compose-field:is(.is-recording,.is-notice) #chatInput::placeholder { color:transparent; }
#chatbox .lia-compose-field:is(.is-recording,.is-notice) .lia-compose-status { display:grid; background:#fff; }
#chatbox .lia-compose-label { min-width:0; }
#chatbox .lia-compose-time { font-variant-numeric:tabular-nums; color:#b3261e; }
#chatbox .lia-compose-hint { grid-column:1/-1; font-size:10px; color:#686868; }
#chatbox .is-recording .lia-compose-label { color:#b3261e; }
#chatbox .is-recording .lia-compose-label::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; vertical-align:middle; }
#chatbox .is-cancelling .lia-compose-status { background:#fff2f1; }
#chatbox .is-notice .lia-compose-label { grid-column:1/-1; font-size:12px; }
#chatbox .is-notice .lia-compose-hint, #chatbox .is-notice .lia-compose-time { display:none; }
#chatbox .chatbox-input #micButton { width:38px; height:38px; flex:0 0 38px; margin:2px 5px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; }
#chatbox .chatbox-input #micButton.listening { background:#fdecec; box-shadow:0 0 0 3px rgba(229,57,53,.15); }
#chatbox #micButton.listening .lia-ico { animation:none; color:#b3261e; }
.lia-hold .lia-hold-roda::before { transform:scale(calc(1 + .20 * var(--nivel))); }
.lia-hold .lia-hold-onda { display:none; }
.lia-hold .lia-voz-borda { position:absolute; left:-100px; top:-100px; width:200px; height:200px; overflow:visible; pointer-events:none; }
.lia-hold .lia-voz-borda path { fill:none; stroke:#fa6689; stroke-width:3.5; stroke-linejoin:round; }
.lia-hold.cancelando .lia-voz-borda path { stroke:#ffaba6; }
#chatbox .is-recording .lia-compose-status { grid-template-columns:auto 1fr; }
#chatbox .is-recording .lia-compose-time { grid-column:1; grid-row:1; }
#chatbox .is-recording .lia-compose-label { grid-column:2; grid-row:1; }
#chatbox .lia-compose-time { white-space:nowrap; font-size:11px; }
#chatbox .is-near-limit .lia-compose-time { font-weight:750; color:#9c1616; }

/* A luz interna dá contraste aos filamentos mesmo sobre fotos claras da loja. */
.lia-hold .lia-hold-roda::before {
  background:radial-gradient(ellipse at 48% 38%,#38466e 0%,#172746 45%,#11192f 73%,#292452 100%);
  box-shadow:inset 0 0 0 1px #a0dbff88,inset 0 0 18px #789cff55,0 4px 24px #10182955;
  transform:scale(calc(1 + .12 * var(--nivel)));
}
.lia-hold .lia-voz-borda { filter:drop-shadow(0 0 2px #73caff88); }
.lia-hold .lia-voz-borda path { stroke:url(#lia-aurora-grad); stroke-width:1; opacity:.68 }
.lia-hold .lia-voz-borda path:nth-child(2) { stroke-width:1.8; opacity:.95 }
.lia-hold .lia-voz-borda path:nth-child(4) { stroke-width:1.45; opacity:.8 }
.lia-hold .lia-voz-borda path:last-child { opacity:.42 }
.lia-hold .lia-hold-mic { color:#f1ffff; filter:drop-shadow(0 0 4px #70e6ff); }
.lia-hold.cancelando .lia-hold-roda::before { background:radial-gradient(circle,#862f49,#431529); }
.lia-hold.cancelando .lia-voz-borda path { stroke:#ffabba; }
.lia-hold.quase:not(.cancelando) .lia-voz-borda path { stroke:#ffd395; }

/* A RODA DA VOZ (05/11/2026): espectro em canvas + entrada com mola («clicou, respondeu»). */
.lia-hold .lia-voz-borda { display:none; }
.lia-hold .lia-voz-canvas { position:absolute; left:-140px; top:-140px; width:280px; height:280px; pointer-events:none; }
.lia-hold .lia-hold-roda { transform:translateX(var(--dx)); }
.lia-hold.entrando .lia-hold-roda { animation:liaRodaEntra .3s cubic-bezier(.34,1.56,.64,1) both; }
.lia-hold.saindo { opacity:0; transition:opacity .18s ease; }
.lia-hold.saindo .lia-hold-roda { scale:.82; transition:scale .18s cubic-bezier(.4,0,1,1); }
@keyframes liaRodaEntra { 0% { scale:.35; opacity:0 } 55% { scale:1.06; opacity:1 } 100% { scale:1; opacity:1 } }
.lia-hold.ativo { transition:opacity .08s ease; }
.lia-hold .lia-hold-roda::before { transform:scale(calc(1 + .10 * var(--nivel))); transition:transform .06s linear; }
@media (prefers-reduced-motion:reduce) { .lia-hold.entrando .lia-hold-roda { animation:none } }

/* O player próprio da LIA no iPhone/iPad (05/11/2026): a voz sai pelo motor de áudio, e o player nativo não
   andaria. Mesma altura do nativo (34px), discreto, nos tons do chat. */
.lia-player { display:flex; align-items:center; gap:10px; margin-top:8px; height:34px; padding:0 12px 0 4px; border-radius:17px; background:rgba(0,0,0,.05); }
.lia-player-bt { flex:0 0 28px; width:28px; height:28px; padding:0; border:0; border-radius:50%!important; background:#101010; color:#fff; display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lia-player-bt svg { width:15px; height:15px; fill:currentColor; }
.lia-player-pausa { display:none; }
.lia-player.tocando .lia-player-play { display:none; }
.lia-player.tocando .lia-player-pausa { display:inline; }
.lia-player-trilho { position:relative; flex:1 1 auto; height:4px; border-radius:2px; background:rgba(0,0,0,.14); overflow:hidden; }
.lia-player-barra { position:absolute; left:0; top:0; bottom:0; width:0; background:#101010; border-radius:2px; }
.lia-player-tempo { flex:0 0 auto; font:500 12px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; color:#4a4a4a; min-width:30px; text-align:right; }

/* A trava leve do chat no celular (05/11/2026): só segura o «elástico» da página; o corpo não muda. */
html.lia-travado-leve, html.lia-travado-leve body { overscroll-behavior:none; }

/* Dois quadros visível e transparente antes de abrir: o balão já chega desenhado na animação (05/11/2026). */
#chatbox.lia-preparando { visibility:visible!important; opacity:0!important; transition:none!important; animation:none!important; pointer-events:none!important; }
