/* A transcrição em bolhas. Os tokens vêm do estúdio — este painel não inventa
 * cor nenhuma, e é por isso que ele segue o tema sem uma segunda declaração. */
.tr-painel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: min(640px, calc(100vh - 200px));
  min-height: 420px;
  padding: 18px;
  background: var(--lt-painel);
  border: 1px solid var(--lt-linha);
  border-radius: 16px;
}

.tr-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lt-linha);
}

.tr-kicker {
  margin: 0 0 6px;
  color: var(--lt-acento-texto);
  font-family: var(--font-receitas-mono), 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tr-titulo { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }

.tr-estado {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 10px;
  color: var(--lt-ink-sec);
  background: var(--lt-painel-fundo);
  border: 1px solid var(--lt-linha);
  border-radius: 999px;
  font-family: var(--font-receitas-mono), 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.tr-estado > span { width: 7px; height: 7px; border-radius: 50%; background: var(--lt-ink-terc); }
.tr-estado[data-ouvindo] { color: var(--lt-ink); }
.tr-estado[data-ouvindo] > span { background: var(--lt-vermelhao); animation: tr-pulsar 1.4s ease-in-out infinite; }

.tr-trilha {
  flex: 1;
  min-height: 0;
  padding: 16px 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tr-vazio {
  max-width: 28ch;
  margin: 12% auto 0;
  color: var(--lt-ink-sec);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

.tr-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.tr-item { display: flex; }
.tr-item[data-autor="pessoa"] { justify-content: flex-end; }
.tr-item[data-autor="assistente"] { justify-content: flex-start; }

/* A bolha não passa de 78% da coluna: é o que mantém visível de que lado ela
 * está. Bolha de largura cheia perde o lado, e com ele o autor. */
.tr-bolha {
  max-width: 78%;
  min-width: 0;
  padding: 10px 13px 8px;
  border-radius: 14px;
  animation: tr-entrar .24s ease-out both;
}

.tr-item[data-autor="pessoa"] .tr-bolha {
  color: var(--lt-bolha-pessoa-ink);
  background: var(--lt-bolha-pessoa);
  border-bottom-right-radius: 5px;
}

.tr-item[data-autor="assistente"] .tr-bolha {
  color: var(--lt-bolha-ia-ink);
  background: var(--lt-bolha-ia);
  border: 1px solid var(--lt-linha);
  border-bottom-left-radius: 5px;
}

/* A fala ainda em hipótese fica visivelmente provisória — e continua legível.
 * Opacidade sozinha derrubaria o contraste; o tracejado é o que carrega o
 * recado sem cobrar isso do texto. */
.tr-item[data-parcial] .tr-bolha {
  border-style: dashed;
  border-color: var(--lt-vermelhao);
  border-width: 1px;
}

.tr-texto { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.tr-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-family: var(--font-receitas-mono), 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .04em;
  opacity: .82;
}

.tr-autor { font-weight: 600; }
.tr-hora { font-variant-numeric: tabular-nums; }
.tr-selo { text-transform: lowercase; }

.tr-bolinhas { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; }
.tr-bolinhas > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tr-bolinha 1s ease-in-out infinite; }
.tr-bolinhas > span:nth-child(2) { animation-delay: .14s; }
.tr-bolinhas > span:nth-child(3) { animation-delay: .28s; }

@keyframes tr-bolinha { 0%, 60%, 100% { transform: translateY(0); opacity: .42; } 30% { transform: translateY(-4px); opacity: 1; } }

@keyframes tr-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tr-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 860px) {
  .tr-painel { height: 340px; min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-bolha, .tr-estado[data-ouvindo] > span, .tr-bolinhas > span { animation: none !important; }
}