.palco-nome { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fone {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: rgba(255, 255, 255, .16); color: #b4b9d0; transition: background .35s, color .35s, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.fone svg { width: 20px; height: 20px; }
.fone[data-linha="ativa"] { background: var(--green); color: #fff; animation: fone-ativo 2s ease-out infinite; }
.fone[data-linha="encerrada"] { background: var(--red); color: #fff; transform: rotate(135deg); }
@keyframes fone-ativo { 0% { box-shadow: 0 0 0 0 rgba(0, 184, 90, .6); } 100% { box-shadow: 0 0 0 12px rgba(0, 184, 90, 0); } }

.transcricao-botao {
  position: absolute; right: 22px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px; border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); color: #fff; font: 500 13px var(--font); backdrop-filter: blur(6px);
  transition: background .2s, color .2s, transform .2s;
}
.transcricao-botao .i { font-size: 17px; }
.transcricao-botao:hover { background: #fff; color: var(--blue); transform: translateY(-1px); }

.transcricao {
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; padding: 28px 32px 110px; color: var(--ink);
  background: linear-gradient(180deg, #f7f8fb 0%, #fff 100%); opacity: 0; visibility: hidden; transform: translateY(38px) scale(.985); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s;
}
.transcricao.aberta { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.transcricao-cabeca { width: min(820px, 100%); display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.transcricao-icone { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.transcricao-icone .i { font-size: 21px; }
.transcricao-cabeca h3 { font: 600 20px var(--font); color: var(--blue); }
.transcricao-cabeca p { margin-top: 2px; font: 500 12px var(--font); color: var(--muted); }
.transcricao-lista { flex: 1; width: min(820px, 100%); overflow-y: auto; padding: 18px 4px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.fala-item { display: flex; flex-direction: column; max-width: 78%; opacity: 0; transform: translateY(8px); animation: fala-entra .35s ease forwards; }
@keyframes fala-entra { to { opacity: 1; transform: none; } }
.fala-item--cliente { align-self: flex-start; }
.fala-item--atendente { align-self: flex-end; align-items: flex-end; }
.fala-quem { margin: 0 6px 4px; font: 600 11px var(--font); letter-spacing: .04em; color: var(--muted); }
.fala-balao { padding: 12px 18px; border-radius: 18px; font: 400 15px/1.5 var(--font); }
.fala-item--cliente .fala-balao { background: var(--paper); border-top-left-radius: 6px; }
.fala-item--atendente .fala-balao { background: var(--blue); color: #fff; border-top-right-radius: 6px; }
.fala-item--interrompida .fala-balao { opacity: .75; }
.fala-hora { margin: 4px 6px 0; font: 400 10px var(--font); color: var(--muted); }
.transcricao-vazia { margin: auto; color: var(--muted); font: 500 14px var(--font); }
.transcricao-fechar {
  position: absolute; left: 50%; bottom: 28px; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center;
  transform: translateX(-50%) scale(.4); opacity: 0; box-shadow: 0 12px 30px rgba(255, 75, 110, .5); transition: transform .45s cubic-bezier(.2, 1.2, .3, 1) .08s, opacity .3s .08s, background .2s;
}
.transcricao.aberta .transcricao-fechar { transform: translateX(-50%) scale(1); opacity: 1; }
.transcricao.aberta .transcricao-fechar:hover { background: #e63a5d; transform: translateX(-50%) scale(1.07); }
.transcricao-fechar .i { font-size: 26px; stroke-width: 2.6; }