/* Botão flutuante do WhatsApp — pequeno, quadrado e preto/branco */
.whatsapp-float {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: #050505 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38) !important;
  text-decoration: none !important;
  transform-origin: center !important;
  animation: gravityWhatsappSquarePulse 1.55s ease-in-out infinite !important;
  will-change: transform;
  isolation: isolate;
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  opacity: 0;
  animation: gravityWhatsappSquareRing 1.55s ease-out infinite !important;
}

.whatsapp-float svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  color: #ffffff !important;
  fill: currentColor !important;
  pointer-events: none;
}

.whatsapp-float svg path {
  fill: currentColor !important;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #ffffff !important;
  color: #050505 !important;
  border-color: #050505 !important;
  outline: none;
}

.whatsapp-float:focus-visible {
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.38),
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(5, 5, 5, 0.55) !important;
}

@keyframes gravityWhatsappSquarePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09);
  }
}

@keyframes gravityWhatsappSquareRing {
  0% {
    transform: scale(0.92);
    opacity: 0.58;
  }
  82%, 100% {
    transform: scale(1.24);
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    animation: gravityWhatsappSquarePulse 1.55s ease-in-out infinite !important;
  }

  .whatsapp-float::before {
    border-radius: 11px;
    animation: gravityWhatsappSquareRing 1.55s ease-out infinite !important;
  }

  .whatsapp-float svg {
    width: 23px !important;
    height: 23px !important;
  }
}