/*
 * Чат с покупателями — витрина.
 *
 * Все классы начинаются с shop-chat, и это не украшение: виджет висит на каждой
 * странице магазина, включая оформление заказа, и не имеет права задеть чужую вёрстку.
 * По той же причине здесь нет ни одного правила для тегов и общих классов темы.
 */

/*
 * Ничего с атрибутом hidden не показываем — это правило обязано стоять ПЕРЕД всеми
 * остальными и быть сильнее их.
 *
 * Причина не теоретическая: браузер прячет hidden своим правилом `display: none`,
 * и любое наше `display: flex` его перебивает — просто потому, что наше правило
 * из таблицы страницы, а браузерное из встроенной. Из-за этого 31.08.2026 на витрине
 * висела пустая белая плашка приглашения, а поля «Где мой заказ?» и «Найти товар»
 * стояли раскрытыми вместо свёрнутых: скрипт честно ставил hidden, а стиль его отменял.
 */
.shop-chat[hidden],
.shop-chat [hidden],
.shop-chat-panel[hidden],
.shop-chat-panel [hidden] {
    display: none !important;
}

/*
 * Цвета чата берутся у темы, а не забиты числами (CHUNK-098).
 *
 * Тема InSale объявляет свои цвета переменными на :root (257 штук), и настройки её
 * цветовой схемы меняют именно их. Пока чат читает те же переменные, он меняет цвет
 * вместе с магазином — без единой правки кода. Запасное значение у каждой обязательно:
 * сменят тему целиком — переменных не станет, и без запасного чат остался бы вовсе
 * без цветов.
 *
 * Соответствие такое:
 *   --c-b          фон кнопок темы (#8bbb67)
 *   --c-b-h        он же под курсором (#80ab5e)
 *   --c-b-c        текст на кнопке (#ffffff)
 *   --c-f-p-c-c-bg фон счётчика корзины в нижней панели (#ff4747)
 */
.shop-chat,
.shop-chat-panel {
    --chat-accent: var(--c-b, #8bbb67);
    --chat-accent-hover: var(--c-b-h, #80ab5e);
    --chat-on-accent: var(--c-b-c, #fff);
    --chat-badge: var(--c-f-p-c-c-bg, #ff4747);
    --chat-line: #e6e6e6;
    --chat-muted: #777;
    /*
     * Скругления — три значения на всё окно (CHUNK-107). До этого их было восемь
     * (4, 6, 8, 9, 10, 12, 15, 18 и 26 px): окно скруглено на одно, кнопка вызова
     * на другое, «Помощь» на третье, поля на четвёртое — и окно не читалось как
     * один предмет. Поля и мелкие кнопки — s, пузыри и карточки — m, кнопки-действия
     * и кнопка вызова — целиком круглые торцы.
     */
    --chat-r-s: 8px;
    --chat-r-m: 14px;
    --chat-r-pill: 999px;
}

.shop-chat {
    position: fixed;
    /* Сторона и отступы приходят отдельным правилом из настроек плагина (CHUNK-090):
       в углу экрана уже сидят кнопка обратного звонка и Живосайт, и развести их надо
       уметь без правки этого файла. Здесь — только запасные значения на случай,
       если то правило почему-то не дошло. */
    left: 20px;
    bottom: 20px;
    z-index: 9000;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

/* --- Вход из нижней панели темы (CHUNK-098) --- */

/*
 * Пункт панели скрипт собирает классами самой темы (s-hicon / s-hicon__name /
 * s-hicon__count hcount), поэтому размеры, отступы и поведение он получает от неё же.
 *
 * А вот цвет — наш: пункт «Чат» рядом с «Избранное» и «Просмотренные» терялся, его
 * просто не было видно (замечание владельца 31.08.2026). Поэтому он выкрашен
 * в фирменный зелёный магазина и читается как небольшая вкладка — в пару к зелёной
 * кнопке корзины на другом конце той же панели.
 *
 * `!important` здесь не лень, а необходимость: тема красит эти же элементы правилами
 * из трёх классов (`.f-panel-1 .f-panel__icon .s-hicon__name` и подобными), и наш
 * селектор проиграл бы им по весу. Спорить с покупной темой «кто длиннее селектор»
 * — гонка, которую всё равно проигрывает тот, кто пишет её первым.
 */
.shop-chat-panel:not(.shop-chat-panel_small) {
    background: var(--chat-accent) !important;
}

.shop-chat-panel:not(.shop-chat-panel_small):hover {
    background: var(--chat-accent-hover) !important;
}

.shop-chat-panel > a,
.shop-chat-panel .s-hicon__name,
.shop-chat-panel svg {
    color: var(--chat-on-accent) !important;
    cursor: pointer;
}

.shop-chat-panel__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Запасной цвет счётчика. В нижней панели его обычно перекрашивает сама тема
   (`.f-panel-1 .f-panel__icon .hcount`) — и это правильно: счётчик чата должен
   выглядеть как счётчик у соседей. Правило нужно там, где темы нет. */
.shop-chat-panel__count {
    background-color: var(--chat-badge);
    color: #fff;
}

/*
 * Тот же пункт, но в «маленькой» мобильной панели темы: там ряд квадратных кнопок
 * 40×40 (бургер, корзина) и широкая кнопка обратного звонка. Наш встаёт последним,
 * справа от звонка, и повторяет форму соседей — скругление и тень взяты у них,
 * цвет наш, фирменный зелёный магазина (CHUNK-104).
 *
 * Размер держим жёстко: места в панели впритык, и пункт не имеет права ни сжаться,
 * ни растянуться, ни перенести панель на вторую строку.
 */
.shop-chat-panel_small {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.shop-chat-panel_small > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 6px;
    background: var(--chat-accent);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    text-decoration: none;
}

.shop-chat-panel_small .shop-chat-panel__icon {
    width: 20px;
    height: 20px;
}

/* Счётчик поверх кнопки, а не в потоке: иначе появление числа раздвинуло бы
   кнопку и сдвинуло всю панель. */
.shop-chat-panel_small .shop-chat-panel__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--chat-badge);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

/* Пункт панели встал — плавающая кнопка не нужна. Класс вешает скрипт и только
   после того, как пункт реально добавлен на страницу. */
.shop-chat_panel .shop-chat__launcher {
    display: none;
}

/* Окно поднимаем над панелью, иначе оно накрывает собой и панель, и вход в чат.
   Селектор с #shop-chat не для красоты: отступ снизу приходит из настроек правилом
   `#shop-chat { bottom: Npx }` (head.html), и правило по одному классу его не перебьёт. */
#shop-chat.shop-chat_panel {
    bottom: 64px;
}

/* --- Плавающая кнопка (запасной вход) --- */

/*
 * Запасной вход — только для страниц, где тема прячет нижнюю панель (оформление заказа,
 * корзина). Постоянной второй кнопки на обычных страницах нет и не должно быть: решение
 * владельца 31.08.2026 — заметным делаем сам пункт панели, а не заводим ещё одну
 * плавающую кнопку.
 *
 * Зелёная, а не красная, — сознательно: в том же углу витрины висит коралловая вкладка
 * обратного звонка (#F95F5F, она ещё и подпрыгивает скриптом). Две одинаково красные
 * дёргающиеся кнопки рядом — хуже, чем одна.
 */
.shop-chat__launcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .26);
    /* Появление: кнопка всплывает снизу один раз. `both` оставляет её на месте
       после конца — без него она мигнула бы обратно в прозрачность. */
    animation: shop-chat-rise .45s ease-out both;
}

.shop-chat__launcher:hover {
    background: var(--chat-accent-hover);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

@keyframes shop-chat-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.shop-chat__launcher-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.shop-chat__bubble {
    width: 22px;
    height: 22px;
}

/*
 * «Печатающиеся» точки внутри облачка вместо пульсирующего круга вокруг кнопки.
 * Круг-пульсация стоит сегодня на каждом втором сайте и уже ничего не значит,
 * а точки читаются мгновенно: «там кто-то есть».
 *
 * Шесть повторов и тишина. Бесконечное движение рядом с кнопкой оформления заказа —
 * это способ потерять заказ, а не получить обращение.
 */
.shop-chat__dot {
    opacity: .5;
}

.shop-chat_attention .shop-chat__dot,
.shop-chat-panel_attention .shop-chat__dot {
    animation: shop-chat-typing 1.4s ease-in-out 6 both;
}

.shop-chat_attention .shop-chat__dot_2,
.shop-chat-panel_attention .shop-chat__dot_2 { animation-delay: .18s; }

.shop-chat_attention .shop-chat__dot_3,
.shop-chat-panel_attention .shop-chat__dot_3 { animation-delay: .36s; }

@keyframes shop-chat-typing {
    0%, 55%, 100% { opacity: .45; transform: translateY(0); }
    25%           { opacity: 1;   transform: translateY(-1.6px); }
}

/* Системная настройка «уменьшить движение» — это просьба, а не пожелание:
   для части людей движение на экране означает тошноту и головную боль. */
@media (prefers-reduced-motion: reduce) {
    .shop-chat__launcher,
    .shop-chat__window_in,
    .shop-chat__window_out,
    .shop-chat__invite,
    .shop-chat_attention .shop-chat__dot,
    .shop-chat-panel_attention .shop-chat__dot {
        animation: none;
    }

    /* Затенение остаётся — уходит только размытие и плавность появления. */
    .shop-chat_helping .shop-chat__body {
        filter: none;
        transition: none;
    }

    .shop-chat__dot {
        opacity: 1;
    }
}

.shop-chat_open .shop-chat__launcher {
    display: none;
}

/* --- Окно --- */

.shop-chat__window {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 40px);
    /*
     * Высота задана, а не набирается содержимым (замечание владельца 01.09.2026).
     * Раньше окно росло с каждым сообщением: открывалось низким, а к третьей реплике
     * подскакивало вверх — читать в прыгающем окне неудобно, а на оформлении заказа
     * такой скачок ещё и перекрывает то, что покупатель только что видел.
     *
     * Заметно это стало после CHUNK-112: до него окно держала высоким развёрнутая
     * форма знакомства внутри ленты, и рост начинался уже от большой высоты.
     * Форма свернулась в плашку — и рост стал виден целиком.
     *
     * На телефоне это правило не работает: там окно и так во весь экран
     * (медиазапрос в конце файла).
     */
    height: 540px;
    max-height: 74vh;
    border-radius: var(--chat-r-m);
    background: #fff;
    /* Тень мягче и ниже: с белой шапкой прежняя плотная тень делала окно похожим
       на наклейку поверх страницы, а не на её часть. */
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;
}

/*
 * Окно появляется и уходит движением, а не рывком. Коротко — около 0,2 с: чат стоит
 * и на оформлении заказа, и любая задержка там ощущается как «подвисло».
 *
 * Точка роста снизу: окно раскрывается от входа в чат, а не из воздуха посреди экрана.
 */
@keyframes shop-chat-window-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes shop-chat-window-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(10px) scale(.985); }
}

.shop-chat__window {
    transform-origin: bottom center;
}

.shop-chat__window_in {
    animation: shop-chat-window-in .2s ease-out;
}

/* forwards — чтобы окно осталось невидимым до того момента, когда скрипт его спрячет
   по-настоящему; иначе в конце анимации оно мигнуло бы обратно. */
.shop-chat__window_out {
    animation: shop-chat-window-out .16s ease-in forwards;
}

/*
 * Шапка белая с фирменной полосой снизу, а не сплошная зелёная плашка (CHUNK-107).
 * Причина не в красоте: зелёный работал в окне сразу тремя ролями — шапка, сообщения
 * покупателя, все кнопки, — и «Отправить» переставала быть заметнее прочего зелёного.
 * Освободившееся место занято тем, что покупателю полезно: отвечают ли сейчас.
 */
.shop-chat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 14px;
    border-bottom: 3px solid var(--chat-accent);
    background: #fff;
    color: #222;
}

.shop-chat__head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.shop-chat__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

/* Точка состояния — не украшение: «Ответим в рабочее время» вместо «Отвечаем сейчас»
   меняет то, чего покупатель ждёт от следующей минуты. */
.shop-chat__status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    color: #6a6a6a;
    font-size: 11.5px;
    line-height: 1.3;
}

.shop-chat__status::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-accent);
}

.shop-chat__status_offline::before {
    background: #c4c4c4;
}

/* Крестик — область нажатия 36×36, а не голая буква: пальцем в 14 точек не попасть. */
.shop-chat__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #8a8a8a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.shop-chat__close:hover {
    background: #f1f2f3;
    color: #222;
}

/*
 * Прокручивается и сжимается ровно одна часть окна — тело переписки.
 *
 * Это не украшательство: у частей flex-колонки `flex-shrink` по умолчанию равен
 * единице, поэтому при нехватке высоты сжимаются ВСЕ части поровну, включая форму
 * ввода. Её содержимое вылезает за сжатую коробку, а `overflow: hidden` у окна его
 * срезает — именно так 31.08.2026 у покупателя оказалась обрезана снизу скрепка.
 * `min-height: 0` обязателен: без него flex-часть не даёт себя сжать меньше
 * содержимого, и прокрутка внутри не включается вовсе.
 */
.shop-chat__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px;
    overflow-y: auto;
    /* Поле переписки отделено фоном от шапки и формы. Без этого сообщение висело
       в белой пустоте, и было непонятно, где вообще идёт разговор (замечание
       владельца 31.08.2026). */
    background: #f4f5f6;
}

.shop-chat__header,
.shop-chat__mode,
.shop-chat__rating,
.shop-chat__help,
.shop-chat__error,
.shop-chat__form {
    flex: 0 0 auto;
}

/*
 * Плашка знакомства не сжимается — как заголовок и форма, и по той же причине.
 *
 * Право сжиматься у неё сначала было, и его пришлось забрать: при раскрытом меню
 * «Помощь» плашку зажимало между списком команд и полем ввода, и она показывалась
 * обрезанной — видно строку и верхушки кнопок, а низа нет (замечание владельца
 * 01.09.2026). Сжимать в окне должно ровно одно — тело переписки (CHUNK-099).
 *
 * Потолок высоты при этом остаётся: раскрытая форма — почти три сотни точек, и без
 * потолка в невысоком окне она вытеснила бы собой и переписку, и поле ввода.
 * Внутри потолка форма прокручивается сама.
 */
.shop-chat__intro {
    flex: 0 0 auto;
    max-height: 55%;
}

/* Приветствие и заглушка нерабочего времени — это тоже реплики магазина, поэтому
   и выглядят они как реплики: с них переписка читается как переписка с первого взгляда. */
.shop-chat__greeting {
    display: inline-block;
    max-width: 85%;
    margin-bottom: 8px;
    padding: 9px 13px;
    border-radius: var(--chat-r-m) var(--chat-r-m) var(--chat-r-m) 4px;
    background: #fff;
    color: #333;
    line-height: 1.55;
}

.shop-chat__waiting {
    margin: 6px 0 2px;
    color: var(--chat-muted);
    font-size: 12px;
    text-align: center;
}

/* --- Сообщения --- */

.shop-chat__message {
    margin-bottom: 8px;
    max-width: 85%;
}

.shop-chat__message_customer {
    margin-left: auto;
    text-align: right;
}

.shop-chat__message-text {
    display: inline-block;
    padding: 9px 13px;
    line-height: 1.55;
    border-radius: var(--chat-r-m) var(--chat-r-m) var(--chat-r-m) 4px;
    background: #fff;
    text-align: left;
    /* Длинный адрес или слово без пробелов не должны растягивать окно чата */
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

.shop-chat__message_customer .shop-chat__message-text {
    border-radius: var(--chat-r-m) var(--chat-r-m) 4px var(--chat-r-m);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
}

/*
 * Ответ менеджера с форматированием (CHUNK-097). Разметку собирает сервер по белому
 * списку, здесь только вид: сообщение покупателя этих правил не касается — оно
 * по-прежнему ставится текстом.
 */
.shop-chat__message-text_html {
    white-space: normal;
}

.shop-chat__message-text_html ul {
    margin: 4px 0;
    padding-left: 18px;
}

.shop-chat__message-text_html a {
    color: inherit;
    text-decoration: underline;
}

/* --- Знакомство --- */

/*
 * Плашка над полем ввода (CHUNK-112). До этого чанка здесь стояла развёрнутая форма
 * внутри ленты переписки, и она была преградой: не заполнил имя и телефон — не написал.
 *
 * Теперь свёрнутая полоса, которая предлагает, а не требует. Место выбрано вплотную
 * к полю ввода и вне прокручиваемого тела: предложение не должно уезжать вверх вместе
 * с перепиской, иначе к третьему сообщению его уже не найти.
 */
.shop-chat__intro {
    padding: 8px 14px;
    border-top: 1px solid var(--chat-line);
    background: #fafafa;
    /* Потолок высоты и сжатие — правилом ниже, рядом с остальной раскладкой окна. */
    overflow-y: auto;
}

.shop-chat__intro-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.shop-chat__intro-bar-text {
    flex: 1 1 140px;
    color: #555;
    font-size: 12px;
    line-height: 1.35;
}

.shop-chat__intro-bar-buttons {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
}

/*
 * Подсветка после первого ответа менеджера (решение владельца 01.09.2026). Меняются
 * только цвета — ни одной новой строки и ни одного лишнего пикселя высоты: иначе лента
 * переписки дёрнулась бы ровно тогда, когда человек читает ответ.
 *
 * color-mix даёт бледный оттенок фирменного цвета темы, каким бы он ни был; браузеру
 * без поддержки достаётся заданный до этого серый фон, и плашка просто не подсветится.
 */
.shop-chat__intro_hint {
    background: color-mix(in srgb, var(--chat-accent) 12%, #fff);
    transition: background 0.25s ease;
}

.shop-chat__intro_hint .shop-chat__intro-bar-text {
    color: #333;
}

.shop-chat__login-button {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * «Оставить контакты» — второстепенное действие рядом с «Войти», поэтому контурная,
 * а не залитая. Две залитые кнопки подряд заставляли бы выбирать между ними, хотя
 * выбор здесь неравнозначный: вход даёт покупателю больше.
 */
.shop-chat__intro-open {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid var(--chat-accent);
    border-radius: var(--chat-r-pill);
    background: transparent;
    color: var(--chat-accent-hover);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.shop-chat__intro-form {
    padding-top: 10px;
}

.shop-chat__intro-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.shop-chat__intro-save {
    padding: 8px 18px;
    border: 0;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.shop-chat__intro-save:disabled {
    opacity: 0.6;
    cursor: default;
}

.shop-chat__intro-cancel {
    padding: 8px 6px;
    border: 0;
    background: none;
    color: var(--chat-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.shop-chat__login-hint {
    margin-bottom: 8px;
    color: #666;
    font-size: 12px;
}

.shop-chat__intro-text {
    margin-bottom: 8px;
    color: #555;
}

.shop-chat__field {
    display: block;
    margin-bottom: 8px;
}

.shop-chat__label {
    display: block;
    margin-bottom: 3px;
    color: #666;
    font-size: 12px;
}

.shop-chat__field input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #d8d8d8;
    border-radius: var(--chat-r-s);
    font-size: 14px;
    box-sizing: border-box;
}

.shop-chat__consent {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #666;
    font-size: 12px;
}

/*
 * Галочка не имеет права сжиматься. У элементов внутри flex сжатие включено
 * по умолчанию, и длинный текст согласия рядом давил её в узкую полоску: на телефоне
 * вместо квадрата 20×20 получалось 13×20 (замечание владельца 01.09.2026). Чем уже
 * экран, тем сильнее — на компьютере это почти незаметно, поэтому и не всплыло раньше.
 *
 * Правый отступ обнулён: тема даёт каждому чекбоксу margin-right: 5px, и вместе
 * с нашим gap расстояние до текста получалось двойным.
 */
/* Два класса в селекторе — не лишнее слово: правило темы `input[type="checkbox"]`
   весит класс + тег, и один наш класс ему проигрывает. Сжатие чинилось и без этого
   (у темы нет flex-shrink), а вот отступ оставался её — и зазор до текста получался
   двойным: 5 пикселей темы поверх нашего gap. */
.shop-chat__consent .shop-chat__consent-input {
    flex: 0 0 auto;
    margin: 2px 0 0;
}

/*
 * Шаг согласия перед первым сообщением (CHUNK-139).
 *
 * Раскладка та же, что у плашки знакомства: `flex: 0 0 auto` — сжиматься в окне имеет
 * право только тело переписки (правило CHUNK-099). Дай сжиматься шагу — и при длинной
 * переписке ему срежет низ вместе с кнопкой «Согласен», то есть ровно то, ради чего
 * он и показан.
 *
 * Фон выделен: это не сноска, а место, где от покупателя ждут действия.
 */
.shop-chat__consent-step {
    flex: 0 0 auto;
    padding: 12px 14px;
    border-top: 1px solid var(--chat-line);
    background: #fffbe9;
}

.shop-chat__consent-step-text {
    color: #333;
    font-size: 13px;
    line-height: 1.4;
}

.shop-chat__consent-step-text a {
    color: var(--chat-accent-hover);
    text-decoration: underline;
}

.shop-chat__consent-step-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* «Согласен» — залитая, «Не согласен» — приглушённая: выбор здесь неравнозначный,
   и кнопки об этом честно говорят, не пряча при этом отказ. */
.shop-chat__consent-yes {
    padding: 8px 18px;
    border: 0;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.shop-chat__consent-no {
    padding: 8px 6px;
    border: 0;
    background: none;
    color: var(--chat-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/*
 * Строка о согласии под кнопкой отправки (CHUNK-112). Заменяет галочку у сообщения
 * без контактов: там персональных данных в форме нет вовсе, и отметка под пустым
 * полем была бы тем самым лишним шагом, ради снятия которого чанк и делался.
 * Мелко и приглушённо — это сноска, а не действие.
 */
.shop-chat__terms {
    margin-top: 8px;
    color: var(--chat-muted);
    font-size: 11px;
    line-height: 1.35;
}

.shop-chat__terms a {
    color: inherit;
    text-decoration: underline;
}

/* --- Ошибка и форма --- */

.shop-chat__error {
    padding: 8px 14px;
    background: #fdecea;
    color: #a01919;
    font-size: 13px;
}

/*
 * Поле ввода занимает всю ширину, а скрепка и «Отправить» стоят под ним (CHUNK-098):
 * в одну строку с кнопками поле сжималось до двух слов, и покупатель писал вопрос
 * в щель. Ради этого форма стала в две строки — это ровно та высота, которую освободили
 * свёрнутые «Где мой заказ?» и «Найти товар».
 */
.shop-chat__form {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--chat-line);
    /* Нижняя панель — отдельная полоса, как в привычных мессенджерах: белая, поверх
       серого поля переписки. Человек сразу видит, где он печатает, а где читает. */
    background: #fff;
}

.shop-chat__text {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    border-radius: var(--chat-r-s);
    font-family: inherit;
    font-size: 14px;
    resize: none;
    box-sizing: border-box;
}

/*
 * Три кнопки — одной высоты и одной формы (CHUNK-107). До этого «Помощь» была пилюлей
 * с рамкой, скрепка — кругом без фона, «Отправить» — прямоугольником, и все трёх разных
 * высот: строка из трёх кнопок читалась как три случайных предмета.
 */
.shop-chat__form-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.shop-chat__help-toggle,
.shop-chat__attach,
.shop-chat__send {
    height: 36px;
    box-sizing: border-box;
}

/* «Отправить» уезжает вправо, «Помощь» и скрепка остаются слева. */
.shop-chat__send {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 20px;
    border: 0;
    border-radius: var(--chat-r-pill);
    font-size: 14px;
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    cursor: pointer;
}

.shop-chat__send:hover {
    background: var(--chat-accent-hover);
}

.shop-chat__send:disabled {
    opacity: .6;
    cursor: default;
}

/* --- Непрочитанное и неотправленное (CHUNK-081) --- */

.shop-chat__badge {
    /* Кружок на свёрнутой кнопке. Позиционируется поверх неё, а не в потоке,
       чтобы появление счётчика не дёргало ширину кнопки. */
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--chat-badge);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
}

.shop-chat__message_failed .shop-chat__message-text {
    background: #fdecea;
    color: #a01919;
}

.shop-chat__retry {
    display: block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #a01919;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Карточка товара и поиск в чате (CHUNK-084) --- */

.shop-chat__product {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

.shop-chat__product-image {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.shop-chat__product-info {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-chat__product-name {
    display: block;
    color: inherit;
    text-decoration: underline;
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-chat__product-price {
    margin-top: 2px;
    font-weight: 600;
}

.shop-chat__product-buy {
    margin-top: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    font-size: 13px;
    cursor: pointer;
}

.shop-chat__product-out {
    margin-top: 4px;
    color: #999;
    font-size: 12px;
}

/* --- Меню команд «Помощь» (CHUNK-099) --- */

/*
 * Все возможности чата собраны в одном месте и не занимают окно, пока не нужны.
 * До этого «Где мой заказ?» стояло в окне дважды — быстрой кнопкой сверху и
 * кнопкой-инструментом снизу; повторы теперь отсеиваются по названию в chat.js.
 */
.shop-chat__help {
    padding: 10px 14px;
    border-top: 1px solid var(--chat-line);
    background: #fafafa;
}

.shop-chat__help-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/*
 * Меню «Помощь» открыто — переписка позади него гаснет и уходит из фокуса (CHUNK-107).
 * Сейчас решается один вопрос: что выбрать из плашки, — и читать в этот момент нечего.
 * pointer-events снимаются заодно: попытка нажать «Ответить» на сообщении под
 * полупрозрачным слоем — верный способ решить, что чат подвис.
 */
.shop-chat_helping .shop-chat__body {
    opacity: .4;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity .15s ease, filter .15s ease;
}

.shop-chat_helping .shop-chat__help {
    box-shadow: 0 -10px 22px -14px rgba(0, 0, 0, .45);
}

/*
 * Выбор темы обращения — шаг обязательный, и поле ввода на это время закрыто.
 *
 * Это не строгость ради строгости. Поле стоит прямо под списком тем и выглядит
 * приглашением написать, а поток переключает ТОЛЬКО выбор темы: написав мимо списка,
 * покупатель отправлял беду с сайтом в общий чат к менеджерам вместо техподдержки —
 * молча, без единой ошибки на экране (случай 01.09.2026).
 */
.shop-chat_picking .shop-chat__text {
    background: #f6f7f8;
    color: #9a9a9a;
    cursor: not-allowed;
}

.shop-chat_picking .shop-chat__attach {
    opacity: .4;
    pointer-events: none;
}

/* Заголовок плашки при выборе темы — вопрос, на который сейчас отвечают, а не подпись. */
.shop-chat_picking .shop-chat__help-head {
    color: #333;
    font-weight: 600;
}

.shop-chat__help-item {
    padding: 6px 13px;
    border: 1px solid #dcdcdc;
    border-radius: var(--chat-r-pill);
    background: #fff;
    color: #444;
    font-size: 13px;
    cursor: pointer;
}

.shop-chat__help-item:hover {
    border-color: var(--chat-accent);
    color: #222;
}

.shop-chat__help-toggle {
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid #dcdcdc;
    border-radius: var(--chat-r-pill);
    background: #fff;
    color: #444;
    font-size: 13px;
    cursor: pointer;
}

.shop-chat__help-toggle:hover {
    border-color: var(--chat-accent);
}

.shop-chat__help-toggle[aria-expanded="true"] {
    border-color: var(--chat-accent);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
}

.shop-chat__order-box,
.shop-chat__search-box {
    display: flex;
    gap: 6px;
}

.shop-chat__order-phone,
.shop-chat__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid #d8d8d8;
    border-radius: var(--chat-r-s);
    font-size: 14px;
    box-sizing: border-box;
}

.shop-chat__order-go,
.shop-chat__search-go {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    cursor: pointer;
}

.shop-chat__search-none {
    color: var(--chat-muted);
    font-size: 13px;
}

/* --- Быстрые кнопки, офлайн-режим, приглашение (CHUNK-085) --- */

/* Одной строкой, а не жёлтым блоком в пол-окна (CHUNK-098): это уточнение,
   а не предупреждение — сообщение чат принимает и вне рабочих часов. */
/*
 * Это уточнение магазина, а не его реплика, — и выглядеть должно иначе. Белым пузырём
 * оно шло сразу за приветствием, и два одинаковых пузыря подряд читались как два
 * сообщения от магазина (CHUNK-107). Коротко то же самое стоит в шапке; здесь —
 * подробности, с какого по какой час.
 */
.shop-chat__offline {
    display: block;
    margin: 0 0 12px;
    padding: 0 2px;
    color: var(--chat-muted);
    font-size: 12px;
    line-height: 1.45;
}

/*
 * Приглашение стоит НАД кнопкой чата, в том же нижнем углу, и не перекрывает страницу.
 * На оформлении заказа всплывающее окно поверх кнопки оплаты может стоить заказа —
 * ровно того, ради чего фишка и делается.
 */
/*
 * Появляется движением, а не рывком: плашка выскакивает без спроса, поверх того, что
 * покупатель читает, и мгновенное появление в углу экрана пугает (CHUNK-121).
 * Анимация, а не transition: элемент прячется атрибутом hidden, то есть display: none,
 * и переход по opacity с него бы не проиграл вовсе.
 */
@keyframes shop-chat-invite-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.shop-chat__invite {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--chat-r-m);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    animation: shop-chat-invite-in .22s ease-out;
}

/* Текст приглашения — настоящая кнопка, поэтому у неё снимается всё оформление
   кнопки браузера: выглядеть она должна как строка текста, а вести себя как кнопка. */
.shop-chat__invite-text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.shop-chat__invite-close {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #999;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.shop-chat_open .shop-chat__invite {
    display: none;
}

/* --- «Где мой заказ?» (CHUNK-086) --- */

/* Ответ приходит в ленту переписки, а не в отдельный блок под окном (CHUNK-099):
   там же, где идёт разговор, и окно от этого не растёт. */
.shop-chat__order-card {
    padding: 8px 10px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    background: #fafafa;
    text-align: left;
}

.shop-chat__order-line {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Собранный менеджером заказ (CHUNK-095) --- */

.shop-chat__cart {
    padding: 10px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    background: #fafafa;
    text-align: left;
}

.shop-chat__cart-title {
    font-weight: 600;
}

.shop-chat__cart-line {
    margin-top: 3px;
    font-size: 13px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-chat__cart-total {
    margin-top: 6px;
    font-weight: 600;
}

.shop-chat__cart-note {
    margin-top: 6px;
    color: var(--chat-muted);
    font-size: 12px;
}

.shop-chat__cart-go {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: var(--chat-r-pill);
    background: var(--chat-accent);
    color: var(--chat-on-accent);
    text-decoration: none;
}

.shop-chat__cart-go:hover {
    background: var(--chat-accent-hover);
}

/* --- Фото и файлы (CHUNK-087) --- */

.shop-chat__attach {
    /* position: relative — чтобы спрятанное поле выбора файла позиционировалось
       относительно самой скрепки, а не случайного предка выше по странице. */
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    background: #fff;
    color: var(--chat-muted);
    cursor: pointer;
}

.shop-chat__attach:hover {
    border-color: #c4c4c4;
    background: #f7f7f7;
    color: #333;
}

.shop-chat__attach-icon {
    width: 20px;
    height: 20px;
}

/* Настоящее поле выбора файла прячем, но не через display:none — иначе часть браузеров
   перестаёт открывать по нему диалог выбора при щелчке по подписи. */
.shop-chat__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.shop-chat__file-block {
    display: inline-block;
    max-width: 100%;
}

.shop-chat__file-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 12px;
}

.shop-chat__file-link {
    display: inline-block;
    padding: 7px 10px;
    border-radius: var(--chat-r-m);
    background: #f1f1f1;
    color: inherit;
    text-decoration: underline;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Оценка разговора (CHUNK-088) --- */

.shop-chat__rating {
    padding: 10px 14px;
    border-top: 1px solid var(--chat-line);
    background: #fafafa;
}

.shop-chat__rating-question {
    margin-bottom: 6px;
}

.shop-chat__rating-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.shop-chat__rating-good,
.shop-chat__rating-bad {
    padding: 6px 12px;
    border: 1px solid #dcdcdc;
    border-radius: var(--chat-r-pill);
    background: #fff;
    cursor: pointer;
}

.shop-chat__rating-comment {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: var(--chat-r-s);
    font-size: 14px;
    box-sizing: border-box;
}

/* --- Телефон и доступность (CHUNK-090) --- */

/*
 * Половина покупателей приходит с телефона (замер 29.08.2026: 8157 мобильных запросов
 * против 8162 десктопных). Поэтому на маленьком экране окно раскрывается на всю
 * площадь: полуокно в 340 px на экране шириной 360 px — это поле ввода в две строки
 * и переписка в три.
 */
@media (max-width: 560px) {
    .shop-chat_open {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        top: 0;
        bottom: 0 !important;
    }

    .shop-chat_open .shop-chat__window {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .shop-chat_open .shop-chat__body {
        /* Экранная клавиатура съедает низ экрана. Тело переписки сжимается, а поле
           ввода и заголовок остаются на месте — иначе покупатель набирает вслепую. */
        flex: 1 1 auto;
        min-height: 0;
    }

    .shop-chat__launcher-text {
        display: none;
    }

    .shop-chat__launcher {
        padding: 14px;
        border-radius: 50%;
    }

    /* На телефоне поле ввода поменьше: экранная клавиатура и так забирает половину
       экрана, и трёхстрочное поле не оставило бы места самой переписке. */
    .shop-chat__text {
        min-height: 48px;
    }
}

/* Пока окно раскрыто на весь экран, страница под ним не должна прокручиваться
   вместе с перепиской — класс вешается скриптом на <body>. */
body.shop-chat-locked {
    overflow: hidden;
}

/* Видимый фокус: чат должен быть проходим с клавиатуры, а не только мышью. */
.shop-chat button:focus-visible,
.shop-chat a:focus-visible,
.shop-chat input:focus-visible,
.shop-chat textarea:focus-visible,
.shop-chat-panel a:focus-visible {
    outline: 2px solid var(--chat-accent);
    outline-offset: 2px;
}

/* Текст при увеличении шрифта до 200% не должен рвать окно: нигде нет фиксированных
   высот у блоков с текстом, а длинные слова переносятся (правила выше). */

/* --- Ответ на конкретное сообщение (CHUNK-102) --- */

/* Цитата внутри сообщения: на что оно отвечает. Полоска слева — привычный для
   мессенджеров знак, читается без объяснений. */
.shop-chat__quoted {
    display: block;
    margin-bottom: 4px;
    padding: 5px 9px;
    border-left: 3px solid var(--chat-accent);
    background: rgba(0, 0, 0, .04);
    border-radius: var(--chat-r-s);
    font-size: 12px;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-chat__quoted-who {
    display: block;
    font-weight: 600;
}

.shop-chat__quoted-text {
    display: block;
    color: #555;
}

.shop-chat__message_customer .shop-chat__quoted {
    background: rgba(255, 255, 255, .75);
}

.shop-chat__message-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.shop-chat__message_customer .shop-chat__message-foot {
    justify-content: flex-end;
}

.shop-chat__message-time {
    color: #999;
    font-size: 11px;
}

/* Подписано словом, а не значком: контекстное меню по правой кнопке на телефоне
   недоступно, а половина покупателей приходит именно оттуда. */
.shop-chat__reply-to {
    padding: 0;
    border: 0;
    background: none;
    color: #888;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

.shop-chat__reply-to:hover {
    color: #444;
}

/* Полоска над полем ввода: на что отвечаем прямо сейчас. */
.shop-chat__quote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--chat-accent);
    background: #f4f5f6;
    border-radius: var(--chat-r-s);
    font-size: 12px;
}

.shop-chat__quote-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-chat__quote-who {
    display: block;
    font-weight: 600;
}

.shop-chat__quote-text {
    display: block;
    color: #555;
}

.shop-chat__quote-cancel {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #999;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* --- Обращение в техподдержку (CHUNK-103) --- */

/* Полоска под шапкой: покупатель должен понимать, что пишет не в обычный чат,
   и уметь вернуться обратно одним нажатием. */
.shop-chat__mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    background: #fff4d6;
    color: #7a5b00;
    font-size: 12px;
}

.shop-chat__mode-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-chat__mode-back {
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid #d8bd6a;
    border-radius: var(--chat-r-pill);
    background: #fff;
    color: #7a5b00;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.shop-chat__mode-back:hover {
    border-color: #b8912f;
    background: #fffaf0;
    color: #5f4600;
}

.shop-chat__help-head {
    width: 100%;
    margin-bottom: 4px;
    color: var(--chat-muted);
    font-size: 12px;
}