/* ===== Botão flutuante do WhatsApp ===== */
.wa { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }

.wa__fab {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--brand-500); color: #fff; pointer-events: auto;
  box-shadow: 0 12px 30px -10px rgba(59,43,255,.6), 0 0 0 1px rgba(255,255,255,.4) inset;
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), background .2s;
}
.wa.is-ready .wa__fab { opacity: 1; transform: none; }
.wa__fab:hover { background: var(--brand-600); }
.wa__fab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa__fab .btn__icon { width: 28px; height: 28px; }
/* anel suave que "respira" chamando atenção, sem exagero */
.wa__fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-400);
  opacity: 0; animation: wa-ring 3.6s ease-out 2s infinite;
}
@keyframes wa-ring { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45); } }

.wa__badge {
  position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px #fff;
  transform: scale(0); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.wa.is-open .wa__badge { transform: scale(1); }
.wa.is-read .wa__badge { transform: scale(0); }

/* ===== Balão ===== */
.wa__pop {
  position: relative; width: 320px; padding: 18px; border-radius: 16px 16px 4px 16px; background: #fff; pointer-events: auto;
  box-shadow: 0 30px 60px -20px rgba(11,16,51,.35), 0 0 0 1px rgba(11,16,51,.06);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), visibility .7s;
}
.wa.is-open .wa__pop { opacity: 1; visibility: visible; transform: none; }

.wa__close {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s;
}
.wa__close:hover { background: var(--tint); color: var(--ink); }
.wa__close svg { width: 13px; height: 13px; }

.wa__head { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.wa__head b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.wa__head small { font-size: 12.5px; color: var(--ink-2); }
.wa__avatar { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-50); }
.wa__avatar img { width: 30px; mix-blend-mode: multiply; }
.wa__online { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }

.wa__body { position: relative; margin: 14px 0 16px; min-height: 44px; }
.wa__msg {
  padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--tint);
  font-size: 14px; line-height: 1.5; color: var(--ink);
  opacity: 1; transform: none; transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.wa__typing {
  position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 4px 14px 14px 14px; background: var(--tint);
  opacity: 0; transition: opacity .3s ease;
}
.wa__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: wa-dot 1.2s ease-in-out infinite; }
.wa__typing i:nth-child(2) { animation-delay: .15s; }
.wa__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa.is-typing .wa__typing { opacity: 1; }
.wa.is-typing .wa__msg { opacity: 0; transform: translateY(6px); }

.wa__cta { width: 100%; height: 46px; font-size: 15px; }
.wa__cta .btn__icon { width: 18px; height: 18px; }

/* ===== Celular ===== */
@media (max-width: 760px) {
  .wa { right: 16px; bottom: 16px; }
  .wa__fab { width: 54px; height: 54px; }
  .wa__fab .btn__icon { width: 25px; height: 25px; }
  .wa__pop { width: calc(100vw - 32px); max-width: 340px; }
}