/* ---------- card de voz (canto inferior esquerdo) ---------- */
/* Fica rente ao canto, com as mesmas margens. Se a barra de baixo não couber ao lado dele,
   painel-voz.js marca body.painel-voz-acima e o card sobe para cima da barra. */
#painel-voz {
  --pv-boa: #4ade80;
  position: fixed; left: 12px; bottom: 12px; width: var(--largura-salas, 244px); z-index: 13;
  display: flex; flex-direction: column;
  background: rgba(20, 18, 31, .96); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); backdrop-filter: blur(8px); font-size: 13px;
}
body.editing #painel-voz { display: none; }
body.painel-voz-acima #painel-voz { bottom: 80px; }
/* Centralizada, a barra cobriria o card: desvia para a direita só o necessário. */
body:not(.painel-voz-acima):not(.editing) #toolbar {
  transform: translateX(max(-50%, calc(var(--largura-salas, 244px) + 24px - 50vw)));
  max-width: calc(100vw - var(--largura-salas, 244px) - 36px);
}
#painel-voz button { background: transparent; border: 0; color: var(--text); }
#painel-voz button:disabled { opacity: .5; cursor: not-allowed; }
#painel-voz svg { width: 18px; height: 18px; }
.pv-textos { display: grid; min-width: 0; line-height: 1.25; }
.pv-textos > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Conexão: a cor acompanha a qualidade medida. */
.pv-conexao { --q: var(--muted); display: flex; align-items: center; gap: 2px; padding: 6px 6px 4px; border-bottom: 1px solid var(--line); }
.pv-conexao[data-qualidade="boa"] { --q: var(--pv-boa); }
.pv-conexao[data-qualidade="media"] { --q: var(--warn); }
.pv-conexao[data-qualidade="ruim"] { --q: var(--danger); }
#painel-voz .pv-status { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; text-align: left; }
#painel-voz .pv-status:hover, #painel-voz .pv-status[aria-expanded="true"] { background: var(--surface-3); }
.pv-sinal { display: grid; color: var(--q); }
.pv-titulo { color: var(--q); font-size: 13px; }
.pv-sub, .pv-linha { color: var(--muted); font-size: 11.5px; }
.pv-medida { display: grid; justify-items: end; gap: 1px; }
#painel-voz .pv-mini { width: 40px; height: 14px; stroke: var(--q); stroke-width: 1.5; }
.pv-ms { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
#painel-voz .pv-desconectar:hover { color: var(--danger); background: rgba(255, 77, 109, .14); }

/* Atalhos de mídia */
.pv-acoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px 8px 8px; border-bottom: 1px solid var(--line); }
#painel-voz .pv-acao { height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
#painel-voz .pv-acao:hover { border-color: var(--accent); }
#painel-voz .pv-acao.ativo { color: var(--accent); border-color: var(--accent); background: rgba(168, 85, 247, .16); }

/* Linha do usuário */
.pv-usuario { display: flex; align-items: center; gap: 2px; padding: 6px; }
#painel-voz .pv-perfil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 3px; border-radius: 10px; text-align: left; }
#painel-voz .pv-perfil:hover { background: var(--surface-3); }
.pv-retrato { position: relative; flex: none; width: 32px; height: 32px; }
.pv-foto { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); display: block; }
.pv-ponto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); }
.pv-nick { font-size: 13px; }
.pv-grupo { display: flex; align-items: center; border-radius: 8px; }
.pv-grupo:hover { background: var(--surface-2); }
#painel-voz .pv-botao { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
#painel-voz .pv-botao:hover { background: var(--surface-3); }
#painel-voz .pv-botao.off { color: var(--danger); background: rgba(255, 77, 109, .14); }
#painel-voz .pv-seta { width: 14px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 6px; color: var(--muted); }
#painel-voz .pv-seta:hover, #painel-voz .pv-seta[aria-expanded="true"] { color: var(--text); background: var(--surface-3); }
#painel-voz .pv-seta svg { width: 12px; height: 12px; }

/* Popovers do card: abrem acima dele, alinhados à esquerda. */
.pv-pop { position: absolute; left: 0; bottom: calc(100% + 8px); width: max(100%, 300px); max-width: calc(100vw - 24px); z-index: 31; display: grid; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pv-pop h3 { margin: 0; font-size: 13px; }
.pv-grafico-moldura { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
#painel-voz .pv-grafico { display: block; width: 100%; height: 84px; overflow: visible; }
.pv-guia { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pv-guia-texto { fill: var(--muted); stroke: none; font-size: 9px; }
.pv-linha-ping { stroke: var(--accent-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pv-legenda { margin: -4px 0 0; color: var(--muted); font-size: 11px; }
.pv-valores { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.pv-valores dt { color: var(--muted); }
.pv-valores dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pv-opcoes { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }
#painel-voz .pv-opcao { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left; }
#painel-voz .pv-opcao:hover { background: var(--surface-3); }
#painel-voz .pv-opcao.escolhida { color: var(--accent); }
.pv-check { display: grid; width: 16px; flex: none; }
#painel-voz .pv-check svg { width: 16px; height: 16px; }
#painel-voz .pv-link { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--muted); }
.pv-volume { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; color: var(--muted); }
.pv-volume input { grid-column: 1 / -1; accent-color: var(--accent); width: 100%; }

/* Telas estreitas: versão compacta, só o essencial. */
@media (max-width: 820px) {
  #painel-voz { left: 8px; width: min(var(--largura-salas, 244px), calc(100vw - 16px)); }
  .pv-sub, .pv-mini, .pv-perfil .pv-textos { display: none; }
  .pv-acoes { padding: 4px 6px 6px; gap: 4px; }
  #painel-voz .pv-acao { height: 28px; }
}