/* BOTIX — сайт v4: кнопки, шапка и подвал (концепт v4 §2–§3, MENU_FOOTER.md).
 *
 * Отдельный файл, потому что шапка и подвал общие: страницы v4 подключают его в <head>
 * (site-v4/partials/head.php), а после переключения (шаг 4.7) — и все страницы с боевыми
 * partials/landing-header.php и подвалами (Журнал, legal, партнёры, разработчики, посадочные
 * v2): они подключают разметку site-v4/partials/header.php / footer*.php и этот файл
 * (btx_v4_chrome_css()). Опирается на классы и переменные landing.css + tokens.css
 * (.header / .nav / .btn / .burger / .footer, --text, --text-muted, --bg-card, --border) —
 * их грузят все страницы лендинга.
 * Без флага important, без фиолетового, без внешних CDN.
 */

/* ========================
   Кнопки сайта (концепт v4 §3, ТЗ 4.4в §1): ровно два вида и один размер.
   Разметку даёт только кирпич site-v4/partials/v4-btn.php, надписи — словарь
   config/site_v4_content/_buttons-v4.php. Иконок и стрелок нет.
   Вид — как на действующем botix.pro (правки владельца 05.10 п.3, ТЗ 4.4и §1 п.1; красная
   главная кнопка концепта §3 отменена):
     главная — тёмно-серая, значения .btn-demo-cta (hero-v3.css: градиент #6E6E73 → #48484A,
               объём тенью, подъём на 1 px при наведении);
     вторая  — контурная, значения .v2-btn-outline (site-v2.css: фон карточки, рамка
               rgba(60,60,67,.18)).
   Размер у обеих один: 10px 22px, 14px, 600, радиус 8, ширина от 200 (как на бою);
   на телефоне — высота 44 px (тач-цель MOBILE_ADAPTIVE_GUIDE).
   Фокус и акценты — нейтральный графит #48484A (без красного и синего).
   ======================== */
.v4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 40px;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s, border-color .15s, color .15s;
}
.v4-btn:hover { text-decoration: none; }
.v4-btn:focus-visible { outline: 2px solid #48484A; outline-offset: 2px; }
/* Недоступна (кнопка формы заявки до прохождения капчи) */
.v4-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Главная — тёмно-серая (.btn-demo-cta боевого сайта) */
.v4-btn--primary {
    background: linear-gradient(180deg, #6E6E73 0%, #48484A 100%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 2px 6px rgba(0, 0, 0, .18),
        0 1px 2px rgba(0, 0, 0, .12);
}
.v4-btn--primary:hover {
    background: linear-gradient(180deg, #7A7A7E 0%, #48484A 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 5px 12px rgba(0, 0, 0, .22),
        0 2px 4px rgba(0, 0, 0, .14);
}
.v4-btn--primary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 1px 2px rgba(0, 0, 0, .14);
}
.v4-btn--primary[disabled]:hover { transform: none; }
/* Вторая — контурная (.v2-btn-outline боевого сайта) */
.v4-btn--secondary {
    background: var(--v2-card, var(--bg-card, #fff));
    border-color: rgba(60, 60, 67, .18);
    color: var(--v2-ink, var(--text, #1d1d1f));
}
.v4-btn--secondary:hover {
    border-color: rgba(60, 60, 67, .35);
    color: var(--v2-ink, var(--text, #1d1d1f));
}
@media (max-width: 767px) {
    .v4-btn { min-height: 44px; min-width: 0; }
}

/* ========================
   Шапка v4: шесть пунктов (Голосовой бот · Чат-бот · Чат команды · Примеры · Тарифы · Журнал —
   правки владельца 05.10 пп. 2, 20, 23 и решение 06.10 о «Журнале»), справа только «Войти»
   ссылкой — кнопки в шапке нет. Призыв на странице — первый экран и финал.
   Названия не сокращаются — где строка не помещается, меню уходит в бургер.
   ======================== */
/* Строка шапки: логотип 90 + меню ≈ 510 + справа ≈ 120 (тема 62, «Войти») при зазорах 24 / 22 / 12 —
   помещается в контейнер 1100 и в 1024 (замер 4.7: на 1024–1280 одна строка, между меню и
   «Войти» не меньше 230 px),
   переключатель темы виден на любой ширине от 1024. Меньше 1024 — меню в бургер. */
.v4-header .header-inner { gap: 24px; }
.v4-header .nav { gap: 22px; }
.v4-header .nav a { white-space: nowrap; }
.v4-header .nav a.active { color: var(--text); font-weight: 600; }
.v4-header .header-right { gap: 12px; }
.v4-header .v4-hdr-login {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.v4-header .v4-hdr-login:hover { color: var(--text-muted, #6e6e73); }
.v4-header .v4-hdr-login:focus-visible { outline: 2px solid #48484A; outline-offset: 2px; border-radius: 4px; }

/* Меню не помещается в строку — бургер (раньше общего порога лендинга 768) */
@media (max-width: 1023px) {
    .v4-header .header-inner { justify-content: space-between; }
    .v4-header .nav { display: none; }
    .v4-header .nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-card);
        padding: 16px 24px;
        gap: 2px;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        z-index: 99;
    }
    .v4-header .nav.open a {
        font-size: 16px;
        padding: 10px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .v4-header .burger { display: flex; }
}

/* ========================
   Подвал v4 (MENU_FOOTER.md §2): бренд + колонки, в колонке по одному-два раздела. Число колонок
   (--v4-foot-n) ставит site-v4/partials/footer.php по выведенным разделам: без «Партнёрам»
   (правки владельца п.22) — две, без пустой колонки посередине (ТЗ 4.7)
   ======================== */
.v4-footer-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(var(--v4-foot-n, 3), minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}
.v4-footer-tagline {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
    max-width: 260px;
}
.v4-footer-sub + .v4-footer-sub { margin-top: 24px; }
.v4-footer-cols h4 {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.v4-footer-cols a {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    padding: 3px 0;
    transition: color .2s;
}
.v4-footer-cols a:hover { color: var(--text); }
@media (max-width: 1024px) {
    .v4-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Мобильный подвал v4 (≤767px) — классы и значения мобильного подвала лендинга
   (partials/footer-mobile-v3.php, его стили живут в самом партиале и сюда не
   приходят); наведение — тёмный текст, как в десктопном подвале боевого сайта
   (.footer-cols a:hover, landing.css): синего у v3 и красного у v4 нет */
.v4-lfm { display: none; }
@media (max-width: 767px) {
    .footer.v4-footer { display: none; }
    .v4-lfm {
        display: block;
        background: var(--bg-card, #fff);
        padding: 24px 16px;
        padding-bottom: calc(var(--mobile-nav-offset, 116px) + 16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(0, 0, 0, .06);
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    }
    .v4-lfm .lfm-brand { margin-bottom: 16px; }
    .v4-lfm .lfm-brand img { height: 27px; width: auto; }
    .v4-lfm .lfm-tagline { margin: 8px 0 0; font-size: 13px; color: #6e6e73; line-height: 1.5; }
    .v4-lfm .lfm-section { border-bottom: 1px solid rgba(0, 0, 0, .06); }
    .v4-lfm .lfm-section:first-of-type { border-top: 1px solid rgba(0, 0, 0, .06); }
    .v4-lfm .lfm-section > summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 0;
        min-height: 44px;
        font-size: 14px;
        font-weight: 600;
        color: #1d1d1f;
        display: flex;
        align-items: center;
        justify-content: space-between;
        outline: none;
    }
    .v4-lfm .lfm-section > summary::-webkit-details-marker { display: none; }
    .v4-lfm .lfm-section > summary::after {
        content: '';
        width: 10px;
        height: 10px;
        border-right: 2px solid #8E8E93;
        border-bottom: 2px solid #8E8E93;
        transform: rotate(45deg);
        transition: transform .2s;
        margin-right: 4px;
    }
    .v4-lfm .lfm-section[open] > summary::after { transform: rotate(-135deg); }
    .v4-lfm .lfm-section-body { padding: 0 0 14px; }
    .v4-lfm .lfm-section-body h5 {
        margin: 8px 0 4px;
        font-size: 12px;
        font-weight: 600;
        color: #8E8E93;
        text-transform: uppercase;
        letter-spacing: .4px;
    }
    .v4-lfm .lfm-section-body h5:first-child { margin-top: 0; }
    .v4-lfm .lfm-section-body a {
        display: block;
        padding: 8px 0;
        font-size: 14px;
        line-height: 1.4;
        color: #6e6e73;
        text-decoration: none;
    }
    .v4-lfm .lfm-section-body a:hover,
    .v4-lfm .lfm-section-body a:active { color: #1d1d1f; }
    .v4-lfm .lfm-bottom { margin-top: 20px; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
    .v4-lfm .lfm-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .v4-lfm .lfm-copy { font-size: 12px; color: #6e6e73; white-space: nowrap; }
    .v4-lfm .lfm-socials { display: inline-flex; align-items: center; gap: 12px; }
    .v4-lfm .lfm-social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: #6e6e73;
        text-decoration: none;
        transition: color .15s;
    }
    .v4-lfm .lfm-social:hover { color: #1d1d1f; }
    .v4-lfm .lfm-social svg,
    .v4-lfm .lfm-social img {
        width: 100%;
        height: 100%;
        fill: currentColor;
        transform: scale(var(--icon-scale, 1));
        object-fit: contain;
    }
    .v4-lfm .lfm-cards { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .v4-lfm .lfm-card {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: calc(24px * var(--icon-scale, 1));
        max-height: 30px;
        width: auto;
        color: inherit;
        text-decoration: none;
        line-height: 1;
    }
    .v4-lfm .lfm-card svg,
    .v4-lfm .lfm-card img { height: 100%; width: auto; object-fit: contain; display: block; }
}

/* Ночной режим (гейт __BTX_DARK_READY; на страницах без гейта theme.js держит светлую) */
[data-theme="dark"] .v4-header .nav a.active { color: #F1F5F9; }
[data-theme="dark"] .v4-header .v4-hdr-login:hover { color: #A7B0BE; }
[data-theme="dark"] .v4-footer-cols a:hover { color: #F1F5F9; }
[data-theme="dark"] .v4-btn:focus-visible,
[data-theme="dark"] .v4-header .v4-hdr-login:focus-visible { outline-color: #C3CAD6; }
/* Контурная на тёмном фоне: рамка светлее (rgba(60,60,67,.18) на тёмном не видна) */
[data-theme="dark"] .v4-btn--secondary { border-color: rgba(148, 163, 184, .32); }
[data-theme="dark"] .v4-btn--secondary:hover { border-color: rgba(148, 163, 184, .55); }
[data-theme="dark"] .v4-lfm { border-top-color: rgba(148, 163, 184, .14); }
[data-theme="dark"] .v4-lfm .lfm-tagline,
[data-theme="dark"] .v4-lfm .lfm-section-body h5,
[data-theme="dark"] .v4-lfm .lfm-section-body a,
[data-theme="dark"] .v4-lfm .lfm-copy,
[data-theme="dark"] .v4-lfm .lfm-social { color: #8B93A1; }
[data-theme="dark"] .v4-lfm .lfm-section { border-bottom-color: rgba(148, 163, 184, .14); }
[data-theme="dark"] .v4-lfm .lfm-section:first-of-type { border-top-color: rgba(148, 163, 184, .14); }
[data-theme="dark"] .v4-lfm .lfm-section > summary { color: #E5E9F0; }
[data-theme="dark"] .v4-lfm .lfm-section-body a:hover,
[data-theme="dark"] .v4-lfm .lfm-section-body a:active,
[data-theme="dark"] .v4-lfm .lfm-social:hover { color: #F1F5F9; }

/* Нижнее мобильное меню посетителя (концепт v4 §7: синего нет; ТЗ 4.7 §1 п.3). Цвет значков и
   активного пункта задаёт public/css/mobile-nav.css переменными --mm-accent / --mm-active (#007AFF,
   на :root — общие для всех меню; в БД и в SA цвета меню нет). Этот файл подключают только
   страницы botix.pro, а там всегда меню посетителя (visitor: лендинг рендерится как для гостя,
   Auth::isolateFromCabinet) — переменные переопределены здесь, кабинет, SA и демо не затронуты.
   С ТЗ 4.8 файл подключают и юридические страницы со своей обвязкой (/legal/oferta, /privacy,
   /consent, /terms — modules/rkn/views/public/*, /legal/abuse-policy): значки меню там тоже графит.
   Графит — акцент сайта (--v4-accent). В ночной теме тоже #48484A: капсула меню и ночью белая
   (mobile-nav.css, .mobile-nav__inner), светлый ночной акцент #C3CAD6 на ней не читается. */
.mobile-nav {
    --mm-accent: #48484A;
    --mm-active: #48484A;
}

/* Капча формы заявки (общий модуль modules/captcha, его стили не меняем): синий ползунок
   модуля — в нейтральный графит, как главная кнопка боевого сайта (ТЗ 4.4и §1 п.1: красного
   в v4 нет; правило владельца: синего и фиолетового на сайте нет, ТЗ 4.4е).
   Зелёный «пройдено» и красная ошибка — как в модуле (это смысловые цвета, не акцент).
   Стили модуля подключаются позже (в разметке формы) — специфичность через обёртку .pcaptcha. */
.pcaptcha .pcaptcha__fill { background: rgba(60, 60, 67, .10); border-right-color: #48484A; }
.pcaptcha .pcaptcha__handle { color: #48484A; }
.pcaptcha .pcaptcha__handle--success,
.pcaptcha .pcaptcha__handle--error { color: #fff; }

/* Окно разговора с ботом (виджет «Голос-3» роли 11, public/css/webcall.css — его не меняем):
   синие кнопка «Начать разговор», индикатор и ссылка — в стиле боевого сайта: кнопка —
   тёмно-серая главная (.btn-demo-cta), индикатор и ссылка — графит (ТЗ 4.4и §1 п.1, концепт §7:
   синего на сайте нет). «Завершить» — мягкая красная (смысловой «стоп», как в модуле);
   серое «завершено» — тоже. webcall.css подключается позже (кирпич v4-webcall) —
   специфичность через обёртку окна. */
.btx-wc-overlay .btx-wc-btn {
    background: linear-gradient(180deg, #6E6E73 0%, #48484A 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .12);
}
.btx-wc-overlay .btx-wc-btn--stop { background: #FEE2E2; color: #DC2626; box-shadow: none; }
.btx-wc-overlay .btx-wc-btn--stop:hover { background: #FECACA; }
.btx-wc-overlay .btx-wc-orb { background: rgba(60, 60, 67, .08); color: #48484A; }
.btx-wc-overlay .btx-wc-orb::after { border-color: #48484A; }
.btx-wc-overlay .btx-wc-orb[data-state="speaking"] { background: #48484A; color: #fff; }
.btx-wc-overlay .btx-wc-orb[data-state="ended"],
.btx-wc-overlay .btx-wc-orb[data-state="error"] { background: #f0f0f2; color: #8E8E93; }
.btx-wc-overlay .btx-wc-link { color: #48484A; }