/* OWNS: .xf-chat(__*) (плавающий лаунчер живого чата + мини-меню каналов).
   Переиспользует body-хуки позиционирования из ui.css-контракта FAB:
   body.xf-cookie-up (подъём над consent-баром), body.xf-bottombar-up (скрытие
   под мобильной money-плашкой, класс owned by base.css), body.page-configurator
   (скрытие на конфигураторе). Также прячет РОДНОЙ кружок Битрикс24
   (.b24-widget-button-*) — на xcore_front B24 грузим ТОЛЬКО мы (по клику), его
   нативную кнопку всегда подавляем, чтобы внизу был один наш брендовый кружок;
   окно чата (.bx-livechat-*) НЕ трогаем — это другой namespace. */

/* ─── Док-обёртка (фиксированная точка внизу справа) ──────────── */
.xf-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* bottom анимируется для подъёма над consent-баром (ниже), как у FAB. */
  transition: bottom .3s ease;
}

/* ─── Брендовый кружок (тоггл меню) ───────────────────────────── */
.xf-chat__fab {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
  transition: transform .2s, box-shadow .2s;
  animation: xf-chat-in .45s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .xf-chat__fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
  }
}
.xf-chat__fab:active { transform: translateY(0) scale(0.96); }

/* Две иконки в кружке: «чат» (закрыто) ↔ «крестик» (открыто). Кросс-фейд+поворот. */
.xf-chat__fab-icon {
  position: absolute;
  display: inline-flex;
  transition: opacity .2s ease, transform .2s ease;
}
.xf-chat__fab-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.xf-chat__fab-icon--open  { opacity: 1; transform: rotate(0) scale(1); }
.xf-chat.is-open .xf-chat__fab-icon--open  { opacity: 0; transform: rotate(90deg) scale(.6); }
.xf-chat.is-open .xf-chat__fab-icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* ─── Мини-меню (поповер над кружком) ─────────────────────────── */
.xf-chat__menu {
  width: 264px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.xf-chat__menu[hidden] { display: none; }
/* Анимация раскрытия (видимость гейтит JS через [hidden]; класс — для transition). */
.xf-chat:not(.is-open) .xf-chat__menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  pointer-events: none;
}
.xf-chat.is-open .xf-chat__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ─── Строка-канал ────────────────────────────────────────────── */
.xf-chat__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  font: inherit;
  transition: background-color .15s ease;
}
@media (hover: hover) {
  .xf-chat__item:hover { background: var(--surface-2); }
}
.xf-chat__item:active { background: var(--surface-3); }

.xf-chat__item-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Живой менеджер — ЕДИНСТВЕННЫЙ акцентный чип в меню (One-Voice: индиго =
   «сюда», на приоритетный канал). */
.xf-chat__item-icon--live { background: var(--accent); color: #fff; }
/* ИИ-бот — честно НЕЙТРАЛЬНЫЙ чип (вторичный само-сервис). Серый vs индиго даёт
   мгновенный контраст «живой человек / робот»; бренд-акцент роботу не нужен. */
.xf-chat__item-icon--bot  { background: var(--surface-3); color: var(--text-2); }

.xf-chat__item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.xf-chat__item-title { font-size: 14px; font-weight: 600; }
/* --text-2 (не --text-3): на 12px AA-контраст держится в ОБЕИХ темах; иерархию
   несут кегль (14→12) и вес (600→400), не приглушённость до нечитаемости. */
.xf-chat__item-sub   { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* Спиннер загрузки на строке «Чат с менеджером», пока тянется загрузчик B24. */
.xf-chat__item.is-loading { pointer-events: none; }
.xf-chat__item.is-loading .xf-chat__item-icon--live {
  position: relative;
  color: transparent;
}
.xf-chat__item.is-loading .xf-chat__item-icon--live::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid oklch(1 0 0 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: xf-chat-spin .6s linear infinite;
}

/* ─── Подъём над consent-баром (зеркалит FAB-контракт, ui.css) ── */
body.xf-cookie-up .xf-chat { bottom: calc(var(--xf-cookie-h, 72px) + 24px); }

/* ─── Скрытие на конфигураторе (зеркалит FAB, ui.css) ─────────── */
body.page-configurator .xf-chat { display: none; }

/* ─── Подавление родного кружка Битрикс24 ─────────────────────── */
.b24-widget-button-wrapper,
.b24-widget-button-position-bottom-right,
.b24-widget-button-position-bottom-left {
  display: none !important;
}

/* ─── Анимации ────────────────────────────────────────────────── */
@keyframes xf-chat-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xf-chat-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .xf-chat, .xf-chat__fab, .xf-chat__fab-icon, .xf-chat__menu { transition: none; animation: none; }
  .xf-chat__fab:hover { transform: none; }
  /* спиннер тоже гасим — статичная дуга остаётся как индикатор загрузки */
  .xf-chat__item.is-loading .xf-chat__item-icon--live::after { animation: none; }
}

/* ─── Мобайл ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .xf-chat { right: 16px; bottom: 16px; }
  .xf-chat__fab { width: 52px; height: 52px; }
  /* мобильный consent-бар выше (текст переносится) — больший fallback */
  body.xf-cookie-up .xf-chat { bottom: calc(var(--xf-cookie-h, 120px) + 16px); }
  /* [#61] Нижняя sticky money-плашка (PDP «В корзину» / оформление корзины)
     поднята → прячем весь чат-док: бар владеет thumb-зоной, второй accent-кружок
     ломал бы One-Voice и ловил мис-тапы. Зеркалит FAB-контракт (ui.css). Док
     возвращается на скролл вверх. Сигнал body.xf-bottombar-up ставит app.js. */
  body.xf-bottombar-up .xf-chat {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.94);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }
}