/**
 * Онлайн-консультант — виджет чата на витрине (задача 10).
 * Токены темы с фолбэками: виджет живёт вне темы и не должен ломаться, если
 * --ac-color / brand-tokens не пришли вовсе (см. docs/superpowers/specs/
 * 2026-08-17-storefront-consultant-design.md §4, §9).
 */

.gcs-root,
.gcs-root *,
.gcs-root *::before,
.gcs-root *::after {
    box-sizing: border-box;
}

.gcs-root {
    --gcs-accent: var(--ac-color, #0F5A4A);
    --gcs-accent-hover: var(--g-emerald-hover, #0A4438);
    --gcs-on-accent: #FFFFFF;
    --gcs-bg: var(--wrap-bg-color, #FFFFFF);
    --gcs-page-bg: var(--body-bg-color, #F7F4EE);
    --gcs-border: var(--border-elements-color, #E2D8CF);
    --gcs-text: var(--body-text-color, #1A1A1A);
    --gcs-text-muted: #767267;
    --gcs-bubble-ai-bg: #FFFFFF;
    --gcs-bubble-ai-text: #1A1A1A;
    --gcs-bubble-visitor-bg: var(--gcs-accent);
    /* НЕ хардкодить #FFFFFF: пузырь посетителя красится в --gcs-accent, а тот
       в тёмной теме — светлый мятный (#72DCC4 через --ac-color), белый текст на
       нём проваливает контраст (< 4.5:1, замечено живьём 2026-08-18). Текст на
       акцентной заливке обязан идти тем же токеном, что уже переключается по
       теме для иконки пузыря/кнопки отправки — --gcs-on-accent. */
    --gcs-bubble-visitor-text: var(--gcs-on-accent);
    /* --gcs-danger — цвет ТЕКСТА (ошибка сети, «Нет в наличии»), должен читаться
       на --gcs-page-bg своей темы: светлая тема — тёмно-красный на светлом рисовом
       фоне, тёмная — светло-коралловый на #1A1A1A. Проверено расчётом (см. отчёт
       task-10, WCAG relative luminance): #C94F4F как текст давал 4.1:1 на светлой
       и 3.9:1 на тёмной — обе ниже порога 4.5:1. --gcs-danger-bg — ОТДЕЛЬНЫЙ токен
       для заливки бейджа непрочитанного (белый текст поверх), не зависит от темы:
       нужна одна плотная заливка, а не читаемость текста на странице. */
    --gcs-danger: #A83232;
    --gcs-danger-bg: #B3261E;
    --gcs-radius: 18px;
    --gcs-shadow: 0 14px 34px rgba(20, 20, 16, 0.22);

    /* Round 5 «Кораблик + Причал» — брендовые токены, НЕ переключаются по теме
       (см. правку владельца в отчёте: пузырь/шапка/кораблик — фирменный якорь,
       одинаковый в обеих темах; переключается только тело панели). Источник
       цветов: marketing/brand/chaynaya-gavan-social-brandbook-2026.md —
       «чайный лес» / «льняной» / «янтарный». Фолбэки — те же хексы на случай,
       если бренд-токены темы (--gachami-green и т.п.) недоступны вовсе. */
    --gcs-brand-forest: #1C3D2E;
    --gcs-brand-cream: #F5F0E8;
    --gcs-brand-emerald: #0F5A4A;
    --gcs-brand-forest-deep: #123F35;
    --gcs-price: #C98A3B;

    /* Пузырь: всегда тёмно-лесной круг с кремовым контурным корабликом (обе темы —
       правка владельца, см. отчёт «уточнение по кораблику»). */
    --gcs-bubble-bg: var(--gcs-brand-forest);
    --gcs-bubble-ink: var(--gcs-brand-cream);
    /* Полноценный (пусть и невидимый) слой box-shadow, НЕ голое ключевое слово
       transparent: `box-shadow: var(--gcs-shadow), transparent` — второй слой без
       смещений синтаксически невалиден, браузер отбрасывает ВСЁ свойство целиком
       (проверено живьём: bubbleShadow == "none" в светлой теме вместо --gcs-shadow).
       0 0 0 0 transparent — валидный нулевой слой, ничего не рисует. */
    --gcs-bubble-ring: 0 0 0 0 transparent;

    /* Шапка панели: градиент изумруд→лес, кораблик на ней — всегда кремовый. */
    --gcs-header-grad-a: var(--gcs-brand-emerald);
    --gcs-header-grad-b: var(--gcs-brand-forest-deep);
    --gcs-header-ink: var(--gcs-brand-cream);

    /* Чипы — светлые пилюли (заливка), не обводка. */
    --gcs-chip-bg: var(--gcs-bubble-ai-bg);
    --gcs-chip-text: var(--gcs-brand-forest-deep);

    font-family: var(--main-font, inherit);
}

html.dark-theme .gcs-root,
.dark-theme .gcs-root {
    --gcs-on-accent: #0A2620;
    --gcs-bg: var(--wrap-bg-color, #282828);
    /* Тело панели тёмной темы — свой тон (#242424), НЕ --body-bg-color страницы
       (#1A1A1A): это тон самого виджета, отдельный от фона сайта — см. отчёт,
       блок 1 брифа round 5. */
    --gcs-page-bg: #242424;
    --gcs-border: var(--border-elements-color, rgba(255, 255, 255, 0.14));
    --gcs-text: var(--body-text-color, #ECE7DD);
    --gcs-text-muted: #A7ADA1;
    --gcs-bubble-ai-bg: #2E2E2C;
    --gcs-bubble-ai-text: #ECE7DD;
    --gcs-danger: #FF9B9B;
    --gcs-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);

    /* Тёмно-лесной круг (#1C3D2E) на тёмном фоне страницы (#1A1A1A) — расчётный
       контраст между ними ≈1.5:1 (WCAG), сами по себе почти сливаются. Кольцо —
       не альтернативный цвет пузыря (владелец: тот же лесной круг работает в
       обеих темах), а именно отделение от фона тонкой кремовой рамкой. */
    --gcs-bubble-ring: 0 0 0 1.5px rgba(245, 240, 232, 0.4);
    --gcs-header-grad-a: #0D4238;
    --gcs-header-grad-b: #0B2B24;
    --gcs-chip-text: var(--ac-color, #72DCC4);
}

/* -------------------------------------------------------------------- */
/* Флоатер темы Telegram — консультант его заменяет                    */
/* -------------------------------------------------------------------- */

/* Fix round 3 (Дефект 2): у темы есть свой плавающий круглый Telegram-флоатер
   (.gachami-fab, site/site/themes/gachami/floating-contact.html + правила
   позиционирования в site.custom-home.css: fixed right:16px/bottom:24px,
   60×60, только на главной и только ≥901px — на мобиле тема сама его
   прячет). Консультант садится в тот же угол (.gcs-bubble: right:20/bottom:20)
   и полностью берёт на себя «написать нам» — два круглых виджета внахлёст
   в одном углу лишние. ТЕМУ НЕ ТРОГАЕМ (общий файл с ekb.gachami.ru, где
   плагина gachamiconsult нет — там этот CSS вообще не подключается, и
   флоатер продолжит работать как раньше). Гасим его здесь же, в CSS плагина,
   а не в теме. */
.gachami-fab {
    display: none !important;
}

/* -------------------------------------------------------------------- */
/* Пузырь                                                                */
/* -------------------------------------------------------------------- */

.gcs-bubble {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000; /* см. отчёт task-10: cookie-баннер темы сидит на z-index 9999 в том же углу — 9998 из брифа перекрывался бы им и делал пузырь некликабельным до принятия cookies */
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Round 9: PNG-иконка владельца уже несёт круг+кольцо+заливку сама по
       себе (см. gcs-bubble__brand-icon ниже) — фон кнопки и кремовое кольцо
       (--gcs-bubble-ring, было нужно только для контраста тонкого SVG-
       кораблика на тёмном фоне страницы) гасим здесь, иначе «круг в круге».
       --gcs-shadow (мягкая тень, не кольцо) остаётся — отрыв от страницы.
       Токены --gcs-bubble-bg/--gcs-bubble-ring не удалены (см. токены выше) —
       понадобятся, если кораблик (boatIconSvg(), consult.widget.js) когда-
       нибудь вернётся на это место. */
    background: transparent;
    color: var(--gcs-bubble-ink);
    box-shadow: var(--gcs-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, bottom 0.25s ease, box-shadow 0.2s ease;
}

.gcs-bubble:hover {
    transform: scale(1.06);
}

.gcs-bubble:focus-visible {
    outline: 3px solid var(--gcs-brand-emerald);
    outline-offset: 3px;
}

/* Round 6, блок 1: докед-строка «Причал» убрана — пузырь теперь единственный
   мобильный вход, чуть уменьшен (48-52px вместо 56px десктопа). */
@media (max-width: 600px) {
    .gcs-bubble {
        width: 50px;
        height: 50px;
    }
}

/* viewBox кораблика 0 0 100 46 (round 6, блок 2) — соотношение ~2.17:1. */
.gcs-bubble__icon {
    width: 32px;
    height: 14.7px;
}

@media (max-width: 600px) {
    .gcs-bubble__icon {
        width: 28px;
        height: 12.9px;
    }
}

/* Round 9: иконка владельца (PNG, круг с 茶 + лист) в пузыре — квадратная
   картинка, круг уже в самом файле (альфа-канал), border-radius здесь —
   подстраховка, не единственная защита от углов. Инсет ~4px от диаметра
   кнопки (56→52, 50→46) — небольшая воздушная кайма вокруг картинки. */
.gcs-bubble__brand-icon {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: contain;
    pointer-events: none;
}

@media (max-width: 600px) {
    .gcs-bubble__brand-icon {
        width: 46px;
        height: 46px;
    }
}

.gcs-bubble__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--gcs-danger-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--gcs-bubble-bg);
}

/* -------------------------------------------------------------------- */
/* Кораблик — контурный SVG (page-02 бренд-бука), общий для пузыря,     */
/* шапки панели и мобильного «Причала». Разметка — svgEl('path', ...)   */
/* в js, классы ниже задают ТОЛЬКО геометрию обводки: цвет — через      */
/* stroke на самом <svg> (currentColor у пути), задаётся местом вставки. */
/* -------------------------------------------------------------------- */

.gcs-boat {
    fill: none;
    stroke: currentColor;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    overflow: visible;
}

/* Мобильная PDP: не перекрывать fixed-панель «В корзину».
   Фактический элемент — не .product-main__cart (тот -sk-sticky только на
   десктопе), а .product-fixed-cart.sk-bottom.sk-fixed из product.cart-fixed.html,
   которая одновременно вешает на body класс ghs-product-fixed-cart-on
   (site.js: productCartPanelFixed.showHide()). Используем оба признака —
   :has() как основной путь и body-класс как фолбэк для браузеров без :has().
   Round 6: «Причал» убран, .gcs-bubble — единственный виджет на этой ширине,
   поднимаем его же (round 3, логика без изменений). */
@media (max-width: 600px) {
    body.ghs-product-fixed-cart-on .gcs-bubble,
    body:has(.product-fixed-cart.sk-bottom.sk-fixed) .gcs-bubble {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* Cookie-баннер темы (#cookie-banner, site.custom.css) — полноширинная полоса
   bottom:0 на ВСЕХ шириной, не только мобиле. Обнаружено живьём (2026-08-18):
   баннер держит z-index 9999 (десктоп) / 9999999999 (≤600px, клампится браузером
   до 2147483647) — выиграть по z-index у пузыря физически невозможно, поэтому
   пузырь просто поднимается над баннером, пока тот показан, тем же приёмом,
   что уже применён в самой теме для контента (`body:has(#cookie-banner[style*="flex"])`,
   привязка к inline display:flex, который скрипт баннера меняет на display:none
   после «Принять» — элемент остаётся в DOM). 72px — то же число, которым тема
   резервирует место под баннер на всех страницах. Правило намеренно идёт ПОСЛЕ
   правила sticky buy-box: если оба условия совпали (баннер ещё не закрыт И
   уже проскроллили до fixed-панели покупки на PDP), приоритет — не закрывать
   баннером, у него выше цена ошибки (баннер вообще перекрывает клик, buy-box —
   просто визуально рядом). Без фолбэка на :has() — тема сама допускает это
   ограничение («Без поддержки :has() — не критично»), тот же компромисс здесь. */
body:has(#cookie-banner[style*="flex"]) .gcs-bubble {
    bottom: calc(20px + 72px + env(safe-area-inset-bottom, 0px));
}

/* Мобильная полноэкранная панель (≤600px): та же полоса cookie-баннера
   перекрывает форму отправки (input + кнопка), а не только пузырь — панель
   fixed inset:0 кладёт форму прямо на нижний край экрана, ровно там же, где
   баннер держит свои 2147483647 z-index (замечено живьём при QA задачи 10,
   Playwright 375×812: getBoundingClientRect формы и баннера пересекались
   целиком). Раз баннер физически не перебить по z-index, ужимаем высоту
   панели, чтобы форма оказалась выше него, а не под ним. 96px, не 72px
   (число из site.custom.css `body:has(#cookie-banner...) {padding-bottom}`):
   тот же живой прогон измерил фактическую высоту мобильного баннера ~82px
   (двухстрочный текст на узких экранах) — 72px самой темы уже недостаточно
   на этой ширине, берём с запасом. Как только баннер скрыт («Принять»
   меняет display:flex → none), :has() перестаёт совпадать и панель сама
   возвращается на полный экран. */
@media (max-width: 600px) {
    body:has(#cookie-banner[style*="flex"]) .gcs-panel {
        height: calc(100% - 96px - env(safe-area-inset-bottom, 0px));
    }
}

/* -------------------------------------------------------------------- */
/* Панель                                                                */
/* -------------------------------------------------------------------- */

/* Fix round 3 (Дефект 1): владелец вживую (ширина ~684px, светлая тема, каталог/
   карточка) видел панель «спрятанной за рамками экрана». Playwright-прогон по
   сетке 320–1920 × 600–900 на этом коммите overflow не воспроизвёл (right/left/
   top/bottom всегда внутри вьюпорта, ни один предок .gcs-panel/.gcs-root не
   transform/zoom — портал уже есть, root вешается прямо на document.body), но
   геометрия ДО этой правки не имела max-width вообще и держала max-height только
   на статичных 100vh — оба поля не защищены от реальных браузерных условий,
   которые headless-прогон не ловит (масштаб страницы, зум текста, мобильный
   тулбар, меняющий видимую высоту). Ниже — точный числовой гарант, а не общие
   слова: right:20px + max-width:calc(100vw - 32px) математически не пускают
   left ниже 12px ни при каком vw (left = vw − 20 − width ≥ vw − 20 − (vw − 32) =
   12), а calc(100dvh - 110px) с фолбэком на 100vh — тот же гарант по вертикали
   на браузерах, где «100vh» больше реально видимой области (адресная строка
   мобильного браузера). base-правило разделяет specificity с медиа-запросом
   ниже — там max-width/max-height ЯВНО сброшены в none, иначе полноэкранная
   мобильная панель (≤600px) ужалась бы этим же max-width. */
.gcs-panel {
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 10001;
    width: 380px;
    height: 560px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    display: none;
    flex-direction: column;
    background: var(--gcs-bg);
    color: var(--gcs-text);
    border: 1px solid var(--gcs-border);
    border-radius: var(--gcs-radius);
    box-shadow: var(--gcs-shadow);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.gcs-panel:not([hidden]) {
    display: flex;
}

.gcs-panel.gcs-panel--visible {
    opacity: 1;
    transform: none;
}

/* Round 6, блок 1: докед-строка «Причал» убрана (легла на мобильную нижнюю
   навигацию темы, .home-sticky-cta) — .gcs-bubble теперь виден на всех ширинах,
   включая ≤600px (сам круг уменьшен чуть выше, .gcs-bubble{width:50px}). */
@media (max-width: 600px) {
    .gcs-panel {
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        border: none;
    }
}

/* -------------------------------------------------------------------- */
/* Шапка панели                                                         */
/* -------------------------------------------------------------------- */

/* Шапка-градиент изумруд→лес (см. отчёт round 5, блок 1) — фирменный, почти не
   переключается по теме (только чуть темнее в .dark-theme, см. токены выше):
   кораблик и волна-разделитель ниже всегда кремовые/светлые поверх неё. */
.gcs-panel__header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 20px;
    background: linear-gradient(160deg, var(--gcs-header-grad-a), var(--gcs-header-grad-b));
    color: var(--gcs-header-ink);
    overflow: hidden;
}

.gcs-panel__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.gcs-panel__title {
    display: block;
    font-family: var(--g-serif, "Literata", Georgia, serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.gcs-panel__status {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.85;
}

.gcs-panel__status--human {
    opacity: 1;
    font-weight: 600;
}

/* Декоративный кораблик справа в шапке — не интерактивный, только для бренда.
   viewBox 0 0 100 46 (round 6, блок 2) — соотношение ~2.17:1. Round 9: больше
   не вызывается (см. buildPanel()), CSS оставлен вместе с boatIconSvg() в JS. */
.gcs-panel__boat {
    flex: 0 0 auto;
    width: 36px;
    height: 16.6px;
    opacity: 0.9;
}

/* Round 9: иконка владельца в шапке панели — вместо .gcs-panel__boat,
   ~28px по просьбе владельца. Квадратная картинка, круг уже в файле. */
.gcs-panel__brand-icon {
    flex: 0 0 auto;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    pointer-events: none;
}

/* Волна-разделитель снизу шапки — залита цветом тела панели своей темы, даёт
   плавный переход градиент → лента сообщений (как в мокапе варианта 2). */
.gcs-panel__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 10px;
    display: block;
}

.gcs-panel__wave path {
    fill: var(--gcs-page-bg);
}

/* Fix round 3 (третья правка того же раунда): круглые icon-кнопки без своего
   padding (эта и .gcs-send ниже) наследовали `padding: 0 30px` от темы
   (site-desktop.min.css/shop-desktop.min.css: `.button, .button-action,
   .button-link, button, input[type="button"], input[type="submit"]`) — у бара
   `button` в этом селекторе специфичность ниже класса, но СВОЙСТВО padding
   у наших кнопок не переопределено, поэтому побеждает единственное правило,
   которое его вообще задаёт. Явный padding, помимо box-sizing:border-box,
   не спасал: у flex-элемента с шириной меньше суммарного padding браузер
   всё равно берёт «автоматический минимум» по контенту (padding входит в
   min-content) и растягивает бокс — 32/40px превращались в 60px овал вместо
   круга (замечено живьём, скриншот темная тема: пустой зелёный овал вместо
   круглой кнопки отправки). `padding: 0` глушит источник, `min-width: 0` —
   защита на случай другого будущего правила той же природы. */
.gcs-panel__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcs-panel__close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.gcs-panel__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* -------------------------------------------------------------------- */
/* Лента сообщений                                                      */
/* -------------------------------------------------------------------- */

.gcs-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--gcs-page-bg);
}

.gcs-msg {
    max-width: 86%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gcs-msg--visitor {
    align-self: flex-end;
    align-items: flex-end;
}

.gcs-msg--ai,
.gcs-msg--operator {
    align-self: flex-start;
    align-items: flex-start;
}

.gcs-msg--system {
    align-self: center;
    max-width: 100%;
}

.gcs-msg__author {
    font-size: 11px;
    font-weight: 700;
    color: var(--gcs-accent);
    padding: 0 2px;
}

.gcs-msg__bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}

.gcs-msg--visitor .gcs-msg__bubble {
    background: var(--gcs-bubble-visitor-bg);
    color: var(--gcs-bubble-visitor-text);
    border-bottom-right-radius: 4px;
}

.gcs-msg--ai .gcs-msg__bubble,
.gcs-msg--operator .gcs-msg__bubble {
    background: var(--gcs-bubble-ai-bg);
    color: var(--gcs-bubble-ai-text);
    border: 1px solid var(--gcs-border);
    border-bottom-left-radius: 4px;
}

.gcs-msg--system .gcs-msg__bubble {
    background: transparent;
    border: 1px dashed var(--gcs-border);
    color: var(--gcs-text-muted);
    font-size: 13px;
    text-align: center;
}

.gcs-msg--error .gcs-msg__bubble {
    border: 1px solid var(--gcs-danger);
    color: var(--gcs-danger);
    background: transparent;
}

/* Ссылки внутри текста ответа (renderMessageText разбирает markdown [text](url) —
   Brain отвечает markdown'ом, см. js). Подчёркивание — сама ссылка на фоне
   пузыря иначе не отличима от обычного текста, особенно в bubble--ai. */
.gcs-msg__bubble a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

.gcs-msg--visitor .gcs-msg__bubble a:hover,
.gcs-msg--ai .gcs-msg__bubble a:hover,
.gcs-msg--operator .gcs-msg__bubble a:hover {
    color: var(--gcs-accent);
}

/* -------------------------------------------------------------------- */
/* Чипы быстрых вопросов                                                */
/* -------------------------------------------------------------------- */

.gcs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    align-self: flex-start;
    max-width: 100%;
}

/* Round 5: чипы — светлые пилюли (заливка), не обводка (см. отчёт, блок 1). */
.gcs-chip {
    border: 1px solid transparent;
    background: var(--gcs-chip-bg);
    color: var(--gcs-chip-text);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.gcs-chip:hover {
    border-color: var(--gcs-accent);
    transform: translateY(-1px);
}

/* -------------------------------------------------------------------- */
/* Карточки товаров                                                     */
/* -------------------------------------------------------------------- */

.gcs-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}

/* Round 6, блок 4: карточка — div-обёртка (не сам `<a>`), внутри ссылка на PDP
   (.gcs-product__link) и отдельная кнопка «В корзину» — вложенный интерактив в
   `<a>` невалиден/недоступен, поэтому кнопка стоит соседом, не потомком ссылки. */
.gcs-product {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--gcs-border);
    border-radius: 12px;
    background: var(--gcs-bg);
    transition: border-color 0.15s ease;
}

.gcs-product:hover {
    border-color: var(--gcs-accent);
}

.gcs-product__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    text-decoration: none;
    color: var(--gcs-text);
    transition: transform 0.15s ease;
}

.gcs-product__link:hover {
    transform: translateY(-1px);
}

.gcs-product__img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--gcs-page-bg);
}

.gcs-product__img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gcs-text-muted);
    font-size: 10px;
}

.gcs-product__body {
    min-width: 0;
    flex: 1 1 auto;
}

.gcs-product__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.gcs-product__price {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    /* Round 5: цены в карточках — янтарный, не акцентный (одинаково в обеих
       темах — «ценное» из бренд-палитры, см. --gcs-price). */
    color: var(--gcs-price);
}

.gcs-product__unavail {
    margin-top: 2px;
    font-size: 11px;
    color: var(--gcs-danger);
}

/* Round 6, блок 4: «В корзину» — компактная кнопка в стиле виджета (акцент темы),
   не растягивается (flex: 0 0 auto), текст не переносится (короткие подписи-
   состояния: «В корзину» / «…» / «Добавлено ✓» / «Не удалось»). */
.gcs-product__cart-btn {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    border: 1px solid var(--gcs-accent);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    background: transparent;
    color: var(--gcs-accent);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.gcs-product__cart-btn:hover:not(:disabled) {
    background: var(--gcs-accent);
    color: var(--gcs-on-accent);
}

.gcs-product__cart-btn:disabled {
    cursor: default;
    opacity: 0.75;
}

@media (max-width: 600px) {
    .gcs-product__cart-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* -------------------------------------------------------------------- */
/* «Печатает…»                                                          */
/* -------------------------------------------------------------------- */

/* display:flex только когда НЕ hidden — иначе побеждает наше же правило, а не
   UA-стиль [hidden]{display:none} (тот же порядок каскада, что уже учтён
   в .gcs-panel ниже): typing-индикатор был бы виден постоянно. Найдено живьём
   при проверке task-10 (Playwright: hidden=true, computed display=flex). */
.gcs-typing {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0 16px 10px;
    background: var(--gcs-page-bg);
}

.gcs-typing:not([hidden]) {
    display: flex;
}

.gcs-typing__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gcs-text-muted);
    animation: gcs-bounce 1.2s infinite ease-in-out;
}

.gcs-typing__dot:nth-child(2) {
    animation-delay: 0.15s;
}

.gcs-typing__dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes gcs-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* -------------------------------------------------------------------- */
/* Форма контакта при эскалации                                        */
/* -------------------------------------------------------------------- */

.gcs-contact {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid var(--gcs-border);
    background: var(--gcs-bg);
}

.gcs-contact__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.gcs-contact__row {
    margin-bottom: 8px;
}

.gcs-contact__row input[type="text"] {
    width: 100%;
    border: 1px solid var(--gcs-border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    background: var(--gcs-page-bg);
    color: var(--gcs-text);
    font-family: inherit;
}

.gcs-contact__row input[type="text"]:focus {
    outline: 2px solid var(--gcs-accent);
    outline-offset: 1px;
}

.gcs-contact__consent {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--gcs-text-muted);
    margin-bottom: 10px;
}

.gcs-contact__consent input {
    margin-top: 2px;
    flex: 0 0 auto;
}

.gcs-contact__consent a {
    color: var(--gcs-accent);
}

.gcs-contact__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gcs-contact__submit {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    background: var(--gcs-accent);
    color: var(--gcs-on-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.gcs-contact__submit:hover {
    background: var(--gcs-accent-hover);
}

.gcs-contact__note {
    font-size: 12px;
    color: var(--gcs-text-muted);
    margin: 0;
}

.gcs-contact__note--error {
    color: var(--gcs-danger);
}

.gcs-contact__note--success {
    color: var(--gcs-accent);
    font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Поле ввода                                                           */
/* -------------------------------------------------------------------- */

.gcs-panel__form {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gcs-border);
    background: var(--gcs-bg);
}

@media (max-width: 600px) {
    .gcs-panel__form {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

.gcs-input {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 120px;
    resize: none;
    border: 1px solid var(--gcs-border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.35;
    font-family: inherit;
    background: var(--gcs-page-bg);
    color: var(--gcs-text);
}

.gcs-input:focus {
    outline: 2px solid var(--gcs-accent);
    outline-offset: 1px;
}

/* padding:0 / min-width:0 — тот же фикс, что у .gcs-panel__close выше (см.
   комментарий там): без них кнопка отправки наследует padding:0 30px темы и
   раздувается flex-минимумом в овал 60×40 вместо круга 40×40. */
.gcs-send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--gcs-accent);
    color: var(--gcs-on-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcs-send svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.gcs-send:disabled {
    opacity: 0.5;
    cursor: default;
}

.gcs-send:hover:not(:disabled) {
    background: var(--gcs-accent-hover);
}

/* -------------------------------------------------------------------- */
/* prefers-reduced-motion                                               */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gcs-bubble,
    .gcs-chip,
    .gcs-product,
    .gcs-product__link,
    .gcs-product__cart-btn,
    .gcs-panel,
    .gcs-send {
        transition: none !important;
    }

    .gcs-typing__dot {
        animation: none !important;
        opacity: 1;
    }
}