.contact-rail {
  position: fixed;
  z-index: 45;
  top: clamp(110px, 30vh, 300px);
  right: 0;
  width: 68px;
  height: 40px;
  filter: drop-shadow(0 10px 20px rgba(4, 20, 30, .2));
}

.contact-rail__toggle,
.contact-rail__link {
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.contact-rail__toggle {
  width: 68px;
  height: 40px;
  border-radius: 12px 0 0 12px;
  background: #060809;
}

.contact-rail__toggle:hover { background: #202a2f; }
.contact-rail__toggle svg { width: 21px; height: 21px; transition: transform .25s ease; }
.contact-rail.is-collapsed .contact-rail__toggle svg { transform: rotate(180deg); }

.contact-rail__actions {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.contact-rail.is-collapsed .contact-rail__actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(78px);
}

.contact-rail__link {
  position: relative;
  width: 68px;
  height: 64px;
  border-radius: 12px 0 0 12px;
  transition: filter .2s ease, transform .2s ease;
}

.contact-rail__link:hover,
.contact-rail__link:focus-visible { filter: brightness(1.1); transform: translateX(-4px); }
.contact-rail__link svg { width: 25px; height: 25px; }
.contact-rail__link--email { height: 104px; background: #075383; }
.contact-rail__link--whatsapp { background: #20c96b; }
.contact-rail__link--phone { background: #128a58; }

.contact-rail__link::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 8px 12px;
  border-radius: 5px;
  background: #102f42;
  color: #fff;
  font: 600 .72rem var(--head);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.contact-rail__link:hover::after,
.contact-rail__link:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

@media (max-width: 680px) {
  .contact-rail {
    top: auto;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
  }

  .contact-rail__toggle,
  .contact-rail__link { width: 58px; height: 58px; border-radius: 13px; }
  .contact-rail__toggle { box-shadow: 0 8px 22px rgba(4, 20, 30, .25); }
  .contact-rail.is-collapsed .contact-rail__toggle svg { transform: rotate(-90deg); }
  .contact-rail.is-open .contact-rail__toggle svg { transform: rotate(90deg); }
  .contact-rail__link--email { height: 58px; }
  .contact-rail__actions { top: auto; bottom: calc(100% + 5px); gap: 5px; }
  .contact-rail.is-collapsed .contact-rail__actions { transform: translateY(12px); }
  .contact-rail__link::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-rail__toggle svg,
  .contact-rail__actions,
  .contact-rail__link,
  .contact-rail__link::after { transition: none; }
}