/* Chamadas: salas de voz na lateral e palco flutuando sobre o escritório (ou acima da conversa). Usa os tokens de estilo.css. */

/* a coluna principal vira flex para o palco entrar entre o aviso e as mensagens sem depender de quais blocos estão visíveis */
.principal { display: flex; flex-direction: column; }
.principal > .mensagens { flex: 1 1 auto; min-height: 0; }

/* ---------- lateral ---------- */
.salas { flex: none; max-height: 42vh; overflow-y: auto; padding: 0 10px 6px; border-top: 1px solid var(--linha); }
.salas .categoria { margin-top: 12px; }
.salas-off { margin: 0 8px 8px; font-size: 12.5px; color: var(--suave); }
.sala .sala-icone { display: grid; place-items: center; opacity: .75; }
.sala .sala-icone svg { width: 16px; height: 16px; }
.sala-qtd { font: 500 11px/1 var(--mono); color: var(--suave); }
/* admin arrasta as salas para mudar a ordem (public/chamadas.js, ligarArrasto): a alça aparece no hover e sempre no toque */
.salas.pode-arrumar .sala { user-select: none; -webkit-user-select: none; }
.sala-alca { display: grid; place-items: center; margin: -4px -4px -4px 0; padding: 4px; border-radius: 6px; color: var(--suave); opacity: 0; cursor: grab; touch-action: none; transition: opacity .12s; }
.sala-alca svg { width: 14px; height: 14px; }
.sala:hover .sala-alca, .sala:focus-visible .sala-alca { opacity: .7; }
@media (pointer: coarse) { .sala-alca { opacity: .7; } }
.salas.arrastando, .salas.arrastando * { cursor: grabbing; }
.salas.arrastando .sala:hover { background: transparent; color: var(--suave); }
/* a sala que está sendo arrastada já fica no lugar onde vai cair, como um espaço marcado; o fantasma segue o ponteiro */
.sala-levada { border-radius: 8px; background: var(--acento-suave); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 55%, transparent); }
.sala-levada > * { opacity: .3; }
.sala-fantasma { position: fixed; z-index: 80; pointer-events: none; opacity: .92; background: var(--lateral-ativo); color: var(--tinta); box-shadow: 0 6px 18px rgb(0 0 0 / .28); transform: rotate(-1.5deg); }
.sala-fantasma .sala-alca { opacity: .7; }
.sala-gente { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; display: grid; gap: 2px; }
.sala-gente li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 6px; border-radius: 6px; font-size: 13.5px; color: var(--suave); }
.sala-gente li .nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-gente li.falando { color: var(--tinta); }
.sala-gente li.falando .foto { box-shadow: 0 0 0 2px var(--lateral), 0 0 0 4px var(--bom); }
.sala-icones { display: inline-flex; gap: 4px; color: var(--suave); }
.sala-icones svg { width: 14px; height: 14px; }
.sala-icones .mudo { color: var(--ruim); }
.foto.mini { width: 22px; height: 22px; font-size: 10px; transition: box-shadow .12s; }

/* ---------- palco ---------- */
.palco { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px solid var(--linha); background: var(--painel); min-height: 0; }
.palco-barra { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.palco-sinal { width: 10px; height: 10px; border-radius: 50%; background: var(--bom); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bom) 22%, transparent); }
.palco[data-fase="entrando"] .palco-sinal, .palco[data-fase="saindo"] .palco-sinal { background: var(--suave); box-shadow: none; animation: piscar 1s infinite alternate; }
.palco[data-fase="reconectando"] .palco-sinal { background: var(--alerta); animation: piscar .6s infinite alternate; }
@keyframes piscar { to { opacity: .35; } }
.palco-titulo { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.palco-sala { font: 700 15px/1.2 var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palco-fase { color: var(--suave); font-size: 12.5px; }
.palco-som { border: 0; border-radius: 999px; padding: 7px 12px; background: var(--alerta); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.palco-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.pb { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo); color: var(--tinta); cursor: pointer; padding: 0; }
.pb:hover:not(:disabled) { background: var(--acento-suave); }
.pb:disabled { opacity: .45; cursor: default; }
.pb:focus-visible, .bloco:focus-visible, .palco-som:focus-visible, .sala:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pb[data-acao="mic"][aria-pressed="false"], .pb[data-acao="cam"][aria-pressed="false"] { color: var(--ruim); background: color-mix(in srgb, var(--ruim) 10%, var(--fundo)); border-color: color-mix(in srgb, var(--ruim) 30%, var(--linha)); }
.pb[data-acao="tela"][aria-pressed="true"], .pb[data-acao="foco"][aria-pressed="true"], .pb[data-acao="recolher"][aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--no-acento); }
/* plano Grátis: a câmera fica à vista, trancada, com o selo Premium (trancarCamera em public/chamadas.js) */
.pb.premium { position: relative; color: var(--suave); }
.pb.premium::before { content: "Premium"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 999px; background: linear-gradient(135deg, #F7D774, #E3A92F); color: #3B2A06; font: 700 8.5px/1.35 var(--corpo); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); pointer-events: none; }
.pb-selo { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #F7D774, #E3A92F); color: #3B2A06; box-shadow: 0 0 0 2px var(--painel); }
.pb-selo svg { width: 10px; height: 10px; }
.pb.sair { background: var(--ruim); border-color: var(--ruim); color: #fff; width: auto; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.pb.sair svg { width: 22px; height: 22px; }
.pb.sair:hover { background: color-mix(in srgb, var(--ruim) 85%, #000); }

/* ---------- "Voz conectada" no pé da lateral ---------- */
.voz { flex: none; margin: 8px 8px 0; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: var(--painel); display: grid; gap: 8px; }
.voz-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.voz-sala { flex: 1; min-width: 0; display: grid; text-align: left; line-height: 1.25; border: 0; background: none; padding: 0; color: var(--tinta); cursor: pointer; }
.voz-sala:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.voz-estado { color: var(--bom); font-size: 13.5px; }
.voz[data-fase="entrando"] .voz-estado, .voz[data-fase="saindo"] .voz-estado { color: var(--suave); }
.voz[data-fase="reconectando"] .voz-estado { color: var(--alerta); }
.voz-sala small { color: var(--suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voz-sala:hover small { text-decoration: underline; }
.voz .pb { width: 34px; height: 34px; border-radius: 10px; }
.voz .pb.sair { padding: 0; min-width: 40px; }
.voz .pb[data-acao="mic"][aria-pressed="false"] { color: var(--ruim); background: color-mix(in srgb, var(--ruim) 10%, var(--fundo)); border-color: color-mix(in srgb, var(--ruim) 30%, var(--linha)); }
.voz.mudo .medidor { opacity: .35; }

/* barra de nível do microfone (o --nivel é escrito a cada quadro pelo chamadas.js) */
.medidor { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--suave) 18%, transparent); overflow: hidden; }
.medidor span { display: block; height: 100%; width: var(--nivel, 0%); border-radius: inherit; background: var(--bom); }
.disp-teste { display: grid; gap: 8px; font-size: 13px; color: var(--suave); }
.disp-teste .medidor { height: 8px; }
.palco[data-modo="recolhido"] .palco-grade { display: none; }
.palco-topo { display: contents; }
.palco-mapa[hidden] { display: none; }

/* ---------- blocos ---------- */
.palco-grade { min-height: 0; display: grid; gap: 10px; overflow: auto; }
.palco-grade[data-layout="compacto"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.palco-grade[data-layout="compacto"] .bloco { aspect-ratio: 16 / 10; max-height: 116px; }
.palco-grade[data-layout="grade"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-height: 52vh; }
.palco-grade[data-layout="grade"] .bloco { aspect-ratio: 16 / 9; }
.palco-grade[data-layout="destaque"] { grid-template-columns: minmax(0, 1fr) 190px; height: min(56vh, 620px); overflow: hidden; }
.palco-grade[data-layout="destaque"]:has(> .palco-lado:empty) { grid-template-columns: minmax(0, 1fr); }
.palco-lado { display: grid; align-content: start; gap: 10px; overflow-y: auto; min-height: 0; }
.palco-lado:empty { display: none; }
.palco-lado .bloco { aspect-ratio: 16 / 9; flex: none; }
.palco-lado .foto.grande, .palco-grade[data-layout="compacto"] .foto.grande { width: 50px; height: 50px; font-size: 18px; }
.bloco.foco { height: 100%; }

.bloco { position: relative; overflow: hidden; border-radius: 14px; background: var(--acento-suave); display: grid; place-items: center; min-height: 0; cursor: pointer; isolation: isolate; }
.bloco.com-video { background: #17141F; }
.bloco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--bom); opacity: 0; transition: opacity .12s; pointer-events: none; }
.bloco.falando::after { opacity: 1; }
.bloco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bloco[data-tipo="tela"] video { object-fit: contain; }
.bloco.espelho video { transform: scaleX(-1); }
.bloco-avatar { display: grid; place-items: center; }
.bloco-rodape { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.bloco-nome { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: 8px; background: rgba(20, 18, 27, .62); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco-nome svg { width: 14px; height: 14px; flex: none; }
.bloco-nome .mudo { color: #FF8A8F; display: inline-flex; }
.bloco-cheia { pointer-events: auto; border: 0; border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; background: rgba(20, 18, 27, .62); color: #fff; cursor: pointer; }
.bloco:fullscreen { border-radius: 0; background: #000; }

/* ---------- chamar alguém e campainha ---------- */
.chamar-alguem { display: flex; align-items: center; gap: 8px; width: calc(100% - 4px); margin: 12px 2px 0; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--acento) 45%, var(--linha)); border-radius: 10px; background: none; color: var(--acento); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.chamar-alguem:hover { background: var(--acento-suave); }
.chamar-alguem:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.chamar-alguem svg { width: 17px; height: 17px; }
.chamar-alguem + .chamar-alguem { margin-top: 6px; }
.chamar-dica { margin: -4px 0 10px; color: var(--suave); font-size: 13.5px; }
.chamar-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.chamar-marca input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--acento); }
.chamar-lista li:has(.chamar-marca) { padding: 0; }
.chamar-marca:hover { background: var(--acento-suave); }
.chamar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.chamar-lista li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 4px; }
.chamar-lista .nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.chamar-lista small { color: var(--suave); font-size: 12px; white-space: nowrap; }
.chamar-lista .foto.mini { width: 30px; height: 30px; font-size: 12px; }
.chamar-lista .botao { padding: 7px 14px; }
.chamar-vazio { color: var(--suave); font-size: 14px; }

.toques { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.toque { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--linha); border-radius: 16px; background: var(--painel); box-shadow: 0 12px 36px rgba(31, 27, 45, .22); animation: toque-chega .25s ease-out; }
.toque .foto.toque-foto { width: 44px; height: 44px; font-size: 16px; flex: none; animation: toque-pulsa 1.25s ease-in-out infinite; }
.toque-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.toque-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toque-txt small { color: var(--suave); font-size: 12.5px; }
.toque button { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; cursor: pointer; padding: 0; }
.toque button svg { width: 20px; height: 20px; }
.toque-nao { background: var(--ruim); }
.toque-sim { background: var(--bom); }
.toque button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@keyframes toque-chega { from { transform: translateY(12px); opacity: 0; } }
@keyframes toque-pulsa { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bom) 30%, transparent); } }

/* ---------- avisos e diálogo ---------- */
.chamada-aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px; background: var(--tinta); color: var(--fundo); font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .2); }
.chamada-aviso.ruim { background: var(--ruim); color: #fff; }
.chamada-disp .disp-campos { display: grid; gap: 14px; margin: 14px 0; }
.chamada-disp select { width: 100%; }
.disp-carregando, .disp-nota { color: var(--suave); font-size: 13px; margin: 0; }

@media (max-width: 760px) {
  .palco { padding: 8px 10px 10px; }
  .palco-titulo { flex-basis: 40%; }
  .palco-botoes { width: 100%; justify-content: space-between; }
  .pb { width: 40px; height: 40px; }
  .palco-grade[data-layout="grade"] { max-height: 42vh; }
  .palco-grade[data-layout="destaque"], .palco-grade[data-layout="destaque"]:has(> .palco-lado:empty) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  .palco-grade[data-layout="destaque"] .bloco.foco { aspect-ratio: 16 / 9; height: auto; max-height: 38vh; }
  .palco-lado { display: flex; overflow-x: auto; overflow-y: hidden; }
  .palco-lado .bloco { width: 112px; height: 72px; aspect-ratio: auto; }
  .palco-lado .foto.grande { width: 40px; height: 40px; font-size: 15px; }
  .esc-corpo > .palco[data-foco="pessoas"] .palco-grade[data-layout="destaque"] { grid-template-rows: minmax(0, 1fr) auto; }
  .esc-corpo > .palco[data-foco="pessoas"] .palco-grade[data-layout="destaque"] .bloco.foco { max-height: none; aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) { .palco-sinal, .toque, .toque .foto { animation: none !important; } }
@media (max-width: 760px) { .pb.sair span { display: none; } }
.chamar-dlg menu .botao:disabled { opacity: .55; cursor: default; }

/* ---------- palco no escritório: telinha no alto, nunca divide a tela (chamadas.js, encaixar) ----------
   foco no mapa: o palco é um cartão flutuando no alto do mapa, com a barra e uma faixa com todo mundo;
   foco nas pessoas: o palco cobre o .esc-corpo e o cartão do alto leva a barra e o próprio #mapa encolhido */
.esc-corpo > .palco { position: absolute; z-index: 5; border-bottom: 0; }
.esc-corpo > .palco[data-foco="mapa"], .esc-corpo > .palco[data-foco="pessoas"] .palco-topo {
  border: 1px solid var(--linha); border-radius: 16px; background: color-mix(in srgb, var(--painel) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 36px -12px rgba(31, 27, 45, .35); }
.esc-corpo > .palco[data-foco="mapa"] { top: 12px; left: 50%; transform: translateX(-50%); width: max-content; min-width: min(440px, calc(100% - 24px)); gap: 8px; padding: 8px 10px 10px; }
.esc-corpo > .palco[data-foco="mapa"].largo { left: 12px; right: 12px; transform: none; width: auto; min-width: 0; }
.esc-corpo > .palco[data-foco="mapa"][data-modo="recolhido"] { padding-bottom: 8px; }
.esc-corpo > .palco .pb { width: 34px; height: 34px; border-radius: 10px; }
.esc-corpo > .palco .pb.sair { padding: 0 10px; }
.esc-corpo > .palco .palco-barra { flex-wrap: nowrap; }
.esc-corpo > .palco.largo .palco-barra { flex-wrap: wrap; }
.esc-corpo > .palco .palco-sala { font-size: 14px; }
/* a telinha arrasta pela barra (chamadas.js, ligarArrastoDoPalco); solta, fica onde a pessoa deixou (left/top do encaixar) */
.palco-alca { display: none; }
.esc-corpo > .palco[data-foco="mapa"]:not(.largo) .palco-alca { display: grid; place-items: center; margin: 0 -4px 0 -2px; color: var(--suave); opacity: .55; transition: opacity .12s; }
.esc-corpo > .palco[data-foco="mapa"]:not(.largo):hover .palco-alca { opacity: 1; }
.palco-alca svg { width: 14px; height: 14px; }
.esc-corpo > .palco[data-foco="mapa"]:not(.largo) .palco-barra { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.esc-corpo > .palco[data-foco="mapa"].solto { transform: none; }
.esc-corpo > .palco.movendo, .esc-corpo > .palco.movendo .palco-barra { cursor: grabbing; }
.esc-corpo > .palco.movendo { box-shadow: 0 22px 48px -14px rgba(31, 27, 45, .45); }

/* faixa com todo mundo: rola para o lado quando não cabe; a tela compartilhada é mais larga */
.palco-grade[data-layout="faixa"] { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 2px; }
.palco-grade[data-layout="faixa"] .bloco { flex: none; width: 152px; aspect-ratio: 16 / 9; border-radius: 10px; }
.palco-grade[data-layout="faixa"] .bloco[data-tipo="tela"] { width: 228px; }
.palco-grade[data-layout="faixa"] .foto.grande { width: 40px; height: 40px; font-size: 15px; }
.palco-grade[data-layout="faixa"] .bloco-rodape { left: 5px; right: 5px; bottom: 5px; }
.palco-grade[data-layout="faixa"] .bloco-nome { padding: 2px 6px; font-size: 11.5px; }
.palco-grade[data-layout="faixa"] .bloco-cheia { display: none; }
.palco-grade[data-layout="faixa"] .bloco:hover { box-shadow: 0 0 0 2px var(--acento); }

/* foco nas pessoas: cartão do alto com o escritório em miniatura e as pessoas no resto */
.esc-corpo > .palco[data-foco="pessoas"] { inset: 0; gap: 12px; padding: 12px 16px 16px; background: var(--fundo); }
.esc-corpo > .palco[data-foco="pessoas"] .palco-topo { display: flex; flex-direction: column; gap: 8px; align-self: center; flex: none;
  width: min(460px, 100%); padding: 8px 10px 10px; }
.palco-mapa { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: var(--suave); font: 500 12px/1.2 var(--corpo); cursor: pointer; border-radius: 12px; }
.palco-mapa-tela { display: block; height: 150px; border-radius: 12px; background: var(--acento-suave); }
.palco-mapa:hover .palco-mapa-tela, .palco-mapa:focus-visible .palco-mapa-tela { outline: 2px solid var(--acento); outline-offset: 2px; }
.palco-mapa:hover small { color: var(--tinta); }
.palco-mapa:focus-visible { outline: none; }
.esc-corpo > .palco[data-foco="pessoas"] .palco-grade { flex: 1 1 auto; max-height: none; }
.esc-corpo > .palco[data-foco="pessoas"] .palco-grade[data-layout="destaque"] { height: auto; }
.palco-grade[data-layout="mosaico"] { grid-template-columns: repeat(var(--col, 1), var(--larg, 240px)); grid-auto-rows: auto; justify-content: center; align-content: center; }
.palco-grade[data-layout="mosaico"] .bloco { aspect-ratio: 16 / 9; }

/* o mapa encolhido mora no encaixe da telinha (posição escrita pelo chamadas.js): só a imagem, sem botões nem nomes;
   o clique passa para o botão do encaixe, que volta o escritório para a tela grande */
.mapa.mapa-mini { position: absolute; z-index: 6; flex: none; border-radius: 12px; pointer-events: none; }
.mapa.mapa-mini > :not(canvas) { display: none !important; }

@media (max-width: 760px) {
  .esc-corpo > .palco[data-foco="pessoas"] { padding: 10px; }
  .esc-corpo > .palco[data-foco="pessoas"] .palco-topo { width: 100%; }
  .palco-mapa-tela { height: 120px; }
  .esc-corpo > .palco .pb { width: 38px; height: 38px; }
  .esc-corpo > .palco .palco-barra { flex-wrap: wrap; }
}

/* lotação da sala interna (n/lugares) e sala cheia ou sem lugar: o nome fica apagado (o clique explica por quê) */
.sala-qtd { opacity: .7; }
.sala-qtd.com-gente { opacity: 1; }
.sala.sala-cheia .nome, .sala.sala-cheia .sala-qtd { color: var(--suave); }
.sala.sala-cheia .sala-qtd { opacity: 1; }