.floating-actions {
  position: fixed;
  z-index: var(--z-115);
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));
  pointer-events: none;
}

.floating-action {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  padding: 0;
  place-items: center;
  color: var(--jaroni-white);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(5, 20, 12, .2);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.floating-action svg {
  display: block;
  width: 27px;
  height: 27px;
}

.floating-action--whatsapp { background: #20b95a; }
.floating-action--whatsapp svg { fill: currentColor; }

.floating-action--whatsapp::after {
  position: absolute;
  inset: -5px;
  z-index: -1;
  content: "";
  border: 1px solid rgba(32, 185, 90, .3);
  border-radius: inherit;
  animation: floating-whatsapp-pulse 2.4s ease-out infinite;
}

.floating-action--top {
  color: #132019;
  background: var(--jaroni-white);
  border: 1px solid #dce4df;
  opacity: 0;
  transform: translateY(14px) scale(.88);
  visibility: hidden;
}

.floating-action--top::before {
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--jaroni-green), var(--jaroni-yellow), var(--jaroni-red));
  border-radius: var(--radius-999);
}

.floating-action--top svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.floating-action--top.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.floating-action:hover,
.floating-action:focus-visible {
  box-shadow: 0 16px 32px rgba(5, 20, 12, .27);
  outline: 3px solid rgba(255, 194, 14, .4);
  outline-offset: 3px;
  transform: translateY(-3px);
}

.floating-action--whatsapp:hover,
.floating-action--whatsapp:focus-visible { background: #159f4a; }

.floating-action--top.is-visible:hover,
.floating-action--top.is-visible:focus-visible {
  color: var(--jaroni-green);
  transform: translateY(-3px);
}

@keyframes floating-whatsapp-pulse {
  0% { opacity: .8; transform: scale(.9); }
  75%, 100% { opacity: 0; transform: scale(1.28); }
}

@media (max-width: 640px) {
  .floating-actions {
    bottom: max(15px, env(safe-area-inset-bottom));
    padding-inline: max(15px, env(safe-area-inset-left)) max(15px, env(safe-area-inset-right));
  }

  .floating-action {
    width: 50px;
    height: 50px;
  }

  .floating-action svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-action { transition: none; }
  .floating-action--whatsapp::after { animation: none; }
}