/* ==========================================================================
   14-chat.css — botão de chat flutuante (FAB WhatsApp)
   SPEC §4.14 · 06 §8 · 04 §12 — disco lime 64px fixo a 20px do canto inferior direito,
   idêntico em todas as larguras. Só a sombra anima (200ms); press 120ms.

   Markup: o href do FAB é o token {{WHATSAPP_URL}}, resolvido por build.py a partir de
   site.config.json.whatsapp_url — hoje ainda o placeholder 5500000000000 (14-A1).
   Não usa data-href-key: o atributo era morto (ninguém o lia) — ver 00-A2.
   ========================================================================== */

.chat-fab {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-chat);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--chat-bubble);
  height: var(--chat-bubble);
  border-radius: var(--r-pill);
  background: var(--c-lime);
  color: var(--c-on-dark);
  box-shadow: var(--sh-chat);
  transition:
    box-shadow var(--dur-200) var(--ease-default),
    transform 120ms ease-out;
}

.chat-fab:hover { box-shadow: var(--sh-chat-hover); }
.chat-fab:active { transform: scale(.95); }

/* Anel de dois tons como o global de base.css: o FAB é fixo e passa por cima de fundos
   claros E da banda escura (#1C1238 do 08-taxas), onde um anel só de --c-ink-900 sumiria.
   O halo branco de 3px preenche exatamente o outline-offset. Só no estado de foco —
   nada muda na aparência normal. */
.chat-fab:focus-visible {
  outline: 2px solid var(--c-ink-900);
  outline-offset: 3px;
  box-shadow: var(--sh-chat), 0 0 0 3px hsla(0,0%,100%,.95);
}

/* balão: círculo com o quadrante inferior direito reto */
.chat-fab__icon { width: var(--icon-lg); height: var(--icon-lg); }

/* NOTA (WCAG 2.4.11 — conteúdo não obscurecido): o FAB é fixo no canto inferior direito
   em qualquer rolagem. Os três vizinhos que podiam ficar por baixo já foram afastados nos
   arquivos donos, e por isso NÃO há guarda de JS aqui:
   · menu mobile aberto  → `body.menu-open .chat-fab{opacity:0;pointer-events:none}` (01-header.css)
   · botão "Pausar" do marquee → agora `left:16px; bottom:16px` + scroll-margin (09-depoimentos.css)
   · ícones sociais do rodapé  → `.ft__bottom{padding-bottom:94px}` abaixo de 1025 (13-footer.css) */