:root{
  --fab-size: 56px;          /* размер главной кнопки */
  --item-size: 48px;         /* размер дочерних кнопок */
  --gap: 10px;               /* расстояние между кружками */
  --corner: 20px;            /* отступ от края экрана */
  --bg: #ffffff;             /* фон кружков */
  --shadow: 0 8px 24px rgba(0,0,0,.2);
  --z: 9999;                 /* поверх почти всего */
}

/* Контейнер */
.contact-fab{
  position: fixed;
  right: var(--corner);
  bottom: var(--corner);
  width: var(--fab-size);
  height: var(--fab-size);
  z-index: var(--z);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Кнопки-кружки */
.fab-btn, .fab-item{
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: none;
  cursor: pointer;
  outline: none;
  box-shadow: var(--shadow);
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.fab-btn{
  width: var(--fab-size);
  height: var(--fab-size);
}

.fab-btn img{ width: 60%; height: 60%; }

.fab-list{
  position: absolute;
  right: 0;
  bottom: calc(var(--fab-size) + var(--gap));
  display: grid;
  gap: var(--gap);
  justify-items: end;
  pointer-events: none; /* пока скрыто — не ловим клики */
}

.fab-item{
  width: var(--item-size);
  height: var(--item-size);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  pointer-events: auto;
}

.contact-fab.open .fab-item{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Лёгкая ступенчатая задержка */
.fab-item:nth-child(1){ transition-delay: 40ms; }
.fab-item:nth-child(2){ transition-delay: 80ms; }
.fab-item:nth-child(3){ transition-delay: 120ms; }
.fab-item:nth-child(4){ transition-delay: 160ms; }

/* Нажатие */
.fab-btn:active, .fab-item:active{ transform: scale(.96); }

/* Фокус (доступность) */
.fab-btn:focus-visible, .fab-item:focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Анимации можно отключить системно */
@media (prefers-reduced-motion: reduce){
  .fab-btn, .fab-item{ transition: none !important; }
}

/* На очень узких экранах — чуть компактнее */
@media (max-width: 380px){
  :root{
    --fab-size: 52px;
    --item-size: 44px;
    --corner: 16px;
  }
}