.floating-whatsapp {
  position: fixed;
  inset-inline-end: max(var(--space-4), env(safe-area-inset-right));
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-grid;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  background: #25d366;
  color: #062b16;
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 28%);
  transition: transform 160ms ease, filter 160ms ease;
}

.floating-whatsapp__icon {
  inline-size: 1.65rem;
  block-size: 1.65rem;
  fill: currentColor;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.floating-whatsapp:active {
  transform: translateY(0);
}

@media (width <= 30rem) {
  .floating-whatsapp {
    inset-inline-end: max(var(--space-3), env(safe-area-inset-right));
    inset-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  }
}