/* ==========================================================================
   sala.css — a sala: barra, pessoas | telas | chat, barra de ações, câmera
   sobre a tela (PiP), controles do vídeo

   Três colunas, as duas de fora recolhíveis (o botão lembra a escolha). A
   coluna do chat tem uma alça pra arrastar a largura. O vídeo é o centro: NADA
   fica desenhado permanentemente sobre ele além da câmera de quem transmite
   (pequena, arrastável) — nome, estado e avisos vivem na barra de cima; os
   controles somem sozinhos. Embaixo do vídeo, a barra de ações (tela, câmera,
   app, sair), no estilo de sala de voz.
   ========================================================================== */
#tela{display:none;width:100%;height:100dvh;flex-direction:column;background:var(--bg)}
#tela.on{display:flex}

/* ---------- barra da sala ---------- */
.barraSala{
  flex:none;height:var(--barra);display:flex;align-items:center;gap:6px;
  padding:0 10px 0 8px;border-bottom:1px solid var(--line);background:var(--s1);
}
.salaId{display:flex;align-items:center;gap:10px;min-width:0;margin-right:6px}
.nomeSala{font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--dim);white-space:nowrap;flex:none}
.tag.live{color:var(--live)}
.barraSala .sep{width:1px;height:22px;background:var(--line2);margin:0 4px;flex:none}
.barraSala .espaco{flex:1;min-width:0}
.avisoSalaBox{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px}
.avisoSalaBox .avisoSala{
  color:#FECACA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:4px 10px;border-radius:999px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);
  font-size:12px;font-weight:500;
}
.avisoDesat{display:none;align-items:center;gap:6px;color:var(--warn);font-size:12px;white-space:nowrap}
.avisoDesat.on{display:inline-flex}
.avisoDesat .ico{width:14px;height:14px}
.grupo{display:flex;align-items:center;gap:2px}
.ib .badge{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* ---------- popover (layout / estatísticas) ---------- */
.pop{
  position:absolute;top:calc(var(--barra) - 4px);right:10px;z-index:70;min-width:260px;
  background:var(--s1);border:1px solid var(--line2);border-radius:var(--r2);padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);display:none;flex-direction:column;gap:6px;animation:rise .16s ease both;
}
.pop.on{display:flex}
.pop .rotulo{padding:6px 8px 2px}
.pop .opcoes{display:flex;gap:4px;padding:0 6px 6px;flex-wrap:wrap}
.pop .opcoes button{
  min-height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--s2);color:var(--txt2);font-size:12.5px;font-weight:600;
}
.pop .opcoes button:hover{color:var(--txt);border-color:var(--line2)}
.pop .opcoes button.on{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.pop .opcoes button:disabled{opacity:.4;cursor:default}
.pop .linhaOpt{display:flex;align-items:center;justify-content:space-between;gap:12px;
               padding:8px 8px;border-radius:var(--r);font-size:13px;font-weight:500}
.pop .linhaOpt:hover{background:var(--s2)}
.pop .linhaOpt kbd{font:11px var(--mono);color:var(--dim);border:1px solid var(--line2);
                   border-radius:5px;padding:1px 6px}
.pop .divisor{height:1px;background:var(--line);margin:2px 0}
/* estatísticas */
.stats{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:4px 8px 8px;font-size:12.5px;color:var(--dim)}
.stats b{color:var(--txt);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.stats b.alerta{color:var(--warn)}
.stats b.mal{color:var(--bad)}

/* ---------- palco ---------- */
.palco{position:relative;display:flex;flex:1 1 auto;min-height:0}
.centro{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;padding:12px;gap:10px}
.palco.teatro .centro{padding:0;gap:0}

/* ---------- coluna de pessoas ---------- */
#pessoas{
  flex:none;width:240px;min-height:0;display:none;flex-direction:column;
  border-right:1px solid var(--line);background:var(--s1);
  transition:width .15s ease;
}
#pessoas.on{display:flex}
#pessoas .cabP{
  flex:none;height:44px;display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;
  border-bottom:1px solid var(--line);
}
#pessoas .cabP .rotulo{flex:1;white-space:nowrap;overflow:hidden}
#pessoas .listaP{overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:1px;
                 scrollbar-width:thin;scrollbar-color:#25272D transparent}
#pessoas .grupo{display:block;padding:10px 8px 4px;font-size:10px;font-weight:700;letter-spacing:.1em;
                text-transform:uppercase;color:var(--dim)}
.pessoa{
  display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r);
  width:100%;min-height:40px;text-align:left;font-size:13px;font-weight:500;color:var(--txt);
}
.pessoa:hover{background:var(--s2)}
.pessoa.on{background:var(--s3)}
.pessoa.on .nomeP{color:var(--acc)}
.pessoa .nomeP{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pessoa .nomeP small{color:var(--dim);font-size:11.5px;margin-left:4px;font-weight:500}
.pessoa .noar{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--txt2);flex:none;
              padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.07)}
.pessoa.on .noar{color:var(--acc);background:rgba(var(--acc-rgb),.14)}
.pessoa.soOuvindo{cursor:default}
.pessoa.soOuvindo:hover{background:none}
.pessoa.soOuvindo .av{opacity:.75}
#pessoas .vazioP{padding:14px 12px;color:var(--dim);font-size:12.5px;line-height:1.55}
/* recolhido: só as caras, em coluna */
#pessoas.mini{width:58px}
#pessoas.mini .cabP{padding:0;justify-content:center}
#pessoas.mini .cabP .rotulo,#pessoas.mini .grupo,#pessoas.mini .nomeP,#pessoas.mini .noar,
#pessoas.mini .vazioP{display:none}
#pessoas.mini .listaP{padding:6px 0;align-items:center;gap:4px}
#pessoas.mini .pessoa{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
#pessoas.mini .pessoa.on{outline:2px solid var(--acc);outline-offset:1px;background:none}
#pessoas.mini .pessoa.soOuvindo .av{width:24px;height:24px}

/* ---------- stage ---------- */
.stage{
  position:relative;flex:1 1 auto;min-height:0;min-width:0;background:#000;
  border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);
}
.palco.teatro .stage{border-radius:0;border:0}
video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
video.cover{object-fit:cover}
/* pré-conexão da troca de qualidade: existe (decodifica) mas não se vê */
.stage video.vPre{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none;z-index:0;background:transparent}

/* estado por cima do vídeo — só antes do primeiro quadro */
.veil{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:#07080B;text-align:center;padding:24px;transition:opacity .3s;z-index:2;
}
.veil.gone{opacity:0;pointer-events:none}
.veil h2{font-size:16px;font-weight:700;letter-spacing:-.02em}
.veil p{color:var(--dim);font-size:13px;max-width:46ch;line-height:1.55}
/* depois que já houve imagem, reconectar não apaga a tela: é só esta pílula */
.pill{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;
  display:none;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:999px;
  background:rgba(5,6,8,.78);border:1px solid var(--line2);backdrop-filter:blur(6px);
  font-size:12.5px;font-weight:500;color:var(--txt2);
}
.pill.on{display:inline-flex}
.pill .spin{width:13px;height:13px;border-width:2px}

/* gate: login ou sala privada */
.gate{
  position:absolute;inset:0;z-index:24;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-align:center;padding:26px;background:rgba(5,6,8,.94);
}
.gate.on{display:flex}
/* Ainda NÃO entrou (login ou sala privada sem convite; some com o ticket —
   ver entrouNaSala): só a porta. Sem barra de transmitir nem campo do chat. */
body.noGate .acoesSala{display:none}
body.noGate #chatEnvio,body.noGate #chatLogin,body.noGate #chatEu{display:none}
.gate .icone{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
             background:var(--s2);border:1px solid var(--line2);color:var(--acc)}
.gate .icone .ico{width:24px;height:24px}
.gate h2{font-size:19px;font-weight:700;letter-spacing:-.03em}
.gate p{color:var(--txt2);font-size:13.5px;max-width:400px;line-height:1.55}
#gateCodigo{display:none;flex-direction:column;gap:9px;align-items:center;width:100%;max-width:320px}
#gateCodigo.on{display:flex}
#gateCodigo input{text-align:center;letter-spacing:1px;min-height:44px}
#gateErro{color:#FCA5A5;font-size:13px;min-height:18px}

/* diagnóstico: um toast pequeno, só quando é grave */
.diag{
  position:absolute;left:12px;bottom:60px;z-index:2;max-width:min(320px,70%);display:none;
  border-radius:12px;padding:8px 28px 8px 11px;font-size:12px;line-height:1.35;
  background:rgba(26,22,10,.9);border:1px solid rgba(250,204,21,.35);color:#F3E7B4;backdrop-filter:blur(6px);
}
.diag.on{display:block}
.diag.ruim{border-color:rgba(248,113,113,.45);background:rgba(30,14,14,.92);color:#F6C9C9}
.diag b{color:#fff;font-weight:600}
.diag .x{position:absolute;top:4px;right:6px;width:20px;height:20px;color:inherit;opacity:.6;font-size:15px;line-height:20px}
.diag .x:hover{opacity:1}

/* ---------- câmera de quem transmite, pequena sobre a tela (PiP) ---------- */
.camPip{
  position:absolute;z-index:4;right:14px;bottom:56px;width:clamp(140px,22%,340px);aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;background:#0B0C10;border:2px solid rgba(255,255,255,.18);
  box-shadow:0 10px 36px rgba(0,0,0,.55);display:none;cursor:grab;touch-action:none;user-select:none;
  transition:width .18s;
}
.camPip.on{display:block}
.camPip.g{width:clamp(200px,36%,560px)}
.camPip.arrastando{cursor:grabbing;transition:none}
.camPip .pipBox{position:absolute;inset:0}
.camPip video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.camPip .quem{
  position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;font-size:11px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(5,6,8,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.camPip .pipBt{
  position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:rgba(5,6,8,.6);color:#fff;opacity:0;transition:opacity .15s;
}
.camPip .pipBt.esq{right:auto;left:5px}
.camPip:hover .pipBt{opacity:1}
.camPip .pipBt .ico{width:12px;height:12px;stroke-width:2.2}
/* chip pra trazer a câmera de volta quando escondida */
.camVolta{
  position:absolute;z-index:4;right:14px;bottom:56px;display:none;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;background:rgba(5,6,8,.78);border:1px solid var(--line2);
  color:var(--txt2);font-size:12px;font-weight:600;backdrop-filter:blur(6px);
}
.camVolta.on{display:inline-flex}
.camVolta .ico{width:13px;height:13px}
.camVolta:hover{color:var(--txt)}

/* a MINHA tela nativa em destaque: toca muda pra mim (o jogo eu já ouço); o
   selo explica por que o botão de som não liga (24/set/2026) */
.stage.minhaTela::after{
  content:'sua tela · sem som pra você (o jogo você já ouve)';position:absolute;top:12px;left:12px;z-index:3;
  padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--acc-ink);
  background:rgba(var(--acc-rgb),.9);pointer-events:none;
}
/* controles sobre o vídeo (somem parados) */
.ctr{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:2px;
  padding:30px 8px 8px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.stage.mostrar .ctr,.stage.semsom .ctr{opacity:1;pointer-events:auto}
.ctr button{color:#fff;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:0}
.ctr button:hover{background:rgba(255,255,255,.14)}
.ctr svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctr .dir{margin-left:auto;display:flex;align-items:center;gap:2px}
.ctr .qual{font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1;min-width:44px;padding:10px 8px}
.ctr .qual.leve{color:var(--acc)}
#bMudo.travado{background:#fff;animation:chama 1.8s ease-in-out infinite}
#bMudo.travado svg{stroke:#000}
@keyframes chama{50%{opacity:.6}}
.volbox{display:flex;align-items:center;width:0;overflow:hidden;transition:width .2s}
.ctr:hover .volbox{width:92px}
input[type=range].vol{-webkit-appearance:none;appearance:none;width:84px;height:22px;background:transparent;cursor:pointer;margin:0 4px}
input[type=range].vol::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(to right,#fff var(--p,100%),rgba(255,255,255,.3) var(--p,100%))}
input[type=range].vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4.5px}
input[type=range].vol::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
input[type=range].vol::-moz-range-progress{height:3px;border-radius:2px;background:#fff}
input[type=range].vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.stage:fullscreen,.stage:-webkit-full-screen{width:100%;height:100%;border-radius:0}
@media (hover:none){.ctr button{padding:11px}.ctr svg{width:24px;height:24px}.volbox{display:none}.camPip .pipBt{opacity:1}}

/* ---------- barra de ações (tela / câmera / app / sair) ---------- */
.acoesSala{flex:none;display:flex;justify-content:center;padding:2px 0 0}
.palco.teatro .acoesSala{display:none}
.acoesBarra{
  display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:16px;
  background:var(--s1);border:1px solid var(--line2);box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.acoesBarra .sep{width:1px;height:24px;background:var(--line2);margin:0 2px}
.acao{
  height:42px;min-width:42px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:650;color:var(--txt);background:var(--s2);border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s;white-space:nowrap;
}
.acao:hover{background:var(--s3)}
.acao:disabled{opacity:.4;cursor:default}
.acao .ico{width:18px;height:18px}
.acao.ligado{background:var(--acc);color:var(--acc-ink)}
.acao.ligado:hover{filter:brightness(1.05);background:var(--acc)}
.acao.ligado .ico{stroke:var(--acc-ink)}
.acao.sair{color:#FCA5A5;background:rgba(248,113,113,.12)}
.acao.sair:hover{background:rgba(248,113,113,.22)}
.acao.neutra{color:var(--txt2)}
.acao.soIco{padding:0;justify-content:center}
/* botão do chat só no celular (no desktop é a aba do canto + o da barra de cima) */
.acao.soCel{display:none;position:relative}
.acao.soCel .n{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--acc);color:var(--acc-ink);font-size:10.5px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--s1);
}
.acao.soCel.ligado .n{display:none}   /* sem isto o ícone encostava na esquerda dos 42px: era o "desalinhado" (21/set/2026) */
@media(max-width:560px){.acao .txt{display:none}.acao{padding:0 12px}}
/* voz: verde, pra não confundir com tela/câmera (lima) */
.acao.voz.ligado{background:var(--ok);color:#06251A}
.acao.voz.ligado:hover{background:var(--ok);filter:brightness(1.05)}
.acao.voz.ligado .ico{stroke:#06251A}
.acao.voz.ligado.falando{box-shadow:0 0 0 3px rgba(52,211,153,.35)}
.acao.mic.mudo{color:var(--bad);background:rgba(248,113,113,.14)}
.acao.mic.mudo .ico{stroke:var(--bad)}
.acao.mic.falando{box-shadow:0 0 0 3px rgba(52,211,153,.35)}
.acao.mic.bloq{opacity:.55}
.acao.mic.bloq .ico{stroke:var(--dim)}
.vozBloq{
  position:absolute;top:12px;left:12px;z-index:6;display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;font-size:12.5px;font-weight:650;
  background:rgba(52,211,153,.18);color:#BBF7D0;border:1px solid rgba(52,211,153,.4);
}
.vozBloq .ico{width:15px;height:15px;stroke:#BBF7D0}
/* na lista de pessoas: microfone de quem está na voz, anel em quem fala, volume por pessoa */
.pessoa .mic{width:15px;height:15px;flex:none;stroke:var(--ok)}
.pessoa .micBt{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:rgba(52,211,153,.12)}
.pessoa .micBt:hover{background:rgba(52,211,153,.22)}
.pessoa .micBt.mudo{background:rgba(248,113,113,.14)}
.pessoa .mic.mudo{stroke:var(--bad)}
.pessoa .av{transition:box-shadow .12s}
.pessoa.falando .av{box-shadow:0 0 0 2px var(--ok),0 0 0 5px rgba(52,211,153,.25)}
.pessoa .volVoz{width:60px;flex:none;height:4px;accent-color:var(--ok);cursor:pointer}
.pessoa .fone{width:15px;height:15px;flex:none;stroke:var(--bad)}
.pessoa .mic.mudo{stroke:var(--bad)}
/* quem está com o mic mudo: o nome apaga um pouco — dá pra ver de relance
   que não adianta perguntar pra ele agora */
.pessoa.outroMudo .nomeP{color:var(--txt2)}
/* eu zerei o volume desta pessoa: a linha inteira apaga (é escolha minha) */
.pessoa.euSilenciei{opacity:.6}
.pessoa.euSilenciei .volVoz{accent-color:var(--bad)}
/* modal de voz */
.campoVoz{display:block;font-size:12px;font-weight:600;color:var(--txt2);margin-top:10px}
.campoVoz select,.campoVoz input[type=range]{display:block;width:100%;margin-top:6px}
/* ⚠️ FUNDO SÓLIDO, não var(--s2) (que é branco translúcido). A LISTA ABERTA do
   <select> é desenhada pelo sistema: com fundo translúcido ela herda o branco
   do sistema e o texto claro fica ilegível (visto em 09/set/2026). O
   color-scheme:dark faz o Windows desenhar a lista escura de verdade. */
.campoVoz select{
  height:40px;background:#15171B;color:var(--txt);border:1px solid var(--line2);
  border-radius:10px;padding:0 34px 0 10px;font-size:13px;color-scheme:dark;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9ABA3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;
}
.campoVoz select:hover{border-color:rgba(255,255,255,.22)}
.campoVoz select:focus{outline:none;border-color:rgba(var(--acc-rgb),.6)}
.campoVoz select option{background:#15171B;color:#EDEEE9}
.campoVoz select:disabled{opacity:.5;cursor:default}
.campoVoz input[type=range]{accent-color:var(--ok)}
.campoVoz output{float:right;font-weight:700;color:var(--txt)}
/* teste do microfone: barra + botão "Testar" (grava 3 s e devolve) */
.testeMic{margin-top:12px;padding:11px 12px;border-radius:12px;background:var(--s1);border:1px solid var(--line)}
.testeMic .topo{display:flex;align-items:center;gap:10px}
.testeMic .topo .rotulo{flex:1}
.medidorLinha{display:flex;align-items:center;gap:10px;margin-top:9px}
.medidorLinha .medidor{position:relative;flex:1;height:10px;border-radius:99px;background:#0C0D10;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.medidorLinha .medidor i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--acc));border-radius:99px;transition:width .08s linear}
/* marca dos 50%: acima disso o volume já está bom */
.medidorLinha .medidor::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.testeMic .bt{height:32px;padding:0 12px;font-size:12.5px}
.testeMic .bt.gravando{background:var(--bad);border-color:transparent;color:#2A0B0B;font-weight:700}
.chaveLinha{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px;color:var(--txt);cursor:pointer}
.chaveLinha input{width:17px;height:17px;accent-color:var(--ok);flex:none}
.chaveLinha small{display:block;color:var(--dim);font-size:11.5px;font-weight:400}
#pessoas.mini .pessoa .volVoz,#pessoas.mini .pessoa .mic{display:none}
#pessoas.mini .pessoa.falando{outline:2px solid var(--ok);outline-offset:1px}

/* ---------- miniaturas (destaque) ---------- */
.telas{display:none;flex:none;gap:8px;overflow-x:auto;padding-bottom:2px;
       scrollbar-width:thin;scrollbar-color:#25272D transparent}
.telas.on{display:flex}
.telas.escondida,.telas.ocultas{display:none}
.telas .fila{display:flex;gap:8px}
.miniTela{
  position:relative;width:var(--mini,200px);aspect-ratio:16/9;flex:none;
  border-radius:12px;overflow:hidden;background:#0B0C10;border:2px solid rgba(255,255,255,.08);padding:0;
  transition:border-color .12s;
}
.telas.p{--mini:140px}.telas.m{--mini:200px}.telas.g{--mini:280px}
.miniTela:hover{border-color:rgba(255,255,255,.28)}
.miniTela.on{border-color:var(--acc)}
.miniTela video{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.miniTela .fundo,.telaGrade .fundo{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:11px;font-weight:600}
.miniTela.temVideo .fundo,.telaGrade.temVideo .fundo{display:none}
.miniTela .quem,.telaGrade .quem{
  position:absolute;left:0;right:0;bottom:0;padding:18px 9px 7px;font-size:11.5px;font-weight:650;letter-spacing:-.01em;
  color:#fff;text-align:left;background:linear-gradient(180deg,transparent,rgba(5,6,8,.85));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;display:flex;align-items:center;gap:7px;
}
.quem .comoT{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px;
             background:rgba(255,255,255,.14);color:#fff;flex:none}
.telaGrade .selo,.miniTela .selo{position:absolute;top:8px;left:8px;z-index:2}
/* câmera dentro do tile da grade */
.telaGrade .miniCam{
  position:absolute;right:8px;bottom:34px;width:26%;aspect-ratio:16/9;z-index:3;border-radius:8px;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.25);background:#0B0C10;box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.telaGrade .miniCam video{object-fit:cover}

/* ---------- grade: todas as telas iguais ---------- */
.gradeTelas{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;gap:10px;align-content:center;
            grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.gradeTelas.on{display:grid}
.gradeTelas.auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.gradeTelas.auto:not(:has(.telaGrade + .telaGrade)){grid-template-columns:minmax(0,1fr)}
.telaGrade{position:relative;aspect-ratio:16/9;background:#0B0C10;border:2px solid rgba(255,255,255,.08);
           border-radius:16px;overflow:hidden;padding:0;transition:border-color .12s}
.telaGrade:hover{border-color:rgba(255,255,255,.28)}
.telaGrade video{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1}
/* som na grade (21/set/2026): o tile que toca leva borda lima e o badge aceso */
.telaGrade{cursor:pointer}
.telaGrade.comSom{border-color:rgba(var(--acc-rgb),.75)}
.telaGrade .tileBts{position:absolute;top:8px;right:8px;z-index:3;display:flex;gap:6px}
.telaGrade .tileBt{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:rgba(5,6,8,.7);color:#fff;border:1px solid rgba(255,255,255,.16);
  opacity:0;transition:opacity .15s,background .12s;backdrop-filter:blur(4px);
}
.telaGrade:hover .tileBt,.telaGrade:focus-within .tileBt,.telaGrade.comSom .somTile{opacity:1}
.telaGrade .tileBt:hover{background:rgba(255,255,255,.2)}
.telaGrade.comSom .somTile{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.telaGrade .tileBt .ico{width:16px;height:16px;stroke-width:2}
@media (hover:none){.telaGrade .tileBt{opacity:1}}

/* ---------- alça pra redimensionar o chat ---------- */
.alca{flex:none;width:6px;cursor:col-resize;background:transparent;display:none;position:relative}
.alca::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:2px;background:transparent;transition:background .12s}
.alca:hover::after,.alca.ativa::after{background:var(--acc)}
.alca.on{display:block}
body.redimensionando{cursor:col-resize;user-select:none}
body.redimensionando iframe,body.redimensionando video{pointer-events:none}

/* ---------- trilho de salas (o "server list" do Discord, 24/set/2026) ---------- */
#trilho{
  flex:none;width:64px;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 0;background:#030405;border-right:1px solid var(--line);
  overflow-y:auto;scrollbar-width:none;
}
#trilho::-webkit-scrollbar{display:none}
.palco.teatro #trilho{display:none}
.trilhoSep{width:26px;height:2px;border-radius:2px;background:var(--line2);flex:none}
.trilhoLista{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.trilhoBt{
  position:relative;width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--s1);border:1px solid var(--line);color:var(--txt2);
  font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  transition:border-radius .15s,background .12s,color .12s,transform .12s;
}
.trilhoBt:hover{border-radius:16px;background:var(--s3);color:var(--txt)}
.trilhoBt .ico{width:20px;height:20px}
.trilhoBt.casa{color:var(--txt)}
.trilhoBt.mais{border-style:dashed;color:var(--ok)}
.trilhoBt.mais:hover{background:rgba(52,211,153,.14)}
/* a sala: inicial na tinta dela; ao vivo tem o ponto vermelho; a atual vira "quadrado" com a barrinha lima */
.trilhoBt.sala{background:rgba(var(--tint),.28);border-color:rgba(var(--tint),.35);color:var(--txt)}
.trilhoBt.sala.live{border-color:rgba(255,59,78,.55)}
.trilhoBt.sala.on{border-radius:16px;background:rgb(var(--tint));color:#fff;border-color:transparent}
.trilhoBt.sala.on::before{
  content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--acc);
}
.trilhoBt.sala:not(.on):hover::before{
  content:'';position:absolute;left:-10px;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--txt2);
}
.trilhoBt .tDot{
  position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--live);border:3px solid #030405;animation:pulse 2s ease-in-out infinite;
}
.trilhoBt .tNum{
  position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#1E2027;border:2px solid #030405;color:var(--txt);font-size:10px;font-weight:700;
  display:grid;place-items:center;letter-spacing:0;text-transform:none;
}
.trilhoBt.sala.priv::after{
  content:'';position:absolute;left:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:var(--acc);border:2px solid #030405;
}
.trilhoBt img.av{width:100%;height:100%;border-radius:inherit}

/* ---------- palco de voz: ninguém com a tela aberta = chamada de voz ---------- */
/* Redesenho de 24/set/2026: em vez de caixinhas soltas num retângulo preto,
   um palco com título ("Sala em espera"), cartões com a tinta de cada pessoa
   e as ações principais no meio — quem chega numa sala vazia olha pro
   centro, não pra barra de baixo. */
.palcoVozes{
  position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:28px 24px;overflow-y:auto;
  background:
    radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.035),transparent 70%),
    #07080B;
}
.stage.vazio .palcoVozes{display:flex}
.stage.vazio .veil{display:none}
.pvCab{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.pvSelo{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--s2);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt2);
}
.pvSelo .dot{background:var(--dim)}
.pvSelo.voz .dot{background:var(--ok);animation:pulse 2s ease-in-out infinite}
.pvSelo.voz{color:#BBF7D0;border-color:rgba(52,211,153,.35)}
.pvDica{color:var(--dim);font-size:13px;max-width:52ch;line-height:1.5}
.pvGrade{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:min(100%,980px)}
.pvCard{
  position:relative;width:clamp(140px,20vw,210px);aspect-ratio:1/1;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    radial-gradient(90% 80% at 50% 0%,rgba(var(--tint),.32),transparent 70%),
    var(--s1);
  border:1px solid rgba(255,255,255,.07);transition:border-color .12s,box-shadow .12s,transform .12s;
}
.pvCard.falando{border-color:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.2),0 12px 40px rgba(0,0,0,.4)}
.pvCard .av{
  width:72px;height:72px;font-size:26px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,rgb(var(--tint)),rgba(var(--tint),.55));
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:box-shadow .12s;
}
.pvCard.falando .av{box-shadow:0 0 0 3px var(--ok),0 0 0 7px rgba(52,211,153,.2)}
.pvCard .pvNome{
  display:flex;align-items:center;gap:6px;max-width:92%;padding:0 6px;
  font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pvCard .pvNome small{color:var(--dim);font-weight:500;font-size:11px}
.pvCard .pvNome .ico{width:13px;height:13px;flex:none;stroke:var(--ok)}
.pvCard .pvNome .ico.mudo{stroke:var(--bad)}
.pvCard .pvNome .ico.fone{stroke:var(--bad)}
.pvCard.eu{border-color:rgba(var(--acc-rgb),.35)}
.pvCard .pvEst{font-size:11px;color:var(--dim);margin-top:-6px}
.pvCard .pvEst.mudo{color:#FCA5A5}
/* as ações no meio do palco */
.pvAcoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pvAcoes .bt{min-height:42px;padding:0 16px;border-radius:13px}
.pvAcoes .bt .ico{width:17px;height:17px}
.pvAcoes:empty{display:none}
@media(max-width:900px){
  #trilho{display:none !important}
  .palcoVozes{gap:16px;padding:18px 14px;justify-content:flex-start}
  .pvCard{width:calc(50% - 6px);max-width:200px;aspect-ratio:4/3;border-radius:16px}
  .pvCard .av{width:52px;height:52px;font-size:20px}
  .pvAcoes .bt{min-height:40px;padding:0 13px;font-size:12.5px}
}

/* ---------- celular / tela estreita ---------- */
@media(max-width:900px){
  .palco{flex-direction:column}
  #pessoas{display:none !important}
  .alca{display:none !important}
  .centro{padding:0;gap:0}
  .stage{border-radius:0;border:0;flex:0 0 auto;aspect-ratio:16/9}
  .palco.semchat .stage{flex:1 1 auto;aspect-ratio:auto}
  /* sala sem tela: o palco de voz é a tela — ocupa o que sobrar */
  .stage.vazio{flex:1 1 auto;aspect-ratio:auto;min-height:220px}
  .telas{padding:8px}
  .acoesSala{padding:8px}
  .acoesBarra{gap:4px;padding:5px}
  .acao{height:40px;min-width:40px}
  #bApp{display:none}               /* app é do Windows: no celular só confunde */
  .acao.soCel{display:inline-flex}
  .chatAba{display:none !important}  /* no celular o chat abre pela barra de baixo */
  /* o aviso (mic bloqueado) desce por cima do palco: o palco de voz abre espaço */
  #tela:has(.avisoSala) .palcoVozes,#tela:has(.avisoDesat.on) .palcoVozes{padding-top:64px}
  .barraSala{padding:0 6px 0 4px;gap:4px}
  .barraSala .sep{display:none}
  .salaId{gap:8px;flex:1 1 auto}
  .nomeSala{font-size:13px}
  .salaId .selo2{display:none}   /* o nome da sala vale mais que "Pública" aqui */
  .barraSala .grupo .ib{width:34px;height:34px}
  #bInfo{display:none}              /* estatísticas ficam no popover do desktop */
  /* o aviso (mic bloqueado etc.) NÃO cabe na barra: vira uma faixa logo abaixo dela */
  .avisoSalaBox{
    position:absolute;left:8px;right:8px;top:calc(var(--barra) + 6px);z-index:7;
    justify-content:center;pointer-events:none;
  }
  .avisoSalaBox:not(:has(.avisoSala, .avisoDesat.on)){display:none}
  .avisoSalaBox .avisoSala,.avisoDesat.on{pointer-events:auto;max-width:100%;white-space:normal;text-align:center;line-height:1.35}
  .barraSala .espaco{flex:0 0 4px}
  .camPip{bottom:12px;right:10px;width:30%}
  .camVolta{bottom:12px;right:10px}
}
@media(max-width:560px){
  .acoesBarra{width:100%;justify-content:space-around}
  .acoesBarra .sep{display:none}
}
@media (max-height:500px) and (orientation:landscape){
  .barraSala,.outros,#chatBox,.alca,.telas,.acoesSala{display:none !important}
  .stage{flex:1 1 auto;aspect-ratio:auto;border-radius:0}
}

/* ---------- convidar (modal do dono) e modo oculto (21/set/2026) ---------- */
.campo label .opc{opacity:.6;font-weight:500;margin-left:4px;letter-spacing:0;text-transform:none;font-size:11px}
#salaCorpo{display:flex;flex-direction:column;gap:18px}
.mSec{display:flex;flex-direction:column;gap:8px}
.mSec h4{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.mSec .ajuda{line-height:1.5}
/* o código de convite grande, pra ditar no Discord */
.codigoGrande{
  display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line2);
}
.codigoGrande b{flex:1;font:700 21px/1 var(--mono);letter-spacing:.16em;color:var(--acc);white-space:nowrap}
.codigoGrande .bt{min-height:34px;padding:0 12px;font-size:12.5px}
.mSec .linha .campo{min-width:0}
.mSec .linha .campo input{min-height:40px;font-size:14px}
.mSec .linha .bt{min-height:40px}
/* selo "Oculto" na barra da sala e o botão do gate */
.selo2.oculto{color:#C4B5FD;border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.1)}
.gateOculto{border-style:dashed;color:var(--txt2);gap:7px}
.gateOculto small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C4B5FD;
                  padding:2px 6px;border-radius:5px;background:rgba(167,139,250,.14)}
.gateOculto .ico{width:15px;height:15px}
.gateOculto:hover{color:var(--txt);border-color:rgba(167,139,250,.6)}

/* ---------------------------------------------------------------------------
   SELETOR DE TELA DO APP (#modalTela, só dentro do app Windows, 23/set/2026).
   Igual Discord: fotos dos monitores, clica e vai. Sem parágrafo de ajuda. */
.telaCartao{width:min(720px,calc(100vw - 32px))}
.selTelas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;min-height:80px}
.selTelas .tile{position:relative;padding:0;border:2px solid var(--line2);border-radius:var(--r2);background:#000;
  overflow:hidden;cursor:pointer;aspect-ratio:16/9;text-align:left;color:var(--txt)}
.selTelas .tile img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.selTelas .tile .semFoto{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:13px;
  background:linear-gradient(135deg,var(--s1),#15171d)}
.selTelas .tile .nome{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:12.5px;font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;align-items:center;gap:6px}
.selTelas .tile .hdr{padding:1px 6px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.06em;
  background:rgba(var(--acc-rgb),.2);color:var(--acc)}
.selTelas .tile:hover{border-color:rgba(255,255,255,.35)}
.selTelas .tile.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.25)}
.selTelas .tile.on .nome::before{content:"✓";color:var(--acc);font-weight:800}
.selTelas .espera{grid-column:1/-1;color:var(--dim);font-size:13px;display:flex;align-items:center;gap:10px;min-height:80px}
.selLinha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.selLinha .rotulo{flex:none;min-width:84px}
.selApps{display:flex;gap:6px;flex-wrap:wrap}
.selApps .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12.5px;
  border:1px solid var(--line2);background:var(--s2);color:var(--txt);cursor:pointer;max-width:200px}
.selApps .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selApps .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.selApps .chip.off{color:var(--dim);border-style:dashed;background:transparent}
.selApps .chip.off::before{background:var(--dim)}
.selApps .chip.off span{text-decoration:line-through}
.selApps .vazio{font-size:12.5px;color:var(--dim)}
.selQual button{padding:6px 12px;font-size:12.5px}
.modal .pe .espaco{flex:1}