/* Lista de canais do painel esquerdo e os canais criados pelo usuario (chat proprio e pagina com build). */

/* a lista de canais respira: rotulo de grupo, canal, e quem esta dentro dele */
.canais{flex:1;overflow-y:auto;min-height:0;margin-top:12px;
        display:flex;flex-direction:column;gap:16px}
.grupoCanal{display:flex;flex-direction:column}
.rotuloGrupo{font-weight:600;font-size:10px;line-height:1;letter-spacing:.16em;
             text-transform:uppercase;color:var(--tx4);padding:0 4px 6px}
.canal{display:flex;align-items:center;gap:8px;border-radius:var(--r);padding:7px 9px;color:var(--tx2);
       font-size:13px;font-weight:500;flex:none;cursor:pointer}
.canal:hover{background:var(--sup2);color:var(--tx)}
.canal.at{background:var(--sup3);color:var(--tx)}
.canal.on{background:hsl(var(--acRaw)/.12);color:var(--tx);box-shadow:inset 2px 0 0 var(--ac)}
/* a cerquilha e o alto-falante ocupam a MESMA caixa: os dois canais ficam
   com o texto comecando na mesma coluna, que e o que faz a lista parecer
   uma lista e nao dois itens soltos */
.canal .cerquilha{width:15px;flex:none;text-align:center;font-size:16px;font-weight:400;color:var(--tx4)}
.canal.at .cerquilha{color:var(--tx3)}
.canal .conta{margin-left:auto;font-size:11px;color:var(--tx4);font-variant-numeric:tabular-nums}
.entraDica{margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac3);opacity:0}
#canalSala:not(.on):hover{background:hsl(var(--acRaw)/.08)}
#canalSala:not(.on):hover .entraDica{opacity:1}
#canalSala.on .entraDica{display:none}
.canal svg{flex:none;width:15px;color:var(--ac3)}

/* ---------- canais criados pelo usuario ----------
   Sao canais como os outros, no mesmo nivel do #inicio, dentro do grupo
   "canais de texto". O que muda e o que aparece no palco ao entrar:
   com build vinculada, o PoB ocupa o palco e o texto vira anotacao embaixo;
   sem build, e um canal de texto comum no centro, igual ao #inicio. */
.canalNovo{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
           margin-top:8px;padding:8px 9px;border-radius:var(--r);
           background:var(--sup1);color:var(--tx3);
           border:1px dashed var(--linha2);font-size:12.5px;font-weight:500;
           font-family:inherit;cursor:pointer}
.canalNovo:hover{background:hsl(var(--acRaw)/.10);border-color:var(--ac7);color:var(--ac2)}
.canalNovo b{font-size:15px;font-weight:400;line-height:1}
.canal.criado .cnome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Apagar tira o canal de TODO MUNDO e nao volta: o segundo clique confirma. */
.canal.criado .apagar{flex:none;border:0;background:transparent;color:var(--tx4);
                      padding:1px 6px;font-size:11px;border-radius:6px;opacity:0}
.canal.criado:hover .apagar{opacity:1}
.canal.criado .apagar:hover{background:hsl(var(--veuRaw)/.1);color:var(--tx)}
.canal.criado .apagar.confirma{opacity:1;color:var(--ac3);background:hsl(var(--acRaw)/.16)}

/* modal de criacao: toma o lugar do chat central */
.modalCanal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
            width:min(440px,calc(100% - 620px));min-width:300px;
            display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--rlg);
            background:hsl(var(--vidroPRaw)/calc(var(--opq) + .14));backdrop-filter:blur(var(--vidro)) saturate(1.15);
            -webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
            box-shadow:var(--vidroSombra)}
.modalCanal h3{margin:0;font-size:15px;font-weight:500}
.modalCanal .campo{display:flex;flex-direction:column;gap:6px}
.modalCanal input{width:100%}
.modalCanal .nota{margin:0;font-size:11.5px;line-height:1.4;color:var(--tx4);text-wrap:pretty}
.modalCanal .acs{display:flex;gap:8px;justify-content:flex-end}

/* canal SEM build: chat comum no centro, mesma moldura do #inicio */
.canalChat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
           width:min(560px,calc(100% - 620px));height:min(560px,calc(100% - 120px));
           display:flex;flex-direction:column;padding:14px;border-radius:var(--rlg);
           background:hsl(var(--vidroPRaw)/var(--opq));backdrop-filter:blur(var(--vidro)) saturate(1.15);
           -webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
           box-shadow:var(--vidroSombra)}
.ccLista{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
         padding-right:2px}

/* canal COM build: ocupa o palco inteiro entre os paineis, como a Watch
   Party. O PoB nao cabe na largura do chat central — arvore e gear viram
   tira ilegivel abaixo de uns 800px.
   z-index acima do .centroChat (4) porque os dois disputam o mesmo espaco e
   o canal aberto e quem tem de ganhar. */
.canalPag{position:absolute;inset:56px var(--palcoR,316px) 96px var(--palcoL,292px);z-index:5;
          display:flex;flex-direction:column;gap:8px}
.cpTopo{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;flex:none;
        border-radius:var(--r);background:hsl(var(--vidroBRaw)/calc(var(--opq) + .10));
        backdrop-filter:blur(calc(var(--vidro) * .7));-webkit-backdrop-filter:blur(calc(var(--vidro) * .7));
        box-shadow:var(--anel)}
.cpIco{display:grid;place-items:center;flex:none;color:var(--ac3)}
.cpNome{font-size:12.5px;font-weight:500;max-width:40%;overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
.cpQuem{font-size:11px;color:var(--tx3);white-space:nowrap}
.cpTopo button{padding:3px 9px;font-size:12px}
.cpMoldura{flex:1;min-height:0;border-radius:var(--rlg);overflow:hidden;background:#000;
           position:relative;box-shadow:0 0 0 1px var(--linha2),var(--sombra2)}
.cpMoldura iframe{width:100%;height:100%;border:0;display:block}
/* O pobb.in e uma SPA em WASM: alguns MB a cada abertura. Sem aviso o
   usuario encara retangulo preto e acha que quebrou. */
.cpCarregando{position:absolute;inset:0;display:grid;place-items:center;
              color:var(--tx3);font-size:12.5px;background:var(--chao);z-index:1}
/* anotacoes embaixo da build, retrateis */
.cpNotas{flex:none;height:172px;display:flex;flex-direction:column;gap:8px;padding:10px;
         border-radius:var(--rlg);background:hsl(var(--vidroPRaw)/var(--opq));
         backdrop-filter:blur(var(--vidro)) saturate(1.15);-webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
         box-shadow:var(--anel)}
.cpNotas.fechada{height:auto;padding:8px 10px}
.cpNotas.fechada .cpLista,.cpNotas.fechada .chatbox{display:none}
.cpCab{display:flex;align-items:center;justify-content:space-between;flex:none}
.cpLista{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}

/* telas estreitas: mesma regra que a .festa e o .centroChat ja seguem */
@media (max-width:960px){
  .canalPag{position:static;order:2;height:auto;min-height:52vh}
  .cpNotas{height:220px;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--fundo2)}
  .canalChat{position:static;transform:none;width:100%;height:460px;order:2;
             backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--fundo2)}
  .modalCanal{position:static;transform:none;width:100%;min-width:0;order:0}
}