@import url("/css/responsive.css?v=20260809-responsive-v1");

/* ANT GROUP — shared contact launcher
   Loaded by every public page. The component itself is mounted by
   js/contact-capsule.js so markup and behavior stay consistent. */

.contact-capsule {
  --contact-capsule-base-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  --contact-capsule-lift: 0px;
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--contact-capsule-base-bottom) + var(--contact-capsule-lift));
  z-index: 900;
  font-family: var(--font-sans, Inter, "Noto Sans Georgian", sans-serif);
  transition:
    bottom 180ms ease,
    opacity 160ms ease,
    visibility 160ms ease,
    transform 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

.contact-capsule.is-safeguarded,
.contact-capsule.is-input-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
}

.contact-capsule__toggle {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(105deg, #255ebd 0%, #3d55a0 35%, #624b7a 70%, #874464 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 10px 28px rgba(37, 94, 189, .35);
  cursor: pointer;
  transition:
    transform var(--motion-base, 220ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    box-shadow var(--motion-base, 220ms) ease,
    filter 180ms ease;
}

.contact-capsule__toggle:hover,
.contact-capsule__toggle:focus-visible {
  transform: scale(1.06) translateY(-2px);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 14px 34px rgba(124, 58, 237, .5);
}

.contact-capsule__toggle:focus-visible {
  outline: 3px solid rgba(125, 211, 252, .48);
  outline-offset: 4px;
}

.contact-capsule__toggle svg {
  position: absolute;
  width: 25px;
  height: 25px;
  transition:
    opacity 180ms ease,
    transform 220ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

.contact-capsule__toggle-close {
  opacity: 0;
  transform: rotate(-80deg) scale(.55);
}

.contact-capsule.open .contact-capsule__toggle-message {
  opacity: 0;
  transform: rotate(70deg) scale(.55);
}

.contact-capsule.open .contact-capsule__toggle-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.contact-capsule__actions {
  position: absolute;
  right: 0;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px) scale(.95);
  transform-origin: right bottom;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

.contact-capsule.open .contact-capsule__actions {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.contact-capsule__action {
  min-width: 156px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: rgba(13, 22, 36, .9);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.contact-capsule__action:hover,
.contact-capsule__action:focus-visible {
  transform: translateX(-4px) scale(1.02);
  background: rgba(18, 35, 55, .97);
}

.contact-capsule__action:focus-visible {
  outline: 2px solid var(--ant-cyan, #38bdf8);
  outline-offset: 3px;
}

.contact-capsule__action svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.contact-capsule__action--whatsapp svg { color: #10b981; }
.contact-capsule__action--telegram svg { color: #38bdf8; }
.contact-capsule__action--messenger svg { color: #a855f7; }

.contact-capsule__action--whatsapp:hover,
.contact-capsule__action--whatsapp:focus-visible {
  border-color: rgba(16, 185, 129, .6);
  box-shadow: 0 8px 24px rgba(16, 185, 129, .28);
}

.contact-capsule__action--telegram:hover,
.contact-capsule__action--telegram:focus-visible {
  border-color: rgba(56, 189, 248, .6);
  box-shadow: 0 8px 24px rgba(56, 189, 248, .28);
}

.contact-capsule__action--messenger:hover,
.contact-capsule__action--messenger:focus-visible {
  border-color: rgba(168, 85, 247, .6);
  box-shadow: 0 8px 24px rgba(168, 85, 247, .28);
}

html.light-mode .contact-capsule__action {
  color: #0f172a;
  border-color: rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

html.light-mode .contact-capsule__action:hover,
html.light-mode .contact-capsule__action:focus-visible {
  background: rgba(255, 255, 255, .99);
}

@media (max-width: 767px) {
  .contact-capsule {
    --contact-capsule-base-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
  }

  .contact-capsule__toggle {
    width: 52px;
    height: 52px;
  }

  .contact-capsule__actions {
    bottom: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-capsule,
  .contact-capsule__toggle,
  .contact-capsule__toggle svg,
  .contact-capsule__actions,
  .contact-capsule__action {
    transition-duration: .01ms !important;
  }
}

@media print {
  .contact-capsule {
    display: none !important;
  }
}