.floating-whatsapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20;

  width: 3.5rem;
  height: 3.5rem;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--color-primary);
  color: var(--color-text-inverse);

  box-shadow:
    0 0.5rem 1.5rem rgb(75 64 52 / 0.22);

  text-decoration: none;
}

.floating-whatsapp svg {
  width: 1.9rem;
  height: 1.9rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .floating-whatsapp {
    transition:
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .floating-whatsapp:hover {
    transform: translateY(-0.125rem);
    box-shadow:
      0 0.7rem 1.8rem rgb(75 64 52 / 0.28);
  }

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