/* =============================================================================
   TO PRO JOGO - Chat da live (chat-live.js)
   =============================================================================
   Fora da tela cheia: um cartao abaixo do player, nas cores do tema (claro,
   o padrao, e escuro), pelas variaveis do app.css.
   Na tela cheia: sobreposto ao video, translucido e com letra branca nos dois
   temas (o fundo e o video), no lado ESQUERDO, entre o canto do selo AO VIVO
   (em cima, a esquerda) e a barra do player (embaixo). O botao de lance
   (direita, embaixo) e o de tela cheia (direita, em cima) ficam livres. As
   margens seguras (--tc-sa-*) sao as do aovivo.css, que ja trocam de lado
   quando o quadro gira no iPhone.
   ========================================================================== */

.cl{ margin-top:12px; border:1px solid var(--line); border-radius:16px; background:var(--ink-800);
  overflow:hidden; display:flex; flex-direction:column; min-width:0; text-align:left; }
.cl[hidden]{ display:none !important; }
.cl-topo{ display:flex; align-items:baseline; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); }
.cl-topo b{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; color:var(--txt); }
.cl-sub{ font-size:11px; color:var(--dim); }

.cl-caixa{ position:relative; min-height:0; }
.cl-lista{ height:clamp(170px, 30vh, 300px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.cl-msg{ display:flex; gap:8px; align-items:flex-start; padding:5px 6px; border-radius:10px; font-size:13px; line-height:1.4; color:var(--txt); }
.cl-msg.meu{ background:rgba(var(--brand-rgb,255,122,46),.09); }
.cl-av{ flex:none; padding-top:1px; }
.cl-av .av{ width:24px; height:24px; font-size:9px; }
.cl-corpo{ min-width:0; flex:1; overflow-wrap:anywhere; word-break:break-word; }
.cl-hora{ font-size:10.5px; color:var(--dim); margin-right:6px; font-variant-numeric:tabular-nums; }
.cl-quem{ font-weight:700; color:var(--dim); margin-right:4px; }
.cl-quem.dono{ color:var(--brand-txt, var(--brand)); }
.cl-arroba{ font-size:10.5px; color:var(--dim); opacity:.8; margin-right:6px; }
.cl-txt{ color:var(--txt); }
.cl-mod{ display:inline-flex; gap:4px; margin-left:6px; vertical-align:baseline; }
.cl-acao{ border:0; background:none; padding:1px 4px; margin:0; font:inherit; font-size:11px; font-weight:700; color:var(--dim);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; border-radius:6px; }
.cl-acao:hover{ color:var(--txt); }
.cl-acao.confirmar{ color:var(--live); }
.cl-acao:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.cl-vazio{ margin:auto; padding:16px; font-size:12px; color:var(--dim); text-align:center; }

.cl-novas{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2; border:0; border-radius:999px;
  padding:8px 14px; background:var(--btn-laranja, #C2410C); color:#FFFFFF; font:inherit; font-size:12px; font-weight:700;
  cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.28); white-space:nowrap; }
.cl-novas[hidden]{ display:none; }

.cl-pe{ border-top:1px solid var(--line); padding:10px 12px; }
.cl-form{ display:flex; gap:8px; align-items:center; margin:0; }
.cl-rotulo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.cl-texto{ flex:1; min-width:0; height:42px; border-radius:999px; border:1px solid var(--line); background:var(--ink-700);
  color:var(--txt); padding:0 14px; font:inherit; font-size:16px; }
.cl-texto::placeholder{ color:var(--dim); opacity:1; }
.cl-texto:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.cl .btn.cl-enviar, .cl .cl-entrar .btn{ width:auto; flex:none; margin:0; }
.cl-aviso{ margin:6px 6px 0; font-size:11px; color:var(--dim); }
.cl-aviso:empty{ display:none; }
.cl-aviso.erro{ color:var(--live); font-weight:600; }
.cl-estado{ margin:0; font-size:12.5px; line-height:1.45; color:var(--dim); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cl-entrar span{ font-weight:700; color:var(--txt); }

/* Na pagina inicial, o chat vem logo abaixo do player, na largura do cartao
   (perto do video: no celular, rolar ate o chat nao tira o player da tela,
   e o player que sai da tela e desmontado pelo home.js). No computador, o
   cartao unico e uma grade de duas colunas (player e informacoes): o chat
   vai para a segunda linha, de ponta a ponta, e as informacoes ficam ao
   lado do player. */
.hp-vivo > .cl{ grid-column:1 / -1; grid-row:2; margin:12px 14px 0; }
.hp-vivo:not(.hp-vivo-destaque) > .cl{ margin-bottom:0; }
@media (min-width:760px){ .hp-vivo-destaque > .cl{ margin:0 18px 18px; } }

/* ---- Tela cheia: sobreposto ao video ------------------------------------- */
.aovivo-tela > .cl.cl-sobre{
  position:absolute; z-index:62; margin:0;
  left:calc(12px + var(--tc-sa-l, 0px)); top:calc(64px + var(--tc-sa-t, 0px)); bottom:calc(60px + var(--tc-sa-b, 0px));
  width:min(340px, 42%);
  background:rgba(12,10,9,.55); border:1px solid rgba(255,255,255,.14); border-radius:16px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
}
.aovivo-tela > .cl.cl-sobre.cl-recolhido{ display:none; }
.cl-sobre .cl-topo{ display:none; }
.cl-sobre .cl-caixa{ flex:1; display:flex; }
.cl-sobre .cl-lista{ height:auto; flex:1; min-height:0; }
.cl-sobre .cl-msg, .cl-sobre .cl-txt{ color:#FFFFFF; text-shadow:0 1px 2px rgba(0,0,0,.65); }
.cl-sobre .cl-msg.meu{ background:rgba(255,255,255,.1); }
.cl-sobre .cl-hora, .cl-sobre .cl-quem, .cl-sobre .cl-arroba, .cl-sobre .cl-acao, .cl-sobre .cl-vazio{ color:rgba(255,255,255,.78); }
.cl-sobre .cl-quem.dono{ color:#FFB067; }
.cl-sobre .cl-acao.confirmar{ color:#FF9295; }
.cl-sobre .cl-pe{ border-top-color:rgba(255,255,255,.14); padding:8px; }
.cl-sobre .cl-texto{ height:38px; background:rgba(0,0,0,.38); border-color:rgba(255,255,255,.22); color:#FFFFFF; }
.cl-sobre .cl-texto::placeholder{ color:rgba(255,255,255,.66); }
.cl-sobre .cl-estado, .cl-sobre .cl-aviso{ color:rgba(255,255,255,.86); }
.cl-sobre .cl-entrar span{ color:#FFFFFF; }
.cl-sobre .cl-aviso.erro{ color:#FFB4B6; }

/* O botao que mostra e esconde o chat: no dock (03/10/2026), entre a chave do
   microfone e a tela cheia, 44 x 44 so com o icone (o nome vem do
   aria-label), 6 px depois do .tc-botao (12 + 44 + 6 = 62). */
.cl-alternar{
  position:absolute; z-index:64; top:calc(12px + var(--tc-sa-t, 0px)); right:calc(62px + var(--tc-sa-r, 0px));
  width:44px; height:44px; padding:0; border:0; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:0; cursor:pointer;
  color:#FFFFFF; background:rgba(12,10,9,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font:inherit; font-size:13px; font-weight:700;
  -webkit-tap-highlight-color:transparent;
}
.cl-alternar .cl-alt-txt{ display:none; }
.aovivo-tela.tem-dock > .cl-alternar:not(.on){ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.cl-alternar.on{ background:var(--btn-laranja, #C2410C); box-shadow:none; }
.cl-alternar:focus-visible{ outline:3px solid #FFFFFF; outline-offset:2px; }
.cl-alternar svg{ flex:none; }

/* Tela baixa (celular deitado): menos folga em cima e embaixo. */
@media (max-height:420px){
  .aovivo-tela > .cl.cl-sobre{ top:calc(62px + var(--tc-sa-t, 0px)); bottom:calc(52px + var(--tc-sa-b, 0px)); }
  .cl-sobre .cl-msg{ font-size:12.5px; padding:3px 5px; }
}