.whatsapp-contact {
  position: fixed;
  z-index: 8; /* Above page content, below the header and its menus. */
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #168447;
  box-shadow: 0 3px 8px #07120f30;
  isolation: isolate;
  transition: background-color 180ms cubic-bezier(.22, 1, .36, 1);
}

.whatsapp-contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 2px solid #25b96b;
  border-radius: inherit;
  pointer-events: none;
  animation: whatsapp-contact-pulse 2.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.whatsapp-contact svg {
  display: block;
  width: 29px;
  height: 29px;
  fill: currentColor;
}

.whatsapp-contact:is(:hover, :focus-visible) {
  color: #fff;
  background: #116d3a;
}

.whatsapp-contact:is(:hover, :focus-visible)::before {
  animation-play-state: paused;
}

.whatsapp-contact:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #183427;
}

.whatsapp-contact__label {
  position: absolute;
  right: calc(100% + 12px);
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: #183427;
  font: 600 13px/1.4 var(--body, sans-serif);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.whatsapp-contact:focus-visible .whatsapp-contact__label {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: hover) {
  .whatsapp-contact:hover .whatsapp-contact__label {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 700px) {
  .whatsapp-contact {
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
  }
}

@keyframes whatsapp-contact-pulse {
  0% { opacity: .5; transform: scale(1); }
  65%, 100% { opacity: 0; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-contact,
  .whatsapp-contact__label { transition: none; }
  .whatsapp-contact::before { animation: none; opacity: 0; }
}