/* Siteflux — balão do chat (OdinChat).
   As cores do ícone vêm de variáveis e mudam com o fundo atrás do botão (siteflux-chat.js grava html[data-chat-tema]):
   lima (o fundo da página): anel verde-escuro, balão branco, pontos azuis
   escuro (blocos verde-escuro, intro): anel lima, balão branco, pontos verde-escuros
   claro (blocos azul, bege e branco): anel verde-escuro, balão lima, pontos verde-escuros
   O fundo do botão leva a cor do anel: o anel é um pouco mais largo que alto (256 × 244) e a fresta de cima e de baixo não aparece
   como borda. O "html" na frente das regras vence as do widget, que entram no <head> depois desta folha. */
:root {
  --chat-anel: #042b20; --chat-anel2: #021a13; --chat-balao: #ffffff; --chat-pontos: #3cbcd5; --chat-x: #ffffff;
}
html[data-chat-tema="escuro"] { --chat-anel: #ccd961; --chat-anel2: #9aa63a; --chat-balao: #ffffff; --chat-pontos: #042b20; --chat-x: #042b20; }
html[data-chat-tema="claro"] { --chat-anel: #042b20; --chat-anel2: #021a13; --chat-balao: #ccd961; --chat-pontos: #042b20; --chat-x: #ffffff; }

html #my-widget-button { background: var(--chat-anel); transition: background-color 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease; }
html #my-widget-button .sf-chat-icone { display: block; width: 100%; height: 100%; }
.sf-chat-anel { fill: var(--chat-anel); }
.sf-chat-anel2 { fill: var(--chat-anel2); }
.sf-chat-balao { fill: var(--chat-balao); }
.sf-chat-pontos { fill: var(--chat-pontos); }
.sf-chat-anel, .sf-chat-anel2, .sf-chat-balao, .sf-chat-pontos { transition: fill 0.5s ease; }
/* aberto, o botão vira o X do widget: o traço acompanha o tema */
html #my-widget-button[data-mode="close"] svg path { stroke: var(--chat-x); transition: stroke 0.5s ease; }

/* fora de cena durante a intro: o widget usa z-index 999999 e ficaria por cima dela */
#my-widget-container { transition: opacity 0.4s ease, visibility 0s; }
html.intro-active #my-widget-container { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }

/* o widget marca a janela aberta com a classe .open, que nesta página é a das seções (siteflux.css: recuo interno grande): sem
   isto o quadro da conversa ficava espremido num quadradinho no meio da janela */
html #my-widget-window { padding: 0; }

/* janela da conversa: o widget a abre com 494 × 676 px fixos e 100 px embaixo para o botão, sem limite de altura — numa tela de
   notebook o topo saía da tela. Aqui ela fica com 400 × 600 e nunca passa da área visível; a sombra roxa do widget vira verde.
   Em tela baixa (celular deitado) ela abre em tela cheia, como o próprio widget faz até 480 px de largura. */
@media (min-width: 481px) {
  html #my-widget-window { width: 400px; height: 600px; max-width: calc(100vw - 40px); max-height: calc(100vh - 116px); box-shadow: 0 14px 44px rgba(4, 43, 32, 0.34), 0 4px 16px rgba(0, 0, 0, 0.12); }
  @supports (height: 100svh) { html #my-widget-window { max-height: calc(100svh - 116px); } }
}
@media (min-width: 481px) and (max-height: 520px) {
  html #my-widget-window { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
}
/* com a conversa em tela cheia ela já tem o seu × no alto: o botão flutuante, que vira um X, cobria o microfone do campo */
@media (max-width: 480px), (max-height: 520px) { #my-widget-container:has(#my-widget-window.open) #my-widget-button { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  html #my-widget-button, .sf-chat-anel, .sf-chat-anel2, .sf-chat-balao, .sf-chat-pontos { transition: none; }
}