/* ===== Раскрывающееся меню каналов связи для floating FAB =====
   Расширяет существующую .fab-chat в .floating-actions (см. main.css).
   При клике на .fab-chat скрипт /js/contact-fab.js переключает .is-open
   и показывает .fab-menu, инжектируемое в .floating-actions.
   Цвета: золото/тёмно-синий — наследуются из :root через --gold-500 / --navy-800. */

/* === Главная кнопка в открытом состоянии === */
.fab-chat.is-open{background:var(--navy-800);color:#fff;box-shadow:0 6px 24px rgba(6,22,51,.35)}
.fab-chat.is-open::before{animation:none;opacity:0}

/* === Контейнер меню — абсолютно над .fab-chat === */
.floating-actions .fab-menu{
  position:absolute;bottom:calc(100% + 14px);right:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:auto;opacity:0;transform:translateY(12px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.floating-actions .fab-menu[hidden]{display:none}
.floating-actions .fab-menu.is-visible{opacity:1;transform:translateY(0)}

/* === Пункт меню — pill === */
.fab-menu-item{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 12px;border-radius:30px;border:none;cursor:pointer;
  background:#fff;color:var(--navy-800);
  font:600 14px/1 'Inter',sans-serif;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(6,22,51,.14), 0 0 0 1px rgba(10,35,66,.08);
  text-decoration:none;transform-origin:right center;
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.fab-menu-item:hover{transform:translateX(-2px) scale(1.03);box-shadow:0 6px 18px rgba(6,22,51,.18);color:var(--navy-800)}
.fab-menu-item:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.fab-menu-item .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex-shrink:0}
.fab-menu-item .ic svg{width:16px;height:16px}

/* === Цвета иконок по бренду каждого канала === */
.fab-menu-item--phone    .ic{background:#1F8A5C;color:#fff}
.fab-menu-item--telegram .ic{background:#229ED9;color:#fff}
.fab-menu-item--whatsapp .ic{background:#1FA855;color:#fff}
.fab-menu-item--vk       .ic{background:transparent;border-radius:0;overflow:hidden}
.fab-menu-item--vk       .ic svg{width:24px;height:24px}
.fab-menu-item--max      .ic{background:linear-gradient(135deg,#44CCFF 0%,#5533EE 66%,#9933DD 100%);color:#fff}
.fab-menu-item--chat     .ic{background:var(--gold-500);color:var(--navy-900)}

/* === Каскад появления снизу вверх === */
.fab-menu .fab-menu-item{
  opacity:0;transform:translateY(20px) scale(.92);
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.fab-menu.is-visible .fab-menu-item{opacity:1;transform:none}
.fab-menu.is-visible .fab-menu-item:nth-last-child(1){transition-delay:.04s}
.fab-menu.is-visible .fab-menu-item:nth-last-child(2){transition-delay:.09s}
.fab-menu.is-visible .fab-menu-item:nth-last-child(3){transition-delay:.14s}
.fab-menu.is-visible .fab-menu-item:nth-last-child(4){transition-delay:.19s}
.fab-menu.is-visible .fab-menu-item:nth-last-child(5){transition-delay:.24s}
.fab-menu.is-visible .fab-menu-item:nth-last-child(6){transition-delay:.29s}

/* === Mobile (<=600px): меню всплывает над .mobile-cta-bar при клике «Написать» === */
@media (max-width:600px){
  /* раскрепляем контейнер, чтобы меню могло позиционироваться отдельно от скрытых fab-кнопок */
  .floating-actions{position:static;display:block;bottom:auto;right:auto;top:auto;left:auto;width:0;height:0;pointer-events:none}
  .floating-actions .fab-chat{display:none}
  /* Кнопка «наверх» на мобиле остаётся видимой: контейнер раскреплён выше,
     поэтому фиксируем её саму. Над lm-fab (bottom:96px + 56px + 10px зазор). */
  .floating-actions .fab-scroll-top{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 162px);
    right:20px;left:auto;
    pointer-events:auto;
    z-index:202;
  }
  .floating-actions .fab-menu{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 84px);
    right:12px;left:auto;
    pointer-events:auto;
    z-index:202;
  }
  body.has-cookie-banner .floating-actions .fab-menu{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 168px);
  }
  .fab-menu-item{font-size:13.5px;padding:9px 16px 9px 10px}
}

@media (prefers-reduced-motion:reduce){
  .floating-actions .fab-menu,
  .fab-menu .fab-menu-item{transition:none}
}