/* ============================================================================
 * Widget WhatsApp (balão flutuante) — botão + painel de formulário opcional.
 *
 * Cores: o balão e o botão de envio usam o verde do WhatsApp (identidade do
 * canal, reconhecida pelo visitante). Todo o resto do painel (superfície,
 * texto, bordas, foco) deriva da paleta do tema ativo via tokens --wcwa-x
 * (override de widget, depois cor central, depois default DashLite).
 *
 * Posição: duas variáveis fazem a ponte com os temas.
 *   --wc-dock-bottom  espaço reservado embaixo (barra fixa de celular)
 *   --wc-float-z      camada; 11000 fica abaixo do banner de LGPD (11500) e da
 *                     modal de cotação (11600): botão de apoio não tapa decisão
 *   --wc-float-stack  altura já ocupada no canto pelo launcher da IA (o widget
 *                     grava 72px no :root quando os dois estão no site)
 * ========================================================================== */
.wcwa{
  --wcwa-brand:      var(--wc-whatsapp-color, #25d366);
  --wcwa-brand-ink:  #ffffff;
  --wcwa-head-bg:    var(--wc-whatsapp-head, #128c7e);
  --wcwa-accent:     var(--wc-widget-accent,  var(--bs-primary, #6576ff));
  --wcwa-accent-rgb: var(--wc-widget-accent-rgb, var(--bs-primary-rgb, 101,118,255));
  --wcwa-surface:    var(--wc-widget-surface, var(--bs-card-bg, #ffffff));
  --wcwa-border:     var(--wc-widget-border,  var(--bs-border-color, #e5e9f2));
  --wcwa-text:       var(--bs-body-color, #526484);
  --wcwa-heading:    var(--bs-heading-color, #364a63);
  --wcwa-muted:      var(--wc-muted, var(--bs-secondary-color, #8094ae));
  --wcwa-bg-alt:     var(--wc-bg-alt, var(--bs-secondary-bg, #f5f6fa));
  --wcwa-danger:     var(--bs-danger, #e85347);
  --wcwa-right:  18px;
  --wcwa-bottom: 18px;
}
/* Empilhado com a IA: mesma margem direita dela (22px) — em coluna, 4px de
   diferença entre os dois círculos aparecem como desalinho. */
.wcwa.is-stacked{ --wcwa-right: 22px; --wcwa-bottom: 22px; }

/* ---- Balão ---------------------------------------------------------------
   Seletor de UMA classe de propósito: os temas escondem o balão no celular com
   "body .wc-wa-float { display:none }" e essa regra precisa continuar vencendo. */
.wc-wa-float{
  position: fixed;
  right: var(--wcwa-right, 18px);
  bottom: calc(var(--wcwa-bottom, 18px) + var(--wc-dock-bottom, 0px) + var(--wc-float-stack, 0px));
  z-index: var(--wc-float-z, 11000);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wcwa-brand, #25d366); color: var(--wcwa-brand-ink, #ffffff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: bottom .25s ease, transform .15s ease, box-shadow .15s ease;
}
.wc-wa-float:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,.28); color: var(--wcwa-brand-ink, #ffffff); }
.wc-wa-float:focus-visible{ outline: 3px solid var(--wcwa-brand); outline-offset: 3px; }
.wc-wa-float svg{ width: 32px; height: 32px; }

/* ---- Painel --------------------------------------------------------------- */
.wcwa-panel{
  position: fixed;
  right: var(--wcwa-right);
  bottom: calc(var(--wcwa-bottom) + var(--wc-dock-bottom, 0px) + var(--wc-float-stack, 0px) + 70px);
  z-index: var(--wc-float-z, 11000);
  width: 348px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - var(--wcwa-bottom) - var(--wc-dock-bottom, 0px) - var(--wc-float-stack, 0px) - 88px);
  max-height: calc(100dvh - var(--wcwa-bottom) - var(--wc-dock-bottom, 0px) - var(--wc-float-stack, 0px) - 88px);
  overflow: auto; overscroll-behavior: contain;
  background: var(--wcwa-surface); color: var(--wcwa-text);
  border: 1px solid var(--wcwa-border); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  font-family: inherit; font-size: 14px; line-height: 1.45; text-align: left;
  animation: wcwaIn .2s ease;
}
.wcwa-panel[hidden]{ display: none; }
.wcwa-panel *, .wcwa-panel *::before, .wcwa-panel *::after{ box-sizing: border-box; }
@keyframes wcwaIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

.wcwa-head{
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 14px 14px 16px;
  background: var(--wcwa-head-bg); color: var(--wcwa-brand-ink);
}
.wcwa-head-ico{
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
}
.wcwa-head-ico svg{ width: 22px; height: 22px; }
.wcwa-head-txt{ flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.wcwa-head-txt strong{ display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: inherit; }
.wcwa-head-txt span{ display: block; margin-top: 2px; font-size: 12.5px; opacity: .88; }
.wcwa-close{
  flex: 0 0 auto; width: 30px; height: 30px; margin: -4px -4px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 24px; line-height: 1; cursor: pointer; opacity: .85;
}
.wcwa-close:hover{ opacity: 1; background: rgba(255,255,255,.14); }
.wcwa-close:focus-visible{ outline: 2px solid currentColor; outline-offset: 1px; }

/* ---- Formulário ----------------------------------------------------------- */
.wcwa-form{ padding: 16px; margin: 0; }
.wcwa-form[hidden]{ display: none; }
.wcwa-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.wcwa-field{ margin: 0 0 12px; }
.wcwa-field label{ display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 600; color: var(--wcwa-heading); }
.wcwa-field label em{ font-style: normal; color: var(--wcwa-danger); }
.wcwa-field label small{ font-weight: 400; color: var(--wcwa-muted); font-size: 11.5px; }
.wcwa-field input,
.wcwa-field textarea{
  display: block; width: 100%; margin: 0;
  padding: 10px 12px; border: 1px solid var(--wcwa-border); border-radius: 10px;
  background: var(--wcwa-surface); color: var(--wcwa-text);
  font: inherit; font-size: 15px; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.wcwa-field textarea{ resize: vertical; min-height: 78px; }
.wcwa-field input::placeholder, .wcwa-field textarea::placeholder{ color: var(--wcwa-muted); opacity: .8; }
.wcwa-field input:focus,
.wcwa-field textarea:focus{ outline: 0; border-color: var(--wcwa-accent); box-shadow: 0 0 0 3px rgba(var(--wcwa-accent-rgb), .18); }
.wcwa-field [aria-invalid="true"]{ border-color: var(--wcwa-danger); }

.wcwa-error{
  margin: 0 0 12px; padding: 8px 11px; border-radius: 9px;
  font-size: 13px; color: var(--wcwa-danger);
  background: color-mix(in srgb, var(--wcwa-danger) 9%, transparent);
}
.wcwa-error[hidden]{ display: none; }

.wcwa-submit{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 0; padding: 12px 16px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--wcwa-brand); color: var(--wcwa-brand-ink);
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
  transition: filter .15s ease, transform .1s ease;
}
.wcwa-submit:hover{ filter: brightness(.95); color: var(--wcwa-brand-ink); text-decoration: none; }
.wcwa-submit:active{ transform: translateY(1px); }
.wcwa-submit:focus-visible{ outline: 3px solid rgba(var(--wcwa-accent-rgb), .45); outline-offset: 2px; }
.wcwa-submit svg{ width: 20px; height: 20px; flex: 0 0 auto; }

.wcwa-skip{
  display: block; margin: 11px 0 0; text-align: center;
  font-size: 13px; color: var(--wcwa-muted); text-decoration: underline; text-underline-offset: 2px;
}
.wcwa-skip:hover{ color: var(--wcwa-heading); }
.wcwa-privacy{ margin: 12px 0 0; text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--wcwa-muted); }
.wcwa-privacy a{ color: inherit; text-decoration: underline; }

/* ---- Enviado -------------------------------------------------------------- */
.wcwa-done{ padding: 22px 18px 18px; text-align: center; }
.wcwa-done[hidden]{ display: none; }
.wcwa-done-ico{
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--wcwa-brand); color: var(--wcwa-brand-ink);
  font-size: 26px; font-weight: 700;
}
.wcwa-done strong{ display: block; font-size: 17px; font-weight: 700; color: var(--wcwa-heading); }
.wcwa-done p{ margin: 6px 0 16px; font-size: 13.5px; color: var(--wcwa-muted); }
.wcwa-again{
  margin: 12px 0 0; padding: 4px 8px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--wcwa-muted); text-decoration: underline; text-underline-offset: 2px;
}
.wcwa-again:hover{ color: var(--wcwa-heading); }

/* ---- Convivência com o chat de IA -----------------------------------------
   Com o painel aberto, o teaser "posso ajudar?" da IA cairia em cima dele. */
html.wcwa-open .wcai-teaser{ display: none !important; }

/* ---- Celular: painel vira folha no rodapé (acima da doca do tema) ---------- */
@media (max-width: 576px){
  .wcwa-panel{
    left: 12px; right: 12px; width: auto; max-width: none;
    bottom: calc(12px + var(--wc-dock-bottom, 0px));
    max-height: calc(100vh - 24px - var(--wc-dock-bottom, 0px));
    max-height: calc(100dvh - 24px - var(--wc-dock-bottom, 0px));
  }
  /* 16px evita o zoom automático do iOS ao focar o campo. */
  .wcwa-field input, .wcwa-field textarea{ font-size: 16px; }
  /* A folha cobre o canto: o launcher da IA (z 99990) ficaria por cima do botão de envio. */
  html.wcwa-open .wcai{ display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  .wcwa-panel{ animation: none; }
  .wc-wa-float, .wcwa-submit{ transition: none; }
}