/* Всплывающий чат «Кнопка на сайт» Битрикс24 — посадка на место.
   06.10.2026, позиция реестра R-523. Разбор: Вики/05 Аудит/Аудит виджета чата 2026-10-06.md

   Что чинит (замеры 06.10.2026 на 12 ширинах, главная, каталог, карточка):

   1. Виджет стоял на `bottom: 50px; right: 50px` на ВСЕХ ширинах — своей
      адаптивности у него нет. На ≤1399 px внизу лежит принятое нижнее меню
      (`.zt-bottombar`, высота 57 px), и пузырь наезжал на него на 7 px,
      отбирая полосу 66 × 6 px у пункта «Связаться».
   2. На телефонах пузырь ложился поверх кнопки «Принять» в уведомлении
      о cookie: посетитель не мог ответить на уведомление, пока не закроет
      приглашение чата.
   3. Приглашение (312 px, уходит влево от пузыря) вылезало за левый край
      экрана: на 390 px — на 46 px, на 360 — на 76, на 320 — на 116.
      Текст обрезался.

   Нижнее меню (принято 11.08.2026) и уведомление о cookie не меняются —
   двигается только виджет. Высоту меню меряет chat-widget.js и кладёт
   в `--zt-chat-barh`; запасное значение в calc() — на случай, если скрипт
   не отработал.

   Правила адресуются двумя классами (`.b24-widget-button-wrapper` +
   `.b24-widget-button-position-bottom-right`), у Битрикс24 — одним,
   поэтому наши выигрывают по весу независимо от порядка подключения. */

:root {
    /* отступ от правого края */
    --zt-chat-right: 50px;
    /* Просвет между пузырём и нижним меню. 20, а не 14: у пузыря есть ореол,
       он выступает на 2 px ниже коробки, и на 14 просвет читался впритык —
       заказчик 06.10 попросил, чтобы виджет не лез на плашку. */
    --zt-chat-gap: 20px;
    /* итоговый отступ снизу: на широких экранах нижнего меню нет */
    --zt-chat-bottom: 50px;
}

/* ---------- ≤1399 px: под пузырём лежит нижнее меню ---------- */

@media (max-width: 1399px) {
    :root {
        --zt-chat-bottom: calc(
            var(--zt-chat-barh, calc(57px + env(safe-area-inset-bottom, 0px)))
            + var(--zt-chat-gap)
        );
    }
}

/* ---------- Телефоны: 50 px от края — слишком много ---------- */

@media (max-width: 640px) {
    :root {
        --zt-chat-right: 16px;
    }
}

/* ---------- Сам пузырь ---------- */

.b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
    right: var(--zt-chat-right);
    bottom: var(--zt-chat-bottom);
    transition: bottom .2s ease, opacity .2s ease;
}

/* ---------- Приглашение: не вылезать за левый край ----------
   Приглашение — `position: absolute` внутри пузыря, ширина 312 px.
   Виджет ставит ему `left: -320px` — число посчитано под эти самые 312 px,
   поэтому одно ограничение ширины не помогает: коробка становится уже,
   а левый край остаётся на прежнем месте и висит за экраном.
   Снимаем `left` (он пересиливает `right`, когда заданы оба) — и работает
   собственное `right: 74px` виджета: приглашение прижимается к пузырю,
   треугольник остаётся на месте.

   Дальше ограничиваем ширину: правый край приглашения стоит в
   (отступ справа + 74) от края окна, значит на ширину остаётся
   100vw − отступ справа − 74, минус 12 px поля слева. */

.b24-widget-button-wrapper .b24-widget-button-popup {
    left: auto !important;
    right: 74px;
    max-width: calc(100vw - var(--zt-chat-right) - 86px);
    box-sizing: border-box;
}

/* ---------- Пока на экране уведомление о cookie ----------
   На узких экранах карточка уведомления занимает почти всю ширину,
   и пузырь ложится на её кнопки. Класс ставит chat-widget.js, пока
   уведомление показано. Прячем прозрачностью, а не display: none, —
   виджет Битрикс24 сам переключает классы видимости, и своё состояние
   он при этом не теряет. */

@media (max-width: 900px) {
    html.zt-chat-hold .b24-widget-button-wrapper {
        opacity: 0;
        pointer-events: none;
    }
}

/* ---------- Уезжает при прокрутке вниз ----------
   Решение заказчика 06.10.2026. Плавающая кнопка лежит поверх прокручиваемого
   содержимого: в каталоге она закрывала кнопку «В корзину» той карточки, что
   попала в угол, а приглашение на широких экранах — карточку поиска. Пока
   посетитель листает вниз, пузырь уезжает за нижний край; остановился или
   потянул вверх — возвращается. Класс ставит chat-widget.js.

   Уводим через `bottom`, а не через `transform`: `transform` занят самим
   виджетом — он показывает пузырь анимацией масштаба, и наше значение
   сломало бы появление. */

html.zt-chat-away .b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
    bottom: -110px;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Движения меньше, если система просит ---------- */

@media (prefers-reduced-motion: reduce) {
    .b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
        transition: none;
    }
}