/* Botão flutuante do WhatsApp (site/src/pages/whatsapp-float.tsx): foto da atendente com a borda verde do WhatsApp. */
.waf { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #1B2430; -webkit-tap-highlight-color: transparent; transition: bottom .3s ease, transform .2s ease; }
.waf:hover { transform: translateY(-2px); }
.waf:focus-visible { outline: none; }
.waf:focus-visible .waf-pic { outline: 3px solid #FFC531; outline-offset: 3px; }
.waf-pic { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: #25D366;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.waf-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #e9eef0; }
.waf-pic::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #25D366; animation: waf-ping 2.6s ease-out infinite; pointer-events: none; }
@keyframes waf-ping { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.4); opacity: 0; } }
.waf-badge { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; background: #25D366; border: 2px solid #fff;
  display: grid; place-items: center; }
.waf-badge svg { width: 14px; height: 14px; fill: #fff; }
.waf-label { display: grid; line-height: 1.2; background: #fff; border-radius: 14px; padding: 8px 13px; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .45);
  font-family: inherit; }
.waf-label b { font-size: .95rem; }
.waf-label small { font-size: .78rem; color: #4A5563; }
@media (max-width: 759px) {
  .waf { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .waf-label { display: none; }
  .waf-pic { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .waf, .waf-pic::after { transition: none; animation: none; } .waf-pic::after { display: none; } }

/* não cobre o que já fica preso embaixo da tela */
body:has(.sticky-cta.on) .waf { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
body:has([data-consent]:not([hidden])) .waf { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.pay-body .waf { bottom: calc(var(--pay-bot, 110px) + 12px); }
/* some quando abre a tela cheia do quiz (/rede/v4) e o menu da área da empresa no celular */
body.qz-on .waf, body:has(.as-open) .waf { display: none; }