/* /live: chat combinado (Twitch + YouTube + Kick), só leitura. Tokens do site (style.css, pm_home.css). Mensagens só por textContent. */
.lp-chat{position:relative}
body.pm .lp-chat{border:0;border-radius:0;overflow:visible}
.cx{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hair2);background:linear-gradient(180deg,rgba(17,22,34,.72),rgba(10,13,20,.55));overflow:hidden}
.cxh{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:48px;box-sizing:border-box;border-bottom:1px solid var(--hair)}
.cxh h2{margin:0;font:800 italic 16px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.cx .ex{font:700 9px/1 Inter,sans-serif;letter-spacing:.1em;color:var(--warm,#f2bdb5);border:1px solid rgba(242,189,181,.35);border-radius:999px;padding:3px 6px;text-transform:uppercase;white-space:nowrap}
.cxl{-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px);flex:1;min-height:0;list-style:none;margin:0;padding:8px 14px 10px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--hair2) transparent;font-size:13px;line-height:1.42;color:var(--text)}
.cxl>li:first-child{margin-top:auto}  /* mensagens encostadas embaixo, com rolagem para cima */
.cxl li{overflow-wrap:anywhere;word-break:normal}
.cxl .pi{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:6px;opacity:.85}
.cxl b{font-weight:650;color:var(--ink);margin-right:6px}
.cxl .who{white-space:nowrap}  /* ícone + nome nunca quebram; só o texto (.mt) quebra, começando na mesma linha */
.cxl .mt{overflow-wrap:anywhere}
.cxl .bt{display:inline-block;margin-right:5px;padding:0 4px;border-radius:4px;font:700 9.5px/15px "Inter",system-ui,sans-serif;letter-spacing:.04em;vertical-align:1px;color:var(--faint);background:rgba(133,144,170,.14);box-shadow:inset 0 0 0 1px rgba(133,144,170,.22)}
.cxl li.bot b{color:var(--faint)}
/* eventos (sub, resub, presente, Super Chat, membro): linha de sistema, sem roxo.
   Estilo B "mais visível" (padrão): faixa dourada suave de 3px + fundo um pouco mais claro, para não sumir no meio da Twitch.
   Estilo A "discreto" (o primeiro): <div id="cx" data-ev="a"> volta para ele (faixa cinza 2px, fundo .08). */
.cxl li.ev{color:#a9b2c7;font-size:12.5px;padding:5px 9px 5px 10px;border-radius:8px;background:rgba(150,160,185,.13);box-shadow:inset 3px 0 0 rgba(232,192,106,.78)}
.cxl li.ev b{color:var(--ink);margin-right:5px}.cxl li.ev b::after{content:none}
.cxl li.ev .es{margin-right:5px;color:#e8c06a;font-size:11px;vertical-align:1px}
.cxl li.ev .ec{display:block;margin-top:2px;color:var(--text);font-size:13px;overflow-wrap:anywhere}
.cx[data-ev="a"] .cxl li.ev{color:var(--faint);padding:5px 9px;background:rgba(133,144,170,.08);box-shadow:inset 2px 0 0 rgba(133,144,170,.45)}
.cx[data-ev="a"] .cxl li.ev .es{color:rgba(232,192,106,.8)}
/* chegada (só alertas novos): sobe 6px + aparece em 360ms; a faixa acende em dourado e o fundo dá um brilho leve que assenta em ~2,2s */
.cxl li.ev.new{animation:gvEvIn .36s cubic-bezier(.2,.75,.25,1) both,gvEvGlow 2.2s ease-out backwards}  /* glow sem "forwards": no fim volta ao estilo de repouso (vale p/ tema claro e estilo A) */
@keyframes gvEvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gvEvGlow{0%{background:rgba(232,192,106,.22);box-shadow:inset 4px 0 0 #f0cd7d,0 0 0 1px rgba(232,192,106,.35)}
  35%{background:rgba(232,192,106,.12);box-shadow:inset 3px 0 0 #e8c06a,0 0 0 1px rgba(232,192,106,.16)}
  100%{background:rgba(150,160,185,.13);box-shadow:inset 3px 0 0 rgba(232,192,106,.78),0 0 0 1px rgba(232,192,106,0)}}
.cx[data-ev="a"] .cxl li.ev.new{animation-name:gvEvIn,gvEvGlowA}
@keyframes gvEvGlowA{0%{background:rgba(232,192,106,.14);box-shadow:inset 2px 0 0 rgba(232,192,106,.8)}100%{background:rgba(133,144,170,.08);box-shadow:inset 2px 0 0 rgba(133,144,170,.45)}}
@media (prefers-reduced-motion:reduce){.cxl li.ev.new{animation:none}}
[data-theme="light"] .cxl li.ev{color:#4a5468;background:rgba(40,52,78,.07);box-shadow:inset 3px 0 0 #b8892e}
[data-theme="light"] .cxl li.ev .es{color:#a87a1f}
/* moderador (só Twitch): badge oficial da Twitch, 18 px como no chat da Twitch, com o cantinho arredondado dela */
.cxl .md{display:inline-block;width:18px;height:18px;margin-right:5px;border-radius:3px;vertical-align:-4px}
.cxl b::after{content:":";color:var(--faint);font-weight:400}
.cxl li.sys{color:var(--faint);font-size:12px;text-align:center;padding:0 8px 2px}
.cxf{position:relative;padding:10px 10px 12px;border-top:1px solid var(--hair)}
.cbtn{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;background:var(--ink);color:#0a0d14;font:700 13.5px/1 Inter,sans-serif;cursor:pointer}
.cbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.cbtn.on{background:rgba(121,174,240,.12);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(121,174,240,.4)}
.pick{position:absolute;left:10px;right:10px;bottom:62px;padding:8px;border-radius:14px;background:#111622;box-shadow:inset 0 0 0 1px var(--hair2),0 20px 40px -18px rgba(0,0,0,.85);z-index:2}
.pick[hidden]{display:none}
.pick p{margin:4px 8px 8px;font-size:12px;color:var(--faint)}
.cx img[src*="kick"]{filter:saturate(.55) brightness(.92)}  /* cores das plataformas discretas */
@media (max-width:900px){
 .lp-chat{padding:4px 16px 0}
 .cx{position:relative;inset:auto;height:460px}
 .cxh{min-height:46px}
  .cxl{font-size:14px}
 .cbtn{height:46px}
 .pick{bottom:68px}
}
/* Comentar: chat oficial da plataforma no lugar do combinado (barra fina + embed), com o mesmo cartão de consentimento do player */
.cx.is-emb>.cxh,.cx.is-emb>.cxl,.cx.is-emb>.cxf{display:none}
.cxe{flex:1;min-height:0;display:flex;flex-direction:column}.cxe[hidden]{display:none}
.cxb{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 6px 6px 12px;border-bottom:1px solid var(--hair)}
.cxb img{width:16px;height:16px;flex:none}.cx .cxb img[src*="kick"]{filter:none}
.cxb b{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cxback{margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px 0 6px;border:0;border-radius:999px;background:transparent;color:var(--mist);font:600 12px/1 Inter,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair2)}
.cxback:hover{color:var(--ink)}.cxback svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.cxback:focus-visible,.cxc .cg-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cxfr{position:relative;flex:1;min-height:0;background:#0e0e10}.cxfr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;color-scheme:light}
/* color-scheme:light = o mesmo do documento do YouTube/Twitch ("normal"). Herdando o "dark" da página, o Chrome pinta o fundo do iframe de BRANCO
   (esquemas diferentes) e o chat do YouTube em tema escuro (texto branco, fundo transparente) ficava sem texto. Com isso o fundo #0e0e10 aparece. */
.cxc{flex:1;display:grid;place-content:center;justify-items:center;gap:12px;padding:20px 18px;text-align:center}
.cxc .cg-go{font-size:14px;min-height:44px;padding:8px 18px}  /* mesmo botão do cartão do player (live.css) */
.cxc .cg-rem{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mist);cursor:pointer}
.cxc .cg-note{margin:0;max-width:300px;font-size:11.5px;line-height:1.45;color:var(--faint)}.cxc .cg-note a{color:var(--mist);text-decoration:underline;text-underline-offset:2px}
.pick button{width:100%;display:flex;align-items:center;gap:11px;min-height:48px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 13.5px/1 Inter,sans-serif;text-align:left;cursor:pointer}
.pick button:hover{background:rgba(163,174,198,.07)}.pick button+button{box-shadow:0 -1px 0 var(--hair)}.pick button img{width:18px;height:18px}
.pick button small{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--faint);white-space:nowrap}
.pick button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Ícone "Abrir chat em janela" (só computador: no celular janela pequena não faz sentido) */
.cxpop{margin-left:auto;display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--mist);cursor:pointer}
.cxpop:hover{color:var(--ink);background:rgba(163,174,198,.08)}.cxpop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cxpop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none),(pointer:coarse){.cxpop{display:none}}  /* toque = celular/tablet */
/* /live/chat (janela): só o chat, ocupando a janela toda */
body.popchat{margin:0;min-height:100vh;overflow:hidden}
body.popchat .lp-chat{position:fixed;inset:0;padding:0;margin:0}
body.popchat .cx{position:absolute;inset:0;height:auto;border-radius:0;box-shadow:none}
body.popchat .cxl{font-size:13.5px}

/* dica ao passar o mouse (estilo Twitch): balão claro, texto escuro, setinha apontando para o ícone. Um elemento só, position:fixed. */
.gvtip{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:0;visibility:hidden;padding:3px 7px;border-radius:5px;background:#f3f6fb;color:#0b1220;
  font:600 12.5px/1.35 "Inter",system-ui,sans-serif;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 0 1px rgba(11,18,32,.08)}
.gvtip.on{opacity:1;visibility:visible}
.gvtip::after{content:"";position:absolute;left:var(--ax,50%);top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#f3f6fb}
.gvtip.dn::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#f3f6fb}
.cxl [data-tip]{cursor:default}
/* Emotes como imagem (Twitch, Kick, YouTube, 7TV/BTTV/FFZ): altura ~ da linha, alinhados ao texto, sem aumentar o espaço entre linhas */
.cxl img.em{display:inline-block;height:1.75em;width:auto;max-width:7em;vertical-align:middle;margin:-.32em 1px -.28em;object-fit:contain}
.cxl li.ev img.em{height:1.6em}
.cxl .emz{position:relative;display:inline-block;vertical-align:middle;margin:-.32em 1px -.28em;line-height:0}
.cxl .emz>img.em{margin:0;vertical-align:top}
.cxl .emz>img.em.zw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;pointer-events:auto}