/* ==========================================================================
   Widget de atendimento Deck Telecom
   Bolha flutuante + balão ancorado nela (estilo chat), não modal centralizado.
   Usa os mesmos tokens do main.css, então acompanha a marca automaticamente.
   ========================================================================== */

:root {
  --wl-bubble-size: 56px;
  --wl-gap: .75rem;
}

/* --- Bolha flutuante ----------------------------------------------------- */
.wl-bubble {
  position: fixed;
  right: var(--space-5);
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  z-index: var(--z-overlay);
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--wl-bubble-size); padding: 0 1.25rem 0 1rem;
  border: none; border-radius: var(--radius-pill);
  background: var(--color-cta-strong); color: #fff;
  font-family: var(--font-heading); font-size: var(--fs-base); font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 122, 60, .34), 0 2px 6px rgba(0,0,0,.14);
  transition: background-color var(--transition), box-shadow var(--transition);
}
.wl-bubble:hover { background: var(--color-cta-darker); box-shadow: 0 10px 28px rgba(11, 122, 60, .42); }
.wl-bubble svg { width: 26px; height: 26px; flex: 0 0 auto; }
.wl-bubble__icon-close { display: none; }
.wl-bubble[aria-expanded="true"] .wl-bubble__icon-wa,
.wl-bubble[aria-expanded="true"] .wl-bubble__label { display: none; }
.wl-bubble[aria-expanded="true"] .wl-bubble__icon-close { display: block; }
.wl-bubble[aria-expanded="true"] { padding: 0; width: var(--wl-bubble-size); justify-content: center; }

/* no mobile a bolha é só o ícone, para não cobrir conteúdo */
@media (max-width: 599px) {
  .wl-bubble { padding: 0; width: var(--wl-bubble-size); justify-content: center; }
  .wl-bubble .wl-bubble__label { display: none; }
}

/* --- Balão --------------------------------------------------------------- */
.wl-panel {
  position: fixed;
  z-index: var(--z-overlay);
  right: var(--space-5);
  bottom: calc(var(--wl-bubble-size) + var(--wl-gap) + var(--space-5) + env(safe-area-inset-bottom));
  width: 360px;
  max-width: calc(100vw - 2 * var(--space-5));
  max-height: calc(100dvh - var(--wl-bubble-size) - 2 * var(--space-5) - var(--wl-gap) - 1rem);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px -12px rgba(5, 6, 43, .34), 0 4px 12px rgba(0,0,0,.10);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.wl-panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }

/* no mobile ocupa a largura toda, deixando só as margens */
@media (max-width: 599px) {
  .wl-panel { left: var(--space-4); right: var(--space-4); width: auto; max-width: none; }
}

/* cabeçalho verde: dá a leitura de "conversa", igual aos botões de CTA */
.wl-panel__head {
  display: flex; align-items: center; gap: .7rem;
  background: var(--color-cta-strong); color: #fff;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.wl-panel__head svg { width: 24px; height: 24px; flex: 0 0 auto; }
.wl-panel__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.wl-panel__sub { font-size: var(--fs-xs); opacity: .9; }
.wl-close {
  margin-left: auto; flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: none; border-radius: var(--radius-pill);
  color: #fff; cursor: pointer;
  transition: background-color var(--transition);
}
.wl-close:hover { background: rgba(255,255,255,.30); }
.wl-close svg { width: 18px; height: 18px; }

.wl-panel__body { padding: var(--space-5); }
.wl-panel__lead { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* contexto do plano escolhido */
.wl-plan {
  display: none; align-items: center; gap: .5rem;
  margin-top: var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: .6rem .8rem;
  font-size: var(--fs-sm); color: var(--color-text);
}
.wl-plan[data-visible="true"] { display: flex; }
.wl-plan strong { color: var(--color-primary); }
.wl-plan svg { width: 17px; height: 17px; color: var(--color-primary); flex: 0 0 auto; }

/* --- Formulário ---------------------------------------------------------- */
.wl-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.wl-field { display: grid; gap: .3rem; }
.wl-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-heading); }
.wl-field input {
  min-height: 48px;
  padding: .6rem .85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-heading);
  font-size: var(--fs-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wl-field input::placeholder { color: #98a0b0; }
.wl-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 253, .16);
}
.wl-field input[aria-invalid="true"] { border-color: #b91c1c; }
.wl-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .16); }
.wl-error { font-size: var(--fs-xs); color: #b91c1c; min-height: 1.2em; }

/* honeypot: invisível para gente, preenchido por bot */
.wl-hp {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wl-submit { width: 100%; min-height: 50px; }
.wl-consent { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-snug); }
.wl-consent a { color: var(--color-primary-dark); text-decoration: underline; }

.wl-note {
  display: none;
  margin-top: var(--space-3);
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: var(--radius-sm); padding: .55rem .75rem;
  font-size: var(--fs-xs); color: #7c2d12;
}
.wl-note[data-visible="true"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .wl-panel, .wl-bubble, .wl-close, .wl-field input { transition: none; }
}