/* Chat de suporte ao vivo (2026-11-12). Sobreposição carregada em todas as páginas do site; o JS (suporte-20261112.js)
   monta tudo dentro de .sup-raiz e define --sup-cor com a cor do painel (padrão = cor primária do site).
   Ideia: o balão não é só um botão, é a "última linha" do atendimento: quando chega resposta com o chat fechado, a prévia
   da mensagem sai do balão como um bilhete (.sup-previa). O resto é quieto: carvão do site, uma cor só (a do site), Montserrat. */
.sup-raiz { --sup-cor: #126e51; --sup-tinta: #fff; --sup-fundo: #15181c; --sup-papel: #1d2126; --sup-papel-2: #262c32; --sup-texto: #f2f4f6; --sup-mudo: #9aa3ab;
  --sup-linha: rgba(255, 255, 255, .09); --sup-ok: #49d17d; --sup-base: 20px; --sup-lado: 20px;
  position: fixed; z-index: 2147482000; inset: auto; right: var(--sup-lado); bottom: var(--sup-base); font: 500 14px/1.45 var(--fonte, Montserrat), system-ui, sans-serif; color: var(--sup-texto);
  -webkit-font-smoothing: antialiased; text-align: left; letter-spacing: 0; box-sizing: border-box; }
.sup-raiz *, .sup-raiz *::before, .sup-raiz *::after { box-sizing: border-box; }
.sup-raiz.sup-esq { right: auto; left: var(--sup-lado); }
.sup-raiz.sup-oculto { display: none; }
.sup-raiz button, .sup-raiz input, .sup-raiz textarea { font: inherit; color: inherit; }
.sup-raiz button { cursor: pointer; border: 0; background: none; padding: 0; }
.sup-raiz :focus-visible { outline: 2px solid var(--sup-tinta); outline-offset: 2px; }
.sup-raiz .sup-vis-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- balão (launcher) ---------- */
.sup-balao { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-left: auto; border-radius: 50%; background: var(--sup-cor); color: var(--sup-tinta);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s; }
.sup-esq .sup-balao { margin-left: 0; margin-right: auto; }
.sup-balao:hover { transform: translateY(-2px); }
.sup-balao:active { transform: scale(.96); }
.sup-balao svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s, transform .18s; }
.sup-balao .sup-ic-x { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
.sup-raiz.sup-aberto .sup-balao .sup-ic-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.sup-raiz.sup-aberto .sup-balao .sup-ic-x { opacity: 1; transform: none; }
.sup-contador { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b3b; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--sup-fundo); display: none; }
.sup-contador.sup-on { display: block; animation: supPulo .35s cubic-bezier(.2, .8, .2, 1); }
.sup-ponto { position: absolute; left: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--sup-ok); box-shadow: 0 0 0 2px var(--sup-fundo); display: none; }
.sup-ponto.sup-on { display: block; }
@keyframes supPulo { from { transform: scale(.4); } 60% { transform: scale(1.15); } to { transform: none; } }

/* prévia da última resposta, saindo do balão quando o chat está fechado */
.sup-previa { position: absolute; right: 66px; bottom: 2px; max-width: min(300px, calc(100vw - 110px)); padding: 10px 14px 10px 12px; border-radius: 16px 16px 4px 16px; background: var(--sup-papel); color: var(--sup-texto);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px var(--sup-linha); text-align: left; display: none; transform-origin: right bottom; }
.sup-esq .sup-previa { right: auto; left: 66px; border-radius: 16px 16px 16px 4px; transform-origin: left bottom; }
.sup-previa.sup-on { display: block; animation: supSair .28s cubic-bezier(.2, .8, .2, 1); }
.sup-previa b { display: block; font-size: 12px; color: var(--sup-mudo); font-weight: 600; margin-bottom: 2px; }
.sup-previa span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
.sup-previa .sup-previa-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--sup-papel-2); color: var(--sup-mudo); font-size: 14px; line-height: 22px; text-align: center; box-shadow: 0 0 0 1px var(--sup-linha); }
@keyframes supSair { from { opacity: 0; transform: translateX(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- janela ---------- */
.sup-janela { position: absolute; right: 0; bottom: 70px; width: 372px; height: min(640px, calc(100vh - var(--sup-base) - 90px)); height: min(640px, calc(100dvh - var(--sup-base) - 90px)); display: none; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--sup-fundo); box-shadow: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px var(--sup-linha); transform-origin: right bottom; }
.sup-esq .sup-janela { right: auto; left: 0; transform-origin: left bottom; }
.sup-raiz.sup-aberto .sup-janela { display: flex; animation: supAbrir .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes supAbrir { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.sup-topo { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--sup-cor); color: var(--sup-tinta); }
.sup-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-weight: 700; font-size: 16px; position: relative; }
.sup-avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sup-avatar .sup-ponto { left: auto; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--sup-cor); }
.sup-topo-txt { flex: 1; min-width: 0; }
.sup-titulo { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-estado { margin: 2px 0 0; font-size: 12px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-topo-acoes { display: flex; gap: 2px; }
.sup-topo-acoes button { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: inherit; opacity: .9; }
.sup-topo-acoes button:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.sup-topo-acoes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sup-menu { position: absolute; top: 60px; right: 12px; z-index: 2; min-width: 200px; padding: 6px; border-radius: 12px; background: var(--sup-papel-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 1px var(--sup-linha); display: none; }
.sup-menu.sup-on { display: block; }
.sup-menu button { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; font-size: 13.5px; }
.sup-menu button:hover { background: rgba(255, 255, 255, .08); }
.sup-menu button.sup-perigo { color: #ff8585; }

.sup-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
@media (prefers-reduced-motion: reduce) { .sup-corpo { scroll-behavior: auto; } }

/* boas-vindas / formulário inicial */
.sup-inicio { display: flex; flex-direction: column; gap: 14px; }
.sup-boas { padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--sup-papel-2); font-size: 14px; line-height: 1.5; }
.sup-boas.sup-off { border-left: 3px solid #f0b429; }
.sup-campo { display: flex; flex-direction: column; gap: 5px; }
.sup-campo label { font-size: 12px; color: var(--sup-mudo); font-weight: 600; }
.sup-campo input, .sup-campo textarea { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--sup-linha); background: var(--sup-papel); color: var(--sup-texto); font-size: 14px; }
.sup-campo input::placeholder, .sup-campo textarea::placeholder, .sup-escreve textarea::placeholder { color: var(--sup-mudo); opacity: .8; }
.sup-campo input:focus, .sup-campo textarea:focus, .sup-escreve textarea:focus { outline: none; border-color: var(--sup-cor); box-shadow: 0 0 0 3px rgb(var(--sup-cor-rgb, 18 110 81) / .25); }
.sup-campo textarea { min-height: 88px; resize: vertical; }
.sup-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--sup-cor); color: var(--sup-tinta); font-weight: 700; font-size: 14px; transition: filter .15s, transform .12s; }
.sup-botao:hover { filter: brightness(1.08); }
.sup-botao:active { transform: scale(.98); }
.sup-botao[disabled] { opacity: .55; cursor: default; filter: none; }
.sup-botao.sup-quieto { background: var(--sup-papel-2); color: var(--sup-texto); }
.sup-erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 90, 90, .12); color: #ff9d9d; font-size: 13px; }
.sup-jogador { font-size: 12.5px; color: var(--sup-mudo); }
.sup-jogador b { color: var(--sup-texto); font-weight: 600; }

/* mensagens */
.sup-lista { display: flex; flex-direction: column; gap: 2px; }
.sup-dia { align-self: center; margin: 10px 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--sup-papel); color: var(--sup-mudo); font-size: 11px; font-weight: 600; }
.sup-msg { display: flex; flex-direction: column; max-width: 84%; }
.sup-msg.sup-vis { align-self: flex-end; align-items: flex-end; }
.sup-msg.sup-adm { align-self: flex-start; align-items: flex-start; }
.sup-msg.sup-sis { align-self: center; max-width: 92%; margin: 8px 0; text-align: center; color: var(--sup-mudo); font-size: 12px; }
.sup-bolha { padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-vis .sup-bolha { background: var(--sup-cor); color: var(--sup-tinta); border-bottom-right-radius: 5px; }
.sup-adm .sup-bolha { background: var(--sup-papel-2); color: var(--sup-texto); border-bottom-left-radius: 5px; }
.sup-msg + .sup-msg.sup-vis.sup-seq .sup-bolha { border-top-right-radius: 5px; }
.sup-msg + .sup-msg.sup-adm.sup-seq .sup-bolha { border-top-left-radius: 5px; }
.sup-msg.sup-seq { margin-top: 0; }
.sup-msg:not(.sup-seq) { margin-top: 10px; }
.sup-bolha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sup-adm .sup-bolha a { color: #8fd9bd; }
.sup-quem { margin: 0 4px 3px; font-size: 11.5px; color: var(--sup-mudo); font-weight: 600; }
.sup-hora { margin: 3px 4px 0; font-size: 11px; color: var(--sup-mudo); display: none; }
.sup-msg.sup-fim .sup-hora { display: block; }
.sup-msg.sup-pendente .sup-bolha { opacity: .7; }
.sup-msg.sup-falhou .sup-bolha { outline: 1px solid #ff8585; }
.sup-msg.sup-falhou .sup-hora { display: block; color: #ff9d9d; }
.sup-digitando { display: none; align-items: center; gap: 4px; align-self: flex-start; margin-top: 10px; padding: 11px 14px; border-radius: 16px 16px 16px 5px; background: var(--sup-papel-2); }
.sup-digitando.sup-on { display: inline-flex; }
.sup-digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--sup-mudo); animation: supDig 1.2s infinite ease-in-out; }
.sup-digitando i:nth-child(2) { animation-delay: .15s; } .sup-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes supDig { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* avaliação / encerrada */
.sup-fecho { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--sup-papel); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.sup-fecho p { margin: 0; font-size: 13.5px; }
.sup-estrelas { display: flex; justify-content: center; gap: 6px; }
.sup-estrelas button { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--sup-mudo); transition: transform .12s, color .12s; }
.sup-estrelas button svg { width: 26px; height: 26px; fill: currentColor; }
.sup-estrelas button:hover, .sup-estrelas button.sup-on { color: #f5c542; transform: scale(1.1); }
.sup-fecho textarea { width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sup-linha); background: var(--sup-fundo); color: var(--sup-texto); font-size: 13.5px; resize: vertical; }
.sup-fecho .sup-obrigado { color: var(--sup-ok); font-weight: 600; }

/* compositor */
.sup-escreve { display: none; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--sup-linha); background: var(--sup-fundo); }
.sup-escreve.sup-on { display: flex; }
.sup-escreve textarea { flex: 1; min-height: 44px; max-height: 132px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sup-linha); background: var(--sup-papel); color: var(--sup-texto); font-size: 14px; line-height: 1.4; resize: none; overflow-y: auto; }
.sup-enviar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sup-cor); color: var(--sup-tinta); transition: transform .12s, opacity .15s; }
.sup-enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sup-enviar[disabled] { opacity: .45; cursor: default; }
.sup-enviar:not([disabled]):active { transform: scale(.94); }
.sup-dica { padding: 0 14px 10px; margin: -4px 0 0; font-size: 11px; color: var(--sup-mudo); text-align: center; }
.sup-pe { padding: 6px 12px 10px; text-align: center; font-size: 11px; color: var(--sup-mudo); }
.sup-pe button { color: var(--sup-mudo); text-decoration: underline; text-underline-offset: 2px; font-size: 11px; }

/* ---------- celular: tela inteira ---------- */
@media (max-width: 600px) {
  .sup-janela { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; }
  .sup-raiz.sup-aberto .sup-balao, .sup-raiz.sup-aberto .sup-previa { display: none; }
  .sup-topo { padding-top: max(14px, env(safe-area-inset-top)); }
  .sup-escreve { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sup-balao { width: 54px; height: 54px; }
  /* 16 px: o iPhone não dá zoom ao focar o campo */
  .sup-campo input, .sup-campo textarea, .sup-escreve textarea, .sup-fecho textarea { font-size: 16px; }
}
html.sup-travado, html.sup-travado body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .sup-raiz *, .sup-raiz *::before, .sup-raiz *::after { animation: none !important; transition: none !important; }
}