/* chatbot.css
 * -----------------------------------------------------------------------
 * Usa a identidade visual informada:
 *   Roxo:        #681F60
 *   Verde-água:  #97D3BE
 *   Rosa:        #9C2F5C
 *   Fundo claro: #F3E8F0
 *   Roxo escuro: #3A1233
 */

/* -----------------------------------------------------------------------
 * Botão flutuante + painel
 * -----------------------------------------------------------------------
 * .chatbot-flutuante  → contêiner fixo no canto da tela (não rola com a
 *                        página); some não, ele é sempre visível.
 * .chatbot-launcher   → o círculo clicável.
 * .chatbot-painel     → a "janela" de conversa; começa com [hidden] no
 *                        HTML, então o estado inicial é sempre fechado,
 *                        mesmo sem depender do JavaScript já ter rodado.
 * ------------------------------------------------------------------- */

.chatbot-flutuante {
  --cor-roxo: #681f60;
  --cor-roxo-escuro: #3a1233;
  --cor-rosa: #9c2f5c;
  --cor-verde-agua: #97d3be;
  --cor-fundo: #f3e8f0;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999; /* acima do conteúdo normal do site */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.chatbot-flutuante * {
  box-sizing: border-box;
}

.chatbot-launcher {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--cor-roxo);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(58, 18, 51, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.chatbot-launcher:hover,
.chatbot-launcher:focus-visible {
  background: var(--cor-rosa);
  transform: scale(1.05);
  outline: none;
}

.chatbot-launcher:focus-visible {
  box-shadow: 0 0 0 4px var(--cor-verde-agua);
}

.chatbot-launcher-icone {
  width: 26px;
  height: 26px;
}

/* Por padrão mostra o ícone de balão de conversa e esconde o "X". */
.chatbot-launcher-icone--fechar {
  display: none;
}

/* Quando o painel está aberto, o JS adiciona esta classe ao botão,
   trocando qual ícone aparece — o mesmo botão vira o "fechar". */
.chatbot-launcher--aberto .chatbot-launcher-icone--chat {
  display: none;
}
.chatbot-launcher--aberto .chatbot-launcher-icone--fechar {
  display: block;
}

.chatbot-widget,
.chatbot-painel {
  --cor-roxo: #681f60;
  --cor-roxo-escuro: #3a1233;
  --cor-rosa: #9c2f5c;
  --cor-verde-agua: #97d3be;
  --cor-fundo: #f3e8f0;

  box-sizing: border-box;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: min(560px, 75vh);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--cor-fundo);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(58, 18, 51, 0.25);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cor-roxo-escuro);
  overflow: hidden;
  /* Pequena animação de entrada, puramente estética. */
  animation: chatbot-painel-entrada 0.15s ease-out;
}

@keyframes chatbot-painel-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* [hidden] já basta para ocultar (display:none nativo do HTML), mas
   reforçamos aqui para o caso de algum CSS do tema do WordPress dar
   "display" a mais peso do que o atributo. */
.chatbot-painel[hidden] {
  display: none !important;
}

.chatbot-widget *,
.chatbot-painel * {
  box-sizing: border-box;
}

.chatbot-header {
  background: var(--cor-roxo);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0; /* nunca encolhe, mesmo com o corpo rolando */
}

.chatbot-header h2 {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}

.chatbot-header-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
}

.chatbot-header-acoes button {
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.85;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
}

.chatbot-header-acoes button:hover,
.chatbot-header-acoes button:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

.chatbot-corpo {
  padding: 20px;
  min-height: 160px;
  background: var(--cor-fundo);
  overflow-y: auto; /* o painel tem altura máxima; o conteúdo rola aqui */
  flex: 1;
}

.chatbot-pergunta {
  margin: 0 0 16px 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.chatbot-opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot-btn {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--cor-roxo);
  background: #fff;
  color: var(--cor-roxo);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chatbot-btn:hover,
.chatbot-btn:focus-visible {
  background: var(--cor-roxo);
  color: #fff;
  outline: none;
}

.chatbot-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--cor-verde-agua);
}

.chatbot-resposta {
  background: #fff;
  border-left: 5px solid var(--cor-verde-agua);
  border-radius: 8px;
  padding: 16px;
}

.chatbot-resposta h3 {
  margin: 0 0 8px 0;
  color: var(--cor-roxo);
  font-size: 1.05rem;
}

.chatbot-resposta p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  font-size: 0.95rem;
}

.chatbot-resposta--atencao {
  border-left-color: var(--cor-rosa);
}

.chatbot-resposta--urgente {
  border-left-color: var(--cor-roxo-escuro);
  background: #fdf2f6;
}

.chatbot-aviso {
  font-size: 0.82rem;
  color: #555;
  font-style: italic;
}

.chatbot-rodape {
  display: none;
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid var(--cor-fundo);
}

.chatbot-rodape--visivel {
  display: block;
}

.chatbot-rodape button {
  background: transparent;
  border: none;
  color: var(--cor-rosa);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 0;
}

.chatbot-rodape button:hover,
.chatbot-rodape button:focus-visible {
  text-decoration: underline;
}

/* Responsivo: em telas pequenas, o botão encosta mais na quina e o
   painel passa a ocupar quase a tela toda (mas nunca o topo inteiro,
   para a usuária ainda perceber que está "sobre" o site). */
@media (max-width: 520px) {
  .chatbot-flutuante {
    right: 12px;
    bottom: 12px;
    gap: 10px;
  }

  .chatbot-launcher {
    width: 54px;
    height: 54px;
  }

  .chatbot-widget,
  .chatbot-painel {
    width: calc(100vw - 24px);
    max-height: 78vh;
    border-radius: 14px;
  }

  .chatbot-corpo {
    padding: 16px;
  }
}