/* SALA — folha única. Sem CDN, sem framework: a CSP não abre para inline. */

:root {
  --fundo: #0b0d12;
  --fundo2: #12151d;
  --fundo3: #181c26;
  --linha: #232838;
  --texto: #e7eaf3;
  --fraco: #8e97ad;
  --marca: #5b8cff;
  --marca2: #7aa2ff;
  --bom: #3ecf8e;
  --alerta: #ffb020;
  --ruim: #ff5c6c;
  --fonte-base: clamp(13px, calc(.7vmin + 11px), 19px);
  --r: 12px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: radial-gradient(1200px 700px at 20% -10%, #17203a 0%, var(--fundo) 55%) fixed;
  color: var(--texto);
  font: var(--fonte-base)/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--fraco); }
p { margin: 0; }

.sumido { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.i {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.i.grande { width: 46px; height: 46px; opacity: .35; }

.dica { color: var(--fraco); font-size: 12.5px; }
.erro { color: var(--ruim); font-size: 13px; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.botao {
  appearance: none;
  background: var(--fundo3);
  border: 1px solid var(--linha);
  color: var(--texto);
  border-radius: 10px;
  padding: 11px 16px;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .07s;
}
.botao:hover { background: #1e2432; border-color: #2e3550; }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.primario { background: var(--marca); border-color: transparent; color: #08111f; }
.botao.primario:hover { background: var(--marca2); }
.botao.pequeno { padding: 8px 12px; font-size: 13px; }

.icone {
  appearance: none; background: transparent; border: 0; color: var(--fraco);
  padding: 7px; border-radius: 9px; cursor: pointer; display: inline-flex;
}
.icone:hover { background: var(--fundo3); color: var(--texto); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ══════════════════════════ ENTRADA ═══════════════════════════════════ */
.entrada {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
}

.cartao {
  width: min(440px, 100%);
  background: linear-gradient(180deg, rgba(28,34,50,.92), rgba(18,21,29,.92));
  border: 1px solid var(--linha);
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 26px;
}

.marca { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.marca p { color: var(--fraco); font-size: 13px; margin-top: 2px; }
.marca-simbolo {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--marca), #8f6bff);
  color: #0b1020;
}
.marca-simbolo .i { stroke-width: 2; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 12.5px; color: var(--fraco); margin-bottom: 6px; }
.campo input {
  width: 100%;
  background: #0e1119;
  border: 1px solid var(--linha);
  border-radius: 10px;
  color: var(--texto);
  padding: 12px 13px;
  font: inherit;
}
.campo input:focus { border-color: var(--marca); outline: none; }
#codigo { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }

.linha-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
#entrada-erro { margin-top: 12px; }

.voltando {
  margin-top: 14px; padding: 11px 12px;
  background: rgba(91,140,255,.10); border: 1px solid rgba(91,140,255,.3);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--marca2);
}

.teste-mic {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha);
}
.teste-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--fraco); margin-bottom: 9px;
}
.teste-cabeca select {
  background: #0e1119; color: var(--texto); border: 1px solid var(--linha);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px;
  max-width: 62%;
}
.nivel { height: 7px; background: #0e1119; border-radius: 99px; overflow: hidden; border: 1px solid var(--linha); }
.nivel i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--bom), var(--alerta)); transition: width .06s linear; }
#mic-aviso { margin-top: 8px; }

.rodape-entrada {
  margin-top: 20px; display: flex; align-items: center; gap: 9px;
  color: var(--fraco); font-size: 12px;
}
.ponto { width: 3px; height: 3px; border-radius: 99px; background: var(--fraco); }

/* ══════════════════════════ SALA ══════════════════════════════════════ */
.sala { height: 100%; display: flex; flex-direction: column; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha);
  background: rgba(12,15,22,.75);
  backdrop-filter: blur(8px);
}
.topo-esq, .topo-dir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.selo-sala { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fraco); }
#sala-codigo { letter-spacing: .18em; font-size: 16px; }
.pilula {
  font-size: 12px; color: var(--fraco);
  background: var(--fundo2); border: 1px solid var(--linha);
  padding: 4px 10px; border-radius: 99px; white-space: nowrap;
}
.pilula.ok { color: var(--bom); border-color: rgba(62,207,142,.3); }
.pilula.ruim { color: var(--ruim); border-color: rgba(255,92,108,.3); }
.pilula-icone {
  appearance: none; display: inline-grid; place-items: center;
  width: 30px; height: 28px; padding: 0; cursor: pointer;
}
.pilula-icone:hover { color: var(--texto); border-color: #33405f; }
.pilula-icone .i { width: 16px; height: 16px; }
/* O botão do app companheiro é uma pílula normal, só com ícone + palavra —
   por isso reaproveita .pilula em vez de ganhar um estilo próprio. */
.pilula-link {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; cursor: pointer;
}
.pilula-link:hover { color: var(--texto); border-color: #33405f; }
.pilula-link .i { width: 13px; height: 13px; }

.corpo {
  flex: 1; min-height: 0;
  display: grid;
  /* As duas larguras fixas viram variável: o arrasto das divisórias muda só
     isso, e o valor sobrevive porque é a mesma variável que volta lida do
     localStorage. Sem override nenhum, o padrão continua o de sempre. */
  --largura-pessoas: clamp(340px, 18vw, 400px);
  --largura-chat: 280px;
  /* A divisória ocupa a coluna que antes era só o respiro (12px) do grid —
     por isso o "gap" não sobrou solto: virou a largura da própria alça. */
  grid-template-columns: var(--largura-pessoas) 12px minmax(320px, 1fr) 12px var(--largura-chat);
  gap: 0; padding: 12px;
}

/* ── divisórias arrastáveis entre as colunas ──────────────────────────────
   A faixa de agarre é a coluna toda (12px); o traço que aparece é bem mais
   fino, para não parecer uma borda de verdade enquanto ninguém mexe nela. */
.divisoria {
  position: relative;
  cursor: col-resize;
  touch-action: none;   /* o navegador nao pode roubar o gesto pra rolar */
}
.divisoria::after {
  content: '';
  position: absolute; top: 6px; bottom: 6px; left: 50%;
  width: 3px; transform: translateX(-50%);
  border-radius: 2px; background: transparent;
  transition: background .12s, width .12s;
}
.divisoria:hover::after, .divisoria.arrastando::after {
  background: var(--marca); width: 4px;
}

/* ── participantes ─────────────────────────────────────────────────────── */
.pessoas, .chat {
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 12px; display: flex; flex-direction: column; min-height: 0;
}
.pessoas h2, .chat h2 { margin-bottom: 10px; }
.pessoas h2 { font-size: .82em; }
#lista-participantes { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }

/* Grade, nao flex: com flex o tempo dança conforme o tamanho do nome. Aqui ele
   tem coluna propria e largura fixa, entao fica na mesma posicao em toda linha. */
.pessoa {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 44px 38px;
  align-items: center; gap: 7px;
  padding: 7px; border-radius: 10px; margin-bottom: 2px;
}
.pessoa .quem { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pessoa.eu .nome { color: var(--marca); }   /* quem sou eu, sem gastar largura */
.pessoa .quem .i { width: 13px; height: 13px; flex: none; }
.pessoa .tempo {
  color: var(--fraco); font-size: .73em; text-align: right;
  width: 44px;
  font-variant-numeric: tabular-nums;   /* digitos de mesma largura */
}
.pessoa .acoes {
  display: flex; align-items: center; justify-content: flex-end; gap: 1px;
  width: 38px;
}
.pessoa .acoes .sinal-ruim { width: 15px; height: 15px; color: var(--ruim); }

/* A COR diz o ESTADO, nao a acao (igual ao Discord): cinza padrao quando
   normal, vermelho quando mudo. O RISCO no desenho repete a informacao por
   outro canal, sem depender so de cor. */
.alterna {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 3px; border-radius: 7px; display: inline-flex; flex: none;
}
.alterna .i { width: 17px; height: 17px; }
.alterna.ativo { color: var(--fraco); }  /* normal: mesmo cinza dos outros icones do painel */
.alterna.mudo  { color: var(--ruim); }   /* mudo */
.alterna.ativo:hover { background: var(--fundo3); color: var(--texto); }
.alterna.mudo:hover  { background: rgba(255,92,108,.15); }
.pessoa:hover { background: var(--fundo3); }
.pessoa .bola img, .painel-eu .bola img { width: 100%; height: 100%; object-fit: cover; border-radius: 99px; display: block; }
.pessoa .bola, .painel-eu .bola {
  width: 30px; height: 30px; border-radius: 99px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; font-size: .87em;
  color: #0b1020; box-shadow: 0 0 0 0 rgba(62,207,142,.7);
  transition: box-shadow .12s;
}
.pessoa.falando .bola { box-shadow: 0 0 0 3px rgba(62,207,142,.75); }
.pessoa.falando .nome { color: #3ecf8e; text-shadow: 0 0 10px rgba(62,207,142,.35); }
.pessoa.falando { background: rgba(62,207,142,.10); }
.pessoa .nome, .pessoa .bola { transition: color .12s, box-shadow .12s; }
.pessoa .nome {
  display: block; min-width: 0; font-size: .9em; font-weight: 550;
  line-height: 1.2; white-space: normal; overflow-wrap: anywhere;
}
.pessoa .sub { display: flex; align-items: center; gap: 5px; color: var(--fraco); font-size: 11px; }
.pessoa .sinais { display: flex; gap: 4px; color: var(--fraco); }
.pessoa .sinais .i { width: 15px; height: 15px; }
.pessoa .sinais .ruim { color: var(--ruim); }
.pessoa .sinais .marca { color: var(--marca); }
.pessoa .sinais .bom { color: var(--bom); }
.pessoa .mod .ruim { color: var(--ruim); }

/* tvzinha de quem está transmitindo */
.pessoa .tv {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--ruim); padding: 3px; border-radius: 7px; display: inline-flex;
  flex: none;
}
.pessoa .tv:hover { background: rgba(255,92,108,.15); }
.pessoa .tv.assistindo { color: var(--marca); background: rgba(91,140,255,.16); }
.pessoa .tv.propria { cursor: default; opacity: .75; }
.pessoa .tv .i { width: 15px; height: 15px; }
.pessoa .acoes .icone { padding: 3px; }
.pessoa .acoes .icone .i { width: 15px; height: 15px; }

.banidos-lista { list-style: none; margin: 0 0 12px; padding: 0; overflow-y: auto; flex: 1; }
.banidos-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--linha);
}
.banidos-lista .quem { flex: 1; min-width: 0; }
.banidos-lista .quem b { display: block; font-size: 13.5px; font-weight: 550; }
.banidos-lista .quem small { color: var(--fraco); font-size: 11.5px; }

.linha-campo.portao { margin-top: 4px; }
#cfg-portao-dica { margin-top: -6px; }
.dica.alerta { color: var(--alerta); }
.admin-nota {
  margin-top: 10px; padding: 9px 10px; border-radius: 10px;
  background: rgba(91,140,255,.09); border: 1px solid rgba(91,140,255,.26);
  color: var(--marca2); font-size: .77em; line-height: 1.45;
}

/* A lista continua sendo a unica parte que rola. Os controles ficam ancorados
   no fim da coluna para nao sumirem quando a sala enche. */
.painel-controles {
  flex: none; margin: 10px -12px -12px; border-top: 1px solid var(--linha);
  border-radius: 0 0 var(--r) var(--r); background: #10131b;
}
.painel-controles-principais {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 10px 9px; border-bottom: 1px solid var(--linha);
}
.painel-controles-principais .acao {
  min-width: 0; justify-content: center; padding: 8px 7px; font-size: .84em;
}
.painel-controles-principais #btn-janelas { grid-column: 1 / -1; }
.painel-eu { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; }
.painel-eu .bola { width: 34px; height: 34px; }
.painel-eu-identidade { flex: 1; min-width: 0; line-height: 1.2; }
.painel-eu-identidade strong {
  display: block; overflow-wrap: anywhere; font-size: .9em; font-weight: 600;
}
.painel-eu-identidade small {
  display: block; margin-top: 3px; color: var(--fraco); font-size: .72em;
  letter-spacing: .08em;
}
.painel-eu-acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.painel-eu-acoes .alterna, .painel-eu-acoes .icone { padding: 5px; }
.painel-eu-acoes .icone .i { width: 17px; height: 17px; }

/* O menu nasce no body porque precisa escapar da coluna estreita. A posicao e
   limitada no JS para continuar inteiro junto das bordas da janela. */
.menu-contexto {
  position: fixed; z-index: 60; min-width: 190px; max-width: calc(100vw - 16px); padding: 5px;
  background: var(--fundo3); border: 1px solid #30374b; border-radius: 10px;
  box-shadow: var(--sombra); font-size: .86em;
}
.menu-contexto button {
  appearance: none; display: block; width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 7px; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer;
}
.menu-contexto button:hover, .menu-contexto button:focus-visible { background: #252b3a; }
.menu-contexto button.perigo { color: var(--ruim); }

/* ── palco ─────────────────────────────────────────────────────────────── */
.palco {
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--r);
  display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden;
}
.palco-vazio {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: 7px;
  text-align: center; padding: 24px;
}
.palco-video { flex: 1; min-height: 0; position: relative; background: #000; display: flex; flex-direction: column; }
.palco-video:fullscreen { width: 100%; height: 100%; }
.mosaico-controles {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex: none; padding: 6px 10px; background: var(--fundo2);
}
.mosaico-controles .botao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; }

/* ── mosaico ──────────────────────────────────────────────────────────────
   O arranjo sai da QUANTIDADE de telas abertas, nao de media query. `grid-
   template-areas` resolve o caso de 3, que e o unico que nao e simetrico:
   duas em cima e a terceira centralizada embaixo. Com `flex-wrap` a terceira
   encostaria na esquerda. */
/* As frações de cada eixo viram variável (padrão 1fr 1fr = metade metade,
   igual sempre foi): arrastar a divisória do mosaico só muda esse número.
   O arranjo em si — quem fica em qual área — continua saindo do `data-n`
   e do `grid-template-areas`, sem nenhuma mudança. */
.palco-grade { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 4px; background: #000; }
.palco-grade[data-n="1"] { grid-template-columns: 1fr; }
.palco-grade[data-n="2"] { grid-template-columns: var(--mosaico-c1, 1fr) var(--mosaico-c2, 1fr); }
.palco-grade[data-n="3"] {
  grid-template-columns: var(--mosaico-c1, 1fr) var(--mosaico-c2, 1fr);
  grid-template-rows: var(--mosaico-r1, 1fr) var(--mosaico-r2, 1fr);
  grid-template-areas: "a b" "c c";
}
.palco-grade[data-n="3"] > .quadro:nth-child(1) { grid-area: a; }
.palco-grade[data-n="3"] > .quadro:nth-child(2) { grid-area: b; }
.palco-grade[data-n="3"] > .quadro:nth-child(3) {
  grid-area: c;
  width: 50%; justify-self: center;   /* centralizada, do tamanho das de cima */
}
.palco-grade[data-n="4"] {
  grid-template-columns: var(--mosaico-c1, 1fr) var(--mosaico-c2, 1fr);
  grid-template-rows: var(--mosaico-r1, 1fr) var(--mosaico-r2, 1fr);
}

/* ── divisórias do mosaico ─────────────────────────────────────────────────
   Absolutas, por cima dos quadros, posicionadas pelo JS a cada redesenho e a
   cada resize (a régua é o retângulo de verdade dos quadros vizinhos, não
   uma conta feita a partir da fração — assim elas nunca desalinham do que a
   grade realmente desenhou, nem mexem no `width: 50%` da terceira tela). */
.divisoria-mosaico {
  position: absolute; z-index: 7;
  touch-action: none;
}
.divisoria-mosaico.v { width: 14px; transform: translateX(-50%); cursor: col-resize; }
.divisoria-mosaico.h { height: 14px; transform: translateY(-50%); cursor: row-resize; }
.divisoria-mosaico::after {
  content: '';
  position: absolute; background: rgba(255,255,255,.16);
  transition: background .12s;
}
.divisoria-mosaico.v::after { top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); }
.divisoria-mosaico.h::after { left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); }
.divisoria-mosaico:hover::after, .divisoria-mosaico.arrastando::after { background: var(--marca); }
/* Moram fora da grade (irmãs dela, dentro de `.palco-video`) de propósito:
   filha da grade, cada uma contaria como mais um quadro na hora de casar
   `estado.palco[i]` com `grade.children[i]` — e essa contagem posicional é o
   que decide QUEM aparece em cada bloco do mosaico. Ficando de fora, o JS
   pode escondê-las (só com `hidden`) sem depender de seletor CSS: é ele quem
   já sabe, no mesmo lugar, se há menos de 2 telas ou se o teatro está ligado. */

.quadro { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.quadro video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.quadro:fullscreen video { object-fit: contain; }
.palco-grade > .quadro:fullscreen,
.palco-grade[data-n="3"] > .quadro:fullscreen { width: 100%; height: 100%; }

.quadro-barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0; transition: opacity .18s;
  z-index: 6;          /* acima da camera: ela e imagem, nao interface */
}
.quadro:hover .quadro-barra, .quadro:focus-within .quadro-barra { opacity: 1; }
.quadro-quem { min-width: 0; }
.quadro-nome { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quadro-detalhe { font-size: 11px; }
.quadro-acoes { display: flex; align-items: center; gap: 6px; flex: none; }
.quadro-acoes .vol-bloco { width: 64px; }

.quadro-stats {
  position: absolute; top: 6px; left: 6px; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 4px;
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.quadro:hover .quadro-stats { opacity: 1; }
.quadro-stats span {
  font-size: 10.5px; color: var(--fraco);
  background: rgba(10,12,18,.8); border: 1px solid var(--linha);
  border-radius: 6px; padding: 2px 6px;
}
.quadro-stats span.alerta { color: var(--alerta); border-color: rgba(255,176,32,.35); }
.quadro-congelado { width: min(340px, calc(100% - 24px)); padding: 12px 14px; z-index: 7; }

.palco-barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0; transition: opacity .18s;
}
.palco-video:hover .palco-barra, .palco-video:focus-within .palco-barra { opacity: 1; }
.palco-quem strong { display: block; font-size: 14px; }
.palco-acoes { display: flex; align-items: center; gap: 6px; }
.volume { display: flex; align-items: center; gap: 7px; color: var(--fraco); }
.volume input { width: 90px; accent-color: var(--marca); }

.palco-stats {
  position: absolute; top: 10px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: #cfd6e6;
}
.palco-stats span {
  background: rgba(8,10,16,.72); border: 1px solid rgba(255,255,255,.08);
  padding: 3px 8px; border-radius: 99px;
}
.palco-stats span.alerta { color: var(--alerta); border-color: rgba(255,176,32,.35); }

/* aviso de imagem parada — o retângulo congelado sem explicação era o pior
   sintoma possível: parece queda de conexão e não é */
.palco-congelado {
  position: absolute; inset: 0; margin: auto;
  width: min(430px, calc(100% - 32px)); height: fit-content;
  background: rgba(10, 12, 18, .93);
  border: 1px solid rgba(255, 176, 32, .5);
  border-radius: var(--r);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  box-shadow: var(--sombra);
}
.palco-congelado strong { color: var(--alerta); font-size: 14px; }
.palco-congelado .dica { line-height: 1.5; }

.faixa-transmissoes {
  display: flex; gap: 8px; padding: 9px; overflow-x: auto;
  border-top: 1px solid var(--linha); background: var(--fundo2);
}
.faixa-transmissoes:empty { display: none; }
.cartao-tx {
  display: flex; align-items: center; gap: 9px; flex: none;
  background: var(--fundo3); border: 1px solid var(--linha);
  border-radius: 10px; padding: 8px 11px; cursor: pointer; font: inherit; color: inherit;
  text-align: left;
}
.cartao-tx:hover { border-color: #33405f; }
.cartao-tx.ativo { border-color: var(--marca); background: rgba(91,140,255,.11); }
.cartao-tx .ponto-vivo { width: 7px; height: 7px; border-radius: 99px; background: var(--ruim); }
.cartao-tx small { display: block; color: var(--fraco); font-size: 11px; }

/* ── chat ──────────────────────────────────────────────────────────────── */
.chat-mensagens { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding-right: 4px; }
.msg { font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.msg .autor { font-weight: 650; font-size: 12px; color: var(--marca2); display: block; }
.msg.sistema { color: var(--fraco); font-size: 12px; font-style: italic; }
#form-chat { display: flex; gap: 7px; margin-top: 10px; }
#chat-texto {
  flex: 1; min-width: 0; background: #0e1119; border: 1px solid var(--linha);
  border-radius: 9px; color: var(--texto); padding: 9px 11px; font: inherit; font-size: 13.5px;
}
#chat-texto:focus { border-color: var(--marca); outline: none; }

/* ── barra ─────────────────────────────────────────────────────────────── */
.barra {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha); background: rgba(12,15,22,.8);
}
/* Tres grupos: os dois das pontas ficam ancorados nos cantos e o do meio
   centraliza sozinho, porque as pontas ocupam a mesma fracao de espaco. */
.barra-lado { display: flex; gap: 8px; flex: 1; }
.barra-lado:last-child { justify-content: flex-end; }
.barra-meio { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.acao {
  appearance: none; background: var(--fundo3); border: 1px solid var(--linha);
  color: var(--texto); border-radius: 11px; padding: 9px 15px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: .87em; font-weight: 550;
}
.acao:hover { background: #1e2432; }
.acao.desligado { color: var(--ruim); border-color: rgba(255,92,108,.35); background: rgba(255,92,108,.09); }
.acao.ligado { color: var(--bom); border-color: rgba(62,207,142,.4); background: rgba(62,207,142,.1); }
.acao.destaque { border-color: rgba(91,140,255,.4); }
.acao.perigo:hover { color: var(--ruim); border-color: rgba(255,92,108,.4); }

/* ── modal ─────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; background: rgba(4,6,11,.72);
  display: grid; place-items: center; padding: 16px; z-index: 40;
  overflow: auto;
}
.modal-caixa {
  width: min(640px, 100%); background: var(--fundo2);
  border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra);
  padding: 20px;
}
.modal-caixa > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-caixa h2 { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--texto); }

.grupo { border: 0; padding: 0; margin: 18px 0 0; }
.grupo legend, .grupo > div > legend {
  padding: 0; font-size: 12px; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.grupo.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cartoes.estreito { grid-template-columns: 1fr 1fr; }
.opcao {
  appearance: none; text-align: left; cursor: pointer; font: inherit;
  background: var(--fundo3); border: 1px solid var(--linha); color: var(--texto);
  border-radius: 11px; padding: 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.opcao:hover { border-color: #33405f; }
.opcao.selecionada { border-color: var(--marca); background: rgba(91,140,255,.12); }
.opcao strong { font-size: 13.5px; }
.opcao span { color: var(--fraco); font-size: 11.5px; }
.opcao em { font-style: normal; font-size: 11px; }
.opcao em.ok { color: var(--bom); }
.opcao em.alerta { color: var(--alerta); }
.grupo .dica { margin-top: 9px; }

.custo {
  margin-top: 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--fundo3); border: 1px solid var(--linha);
  font-size: 12.5px; color: var(--fraco);
}
.modal-pe { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ── painel de rede ────────────────────────────────────────────────────── */
.painel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%);
  background: var(--fundo2); border-left: 1px solid var(--linha);
  box-shadow: var(--sombra); z-index: 35;
  display: flex; flex-direction: column; padding: 14px;
}
.painel > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#painel-camera-perfis { max-height: calc(100dvh - 110px); overflow-y: auto; }
#painel-camera-perfis label { display: block; margin: 10px 0 4px; font-size: 13px; }
#painel-camera-perfis select, #painel-camera-perfis input {
  width: 100%; min-height: 38px; padding: 8px 10px; border-radius: 8px;
  background: var(--fundo3); border: 1px solid var(--linha); color: var(--texto); font: inherit;
}
#painel-camera-perfis select:focus-visible, #painel-camera-perfis input:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 2px;
}
.camera-perfis-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.camera-perfis-acoes .botao { padding: 7px 10px; font-size: 12px; }
.camera-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.camera-controles .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; padding: 9px 10px; font-size: .86em;
}
.camera-controles .botao.ligado { color: var(--bom); border-color: rgba(62,207,142,.45); }
.rede-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rede-resumo div {
  background: var(--fundo3); border: 1px solid var(--linha);
  border-radius: 10px; padding: 9px 11px;
}
.rede-resumo b { display: block; font-size: 16px; }
.rede-resumo span { color: var(--fraco); font-size: 11px; }
.rede-lista { list-style: none; margin: 0 0 12px; padding: 0; overflow-y: auto; flex: 1; }
.rede-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--linha); font-size: 12.5px;
}
.rede-lista .estado { font-size: 11px; color: var(--fraco); }
.rede-lista .estado.bom { color: var(--bom); }
.rede-lista .estado.ruim { color: var(--ruim); }
.rede-lista .estado.aviso { color: var(--alerta); }

/* ── painel de áudio ───────────────────────────────────────────────────── */
.painel.largo { width: min(430px, 100%); }
.painel-corpo { flex: 1; overflow-y: auto; padding-right: 4px; }

.bloco {
  padding: 14px 0;
  border-top: 1px solid var(--linha);
}
.bloco:first-child { border-top: 0; padding-top: 0; }
.bloco h3 {
  margin: 0 0 11px;
  font-size: 12px; font-weight: 650; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .08em;
}

.linha-campo { display: block; margin-bottom: 13px; }
.linha-campo > span {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--fraco); margin-bottom: 6px;
}
.linha-campo > span b { color: var(--texto); font-weight: 600; font-size: 12px; }
.linha-campo select {
  width: 100%;
  background: #0e1119; color: var(--texto);
  border: 1px solid var(--linha); border-radius: 9px;
  padding: 9px 10px; font: inherit; font-size: 13px;
}
.linha-campo select:focus { border-color: var(--marca); outline: none; }
.linha-campo input[type="range"] { width: 100%; accent-color: var(--marca); }
.linha-tecla { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.linha-tecla > span { margin: 0; color: var(--fraco); font-size: 12.5px; }
#cfg-tecla { min-width: 92px; font-family: ui-monospace, Consolas, monospace; }
#cfg-tecla.capturando { border-color: var(--marca); color: var(--marca); }

.medidor { margin-top: 4px; }
.nivel.alto { height: 12px; position: relative; }
.nivel.alto i { transition: width .05s linear; }
.nivel.alto u {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--texto); border-radius: 2px; opacity: .85;
  transition: left .1s;
}
#cfg-nivel-dica { margin-top: 7px; }
#cfg-nivel-dica.ouvindo { color: var(--bom); }

.chave {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px; margin: 0 -9px 2px; border-radius: 10px; cursor: pointer;
}
.chave:hover { background: var(--fundo3); }
.chave input { margin: 2px 0 0; accent-color: var(--marca); width: 16px; height: 16px; flex: none; }
.chave span { display: block; }
.chave b { display: block; font-size: 13.5px; font-weight: 550; }
.chave small { display: block; color: var(--fraco); font-size: 11.5px; line-height: 1.4; margin-top: 2px; }

.pessoa-volume { margin-bottom: 12px; }
.pessoa-volume .quem {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin-bottom: 5px;
}
.pessoa-volume .bolinha {
  width: 22px; height: 22px; border-radius: 99px; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #0b1020;
}
.pessoa-volume .pct { margin-left: auto; color: var(--fraco); font-size: 11.5px; }
.pessoa-volume input { width: 100%; accent-color: var(--marca); }

.painel-pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 0 4px; border-top: 1px solid var(--linha);
}

/* ── conta ─────────────────────────────────────────────────────────────── */
.conta-faixa {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.conta-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.conta-botoes { display: flex; gap: 7px; }
.conta-quem { display: flex; align-items: center; gap: 9px; min-width: 0; }
.conta-quem b { display: block; font-size: 13.5px; }
.conta-quem small { color: var(--fraco); font-size: 11.5px; }
.conta-avatar {
  width: 34px; height: 34px; border-radius: 99px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(140deg, var(--marca), #8f6bff); color: #0b1020;
}
.conta-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal-caixa.estreita { width: min(420px, 100%); }

.lembrar {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 2px;
  font-size: 13px; color: var(--fraco); cursor: pointer;
}
.lembrar input { accent-color: var(--marca); width: 16px; height: 16px; }

.perfil-topo { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.recorte {
  width: 160px; height: 160px; flex: none; border-radius: 99px;
  overflow: hidden; position: relative; cursor: grab;
  background: #0e1119; border: 1px solid var(--linha);
  display: grid; place-items: center;
  touch-action: none;            /* o arraste é nosso, não do scroll */
}
.recorte:active { cursor: grabbing; }
.recorte img {
  position: absolute; top: 0; left: 0; max-width: none;
  transform-origin: top left; user-select: none; -webkit-user-drag: none;
}
#recorte-vazio { color: var(--fraco); font-size: 12px; }
.perfil-acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.trocar-senha { margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 12px; }
.trocar-senha summary {
  cursor: pointer; font-size: 13px; color: var(--fraco); margin-bottom: 10px;
}
.trocar-senha summary:hover { color: var(--texto); }

/* selo de quem entrou com conta */
.pessoa .conta-marca { color: var(--marca); font-size: 11px; }

/* ── toasts ────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 86px;
  display: flex; flex-direction: column; gap: 8px; z-index: 50;
  pointer-events: none; width: min(460px, calc(100% - 24px));
}
.toast {
  background: var(--fundo3); border: 1px solid var(--linha);
  border-radius: 11px; padding: 11px 14px; font-size: 13px;
  box-shadow: var(--sombra); animation: sobe .22s ease-out;
}
.toast.ruim { border-color: rgba(255,92,108,.45); }
.toast.bom { border-color: rgba(62,207,142,.4); }
.toast.aviso { border-color: rgba(255,176,32,.45); }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }

/* ── estreito ──────────────────────────────────────────────────────────── */
.so-estreito { display: none; }

@media (max-width: 1080px) {
  .corpo { grid-template-columns: 232px minmax(0, 1fr); }
  /* Sem a coluna do chat na grade (ela vira gaveta flutuante), e sem espaço
     de sobra: as divisórias não têm mais o que dividir. */
  .divisoria { display: none; }
  .chat { position: fixed; top: 56px; right: 8px; bottom: 78px; width: min(320px, calc(100% - 16px)); z-index: 30; box-shadow: var(--sombra); }
  .chat[hidden] { display: none !important; }
  .so-estreito { display: flex; }
}

@media (max-width: 720px) {
  .corpo { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .pessoas {
    order: 2; max-height: min(260px, 38vh);
  }
  .palco { order: 1; min-height: 46vh; }
  .acao span { display: none; }
  .acao { padding: 11px 13px; }
  .barra { gap: 6px; }
  #contagem { display: none; }          /* a lista de pessoas já mostra */
  #sala-codigo { font-size: 14px; letter-spacing: .12em; }
  .selo-sala { display: none; }
  .chat { top: 50px; bottom: 72px; }
  .cartoes { grid-template-columns: 1fr; }
  .grupo.linha { grid-template-columns: 1fr; }
  .topo { padding: 8px 10px; }
  .volume input { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* pedido de retomada — a janela mostrada sumiu (o cliente do LoL fecha sozinho
   quando a partida abre) e o navegador exige um clique para escolher a nova.
   Este painel existe para que esse clique seja UM, e esteja na cara. */
.palco-retomar {
  border-color: rgba(90, 200, 255, .55);
  z-index: 4;
  gap: 10px;
}
.palco-retomar strong { color: var(--marca); font-size: 15px; }
.palco-retomar .linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

@keyframes pedindo-clique {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 200, 255, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(90, 200, 255, 0); }
}
.botao.pedindo { animation: pedindo-clique 1.5s ease-out infinite; border-color: var(--marca); }
@media (prefers-reduced-motion: reduce) { .botao.pedindo { animation: none; } }

/* salas por onde a conta já passou — atalho para não decorar código */
.recentes {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.recentes-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
  color: var(--fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
}
.recentes-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.recente {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px; min-width: 128px;
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--r);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.recente:hover { border-color: var(--marca); background: #1e2432; }
.recente b { font-size: 14px; letter-spacing: .08em; }
.recente small { color: var(--fraco); font-size: 11.5px; }
.recente.morta { opacity: .68; }


/* ── webcam sobre a transmissao ───────────────────────────────────────────
   Posicao e tamanho vem em PORCENTAGEM do quadro, nao em pixels: e isso que
   faz todo mundo ver a caixinha no mesmo lugar, em monitor de qualquer
   tamanho. O `aspect-ratio` mantem a proporcao sem precisar mandar altura. */
.camera-sobre {
  position: absolute; z-index: 3;
  aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  background: #000;
}
.camera-sobre video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fora do modo de ajuste a caixinha e enfeite: nao recebe clique, nao arrasta.
   Antes ficava solta o tempo todo, e um esbarrao no mouse mudava a posicao na
   tela de todo mundo que estava assistindo. */
.camera-sobre { pointer-events: none; }
.camera-punho { display: none; }

.camera-sobre.editando {
  pointer-events: auto; cursor: grab; touch-action: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(91,140,255,.35), 0 6px 20px rgba(0,0,0,.5);
}
.camera-sobre.editando:active { cursor: grabbing; }
.camera-sobre.editando .camera-punho {
  display: block;
  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--marca) 50%);
}
.acao.ligado { color: var(--bom); border-color: rgba(62,207,142,.45); }

/* quadro aberto mas ainda sem imagem: o SFU leva um instante para comecar */
.quadro.esperando { display: grid; place-items: center; }
.quadro.esperando::after {
  content: 'conectando…';
  color: var(--fraco); font-size: 12px;
}
.quadro.esperando video { display: none; }

/* ── modo teatro (o botao "destacar") ──────────────────────────────────────
   A tela escolhida ocupa a PAGINA inteira, e nao so a coluna do meio: lista,
   chat, topo e barra ficam por baixo. As abas e a barra de endereco do
   navegador continuam a vista — e isso que separa este modo da tela cheia do
   monitor, que engole o navegador junto.

   `position: fixed` e o que faz o trabalho. A primeira versao so esticava o
   quadro DENTRO da grade do palco: com duas telas dava para notar alguma
   coisa, com UMA nao mudava rigorosamente nada na tela. */
body.modo-teatro .palco-video {
  position: fixed; inset: 0; z-index: 32;   /* abaixo dos paineis (35) e dos avisos (50) */
  border-radius: 0; background: #000;
}
body.modo-teatro .mosaico-controles { display: none; }

.palco-grade.com-destaque > .quadro { display: none; }
.palco-grade.com-destaque > .quadro.destacado {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: auto;              /* desfaz o 50% do arranjo de 3 telas */
  justify-self: stretch;
}
.quadro-destaque.ligado { color: var(--marca); background: rgba(91,140,255,.18); }

/* A barra do quadro so aparece quando o mouse passa por cima, entao a saida do
   teatro precisa de botao proprio e sempre presente — senao a pessoa fica
   procurando a porta. Discreto parado, inteiro quando o mouse chega perto. */
.teatro-sair {
  position: absolute; top: 10px; right: 12px; z-index: 8;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 12px;
  /* Sobre jogo claro o botao desaparecia: o fundo precisa ser opaco e ter
     contorno proprio, senao a saida some justo em quem mais precisa dela. */
  background: rgba(10,12,18,.86);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  opacity: .72; transition: opacity .18s;
}
.teatro-sair:hover, .teatro-sair:focus-visible { opacity: 1; }

/* ── canais dentro da sala ─────────────────────────────────────────────────
   A lista vira agrupada quando ha mais de um canal. As pessoas aparecem
   ANINHADAS no canal onde estao: e a resposta visual para "onde essa pessoa
   esta falando", que uma lista plana nao dava. */
.pessoa.no-canal { padding-left: 18px; }

li.canal { margin: 6px 0 2px; }
li.canal .canal-nome {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center; gap: 7px; width: 100%;
  padding: 6px 7px; border-radius: 8px;
  background: none; border: 1px solid transparent;
  color: var(--fraco); font: inherit; font-size: .92em; text-align: left;
  cursor: pointer;
}
li.canal .canal-nome:hover { background: var(--fundo3, #1e2432); color: var(--texto); }
li.canal .canal-nome .nome { overflow-wrap: anywhere; }
li.canal .canal-nome .tempo { font-variant-numeric: tabular-nums; }
/* O canal onde EU estou: a borda marca sem gritar, e o cursor deixa de ser de
   clique porque clicar nele nao faz nada. */
li.canal.meu .canal-nome {
  color: var(--marca); border-color: rgba(91,140,255,.35);
  background: rgba(91,140,255,.10); cursor: default;
}
li.canal .i { width: 15px; height: 15px; }

li.canal-novo { margin: 2px 0 8px; }
li.canal-novo button {
  width: 100%; padding: 5px 7px; border-radius: 8px;
  background: none; border: 1px dashed var(--linha);
  color: var(--fraco); font: inherit; font-size: .85em; text-align: left;
  cursor: pointer;
}
li.canal-novo button:hover { border-color: var(--marca); color: var(--marca); }

li.grupo {
  margin: 10px 0 2px; color: var(--fraco);
  font-size: .78em; text-transform: uppercase; letter-spacing: .07em;
}

/* ── aviso de transmissao sem som ─────────────────────────────────────────
   Fica no painel, acima da propria linha da pessoa, enquanto durar. Cor de
   alerta e nao de erro: nada quebrou, so falta uma caixinha marcada. */
.aviso-sem-som {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-bottom: 8px; padding: 8px 10px;
  border-radius: var(--r); cursor: pointer;
  background: rgba(255,176,32,.10);
  border: 1px solid rgba(255,176,32,.45);
  color: var(--alerta); font: inherit; font-size: .82em; text-align: left;
}
.aviso-sem-som:hover { background: rgba(255,176,32,.18); }
.aviso-sem-som .i { width: 16px; height: 16px; flex: none; }
.aviso-sem-som b { font-weight: 600; }