/* Cabecalho da sala, cartoes de pessoa, balao de volume e a barra do usuario. */

/* ---------- miolo do painel esquerdo ---------- */
/* cabecalho da sala: a identidade dela em cima de tudo, como o nome do
   servidor no Discord. As acoes de SALA (convite, sair) moram aqui. */
.salaCab{display:flex;align-items:center;gap:2px;flex:none;
         padding:0 2px 10px;border-bottom:1px solid var(--linha)}
.salaTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.salaTx b{font:500 12.5px/1.1 ui-monospace,Consolas,monospace;letter-spacing:.09em;color:var(--tx);
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salaTx span{font-size:11px;line-height:1.1;color:var(--tx4)}
.salaCab .icobtn{width:28px;height:28px;flex:none}

/* quem esta DENTRO do canal, recuado — o recuo e o que amarra a pessoa ao
   canal em vez de deixar uma lista unica flutuando no painel */
.subgente{display:flex;flex-direction:column;padding:4px 0 0 8px;margin-left:6px;
          border-left:1px solid var(--linha)}
.subgente:empty{display:none}
/* no #inicio a pessoa nao ocupa voz: cartao mais leve, para o peso visual
   ficar em quem esta falando */
.subgente.texto .mem{padding:6px 9px;grid-template-columns:28px 1fr auto;gap:9px;margin-bottom:4px;
                     background:transparent;box-shadow:none}
.subgente.texto .mem:hover{background:var(--sup2)}
.subgente.texto .mem .av{width:28px;height:28px;border-radius:9px;font-size:12px}
.subgente.texto .mem .nm{font-size:12.5px}

/* membro do canal de voz — CARDS, nao lista compacta: presenca em vez de
   densidade, e o que mais afasta o visual do Discord */
.mem{position:relative;display:grid;grid-template-columns:38px 1fr auto;align-items:center;
     gap:10px;padding:9px 10px;border-radius:var(--rlg);cursor:default;margin-bottom:6px;
     background:var(--sup1);box-shadow:inset 0 0 0 1px var(--sup1Anel);
     transition:background .12s,box-shadow .12s}
/* Cada pessoa tem a propria cor (derivada do nome) e o card responde ao
   mouse com um brilho que segue o cursor — inspirado nas cartas holograficas.
   E o que da identidade a lista sem virar decoracao gratuita. */
.mem{--cor:var(--ac);--mx:50%;--my:50%}
.mem::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .18s;
  background:radial-gradient(320px circle at var(--mx) var(--my),
    color-mix(in srgb,var(--cor) 26%,transparent) 0,transparent 60%)}
.mem::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .18s;mix-blend-mode:color-dodge;
  background:radial-gradient(220px circle at var(--mx) var(--my),
    rgba(255,255,255,var(--brilhoA)) 0,transparent 55%)}
.mem:hover::before,.mem:hover::after{opacity:1}
.mem:hover{background:var(--sup2);
           box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor) 45%,transparent)}
.mem > *{position:relative;z-index:1}
/* quem esta falando ganha a barra de accent na lateral do card */
.mem.falando{background:color-mix(in srgb,var(--cor) 12%,transparent);
             box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor) 40%,transparent),inset 3px 0 0 var(--cor)}
/* o avatar carrega a cor da pessoa: e o que faz reconhecer quem e sem ler */
.mem .av{width:38px;height:38px;border-radius:12px;flex:none;
         background:color-mix(in srgb,var(--cor) 55%,var(--avBase));
         display:grid;place-items:center;font-weight:600;font-size:15px;line-height:1;font-family:inherit;color:#fff;
         text-shadow:0 1px 2px rgba(0,0,0,.45);
         box-shadow:0 0 0 0 var(--cor);transition:box-shadow .08s linear}
.mem.falando .av{box-shadow:0 0 0 2px var(--cor)}
.mem .corpo{min-width:0;display:flex;flex-direction:column;gap:2px}
.mem .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
         font-size:13.5px;font-weight:500;color:var(--tx2)}
.mem.falando .nm,.mem.eu .nm{color:var(--tx)}
/* linha de estado: substitui os iconezinhos soltos por texto legivel */
.mem .sub{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx4);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem .sub .sep{opacity:.5}
.mem .sub .ping{font-variant-numeric:tabular-nums}
.mem .sub .ping.ruim{color:var(--ac3)}
.mem .acoes{display:flex;align-items:center;gap:4px;flex:none}
.aovivo{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;flex:none;
        font-weight:500;font-size:10px;line-height:1;font-family:inherit;letter-spacing:.08em;text-transform:uppercase;
        color:var(--ac2);background:var(--ac9);border-radius:4px;box-shadow:0 0 0 1px var(--ac7)}
.aovivo .pulso{width:5px;height:5px;border-radius:50%;background:var(--ac3);
               animation:livePulse 1.8s ease-in-out infinite}
.mem button{padding:3px 9px;font-size:12px;font-weight:500;flex:none}
.mem .assistir{grid-column:1/-1;margin-top:2px}

/* estado da MINHA conexao de voz com a pessoa: some quando esta tudo bem */
.vozst{flex:none;width:6px;height:6px;border-radius:50%;margin:0 1px}
.vozst.conectando{background:var(--tx3);animation:vozPisca 1.1s ease-in-out infinite}
.vozst.falhou{background:var(--ac4);box-shadow:0 0 0 2px hsl(var(--ac4Raw)/.25)}

/* sinais de estado do audio no card */
.sinal{flex:none;display:grid;place-items:center;width:14px;height:14px;opacity:.9;color:var(--tx4)}
/* Quem eu silenciei fica apagado: precisa ser obvio que o silencio e escolha minha,
   senao a pessoa parece offline e alguem vai reclamar que "sumiu". */
.mem.calado{opacity:.72}
.mem.calado .nm{color:var(--tx4);text-decoration:line-through;text-decoration-color:var(--tx4)}
.mem.calado .av{opacity:.45}
/* O botao de volume so aparece no hover: a lista fica limpa. */
.mem .vol{opacity:0;background:transparent;color:var(--tx3);padding:2px 5px;border-radius:6px;border:0;
          display:grid;place-items:center;transition:opacity .1s,color .1s}
.mem:hover .vol, .mem .vol.aberto{opacity:1}
.mem .vol:hover{background:hsl(var(--acRaw)/.14);color:var(--tx)}
.mem .vol.mexido{opacity:1;color:var(--ac4)}
.mem .vol.calado{opacity:1;color:var(--ac3)}

/* balaozinho de volume */
.volpop{position:fixed;z-index:60;width:216px;background:var(--surface);border:1px solid var(--linha2);
        border-radius:var(--rlg);padding:12px;box-shadow:var(--sombraPop)}
.volpop .topo{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.volpop .quem{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.volpop .num{font:500 12px/1 ui-monospace,Consolas,monospace;color:var(--tx3)}
.volpop input[type=range]{width:100%;margin:0;padding:0;background:transparent;border:0;accent-color:var(--ac)}
.volpop .acoes{display:flex;gap:6px;margin-top:10px}
.volpop .acoes button{flex:1;padding:5px 8px;font-size:12px}
.volpop .dica{color:var(--tx3);font-size:11px;margin:8px 0 0;line-height:1.35}

/* barra do usuario: UMA linha. Avatar com ponto de estado, nome + o que
   estou fazendo, e os controles colados a direita. As duas linhas extras que
   moravam aqui (icones soltos, e os links de convite/sair) eram o que
   deixava metade do bloco vazia — subiram para o cabecalho da sala. */
.eubar{background:var(--campo);box-shadow:inset 0 0 0 1px var(--sup1Anel);
       border-radius:var(--r);padding:7px 8px;margin-top:8px;flex:none;
       display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px}
.avwrap{position:relative;width:34px;height:34px;flex:none}
.eubar .av{width:34px;height:34px;border-radius:11px;background:var(--ac8);color:var(--ac2);
           display:grid;place-items:center;font-weight:600;font-size:13px;line-height:1;font-family:inherit}
/* o ponto de estado e o detalhe que faz o cartao parecer terminado: diz de
   relance se estou no audio, mudo ou so no texto */
/* background-color, nao o atalho `background`: animar o shorthand com var()
   deixa a cor presa no valor antigo quando a classe troca no meio da
   transicao — e a classe aqui troca a cada redesenho da lista. */
.eubar .pt{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
           background-color:var(--tx4);box-shadow:0 0 0 2.5px var(--fundo3);
           display:grid;place-items:center;transition:background-color .12s}
.eubar .pt.no{background-color:var(--ac4)}
.eubar .pt.mudo,.eubar .pt.surdo{background-color:var(--ac6)}
.eubar .pt.mudo::after,.eubar .pt.surdo::after{content:'';width:7px;height:1.5px;border-radius:1px;
           background:var(--ac2);transform:rotate(-45deg)}
.euinfo{min-width:0;display:flex;flex-direction:column;gap:2px}
.eubar .nm{min-width:0;font-size:13px;font-weight:600;line-height:1.15;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eubar .st{font-size:11px;color:var(--tx3);line-height:1.15;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eucontrol{display:flex;align-items:center;gap:1px;flex:none}
.eucontrol .icobtn{width:30px;height:30px}
#voicemsg:not(.show){display:none}
/* Quem cria a sala nunca teve como se nomear depois. O nome vira campo no clique. */
.eubar .renomear{cursor:pointer;border-radius:4px;padding:1px 4px;margin-left:-4px;
                 display:inline-block;max-width:100%}
.eubar .renomear:hover{background:var(--sup2)}
.eubar .renomear::after{content:'✎';font-size:10px;color:var(--tx3);margin-left:5px;opacity:0}
.eubar .renomear:hover::after{opacity:1}
#euNomeIn{width:100%;padding:3px 6px;font-size:13px;font-weight:500}