/* Telefonata «viva» (8/10/2026): la voce vera dell'assistente e, al posto della voce di chi risponde, i suoi fumetti che compaiono
   a tempo (sito/telefonata.js). Colori e fumetti vengono da stile.css: qui solo il riquadro e il movimento. */
.tel-viva { display: grid; gap: 12px; align-content: start; align-self: start; }   /* la barra dell'audio resta sotto i fumetti */
.tv-testa { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--bordo); border-radius: 999px;
  padding: 8px 8px 8px 12px; box-shadow: var(--ombra); }
.tv-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accento); color: var(--su-accento); display: grid;
  place-items: center; font-size: 1.25rem; flex: none; }
.tv-testa > div { flex: 1; line-height: 1.25; font-size: .98rem; }
.tv-stato { display: block; font-size: .8rem; color: var(--tenue); }
.tv-play { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--accento); color: var(--su-accento); font: inherit;
  font-size: 1.15rem; font-weight: 700; cursor: pointer; flex: none; }
.tv-play:hover { background: var(--accento-scuro); }
.tv-righe { max-height: 440px; overflow-y: auto; }
.tv-righe .avviso + .avviso { margin-top: 8px; }
.tv-invito { color: var(--tenue); font-size: .95rem; text-align: center; padding: 34px 12px; margin: 0; }
.tv-iniziata .tv-invito { display: none; }
.tv-pronta .tv-righe .riga, .tv-pronta .tv-righe .tv-dopo { display: none; }
.tv-pronta .tv-righe .riga.vista { display: flex; }
.tv-pronta .tv-righe .tv-dopo.vista { display: block; }
/* l'audio in un contenitore suo: come figlio diretto della griglia Firefox gli dà 150 px e la barra finisce in fondo */
.tv-audio audio { width: 100%; display: block; height: 40px; }
/* chi parla adesso: l'assistente con le onde, Franco col bordo verde finché si legge il suo fumetto */
.riga.ia.parla .fumetto { box-shadow: 0 0 0 2px var(--accento); }
.riga.caro.attuale .fumetto { box-shadow: 0 0 0 2px var(--verde); }
.onde { display: none; }
.riga.ia.parla .onde { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; margin-left: 8px; vertical-align: -1px; }
.onde i { width: 3px; height: 4px; background: var(--accento); border-radius: 2px; }
.tv-bottone { display: inline-block; margin-top: 6px; background: var(--accento); color: var(--su-accento); font-weight: 700; font-style: normal;
  font-size: .82rem; padding: 3px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .tv-pronta .tv-righe .vista { animation: tv-entra .35s ease both; }
  .onde i { animation: tv-onda .9s ease-in-out infinite; }
  .onde i:nth-child(2) { animation-delay: .15s; } .onde i:nth-child(3) { animation-delay: .3s; }
  .tv-in-corso .tv-avatar { animation: tv-pulsa 1.6s ease-in-out infinite; }
}
@keyframes tv-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tv-onda { 0%, 100% { height: 3px; } 50% { height: 11px; } }
@keyframes tv-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .35); } 50% { box-shadow: 0 0 0 9px rgba(194, 65, 12, 0); } }