/* ==========================================================================
   chat.css — coluna do chat (largura ajustável pela alça; ver sala.css) e a
   aba "Chat" que reabre a coluna quando ela está fechada
   ========================================================================== */
#chatBox{
  flex:none;width:var(--chatW,340px);min-height:0;display:none;flex-direction:column;
  border-left:1px solid var(--line);background:var(--s1);
}
#chatBox.on{display:flex}
.chatCab{
  flex:none;height:44px;display:flex;align-items:center;gap:2px;padding:0 6px 0 14px;
  border-bottom:1px solid var(--line);
}
.chatCab .rotulo{flex:1}
.chatCab .qtd{font-size:11.5px;color:var(--dim);margin-right:6px;font-variant-numeric:tabular-nums}
.chatCab .ib{width:32px;height:32px}
.chatCab .ib .ico{width:17px;height:17px}
/* "⋯": regras e o painel de moderação ficam atrás dele */
.chatMais{display:none;flex:none;border-bottom:1px solid var(--line);padding:6px;gap:4px}
.chatMais.on{display:flex}
.chatMais button{flex:1;min-height:32px;border-radius:9px;font-size:12px;font-weight:600;color:var(--txt2);border:1px solid var(--line);background:var(--s2)}
.chatMais button:hover{color:var(--txt);background:var(--s3)}
.chatMais button[aria-expanded="true"]{background:var(--s3);color:var(--txt);border-color:var(--line2)}
.chatMais .alvosBt{display:none;color:var(--acc)}
.chatMais .alvosBt.on{display:block}

.chatLista{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;padding:10px 10px;
  scrollbar-width:thin;scrollbar-color:#25272D transparent;
}
.cmsg{display:flex;gap:9px;align-items:flex-start;padding:5px 6px;border-radius:10px;font-size:13.5px;
      line-height:1.45;word-break:break-word;overflow-wrap:anywhere;animation:rise .2s ease both}
.cmsg:hover{background:var(--s2)}
.cmsg .av{margin-top:1px;border-radius:9px}
.cmsg .cnome{font-weight:700;margin-right:6px;font-size:12.5px}
.cmsg .chora{color:var(--dim);font-size:10.5px;margin-left:6px;opacity:0}
.cmsg:hover .chora{opacity:1}

/* lista vazia: em vez de um buraco preto, um convite */
.chatVazio{
  display:none;flex:1 1 auto;min-height:0;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:24px;text-align:center;color:var(--dim);
}
.chatVazio.on{display:flex}
.chatLista:has(+ .chatVazio.on){flex:0 0 0;padding:0}
.chatVazio .ico{width:30px;height:30px;color:var(--dim);opacity:.6;margin-bottom:6px}
.chatVazio b{color:var(--txt2);font-size:13.5px;font-weight:650}
.chatVazio span{font-size:12.5px;line-height:1.5}

.chatAviso{flex:none;display:none;padding:7px 14px;font-size:12px;color:var(--warn);
           background:rgba(58,46,8,.35);border-top:1px solid rgba(250,204,21,.25)}
.chatAviso.on{display:block}
.chatAviso.castigo{color:#FCA5A5;background:rgba(58,16,16,.45);border-top-color:rgba(248,113,113,.35);font-weight:500}
.chatAviso.atencao{color:var(--warn)}

.chatNovas{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);
  display:none;background:var(--acc);color:var(--acc-ink);border-radius:999px;padding:5px 12px;
  font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.chatNovas.on{display:block}
.chatPe{position:relative;flex:none;border-top:1px solid var(--line);padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px}
.chatEnvio{display:none;gap:8px;align-items:center}
.chatEnvio.on{display:flex}
.chatEnvio input{flex:1 1 auto;min-width:0;height:42px;background:var(--s2);color:var(--txt);border:1px solid var(--line);
                 border-radius:12px;padding:0 12px;font-size:13px}
.chatEnvio input::placeholder{color:#5F615B}
.chatEnvio input:focus{outline:none;border-color:rgba(var(--acc-rgb),.6)}
.chatEnvio input:disabled{opacity:.5;cursor:not-allowed}
/* o brasileirinho ("Bruno") que pula enquanto digita — parado e apagado até a primeira tecla */
.chatEnvio .pulando{flex:none;width:auto;height:30px;opacity:.35;transform-origin:50% 100%;transition:opacity .25s;will-change:transform}
.chatEnvio .pulando.pula{opacity:1;animation:pulinho .42s ease-in-out infinite}
@keyframes pulinho{
  0%,100%{transform:translateY(0) scale(1,1)}
  25%{transform:translateY(-6px) scale(.94,1.07)}
  55%{transform:translateY(0) scale(1.06,.93)}
  75%{transform:translateY(-2px) scale(1,1)}
}
@media(max-width:900px){.chatEnvio .pulando{display:none}}
.chatEnvio button{flex:none;width:42px;height:42px;background:var(--acc);color:var(--acc-ink);border-radius:12px;
                  display:grid;place-items:center}
.chatEnvio button .ico{width:16px;height:16px;stroke:var(--acc-ink);fill:var(--acc-ink)}
.chatEnvio button:disabled{opacity:.4;cursor:default}
.chatConta{flex:none;font-size:11px;color:var(--dim);min-width:30px;text-align:right;display:none;font-variant-numeric:tabular-nums}
.chatConta.on{display:block}
.chatConta.perto{color:var(--warn)}
.chatConta.limite{color:var(--bad);font-weight:600}
/* quem sou eu no chat: só a foto e o nome, discretos (o "sair" saiu em 24/set/2026) */
.chatEu{display:none;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.chatEu.on{display:flex}
.chatEu img{width:18px;height:18px;border-radius:50%}
.chatEu::before{content:'falando como';opacity:.8}
.chatEu span{color:var(--txt2);font-weight:600}
#chatLogin{display:none;flex-direction:column;gap:8px;align-items:stretch}
#chatLogin.on{display:flex}
#chatLogin .dica{color:var(--dim);font-size:12px;text-align:center}
#gisBotao{display:flex;justify-content:center;min-height:40px}

/* ---------- a aba "Chat" no canto do palco (chat fechado) ---------- */
.chatAba{
  position:absolute;right:14px;bottom:14px;z-index:8;
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border-radius:999px;
  background:var(--s1);border:1px solid var(--line2);color:var(--txt);font-size:12.5px;font-weight:650;
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:rise .2s ease both;
}
.chatAba:hover{background:var(--s3);border-color:rgba(255,255,255,.22)}
.chatAba .ico{width:16px;height:16px}
.chatAba .n{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
}
/* o pontinho no botão da barra de cima vira número quando há mensagem nova */
#bChat .badge{width:auto;min-width:8px;height:8px;top:4px;right:4px}
.palco.teatro .chatAba{display:none}

/* regras */
#chatRegras{display:none;flex:none;padding:12px 14px;font-size:12px;color:var(--txt2);
            border-bottom:1px solid var(--line);line-height:1.55}
#chatRegras.on{display:block}
#chatRegras h4{color:var(--txt);font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-bottom:7px;text-transform:uppercase}
#chatRegras ul{list-style:none;display:flex;flex-direction:column;gap:4px}
#chatRegras li{display:flex;gap:7px}
#chatRegras li::before{content:'·';color:var(--acc);font-weight:700}
#chatRegras .escada{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:5px}
#chatRegras .deg{background:var(--s2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11px}
#chatRegras .deg.atual{border-color:rgba(248,113,113,.4);color:#FCA5A5;font-weight:600}
#chatRegras .nota{margin-top:8px;color:var(--dim);font-size:11.5px}

/* painel de alvos (moderador) */
#chatAlvos{display:none;flex:none;padding:12px 14px;font-size:12px;border-bottom:1px solid var(--line)}
#chatAlvos.on{display:block}
#chatAlvos h4{color:var(--acc);font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-bottom:4px;text-transform:uppercase}
#chatAlvos .exp{color:var(--dim);font-size:11.5px;margin-bottom:9px;line-height:1.5}
#chatAlvos .linha{display:flex;gap:6px;margin-bottom:9px}
#chatAlvos input{flex:1 1 auto;min-width:0;background:var(--s2);color:var(--txt);border:1px solid var(--line2);
                 border-radius:9px;padding:7px 10px;font-size:13px}
#chatAlvos input:focus{outline:none;border-color:rgba(var(--acc-rgb),.6)}
#chatAlvos .add{flex:none;background:var(--acc);color:var(--acc-ink);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700}
#chatAlvos .add:disabled{opacity:.4}
#chatAlvos .lista{display:flex;flex-direction:column;gap:4px;max-height:150px;overflow-y:auto}
#chatAlvos .item{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--s2);border:1px solid var(--line);border-radius:8px}
#chatAlvos .item .txt{font-weight:600;word-break:break-all}
#chatAlvos .item .esq{color:var(--dim);font-size:10.5px;margin-left:auto;font-family:var(--mono);flex:none}
#chatAlvos .item .del{flex:none;color:var(--bad);font-size:14px;line-height:1;padding:0 3px}
#chatAlvos .fixo{color:var(--dim);font-size:11px;margin-top:7px}
#chatAlvos .msg{margin-top:7px;font-size:11.5px;min-height:14px}
#chatAlvos .msg.ok{color:#86EFAC}
#chatAlvos .msg.erro{color:#FCA5A5}

@media(max-width:900px){
  #chatBox{width:100% !important;flex:1 1 auto;border-left:0;border-top:1px solid var(--line);min-height:180px}
  .chatAba{right:10px;bottom:74px}   /* acima da barra de ações */
}