:root{
    --bg-deep:#141219;
    --bg-rail:#1a1720;
    --bg-side:#1f1c27;
    --bg-main:#242030;
    --bg-input:#2c2837;
    --bg-hover:#332e40;
    --border:#332f3d;
    --text-hi:#f3f1f7;
    --text-mid:#c9c4d4;
    --text-low:#8d879c;
    --accent:#ff9f5b;
    --accent-dim:#7a5334;
    --online:#5fd98a;
    --green:#3ba55d;
    --red:#ed4245;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  /* v6: controls shared by production and development. */
  #portao select, #portao button, #screen-profile, #menu-perfil {
    width:100%; min-width:0; padding:7px; border:1px solid var(--border);
    border-radius:6px; background:var(--bg-input); color:var(--text-hi); font:inherit; font-size:11px;
  }
  #portao button{ margin-top:6px; cursor:pointer; }
  #portao button:disabled{ opacity:.55; cursor:default; }
  .audio-setting{ display:block; margin:8px 0 4px; font-size:11px; color:var(--text-mid); }
  .audio-check{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; }
  #mic-level{ display:block; width:100%; height:10px; margin:7px 0; }
  #mic-active{ display:block; font-size:10px; color:var(--text-low); }
  #quality-indicator{ display:none; width:100%; padding:8px; border:0; border-top:1px solid var(--border); background:#182119; color:var(--text-mid); cursor:pointer; font-size:11px; }
  body.in-call #quality-indicator{ display:block; }
  #audio-settings-toggle{
    display:none; width:100%; padding:8px 10px; border:0; border-top:1px solid var(--border);
    background:#182119; color:var(--text-mid); cursor:pointer; font:inherit; font-size:11px;
  }
  body.in-call.portao-on #audio-settings-toggle{ display:block; }
  #audio-settings-toggle:hover, #audio-settings-toggle[aria-expanded="true"]{ background:#203024; color:#8ff0ab; }
  #sidebar{ overflow-y:auto; }
  #scroll-area{ min-height:100px; }
  #screen-profile-wrap{ max-width:205px; }
  #screen-profile-wrap[hidden]{ display:none; }
  #menu-tela .mt-config{ display:block; padding:8px 12px; font-size:12px; color:var(--text-mid); }
  #menu-tela .mt-audio{ display:flex; align-items:flex-start; gap:6px; }
  #menu-tela button.mt-op{ display:block; width:100%; text-align:left; background:transparent; border:0; color:inherit; cursor:pointer; font:inherit; }
  #menu-tela button.mt-op:hover{ background:var(--bg-hover); }
  #menu-tela button.mt-op b, #menu-tela button.mt-op span{ display:block; }
  .diagnostic-note{ margin:12px 18px; color:var(--text-mid); font-size:12px; line-height:1.5; }
  #diagnostic-data{ padding:12px 18px; max-height:55vh; overflow:auto; font-size:11px; white-space:pre-wrap; }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  @media(max-width:600px){
    #stage-bar{ flex-wrap:wrap; }
    #stage-actions{ flex-wrap:wrap; }
    #screen-profile-wrap{ max-width:160px; }
    #portao select, #screen-profile, #menu-perfil{ font-size:16px; }
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  html{overflow-x:clip;}
  body{
    font-family:var(--font-ui);
    background:var(--bg-deep);
    color:var(--text-hi);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  #app{ height:100vh; width:100%; display:flex; }

  /* ---------- GATE (nickname) ---------- */
  #gate{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 30% 20%, #2a2436 0%, var(--bg-deep) 60%);
    z-index:50;
  }
  #gate .card{
    width:340px; background:var(--bg-side); border:1px solid var(--border);
    border-radius:16px; padding:32px 28px; text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
  }
  /* A imagem vai embutida no próprio HTML (data URI): aparece igual em
     qualquer hospedagem, sem depender do caminho do arquivo nem de uma
     segunda requisição que pode falhar. */
  #gate .logo{
    width:92px; height:92px; display:block; margin:0 auto 14px;
    animation:flutua 3s ease-in-out infinite;
  }
  @keyframes flutua{
    0%,100%{ transform:translateY(0);    filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
    50%    { transform:translateY(-4px); filter:drop-shadow(0 12px 20px rgba(247,147,30,.35)); }
  }
  #gate h1{ font-size:19px; font-weight:700; margin-bottom:6px; letter-spacing:-0.2px;}
  #gate p{ font-size:13px; color:var(--text-low); margin-bottom:20px; line-height:1.5;}
  #gate input{
    width:100%; padding:11px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg-input); color:var(--text-hi); font-size:14px; outline:none;
    margin-bottom:12px;
  }
  #gate input:focus{ border-color:var(--accent); }
  #gate button{
    width:100%; padding:11px; border-radius:8px; border:none; cursor:pointer;
    background:var(--accent); color:#1a1210; font-weight:700; font-size:14px;
    transition:filter .15s;
  }
  #gate button:hover{ filter:brightness(1.08); }
  #gate .err{ color:#ff8484; font-size:12px; margin-top:8px; min-height:14px; }
  #gate .ver{ color:var(--text-low); font-size:10px; margin-top:14px; font-family:var(--font-mono); opacity:.7; }

  /* ---------- PAINEL DE NOVIDADES (só no ambiente de teste) ---------- */
  body.ambiente-dev #gate{ gap:22px; flex-wrap:wrap; padding:24px; align-content:center; }
  #novidades, .novidades-corpo{
    width:400px; max-width:92vw; max-height:78vh; overflow-y:auto;
    background:var(--bg-side); border:1px solid var(--border);
    border-radius:16px; padding:22px 24px; text-align:left;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
  }
  .novidades-corpo h2{ font-size:13px; font-weight:700; margin-bottom:4px; }
  .novidades-corpo .sub{ font-size:11px; color:var(--text-low); margin-bottom:16px; line-height:1.5; }
  .novidades-corpo .grupo{ margin-bottom:15px; }
  .novidades-corpo .grupo:last-of-type{ margin-bottom:0; }
  .novidades-corpo .grupo h3{
    font-size:10px; text-transform:uppercase; letter-spacing:.7px;
    color:var(--accent); margin-bottom:7px; font-weight:700;
  }
  .novidades-corpo ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
  .novidades-corpo li{
    font-size:12px; color:var(--text-mid); line-height:1.5;
    padding-left:15px; position:relative;
  }
  .novidades-corpo li::before{ content:'▸'; position:absolute; left:0; top:0; color:var(--text-low); }
  .novidades-corpo li b{ color:var(--text-hi); font-weight:600; }
  .novidades-corpo .rodape{
    margin-top:16px; padding-top:12px; border-top:1px solid var(--border);
    font-size:10px; color:var(--text-low); font-family:var(--font-mono); line-height:1.7;
  }

  /* ---------- BASE DAS JANELAS FLUTUANTES ---------- */
  .modal{
    position:fixed; inset:0; z-index:110;
    background:rgba(10,8,14,0.65);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal.hidden{ display:none; }
  .modal-card{
    width:440px; max-width:94vw; max-height:88vh;
    background:var(--bg-side); border:1px solid var(--border);
    border-radius:14px; overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,0.55);
  }
  .modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--border);
    font-weight:700; font-size:14px;
  }
  .modal-close{ cursor:pointer; color:var(--text-low); font-size:16px; line-height:1; padding:2px 4px; }
  .modal-close:hover{ color:var(--text-hi); }

  #modal-novidades .modal-card{ width:520px; max-height:82vh; display:flex; flex-direction:column; }
  #modal-novidades .novidades-corpo{
    width:auto; max-width:none; max-height:none; border:none; border-radius:0;
    box-shadow:none; background:transparent; overflow-y:auto; padding:20px 24px;
  }

  /* ---------- MARCA DE AMBIENTE DE TESTE ---------- */
  /* Só aparece quando o arquivo não é o sala.html. Serve para ninguém achar
     que está na sala de verdade e mandar recado para o vazio. */
  /* Uma cor por ambiente, para ninguém confundir uma janela com a outra:
     laranja = homologação, roxo = desenvolvimento, vermelho = qualquer outro. */
  body.ambiente-dev{
    --amb:#ed4245; --amb-fundo:#4a2430; --amb-texto:#ffb4b4; --amb-borda:#6b3340;
  }
  body.amb-devsala{
    --amb:#8b5cf6; --amb-fundo:#332a4d; --amb-texto:#d4c2ff; --amb-borda:#4d3f73;
  }
  .dev-badge{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--amb-fundo); color:var(--amb-texto); border:1px solid var(--amb-borda);
    font-size:10px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; font-family:var(--font-ui);
  }
  #gate .dev-badge{ margin-bottom:14px; }
  #server-name .dev-badge{ font-size:9px; padding:2px 7px; letter-spacing:.6px; }
  body.ambiente-dev #rail .server-icon{ background:var(--amb); color:#fff; }
  body.ambiente-dev #rail::after{
    content:var(--amb-rotulo, 'TESTE'); font-size:9px; font-weight:800; color:var(--amb-texto);
    letter-spacing:1px; margin-top:-4px;
  }
  body.ambiente-dev #main{ box-shadow: inset 0 3px 0 0 var(--amb); }

  /* ---------- RAIL ---------- */
  #rail{
    width:64px; background:var(--bg-rail); flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; padding-top:16px; gap:10px;
  }
  #rail .server-icon{
    width:42px; height:42px; border-radius:14px; background:var(--accent);
    color:#1a1210; font-weight:800; font-family:var(--font-mono);
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  #rail .rail-line{ width:26px; height:2px; background:var(--border); border-radius:2px; margin:2px 0; }

  /* ---------- SIDEBAR ---------- */
  #sidebar{
    width:240px; background:var(--bg-side); flex-shrink:0;
    display:flex; flex-direction:column; border-right:1px solid var(--border);
  }
  #server-name{
    /* Caixa alta pede espaçamento positivo, igual ao logotipo do index. */
    padding:16px 16px 12px; font-weight:700; font-size:15px; letter-spacing:1.2px;
    border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;
  }
  /* ---------- TROCA DE AMBIENTE ---------- */
  /* Um botão, logo abaixo do nome do ambiente: mesma pergunta — "onde eu
     estou?" — respondida de forma acionável. Leva de volta à tela de escolha,
     em vez de pular direto para um ambiente: de lá dá para ver quantas pessoas
     estão em cada um antes de decidir. */
  #troca-amb{
    padding:9px 12px 11px; border-bottom:1px solid var(--border); flex-shrink:0;
  }
  #troca-amb button{
    width:100%; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-size:11.5px; font-weight:600;
    padding:8px 0; border-radius:7px;
    border:1px solid var(--border); color:var(--text-mid);
    background:var(--bg-input);
    transition:border-color .12s ease, color .12s ease, background .12s ease;
  }
  #troca-amb button:hover{
    border-color:var(--accent); color:var(--accent); background:var(--bg-hover);
  }
  #troca-amb button .seta{ font-size:12px; opacity:.8; }

  #server-name .edit-btn{ cursor:pointer; color:var(--text-low); font-size:12px; }
  #server-name .edit-btn:hover{ color:var(--accent); }
  #server-name input{
    background:var(--bg-input); border:1px solid var(--accent); border-radius:6px;
    color:var(--text-hi); font-size:14px; padding:4px 8px; width:100%; outline:none;
  }
  #scroll-area{ flex:1; overflow-y:auto; }
  .section-header{
    padding:14px 14px 6px; font-size:11px; text-transform:uppercase; letter-spacing:0.6px;
    color:var(--text-low); display:flex; justify-content:space-between; align-items:center;
  }
  .section-header .add{
    cursor:pointer; color:var(--text-low); font-size:16px; line-height:1; padding:0 4px;
  }
  .section-header .add:hover{ color:var(--accent); }
  #channel-list, #voice-list{ padding:2px 8px; }
  .channel-item{
    display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:6px;
    cursor:pointer; color:var(--text-mid); font-size:14px; font-family:var(--font-mono);
    margin-bottom:1px;
  }
  .channel-item:hover{ background:var(--bg-hover); color:var(--text-hi); }
  .channel-item.active{ background:var(--bg-hover); color:var(--text-hi); }
  .channel-item .hash{ color:var(--text-low); }
  .channel-item.active .hash{ color:var(--accent); }
  .channel-item .count{ margin-left:auto; font-size:11px; color:var(--text-low); font-family:var(--font-ui); }

  .new-row{ padding:6px 14px 10px; display:none; gap:6px; }
  .new-row.show{ display:flex; }
  .new-row input{
    flex:1; background:var(--bg-input); border:1px solid var(--border); border-radius:6px;
    color:var(--text-hi); font-size:13px; padding:6px 8px; outline:none; font-family:var(--font-mono);
  }
  .new-row input:focus{ border-color:var(--accent); }
  .new-row button{
    background:var(--accent); color:#1a1210; border:none; border-radius:6px;
    padding:0 10px; font-weight:700; cursor:pointer; font-size:13px;
  }

  /* ---------- VOZ ---------- */
  .voice-block{ margin-bottom:2px; }
  .voice-occupants{ padding:1px 0 4px 22px; display:flex; flex-direction:column; gap:1px; }
  .vo-row{
    display:flex; align-items:center; gap:7px; padding:3px 8px; border-radius:5px;
    font-size:12.5px; color:var(--text-mid);
  }
  .vo-row:hover{ background:var(--bg-hover); }
  .vo-row .avatar{
    width:22px; height:22px; font-size:10px; border:2px solid transparent;
    transition:border-color .1s linear;
  }
  .vo-row.speaking .avatar{ border-color:var(--green); }
  .vo-row .vname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vo-row .vicon{ margin-left:auto; font-size:11px; flex-shrink:0; }
  .vo-row .vicon.bad{ color:var(--red); }
  .vo-row .vicon.live{ color:var(--green); }
  .vo-row .vstate{ margin-left:auto; font-size:10px; color:var(--text-low); flex-shrink:0; }

  /* Controle de escuta por pessoa (ambiente de desenvolvimento) */
  .vo-som{ display:flex; align-items:center; gap:7px; padding:1px 8px 6px 29px; }
  .vo-som input[type=range]{
    flex:1; height:3px; -webkit-appearance:none; appearance:none; cursor:pointer;
    background:var(--border); border-radius:3px; outline:none; min-width:0;
  }
  .vo-som input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
    background:var(--accent); cursor:pointer;
  }
  .vo-som input[type=range]:disabled{ opacity:.35; cursor:default; }
  .vo-som input[type=range]:disabled::-webkit-slider-thumb{ background:var(--text-low); }
  .vo-som .escutar{
    cursor:pointer; font-size:11px; width:18px; text-align:center; flex-shrink:0;
    opacity:.75; user-select:none;
  }
  .vo-som .escutar:hover{ opacity:1; }
  .vo-som .escutar.mudo{ opacity:1; }
  .vo-som .pct{
    font-size:9.5px; color:var(--text-low); width:30px; text-align:right;
    flex-shrink:0; font-family:var(--font-mono);
  }
  .vo-row.silenciado .vname{ color:var(--text-low); text-decoration:line-through; }

  #call-bar{ display:none; padding:9px 10px; background:#182119; border-top:1px solid var(--border); }
  body.in-call #call-bar{ display:block; }
  #call-bar .call-top{ display:flex; align-items:center; gap:7px; margin-bottom:8px; }
  #call-bar .call-status{ font-size:12.5px; font-weight:700; color:var(--green); }
  #call-bar .call-where{ font-size:11px; color:var(--text-low); font-family:var(--font-mono); }
  #call-bar .hangup{
    margin-left:auto; cursor:pointer; background:#3a1e22; color:#ff9d9d; border:none;
    border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700;
  }
  #call-bar .hangup:hover{ background:#4d262c; }
  #call-bar .call-btns{ display:flex; gap:6px; }
  #call-bar .cbtn{
    flex:1; cursor:pointer; background:var(--bg-input); color:var(--text-mid); border:1px solid var(--border);
    border-radius:6px; padding:7px 4px; font-size:11px; font-weight:600; text-align:center;
  }
  #call-bar .cbtn:hover{ background:var(--bg-hover); color:var(--text-hi); }
  #call-bar .cbtn.on{ background:#3a1e22; color:#ff9d9d; border-color:#5a2c33; }
  #call-bar .cbtn.live{ background:#1e3a26; color:#8ff0ab; border-color:#2c5a38; }

  /* ---------- PORTÃO DE RUÍDO ---------- */
  /* Fica FORA da #call-bar de propósito: aquela div é reescrita por innerHTML a
     cada ciclo de presença, e um slider ali dentro seria destruído no meio do
     arraste. Aqui o nó é criado uma vez e nunca redesenhado. */
  #portao{ display:none; padding:8px 10px 10px; background:#182119; border-top:1px solid var(--border); }
  body.in-call.portao-on.mic-settings-open #portao{ display:block; }
  #portao .linha{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
  #portao .rot{ font-size:11px; color:var(--text-low); flex:1; }
  #portao .estado{
    font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 6px; border-radius:20px; border:1px solid var(--border);
    color:var(--text-low); background:var(--bg-input); flex-shrink:0;
  }
  #portao .estado.aberto{ color:#8ff0ab; border-color:#2c5a38; background:#1e3a26; }
  #portao .estado.desligado{ opacity:.6; }
  #portao input[type=range]{
    width:100%; height:3px; -webkit-appearance:none; appearance:none; cursor:pointer;
    background:var(--border); border-radius:3px; outline:none;
  }
  #portao input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
    background:var(--accent); cursor:pointer;
  }
  /* Legenda de direção. Sem ela o slider não diz qual lado faz o quê, e a
     pessoa descobre por tentativa — na chamada, ao vivo, com plateia. */
  #portao .escala{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:4px; font-size:11px; color:var(--text-low); user-select:none;
  }
  #portao .escala .sinal{ font-weight:700; width:10px; text-align:center; }
  #portao .escala .nome{
    font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  }
  #portao .dica{ font-size:9.5px; color:var(--text-low); margin-top:5px; line-height:1.45; }

  #user-bar{
    padding:10px 12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px;
    background:var(--bg-rail);
  }
  .avatar{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
    color:#1a1210;
  }
  #user-bar .who{ flex:1; overflow:hidden; }
  #user-bar .who .name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #user-bar .who .status{ font-size:11px; color:var(--online); }
  #user-bar .leave{ cursor:pointer; color:var(--text-low); font-size:11px; padding:4px 6px; border-radius:6px; }
  #user-bar .leave:hover{ color:#ff8484; background:var(--bg-hover); }

  /* ---------- MAIN ---------- */
  #main{ flex:1; display:flex; flex-direction:column; background:var(--bg-main); min-width:0; }
  #chat-header{
    height:52px; flex-shrink:0; display:flex; align-items:center; padding:0 18px;
    border-bottom:1px solid var(--border); gap:8px; font-weight:700; font-size:15px;
  }
  #chat-header .hash{ color:var(--text-low); font-family:var(--font-mono); font-weight:400; }
  #chat-header .head-btn{
    font-size:12px; color:var(--text-low); cursor:pointer; font-weight:500;
    display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:6px;
  }
  #chat-header .head-btn:hover{ color:var(--text-hi); background:var(--bg-hover); }
  #chat-header .head-btn.first{ margin-left:auto; }
  #chat-header .head-btn.live{ color:#8ff0ab; }
  #chat-header .dot-small{ width:7px; height:7px; border-radius:50%; background:var(--online); }
  /* Escondidos por padrão: só o celular os usa (ver o @media do fim).
     O seletor precisa do #chat-header para vencer `#chat-header .head-btn`,
     que traz display:flex e tem especificidade maior que um id sozinho. */
  #chat-header #menu-btn{ display:none; font-size:16px; }
  #gaveta-fundo{ display:none; }

  /* ---------- PALCO (tela compartilhada) ---------- */
  #stage{
    display:none; flex-direction:column; background:#000;
    border-bottom:1px solid var(--border); flex:1 1 62%; min-height:0;
  }
  body.stage-on #stage{ display:flex; }

  /* ---------- CONVITE PARA ASSISTIR ---------- */
  /* Aparece quando alguém está compartilhando e o palco está fechado. Existe
     por dois motivos: assistir passou a ser opcional (o vídeo não é mais
     empurrado na cara de ninguém), e quem fecha o palco precisa de um caminho
     de volta — antes não havia nenhum, e só sair e entrar na voz resolvia. */
  #convite-tela{
    display:none; align-items:center; gap:9px; flex-shrink:0;
    padding:9px 14px; background:#1e3a26; border-bottom:1px solid #2c5a38;
    font-size:12.5px; color:#8ff0ab;
  }
  body.convite-on #convite-tela{ display:flex; }
  #convite-tela .quem{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #convite-tela button{
    flex-shrink:0; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700;
    padding:6px 12px; border-radius:6px; border:1px solid #3ba55d;
    background:#3ba55d; color:#0f1a12;
  }
  #convite-tela button:hover{ filter:brightness(1.08); }
  body.stage-on #messages{ flex:0 0 30%; }
  body.theater #messages, body.theater #input-row{ display:none; }
  body.theater #stage{ flex:1 1 100%; }

  #stage-bar{
    display:flex; align-items:center; gap:8px; padding:7px 12px;
    background:var(--bg-rail); border-bottom:1px solid var(--border); flex-shrink:0;
  }
  #stage-title{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; min-width:0; }
  #stage-title .rec{ width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }
  #stage-title .audio-tag{
    font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; white-space:nowrap;
    background:var(--bg-input); color:var(--text-low); border:1px solid var(--border);
  }
  #stage-title .audio-tag.ok{ background:#1e3a26; color:#8ff0ab; border-color:#2c5a38; }
  #stage-title .audio-tag.alerta{ background:#3a2a18; color:#ffc98f; border-color:#5c4425; }
  #stage-tabs{ display:flex; gap:5px; overflow-x:auto; }
  #stage-tabs .stab{
    cursor:pointer; font-size:11px; padding:4px 9px; border-radius:6px;
    background:var(--bg-input); color:var(--text-mid); border:1px solid var(--border); white-space:nowrap;
  }
  #stage-tabs .stab.active{ background:var(--accent); color:#1a1210; border-color:var(--accent); font-weight:700; }
  #stage-actions{ margin-left:auto; display:flex; gap:5px; flex-shrink:0; }
  #stage-actions .sbtn{
    cursor:pointer; font-size:11px; padding:5px 9px; border-radius:6px;
    background:var(--bg-input); color:var(--text-mid); border:1px solid var(--border);
  }
  #stage-actions .sbtn:hover{ background:var(--bg-hover); color:var(--text-hi); }
  #stage-actions .sbtn.on{ background:var(--accent); color:#1a1210; border-color:var(--accent); font-weight:700; }
  [data-stage-fit]{ font:inherit; font-size:11px; padding:5px 6px; border-radius:6px; cursor:pointer; background:var(--bg-input); color:var(--text-hi); border:1px solid var(--border); max-width:95px; }
  [data-stage-fit]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .stage-fit-control{ display:flex; }

  /* Volume do áudio da transmissão de tela. Separado do volume das vozes de
     propósito: som de jogo ou de vídeo chega muito mais alto que fala, e
     baixar os dois juntos deixaria a conversa inaudível. */
  #stage-vol{ display:flex; align-items:center; gap:6px; margin-right:5px; flex-shrink:0; }
  #stage-vol .ico{ font-size:11px; opacity:.8; user-select:none; }
  #stage-vol input[type=range]{
    width:74px; height:3px; -webkit-appearance:none; appearance:none; cursor:pointer;
    background:var(--border); border-radius:3px; outline:none;
  }
  #stage-vol input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
    background:var(--accent); cursor:pointer;
  }
  #stage-vol input[type=range]:disabled{ opacity:.35; cursor:default; }
  #stage-vol input[type=range]:disabled::-webkit-slider-thumb{ background:var(--text-low); }
  #stage-vol .pct{ font-size:10px; color:var(--text-low); width:32px; text-align:right; user-select:none; }

  #stage-video-wrap{ flex:1; position:relative; min-height:0; background:#000; }
  #stage-video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
  #stage-video-wrap[data-fit="esticar"] #stage-video{ object-fit:fill; }
  .stage-fit-full{ display:none; position:absolute; top:12px; right:12px; z-index:2; }
  #stage-video-wrap:fullscreen .stage-fit-full{ display:block; }
  #stage-video-wrap:-webkit-full-screen .stage-fit-full{ display:block; }
  #stage-status{
    position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    color:var(--text-low); font-size:13px; text-align:center; padding:20px; pointer-events:none;
    background:rgba(0,0,0,0.55); white-space:pre-line;
  }
  #stage-status.show{ display:flex; }

  #messages{ flex:1; overflow-y:auto; padding:16px 20px 8px; display:flex; flex-direction:column; gap:2px; min-height:0; }
  #messages .empty{
    margin:auto; text-align:center; color:var(--text-low); font-size:13px; max-width:280px; line-height:1.6;
  }
  .msg{ display:flex; gap:12px; padding:6px 4px; border-radius:8px; }
  .msg:hover{ background:rgba(255,255,255,0.02); }
  .msg .avatar{ margin-top:2px; }
  .msg .body{ min-width:0; flex:1; }
  .msg .meta{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
  .msg .meta .who{ font-size:14px; font-weight:700; }
  .msg .meta .ts{ font-size:11px; color:var(--text-low); font-family:var(--font-mono); }
  .msg .text{ font-size:14px; color:var(--text-mid); line-height:1.5; word-wrap:break-word; white-space:pre-wrap; }

  #input-row{ padding:10px 18px 16px; flex-shrink:0; }
  #input-wrap{
    background:var(--bg-input); border:1px solid var(--border); border-radius:10px;
    display:flex; align-items:center; padding:4px 6px 4px 14px;
  }
  #input-wrap:focus-within{ border-color:var(--accent); }
  #msg-input{
    flex:1; background:transparent; border:none; outline:none; color:var(--text-hi);
    font-size:14px; padding:10px 6px; font-family:var(--font-ui);
  }
  #msg-input::placeholder{ color:var(--text-low); }
  #send-btn{
    background:var(--accent); color:#1a1210; border:none; border-radius:7px; padding:8px 14px;
    font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0;
  }
  #send-btn:hover{ filter:brightness(1.08); }

  /* ---------- MEMBROS ---------- */
  #members-panel{
    width:200px; background:var(--bg-side); border-left:1px solid var(--border);
    flex-shrink:0; display:flex; flex-direction:column;
  }
  #members-panel.hidden{ display:none; }
  #members-panel h3{
    padding:16px 14px 8px; font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-low);
  }
  #members-list{ overflow-y:auto; padding:0 10px; display:flex; flex-direction:column; gap:2px; }
  .member-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; }
  .member-row:hover{ background:var(--bg-hover); }
  .member-row .avatar{ width:26px; height:26px; font-size:11px; position:relative; }
  .member-row .status-dot{
    width:9px; height:9px; border-radius:50%; position:absolute; bottom:-1px; right:-1px;
    border:2px solid var(--bg-side);
  }
  .member-row .status-dot.on{ background:var(--online); }
  .member-row .status-dot.off{ background:var(--text-low); }
  .member-row .mname{ font-size:13px; color:var(--text-mid); }
  .member-row.on .mname{ color:var(--text-hi); }

  #audio-sink{ position:absolute; width:0; height:0; overflow:hidden; }

  #menu-tela{
    position:fixed; z-index:120; width:284px; background:var(--bg-side);
    border:1px solid var(--border); border-radius:10px; overflow:hidden;
    box-shadow:0 14px 40px rgba(0,0,0,0.5);
  }
  #menu-tela .mt-op{ padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
  #menu-tela .mt-op:last-child{ border-bottom:none; }
  #menu-tela .mt-op:hover{ background:var(--bg-hover); }
  #menu-tela .mt-op b{ display:block; font-size:13px; margin-bottom:3px; }
  #menu-tela .mt-op span{ display:block; font-size:11px; color:var(--text-low); line-height:1.45; }
  #menu-tela .mt-op[data-modo="aba"] b{ color:#8ff0ab; }
  #menu-tela .mt-op[data-modo="tela"] b{ color:#ffc98f; }
  #menu-tela .mt-op[data-modo="captura"] b{ color:#9fc9ff; }

  #modal-captura .modal-card{ width:440px; }
  #modal-captura .linha{ margin-bottom:14px; }
  #modal-captura label{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
    color:var(--text-low); margin-bottom:6px; font-weight:700;
  }
  #modal-captura select{
    width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg-input); color:var(--text-hi); font-size:13px; outline:none;
  }
  #modal-captura select:focus{ border-color:var(--accent); }
  #modal-captura .previa{ margin-bottom:12px; }
  #modal-captura .previa video{
    width:100%; aspect-ratio:16/9; background:#000; border-radius:8px;
    display:block; object-fit:contain; border:1px solid var(--border);
  }
  #modal-captura #cap-estado{
    font-size:11px; color:var(--text-low); margin-top:6px; line-height:1.5; min-height:16px;
  }
  #modal-captura #cap-estado.ok{ color:#8ff0ab; font-weight:600; }
  #modal-captura #cap-estado.ruim{ color:#ff9d9d; }
  #modal-captura .nota{ font-size:11px; color:var(--text-low); line-height:1.5; margin-bottom:14px; }
  #modal-captura .acoes{ display:flex; gap:8px; }
  #modal-captura .acoes button{
    flex:1; padding:10px; border:none; border-radius:8px; font-weight:700;
    font-size:13px; cursor:pointer;
  }
  #modal-captura .ok{ background:var(--accent); color:#1a1210; }
  #modal-captura .ok:disabled{ background:var(--bg-input); color:var(--text-low); cursor:not-allowed; }
  #modal-captura .cancelar{ background:var(--bg-input); color:var(--text-mid); border:1px solid var(--border) !important; }

  #unblock-audio{
    display:none; position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:#1a1210; border:none; border-radius:8px;
    padding:10px 16px; font-size:13px; font-weight:700; cursor:pointer; z-index:100;
  }
  #unblock-audio.show{ display:block; }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
  ::-webkit-scrollbar-track{ background:transparent; }

  @media (max-width: 900px){
    #members-panel{ display:none !important; }
    #sidebar{ width:200px; }
    body.stage-on #messages{ flex:0 0 26%; }
  }

  /* ==================== CELULAR ====================
     Ligado só onde `body.mobile-ok` existe — hoje, o ambiente de
     desenvolvimento. Os três arquivos continuam idênticos; quem liga a classe
     é o JS, conferindo o ambiente. Para valer nos três, veja MOBILE_OK.

     A ideia: os três painéis lado a lado não cabem num celular — em 375px a
     régua de 64px mais os canais de 200px deixavam 111px para o chat. Abaixo do
     corte os laterais saem do fluxo e viram gavetas sobre o conteúdo, e o chat
     fica com a tela inteira.

     O CORTE É 600px, e não mais: em 800px, um notebook pequeno, os três painéis
     ainda cabem com folga (chat com 536px) e colapsar ali só atrapalharia.
     Tablet em retrato (768px) também fica com os painéis. Quem ganha gaveta é
     celular de verdade. Se mudar este número, mude ESTREITO() junto. */
  @media (max-width: 600px){
    /* A régua só tem o ícone do ambiente; ele reaparece no topo da gaveta. */
    body.mobile-ok #rail{ display:none; }

    body.mobile-ok #sidebar{
      position:fixed; top:0; left:0; bottom:0; z-index:45;
      width:min(82vw, 290px);
      transform:translateX(-100%);
      transition:transform .18s ease;
      box-shadow:0 0 40px rgba(0,0,0,.55);
    }
    body.mobile-ok.menu-aberto #sidebar{ transform:none; }

    /* Painel de membros: o media query acima o esconde com !important, então
       aqui é preciso !important também para reativá-lo como gaveta. Quem
       abre e fecha é a classe .hidden, que o botão "N online" já alterna —
       o JS existente continua valendo sem mudança. */
    body.mobile-ok #members-panel{
      display:flex !important;
      position:fixed; top:0; right:0; bottom:0; z-index:45;
      width:min(76vw, 260px); border-left:1px solid var(--border);
      transform:translateX(100%);
      visibility:hidden;
      transition:transform .18s ease;
      box-shadow:0 0 40px rgba(0,0,0,.55);
    }
    body.mobile-ok #members-panel:not(.hidden){ transform:none; visibility:visible; }

    /* Um fundo escuro só, para as duas gavetas. Tocar nele fecha. */
    body.mobile-ok #gaveta-fundo{
      position:fixed; inset:0; z-index:44; background:rgba(6,4,10,.6);
      display:none;
    }
    body.mobile-ok.menu-aberto #gaveta-fundo,
    body.mobile-ok.membros-abertos #gaveta-fundo{ display:block; }

    body.mobile-ok #chat-header #menu-btn{ display:flex; }

    /* Cabeçalho do chat: cabe pouco. O nome do canal encolhe com reticências
       em vez de empurrar os botões para fora da tela, e o botão de novidades
       sai — a lista está na página inicial. */
    body.mobile-ok #chat-header{ padding:0 10px; gap:5px; font-size:14px; }
    body.mobile-ok #chat-header #active-channel-name{
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
    }
    body.mobile-ok #chat-header .head-btn{ font-size:11.5px; padding:7px 8px; flex-shrink:0; }
    /* O botão fica: sem a abertura automática, ele é o único caminho para a
       lista de dentro da sala. Só o rótulo encurta, no JS que o cria. */

    body.mobile-ok #convite-tela{ padding:11px 12px; font-size:12px; }
    body.mobile-ok #convite-tela button{ padding:9px 13px; }
    body.mobile-ok #messages{ padding:12px 12px 6px; }
    body.mobile-ok #input-row{ padding:8px 12px 12px; }
    /* 16px evita o zoom automático do Safari ao focar o campo. */
    body.mobile-ok #input-row input, body.mobile-ok #input-row textarea{ font-size:16px; }

    /* Barra do palco: em vez de estourar, quebra em duas linhas. */
    body.mobile-ok #stage-bar{ flex-wrap:wrap; row-gap:6px; padding:7px 10px; }
    body.mobile-ok #stage-actions{ margin-left:auto; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
    body.mobile-ok #stage-vol input[type=range]{ width:56px; }
    body.mobile-ok #stage-actions .sbtn{ padding:7px 9px; }
    /* Com o chat embaixo, o vídeo fica alto demais para sobrar conversa. */
    body.mobile-ok.stage-on #stage{ flex:0 0 auto; max-height:46vh; }
    body.mobile-ok.stage-on #messages{ flex:1 1 auto; }

    /* Tela de entrada e janelas: largura fixa não cabe. */
    body.mobile-ok #gate{ padding:18px; }
    body.mobile-ok #gate .card{ width:100%; max-width:340px; padding:24px 20px; }
    body.mobile-ok #gate .card input{ font-size:16px; }
    body.mobile-ok #novidades{ display:none; }
    body.mobile-ok .modal-card{ width:100% !important; max-width:none !important; }

    /* Alvos de toque na lista de voz e nos canais. */
    body.mobile-ok .channel-item, body.mobile-ok .vo-row{ padding-top:9px; padding-bottom:9px; }
    body.mobile-ok #troca-amb{ padding:10px 12px 12px; }
    body.mobile-ok #troca-amb button{ padding:12px 0; font-size:12.5px; }
  }