/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === Шрифт Inter (self-hosted variable, кириллица+латиница, веса 300–500) ===
   Один variable-файл на сабсет (ось wght, поэтому 300/400/500 — один и тот же файл).
   Сабсеты режет сам браузер по unicode-range: русской странице хватает cyrillic+latin,
   latin-ext (85 КБ) подгружается только если на ней встретится символ из его диапазона.
   Пришёл на смену Jost — у Inter больше x-height, текст того же кегля читается крупнее. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/inter/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Layout */
    --navbar-h: 60px;
    --sidebar-w: 260px;
    --topbar-offset: var(--navbar-h); /* becomes 0 on desktop via media query */

    /* ============================================================
       Палитра v4 «Без кнопок» — из макета Figma (страница 25:453).
       Тёплый бежевый фон, белые поверхности, кремовые чипы,
       тан-кнопки, оливковый акцент, чёрный текст (Inter 300 читает мягко).
       ============================================================ */

    /* === Action / brand === */
    --wanderlust:   #D0C2B5;        /* тан: primary-кнопки («Купить», «Удалить чат») */

    /* === Text === */
    --text-mid:     #000000;        /* основной текст (в Inter 300 не «кричит») */
    --text-light:   #7D5F5F;        /* вторичный (макетный #8C6D6D затемнён до AA: 5.7:1 на белом) */

    /* === Semantic action colors === */
    --primary:      var(--wanderlust);
    --primary-dark: #BCA995;        /* hover тан-кнопок */
    --danger:       #B5564E;
    --danger-light: #F6EAE0;

    /* === Accent === */
    --accent-olive: #7F9D31;        /* КРУПНЫЕ акценты: цены тарифов 32px (3:1 достаточно) */
    --accent-olive-dark: #5F7524;   /* ТЕКСТОВЫЕ акценты: актив/hover навигации, ссылки (5.2:1) */

    /* === Surface palette === */
    --bg:           #E4DED2;        /* основной бежевый фон */
    --bg-page:      #E4DED2;        /* фон контентных страниц = бежевый */
    --bg-frame:     #FFFFFF;        /* sidebar / navbar — теперь БЕЛЫЕ */
    --bg-card:      #FFFFFF;        /* белые карточки */
    --bg-card-hover:#FFF8F2;

    /* === Chips (кремовые заливки) === */
    --chip:         #F6EAE0;        /* CTA «Войти/Регистрация», бабблы юзера, «Все в порядке» */
    --chip-soft:    #FFF8F2;        /* строки истории, мягкий hover */
    --cta-peach:    #E5C8AE;        /* бейдж «Популярный», CTA-карточка «Сделайте первый шаг» */
    --input-bg:     #F4F3F2;        /* поле ввода сообщения */

    /* === Misc === */
    --border:       rgba(138, 115, 115, 0.30);  /* розово-коричневые границы из макета (#8A7373) */
    --shadow:       0 2px 12px rgba(61, 53, 45, 0.08);
    --radius:       14px;
    --radius-sm:    10px;
    --radius-lg:    24px;           /* крупные карточки: чат, секции «О нас» */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;               /* базовый вес макета — светлый */
    background: var(--bg);
    color: var(--text-mid);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--text-light); text-decoration: none; }
a:hover { color: var(--accent-olive); }

/* === Navbar === */
.navbar {
    background: var(--bg-frame);
    border-bottom: 1px solid var(--border);
    height: 60px;
    /* sticky создаёт контекст позиционирования для дропдауна .nav-links
       (position:absolute; top:100%). НЕ менять на static — дропдаун уедет. */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(61, 63, 53, 0.05);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-logo__img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    mix-blend-mode: multiply; /* убирает белый фон PNG */
}
.sidebar-logo__img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    mix-blend-mode: multiply; /* убирает белый фон PNG */
}

.nav-links { display: flex; gap: 1.5rem; align-items: center; }

.nav-link {
    color: var(--text-mid);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav-link:hover { color: var(--accent-olive-dark); } /* v4 */
.nav-link--logout { color: var(--text-light); }
.nav-link--logout:hover { color: var(--danger); }

/* === Main Content === */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit; /* v4: <button> не наследует шрифт сам — иначе кнопки не в Inter */
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* v4: тан-кнопка с тёмным текстом (как «Купить»/«Удалить чат» в макете) */
.btn--primary { background: var(--primary); color: var(--text-mid); box-shadow: var(--shadow); }
.btn--primary:hover:not(:disabled) { background: var(--primary-dark); color: var(--text-mid); }

/* v4: кремовый чип (как «Войти/Регистрация» в макете) */
.btn--secondary { background: var(--chip); color: var(--text-mid); box-shadow: var(--shadow); }
.btn--secondary:hover:not(:disabled) { background: var(--chip-soft); }

.btn--danger { background: var(--bg-page); color: var(--text-mid); }
.btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

.btn--full { width: 100%; }
.btn--small { padding: 0.4rem 1rem; font-size: 0.8rem; }

/* === Auth Pages === */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 140px);
}

.auth-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); /* v4: родство с чат-карточкой */
    box-shadow: var(--shadow);
    border: none;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: center;
    color: var(--text-mid);
}

.auth-subtitle {
    color: var(--text-light);
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.form-group { display: flex; flex-direction: column; gap: var(--u1); }

.form-label {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-mid);
}

.form-input, .auth-form input[type="text"], .auth-form input[type="password"], .auth-form input[type="email"] {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit; /* v4: инпуты — тоже Inter */
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    background: #fff;
    color: var(--text-mid);
}
.form-input:focus, .auth-form input:focus {
    outline: none;
    border-color: #8A7373; /* v4: непрозрачный фокус (4.4:1) — WCAG 2.4.7 */
    box-shadow: 0 0 0 2px rgba(138, 115, 115, 0.8);
}
.form-input::placeholder, .auth-form input::placeholder {
    color: var(--text-light);
}

.form-error { color: var(--danger); font-size: 0.8rem; }

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-light);
    font-size: 0.85rem;
}
/* v4: ссылки в подвале форм («Отправить повторно», «Изменить email») — различимы */
.auth-footer a { color: var(--accent-olive-dark); text-decoration: underline; }

/* Соц-вход: кнопки/виджет как опция рядом с email */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    margin-top: var(--u3);
}
.auth-social-sep {
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-sm);
    margin-bottom: var(--u1);
}
.auth-social-tg { display: flex; justify-content: center; min-height: 40px; }
.auth-social-note {
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-xs);
    margin-top: var(--u1);
}

/* === Profile === */
.profile-container { max-width: 700px; margin: 0 auto; }

.profile-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); /* v4 */
    box-shadow: var(--shadow);
    border: none;
    padding: 2rem;
}

.profile-title { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--text-mid); }

.profile-info { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }

.profile-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.profile-label { color: var(--text-light); font-size: 0.9rem; }
.profile-value { font-weight: 400; color: var(--text-mid); }

.text-danger { color: var(--danger); }

.profile-section { margin-bottom: 1.5rem; }
.profile-section-title { font-size: var(--fs-heading); font-weight: 400; margin-bottom: var(--u2); color: var(--text-mid); } /* v4 */

.profile-portret {
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
}

.profile-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* === Chat === */
.chat-container {
    display: flex;
    flex-direction: column;
    /* Каскад фолбеков для viewport-высоты на мобильных:
       1. 100vh — для старых браузеров (включая хром)
       2. 100svh — small viewport, ГАРАНТИРОВАННО без browser-chrome
                  (Safari 16+, Chrome 108+, Яндекс новых версий).
                  Это критично — на Яндекс-iOS bottom toolbar
                  всегда видим, dvh может включать его как часть viewport. */
    height: calc(100vh - var(--topbar-offset));
    height: calc(100svh - var(--topbar-offset));
    width: 100%;
    margin: 0 auto;
    background: var(--bg-card);
    overflow: hidden;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-frame);
    flex-shrink: 0;
}

.chat-title { font-size: var(--fs-heading); font-weight: 400; color: var(--text-mid); }

.chat-remaining {
    font-size: var(--fs-text);
    color: var(--text-light);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-behavior: smooth;
    background: var(--bg-card); /* v4: сообщения живут на белой карточке */
}

/* Center message content on wide screens for comfortable reading */
.chat-messages > * {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.chat-system-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}
.chat-system-message a { font-weight: 400; }

.chat-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: var(--chip); /* v4: кремовый, как чипы макета */
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-text);
    flex-shrink: 0;
    animation: fadeInUp 0.3s ease;
}
.chat-banner p { flex: 1; margin: 0; color: var(--text-mid); }
/* v4: кнопка «Позже» на кремовом баннере — белая, иначе чип-на-чипе невидим */
.chat-banner .btn--secondary { background: var(--bg-card); }

/* === Message Bubbles === */
.message {
    display: flex;
    animation: fadeInUp 0.3s ease;
}

.message--user { justify-content: flex-end; }
.message--neuro { justify-content: flex-start; }

.message-bubble {
    max-width: 65%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: var(--fs-text);
    line-height: 1.65;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* v4: реплики пользователя — кремовый чип (как «Все в порядке» в макете) */
.message--user .message-bubble {
    background: var(--chip);
    color: var(--text-mid);
    box-shadow: var(--shadow);
}

/* v4: ответы бота — БЕЗ пузыря, чистый текст на белой карточке (как в макете) */
.message--neuro .message-bubble {
    background: transparent;
    color: var(--text-mid);
    border: none;
    box-shadow: none;
    padding-left: 0;
    max-width: 85%;
}

/* === Typing Indicator === */
.typing-indicator {
    display: flex;
    justify-content: flex-start;
    animation: fadeInUp 0.3s ease;
}

/* v4: бот без пузыря → индикатор печати тоже без плашки, только точки */
.typing-bubble {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.75rem 0;
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wanderlust);
    opacity: 0.4;
    animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Chat Input — v4: серое скруглённое поле, самолётик внутри (как в макете) === */
.chat-input-area {
    border-top: none;
    padding: 0.9rem 2rem 1.5rem;       /* extra-bottom для absolute-counter */
    background: var(--bg-card);        /* часть белой карточки чата */
    flex-shrink: 0;
}

.chat-form {
    display: flex;
    align-items: center;            /* кнопка отправки центрируется по высоте input'а */
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    background: var(--input-bg);    /* единый серый контейнер: поле + кнопка */
    border-radius: var(--radius);
    padding-right: 0.5rem;
    transition: box-shadow 0.2s;
}
.chat-form:focus-within {
    box-shadow: 0 0 0 2px rgba(138, 115, 115, 0.8); /* v4: видимый фокус (≥3:1) */
}

.chat-input {
    /* width: 100% because the parent .chat-input-wrapper handles flex growth */
    width: 100%;
    box-sizing: border-box;
    resize: none;
    border: none;
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    font-size: var(--fs-text);
    font-family: inherit;
    line-height: 1.55;
    min-height: 54px;
    max-height: 140px;
    background: transparent;        /* фон даёт .chat-form */
    color: var(--text-mid);
    box-shadow: none;
}
.chat-input:focus { outline: none; }
.chat-input:disabled { opacity: 0.6; }
.chat-input::placeholder { color: var(--text-light); font-size: var(--fs-text); }

.chat-send-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;             /* строгое центрирование по полю ввода */
    background: transparent;        /* v4: тёмный самолётик без плашки */
    color: var(--text-mid);
    box-shadow: none;
}
.chat-send-btn:hover:not(:disabled) { background: var(--chip); color: var(--text-mid); }

/* ── Char counter — абсолютный, не съедает высоту wrapper'а ── */
.chat-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
}
.chat-input-wrapper .chat-char-counter {
    position: absolute;
    bottom: -20px;
    right: 4px;
    pointer-events: none;
}
.chat-char-counter {
    font-size: 11px;
    color: var(--text-mid);
    text-align: right;
    padding-right: 2px;
    line-height: 1;
    user-select: none;
    transition: color 0.15s;
}
.chat-char-counter--warn  { color: var(--text-mid); }
.chat-char-counter--over  { color: var(--danger); font-weight: 500; }

/* Mic button */
.chat-mic-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-mid);
    transition: all 0.2s;
}
.chat-mic-btn:hover:not(:disabled) {
    border-color: var(--wanderlust);
    color: var(--wanderlust);
    background: var(--bg-card-hover);
}
.chat-mic-btn.recording {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    animation: micPulse 1.2s infinite ease-in-out;
}

@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(181, 86, 78, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(181, 86, 78, 0); }
}

/* === Tariffs === */
.tariffs-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-page);              /* фон страницы тарифов */
    min-height: 100%;
}

/* v4 (макет): заголовок и подзаголовок — слева, карточки/примечание — по центру */
.tariffs-title { font-size: var(--text-2xl); font-weight: 500; margin-bottom: 0.5rem; color: var(--text-mid); text-align: left; }
.tariffs-subtitle { color: var(--text-mid); font-weight: 500; margin-bottom: 2rem; text-align: left; }
.tariffs-note {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-mid); /* v4: на бежевом фоне text-light не проходил AA */
    font-weight: 300;
    font-size: var(--text-base);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.tariffs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* v4: белая карточка БЕЗ рамки, мягкая тень (как в макете «Без кнопок») */
.tariff-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-lg); /* макет: карточки заметно круглее */
    box-shadow: var(--shadow);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.2s;
    position: relative;
}
.tariff-card:hover {
    box-shadow: 0 6px 24px rgba(61, 53, 45, 0.14);
    transform: translateY(-2px);
}

.tariff-card--popular { box-shadow: 0 4px 20px rgba(61, 53, 45, 0.12); }

/* v4: персиковый бейдж «Популярный» с тёмным текстом */
.tariff-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cta-peach);
    color: var(--text-mid);
    padding: 0.25rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 400;
    box-shadow: var(--shadow);
}

.tariff-duration { font-size: var(--fs-heading); font-weight: 500; margin-bottom: 0.25rem; color: var(--text-mid); }

/* v4: оливковая цена (как 299/809/1196 в макете) */
.tariff-price {
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--accent-olive);
    margin-bottom: 1rem;
}
.tariff-currency { font-size: var(--text-lg); font-weight: 300; color: var(--text-light); }
/* Кнопка «Купить» — 16px (как «остальное» на тарифах); исключена из общего
   правила .btn:not(...){14px} через :not(.tariff-btn). */
.tariff-btn { font-size: var(--text-base); max-width: 220px; margin-left: auto; margin-right: auto; display: block; } /* v4: ~60% ширины, по центру */

.tariff-features {
    list-style: none;
    margin-bottom: 1.5rem;
    text-align: left;
}
.tariff-features li {
    padding: 0.4rem 0;
    font-size: var(--text-sm);           /* v4: мелкие фичи, как в макете */
    font-weight: 300;
    color: var(--text-light);
}
.tariff-features li::before {
    content: "\2713 ";
    color: var(--text-mid);              /* v4: тёмная галочка */
    font-weight: 400;
    margin-right: 0.5rem;
}

/* === Success Page === */
.success-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 140px);
}

.success-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg); /* v4 */
    box-shadow: var(--shadow);
    border: none;
    padding: 3rem;
    text-align: center;
    max-width: 450px;
}

.success-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-card-hover);
    color: var(--accent-olive); /* v4: позитивный акцент — олива, тан был невидим */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.success-title { margin-bottom: 0.75rem; color: var(--text-mid); }
.success-text { color: var(--text-light); margin-bottom: 1.5rem; }

/* === Modal === */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background: var(--bg-card);
    border: none; /* v4 */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    max-width: 400px;
    width: calc(100% - 2rem);
    text-align: center;
}
.modal--wide { max-width: 520px; }
.modal h3 { margin-bottom: 0.5rem; color: var(--text-mid); font-weight: 500; font-size: var(--fs-heading); } /* v4: явный вес — UA-bold нет в Inter */
.modal p { color: var(--text-light); margin-bottom: 1.25rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: center; }
.modal-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.modal-sub { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1.25rem; }

/* Modal input */
.modal-input {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--text-mid);
    margin-bottom: 0.75rem;
    text-align: center;
    transition: border-color 0.2s;
}
.modal-input:focus { outline: none; border-color: #8A7373; box-shadow: 0 0 0 2px rgba(138, 115, 115, 0.8); } /* v4 */
.modal-input--code { font-size: 1.5rem; letter-spacing: .4rem; font-weight: 500; }

/* Modal messages */
.modal-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.modal-privacy {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0;
    text-align: left;
}
.modal-note {
    font-size: 0.8rem;
    color: var(--text-mid);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Ghost button variant */
.btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-mid);
}
.btn--ghost:hover { background: var(--bg); }

/* Spinner */
.modal-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--wanderlust);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 1rem auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── In-chat tariff cards ── */
.tariff-cards-mini {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.tariff-card-mini {
    position: relative;
    flex: 1;
    min-width: 120px;
    max-width: 150px;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 14px 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    background: #fff;
    text-align: center;
    user-select: none;
}
.tariff-card-mini:hover {
    border-color: var(--wanderlust);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.tariff-card-mini--popular {
    border-color: var(--wanderlust);
    background: var(--bg-card-hover);
}
/* v4: мини-тарифы (модалка оплаты в чате) — синхронизированы со страницей тарифов */
.tariff-card-mini__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cta-peach);
    color: var(--text-mid);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.tariff-card-mini__dur {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-mid);
    margin-bottom: 4px;
}
.tariff-card-mini__price {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--accent-olive-dark); /* мелкая цена — тёмная олива (AA) */
}
.tariff-card-mini__save {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
    margin-top: 4px;
}

/* ── Промо: приветственная скидка (модалка прогрева) ──
   Тон спокойный: отсчёт — обычная строка вторичным цветом, без пульсации,
   красного и восклицаний. Всё на существующих .modal-* — новых оболочек нет.
   Селекторы через .modal--promo: у `.modal p` специфичность выше одного класса. */
/* Два класса в селекторе намеренно: на мобильных `.modal { padding: 1.5rem }`
   в медиазапросе ниже перебил бы одноклассовое правило и крестик наехал бы на текст. */
.modal.modal--promo {
    position: relative;        /* якорь для крестика */
    padding-top: var(--u7);    /* 56px: полоса под крестик (44px тач-таргет + 8px сверху) */
    text-align: left;          /* абзац благодарности читается абзацем, не по центру */
}
.modal--promo .modal-close {
    top: 8px;
    right: 8px;
    min-width: 44px;           /* тач-таргет */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal--promo .promo-text {
    color: var(--text-mid);
    margin-bottom: var(--u3);
}
/* Экран «истекло» — один абзац: без нижнего отступа модалка не выглядит пустой снизу. */
.modal--promo .promo-text:last-child { margin-bottom: 0; }
/* Цена по левому краю, как и абзац выше: смешанное выравнивание внутри одной
   короткой карточки заставляет глаз перескакивать. */
.promo-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--u1);
    margin-bottom: var(--u3);
}
.promo-price__old {
    font-size: var(--fs-text);
    color: var(--text-light);
    text-decoration: line-through;
}
.promo-price__new {
    font-size: var(--text-2xl);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--accent-olive);  /* крупная цена — олива, как на тарифах */
}
/* Кнопка покупки исключена из .btn:not(…){14px} через :not(.promo-buy) — вместе
   с размером оттуда ушли сетка и радиус, возвращаем их здесь. */
.modal--promo .btn--full {
    min-height: 44px;
    padding: var(--u1) var(--u3);
    border-radius: var(--u2);
    font-size: var(--fs-text);
}
/* «Не сейчас» — во всю ширину под покупкой: отказ должен быть таким же
   попадаемым, как согласие, а не крестиком в углу. */
.modal--promo .promo-dismiss {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-top: var(--u1);
}
/* Отсчёт — 16px, как весь остальной текст чата (конвенция «два уровня»);
   вторичный цвет и обычное начертание, без пульсации и красного. */
.modal--promo .promo-countdown {
    font-size: var(--fs-text);
    color: var(--text-light);
    text-align: left;
    margin: var(--u2) 0 0;
}

/* === Alerts === */
.messages-container { margin-bottom: 1rem; }

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.alert--success { background: var(--bg-card-hover); color: var(--text-mid); }
.alert--error { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(181, 86, 78, 0.35); } /* v4: danger-light = chip, рамка отличает ошибку от чипа */

/* === Sidebar Contacts (desktop only, inside .sidebar) === */
.sidebar-contacts {
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.sidebar-contacts-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    font-weight: 400;
    margin-bottom: 0.45rem;
}
.sidebar-contact-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.22rem 0;
    border-bottom: 1px solid var(--border);
}
.sidebar-contact-item:last-child { border-bottom: none; }
.sidebar-contact-label {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-light);
}
.sidebar-contact-value {
    font-size: 0.78rem;
    color: var(--text-mid);
}
.sidebar-contact-link {
    font-size: 0.78rem;
    color: var(--text-mid); /* v4 */
}
.sidebar-contact-link:hover {
    color: var(--accent-olive-dark);
    text-decoration: underline;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* === Burger Menu === */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;  /* v4: тач-таргет ≥44px */
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 101;
}
.nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-mid);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.nav-burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* === Responsive === */

/* Navbar burger + dropdown — активны на ВСЕЙ полосе навбара (≤1024).
   Навбар показывается, когда скрыт сайдбар (≤1024); инлайн-ряд ссылок не
   помещался (нет flex-wrap, 6+ пунктов) и ломал структуру при сжатии окна.
   Используем тот же полноширинный дропдаун, что и на мобильных.
   top:100% держит его вплотную под навбаром при любой высоте (60/64/56px). */
@media (max-width: 1024px) {
    /* Burger visible */
    .nav-burger { display: flex; }

    /* Nav dropdown */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-frame); /* v4: одна белая поверхность с навбаром */
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: var(--u1) 0;
        gap: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);   /* приподнятая тень плавающего меню */
    }
    .nav-links.open { display: flex; }
    .nav-link {
        display: block;
        padding: var(--u2) var(--u3);
        font-size: var(--text-base);
        text-align: left;
        border-bottom: 1px solid var(--border);
    }
    .nav-link:last-child, .nav-links form:last-child .nav-link { border-bottom: none; }
    .nav-links form { width: 100%; }
    .nav-links form .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: var(--u2) var(--u3);
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Main content */
    .main-content { padding: 1rem; }

    /* Auth */
    .auth-container { min-height: calc(100vh - 100px); align-items: flex-start; padding-top: 1.5rem; }
    .auth-card { padding: 1.5rem; border-radius: var(--radius-sm); }
    .auth-title { font-size: 1.3rem; }

    /* Chat */
    .chat-header { padding: 0.6rem 1rem; }
    .chat-title { font-size: var(--fs-heading); }
    .chat-messages { padding: 0.75rem; }
    .chat-messages > * { max-width: none; }
    .message-bubble { max-width: 85%; font-size: var(--fs-text); }
    .chat-input-area { padding: 0.7rem 0.75rem; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--bg-frame); border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(61,63,53,.08); flex-shrink: 0; }
    .chat-form { max-width: none; gap: 0.5rem; }
    .chat-input { font-size: 16px; padding: 0.75rem 1rem; min-height: 50px; border: none; background: transparent; box-shadow: none; } /* v4: фон даёт .chat-form; 16px prevents iOS zoom */
    .chat-send-btn { width: 44px; height: 44px; }
    .chat-mic-btn { width: 44px; height: 44px; }
    .chat-char-counter { font-size: var(--fs-text); }

    /* Chat banner mobile */
    .chat-banner { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 1rem; }
    .chat-banner p { flex: 1 1 100%; font-size: var(--fs-text); }
    .chat-banner .btn { flex: 1; text-align: center; }

    /* Tariffs */
    .tariffs-container { padding: 0; }
    .tariffs-title { font-size: var(--text-xl); }
    .tariffs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .tariff-card { padding: 1.5rem 1.25rem; }
    .tariff-price { font-size: var(--text-xl); } /* v4: цена остаётся крупным оливковым акцентом */

    /* Profile */
    .profile-card { padding: 1.25rem; }
    .profile-title { font-size: 1.3rem; margin-bottom: 1rem; }
    .profile-row { flex-direction: column; gap: 0.25rem; }
    .profile-actions { flex-direction: column; }
    .profile-portret { max-height: 300px; font-size: 0.85rem; }

    /* Success */
    .success-card { padding: 2rem 1.5rem; margin: 1rem; }

    /* Modal */
    .modal { margin: 1rem; padding: 1.5rem; }
    .modal-actions { flex-direction: column; }

    /* Nav contacts block (mobile burger menu) */
    .nav-contacts {
        padding: 0.75rem 1.5rem 0.5rem;
        border-top: 1px solid var(--border);
    }
    .nav-contacts-title {
        font-size: var(--text-base);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-light);
        font-weight: 400;
        margin-bottom: 0.35rem;
    }
    .nav-contacts-item {
        font-size: var(--text-base);
        color: var(--text-light);
        padding: 0.15rem 0;
    }
    .nav-contacts-link {
        font-size: var(--text-base);
        color: var(--text-mid); /* v4 */
        display: block;
        padding: 0.15rem 0;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .auth-card { padding: 1.25rem; }
    .chat-header { gap: 0.5rem; }
    .chat-header .btn--small { padding: 0.3rem 0.6rem; font-size: 0.7rem; }
    .tariff-card { padding: 1.25rem 1rem; }
    .contact-tab__toggle { font-size: 0.7rem; padding: 0.4rem 0.8rem; }
}

/* === Sidebar (desktop-only) === */
.sidebar {
    display: none; /* hidden on mobile */
}

@media (min-width: 1025px) {
    /* Hide top navbar on desktop — sidebar replaces it */
    .navbar { display: none; }

    /* Zero topbar offset so chat fills full viewport height */
    :root { --topbar-offset: 0px; }

    body {
        display: flex;
        align-items: stretch;
        min-height: 100vh;
    }

    /* Sidebar */
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        width: var(--sidebar-w);
        flex-shrink: 0;
        min-height: 100vh;
        padding: 1.5rem 1rem;
        background: var(--bg-frame);
        border-right: 1px solid var(--border);
        position: sticky;
        top: 0;
        box-shadow: 2px 0 12px rgba(61, 63, 53, 0.04);
    }

    .sidebar-logo {
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-mid);
        letter-spacing: 0.5px;
        padding: 0.25rem 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.45rem;
    }
    .sidebar-logo:hover { color: var(--accent-olive-dark); } /* v4 */

    .sidebar-user {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.9rem 0.85rem;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        backdrop-filter: blur(4px);
    }

    .sidebar-user__name {
        font-size: var(--text-base);
        font-weight: 400;
        color: var(--text-mid);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-user__status {
        font-size: var(--text-base);
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.55rem;
    }

    .sidebar-user__time {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.4rem 0;
        margin-bottom: 0.55rem;
        border-top: 1px dashed var(--border);
    }

    .sidebar-user__time-label {
        font-size: var(--text-base);
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .sidebar-user__time-value {
        font-size: var(--text-base);
        font-weight: 400;
        color: var(--text-mid);
    }

    .sidebar-user__cta {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: var(--text-base);
    }

    /* v4: подзаголовок + таймер под логотипом (как в макете «Без кнопок») */
    .sidebar-tagline { padding: 0 var(--u1); text-align: center; }
    .sidebar-tagline__sub {
        font-size: var(--text-lg);
        font-weight: 300;
        color: var(--text-mid);
    }
    .sidebar-tagline__time {
        font-size: var(--text-sm);
        font-weight: 300;
        color: var(--text-light);
        min-height: 1.2em; /* не прыгает, пока heartbeat не принёс значение */
    }

    .sidebar-nav {
        display: grid;          /* вертикальная сетка пунктов навигации */
        gap: 0.25rem;
    }

    /* v4 «Без кнопок»: пункты навигации — ЧИСТЫЙ ТЕКСТ (20px, light),
       без плашек; hover и активный пункт — оливковый (как в макете). */
    .sidebar-link {
        display: block;
        padding: 0.55rem 0.85rem;
        border-radius: var(--radius-sm);
        color: var(--text-mid);
        font-size: var(--text-lg);
        font-weight: 300;
        font-family: inherit;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: color 0.2s;
    }
    .sidebar-link:hover {
        background: transparent;
        color: var(--accent-olive);
    }
    .sidebar-link--active { color: var(--accent-olive); }

    /* Нижний блок сайдбара — «Удалить чат» и «Выйти» прижаты в самый низ.
       Симметрично с верхним sidebar-logo: одна и та же высота 64px и
       линия-разделитель тянется на всю ширину сайдбара (margin до краёв). */
    .sidebar-bottom {
        margin-top: auto;
        min-height: var(--row-h);                /* 64px — как chat-input-area */
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--u1);
        padding-top: var(--u2);
        border-top: none;                        /* v4: макет без линий-разделителей */
        margin-left:  calc(-1 * var(--u2));
        margin-right: calc(-1 * var(--u2));
        padding-left:  var(--u2);
        padding-right: var(--u2);
    }
    .sidebar-logout { display: block; }
    .sidebar-link--logout {
        color: var(--text-light);
    }
    .sidebar-link--logout:hover {
        color: var(--danger);
        background: transparent; /* v4: навигация без плашек */
    }

    /* Main content fills the rest */
    .main-content {
        flex: 1;
        max-width: none;
        min-width: 0;
        margin: 0;
    }

    /* v4 (макет): на десктопе у чат-карточки НЕТ видимой шапки — заголовок и
       таймер живут в сайдбаре. Скрываем визуально, НЕ убирая из a11y-дерева
       (скринридер сохраняет заголовок h2 и таймер). */
    .chat-header {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        border: 0;
    }

    /* v4: чат — белая карточка с полями на бежевом фоне (как в макете) */
    body:has(.chat-container) .main-content {
        padding: var(--u4);
        height: 100vh;
        background: var(--bg-page);
    }
    body:has(.chat-container) .chat-container {
        height: calc(100vh - 2 * var(--u4));
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }

    /* For non-chat pages keep comfortable padding but cap readable width */
    body:not(:has(.chat-container)) .main-content {
        padding: 2.5rem 3rem;
    }
    body:not(:has(.chat-container)) .main-content > * {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Contact tab stays at right-bottom (default desktop position) */
}


/* ============================================================
   === Modular grid (8px-based) — visual rework =============
   ============================================================

   Принципы:
   • Базовая единица 8px — все размеры и отступы кратны 8 (16, 24,
     32, 40, 48, 56, 64, 80, 96…). Это создаёт ритм и убирает
     ощущение «случайной» вёрстки.
   • 12-колоночный «безопасный» контейнер 1024px (= 128 × 8)
     с боковыми отступами 32px. Все блоки внутри чата (header,
     banner, messages, input) выравниваются по одной вертикали —
     чтобы рамка визуально не «прыгала».
   • Единый ритм высот: sidebar-logo / chat-header / chat-banner
     стоят на одинаковых горизонтальных линиях.

   Эта секция намеренно идёт ПОСЛЕДНЕЙ в файле — она аккуратно
   переопределяет проблемные значения, не трогая старую разметку.
   ------------------------------------------------------------ */

:root {
    /* 8px-units */
    --u1:  8px;  --u2: 16px;  --u3: 24px;  --u4: 32px;
    --u5: 40px;  --u6: 48px;  --u7: 56px;  --u8: 64px;
    --u10: 80px; --u12: 96px;

    /* Modular grid */
    --grid-max:     1024px;        /* readable column inside chat */
    --grid-pad-x:   var(--u4);     /* 32px on desktop, becomes 16px on mobile */
    --row-h:        var(--u8);     /* 64px — common row height (header, logo) */
    --sidebar-w:    256px;         /* override 260 → 256 (= 32 × 8) */

    /* Typographic scale — only these sizes are allowed across the site.
       v4 «Без кнопок»: заголовки карточек 24 (Inter 400), страничные 32 (Inter 500). */
    --text-xs:      12px;          /* labels, hints, фичи тарифов */
    --text-sm:      14px;          /* secondary text, buttons */
    --text-base:    16px;          /* body / chat / input */
    --text-lg:      20px;          /* пункты навигации, подзаголовки */
    --text-xl:      24px;          /* заголовки карточек/секций */
    --text-2xl:     32px;          /* страничные заголовки, логотип */

    /* ── КОНВЕНЦИЯ: ровно два уровня шрифта по всему UI ───────────
       ЗАГОЛОВКИ = 24px = var(--fs-heading);  ТЕКСТ = 16px = var(--fs-text).
       Это семантические имена-алиасы поверх шкалы выше — по ним в коде
       сразу видно назначение. Новый и правимый код используем именно их:
       заголовок → --fs-heading, всё остальное → --fs-text.
       (--text-xl / --text-base — те же значения, «сырые» имена шкалы.) */
    --fs-heading:   var(--text-xl);    /* 24px — ВСЕ заголовки */
    --fs-text:      var(--text-base);  /* 16px — ВЕСЬ остальной текст */

    /* Веса Inter из макета: 300 базовый, 400 заголовки карточек/кнопки,
       500 страничные заголовки/логотип. Других весов НЕ вводить. */
    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;

    /* Line-heights (kept simple — body 1.5, headings 1.25) */
    --lh-tight:     1.25;
    --lh-base:      1.5;
}

@media (max-width: 768px) {
    :root { --grid-pad-x: var(--u2); --row-h: var(--u7); }
}
@media (max-width: 480px) {
    :root { --text-base: 15px; --text-lg: 17px; --text-xl: 20px; }
}

/* ── Sidebar: rhythm-aligned with chat-header ────────────── */
@media (min-width: 1025px) {
    .sidebar {
        gap: var(--u2);                /* 16px between blocks */
        /* Вертикальный padding = 0 — чтобы линия под "Очаг" встала
           ровно на одной горизонтали с линией под "Чат-собеседник"
           (chat-header снизу). Горизонтальный padding оставляем. */
        padding: 0 var(--u2);
    }
    /* Logo block sits exactly at row 1 of the grid.
       v4: по центру, без линии-разделителя (как в макете) */
    .sidebar-logo {
        min-height: var(--row-h);      /* такая же высота как у chat-header */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--u1);
        font-size: var(--text-2xl);
        border-bottom: none;
        /* Лёгкий горизонтальный отступ от боковых краёв (margin)
           чтобы линия не упиралась в правую границу сайдбара. */
        margin: 0 calc(-1 * var(--u2));         /* отрицательный — расширяем до краёв sidebar */
        padding-left: var(--u2);
        padding-right: var(--u2);
    }
    .sidebar-user {
        padding: var(--u2);                     /* 16px all-around */
        gap: var(--u1);
    }
    .sidebar-user__time { padding: var(--u1) 0; margin-bottom: var(--u1); }
    .sidebar-user__cta  { padding: var(--u1) var(--u2); }
    .sidebar-nav        { gap: var(--u1); }
    .sidebar-link       { padding: var(--u1) var(--u2); }      /* 8/16 */
    .sidebar-logout     { padding-top: var(--u1); }
}

/* ── Chat container: every direct child shares the same column ── */
.chat-container > .chat-header,
.chat-container > .chat-banner,
.chat-container > .chat-input-area {
    /* Outer block fills full width, the inner content is constrained.
       This keeps backgrounds full-bleed but content aligned to the grid. */
    padding-left:  var(--grid-pad-x);
    padding-right: var(--grid-pad-x);
}

/* Header: single 64px row, vertically centered */
.chat-header {
    min-height: var(--row-h);
    padding-top: 0;
    padding-bottom: 0;
}
.chat-header-info { display: flex; flex-direction: column; gap: 2px; }

/* Banner: single 56px row, content aligned with input/messages width */
.chat-banner {
    min-height: var(--u7);            /* 56px */
    padding-top: 0;
    padding-bottom: 0;
    gap: var(--u2);
}
.chat-banner > * { flex-shrink: 0; }
.chat-banner p   { flex: 1; }

/* Messages area: same inner max-width as header/input → vertical alignment */
.chat-messages {
    padding: var(--u3) var(--grid-pad-x);
    gap: var(--u1);
}
.chat-messages > * {
    max-width: var(--grid-max);
}

/* Input area: 96px row with content aligned to the same grid */
.chat-input-area {
    padding-top:    var(--u2);
    padding-bottom: var(--u2);
}
.chat-form {
    max-width: var(--grid-max);
    gap: 0; /* v4: поле и самолётик в едином сером контейнере */
}
.chat-input {
    padding: var(--u2);                  /* 16px all-around */
    min-height: var(--u7);               /* 56px */
    line-height: 1.5;
}

/* Buttons follow the 8-grid — but exclude the round send/mic icon buttons
   which have their own width/height/padding rules (otherwise the icon
   gets squished and the circle becomes a pill). */
/* :not(.promo-buy) — покупка в промо-модалке это тот же жест, что «Купить» на
   тарифах, и по конвенции «два уровня» живёт на 16px, а не на 14. */
.btn:not(.chat-send-btn):not(.chat-mic-btn):not(.sidebar-main-cta):not(.tariff-btn):not(.promo-buy) {
    padding: var(--u1) var(--u3);
    border-radius: var(--u2);
    font-size: var(--text-sm);
}
.btn--small  { padding: 6px var(--u2); font-size: var(--text-xs); }
.btn--full   { width: 100%; }

/* "Удалить чат" — danger variant for sidebar/navbar links (form-buttons) */
.sidebar-link-form { display: block; }
.sidebar-link-form .sidebar-link {
    /* Inherits .sidebar-link styles; form is just a wrapper for CSRF */
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
/* v4: «Удалить чат» в сайдбаре — тан-кнопка (как в макете) */
.sidebar-link--danger {
    background: var(--wanderlust);
    color: var(--text-mid);
    text-align: center;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-weight: 400;
}
.sidebar-link--danger:hover {
    color: var(--text-mid);
    background: var(--primary-dark);
}
.nav-link--danger { color: var(--text-mid); }
.nav-link--danger:hover { color: var(--danger); }

/* Make sure the round send/mic buttons keep their circle and centered icon */
.chat-send-btn, .chat-mic-btn {
    width: 48px; height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-send-btn svg, .chat-mic-btn svg { display: block; }

/* Message bubbles — consistent rhythm */
.message-bubble {
    padding: var(--u1) var(--u2);
    border-radius: var(--radius); /* v4: чип 14px, как «Все в порядке» в макете */
    line-height: var(--lh-base);
    font-size: var(--text-base);
}

/* Auth / profile cards — grid-aligned padding */
.auth-card, .profile-card {
    padding: var(--u4);
    border-radius: var(--u2);
}
.auth-form, .profile-info { gap: var(--u2); }


/* ── Typography unification ───────────────────────────────────────
   Force every text element onto the scale above. Catches the
   discrepancies seen in DevTools (sidebar-user__name 0.95rem vs
   chat-title 1rem, etc.). */
body, .chat-input, .message-bubble, .form-input { font-size: var(--text-base); }
/* v4: на ≤480 --text-base = 15px → инпуты возвращаем на 16px, иначе iOS зумит при фокусе */
@media (max-width: 480px) {
    .chat-input, .form-input, .modal-input { font-size: 16px; }
}
/* v4: тач-таргеты ≥44px для мелких кнопок на мобильных */
@media (max-width: 768px) {
    .btn--small, .about-subnav__link { min-height: 44px; }
}

/* Заголовок чата «Чат-собеседник» — 22px, как все заголовки.
   auth/profile-заголовки пока 18px (их экраны не в этой задаче). */
.chat-title { font-size: var(--fs-heading); line-height: var(--lh-tight); }
.auth-title, .profile-title { font-size: var(--text-lg); line-height: var(--lh-tight); }

/* Чат: весь нетитульный контент — текст 16px (--fs-text). */
.chat-remaining { font-size: var(--fs-text); color: var(--text-light); }
.chat-banner p, .chat-char-counter { font-size: var(--fs-text); }

.form-label, .profile-label, .profile-value,
.auth-subtitle, .chat-banner .btn,
.modal-sub { font-size: var(--text-sm); }

.form-error, .auth-footer { font-size: var(--text-xs); }

/* Основное меню: 16px для навбара; .sidebar-link НЕ включён — в v4 пункты
   сайдбара 20px light (см. правило в @media ≥1025). */
.nav-link, .sidebar-user__cta, .sidebar-user__name,
.sidebar-user__status, .sidebar-user__time-label, .sidebar-user__time-value,
.sidebar-contacts-title, .sidebar-contact-label, .sidebar-contact-value,
.sidebar-contact-link { font-size: var(--text-base); }

/* v4: логотип «Очаг» — 32px (страничный размер макета) */
.nav-logo, .sidebar-logo { font-size: var(--text-2xl); font-weight: 500; }


/* ── Responsive — tablet/narrow desktop (769-1024) ──────────────────
   The current layout shows the top navbar between 769-1024 (sidebar
   hidden). Polish that intermediate state. */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container { padding: 0 var(--u3); }
    /* .nav-links — теперь бургер-дропдаун (см. @media max-width:1024), инлайн-gap не нужен */
    .navbar        { height: var(--row-h); }
    .main-content  { padding: var(--u3) var(--u3); }
    /* Chat takes full viewport minus navbar, content aligned to grid */
    .chat-container { max-width: var(--grid-max); margin: 0 auto; }
}

/* ── Mobile (≤768) — already styled in old block; only fix paddings ── */
@media (max-width: 768px) {
    .chat-header,
    .chat-banner,
    .chat-input-area,
    .chat-messages {
        padding-left:  var(--grid-pad-x);
        padding-right: var(--grid-pad-x);
    }
    .chat-header { min-height: var(--row-h); }
    .chat-form   { gap: var(--u1); }

    /* Round buttons slightly smaller on mobile */
    .chat-send-btn, .chat-mic-btn { width: 44px; height: 44px; }

    /* Banner stacks vertically on narrow screens — already declared earlier,
       just ensure consistent gap & sizing */
    .chat-banner { flex-wrap: wrap; gap: var(--u1); }
}


/* ============================================================
   === Client-spec modular grid (12 / 8 / 2 cols) ===========
   ============================================================

   По требованию заказчика — настоящая колоночная сетка:
     • gutter (между колонками) = 20 px
     • margin (боковые отступы) = 15 px
     • desktop (≥1025)  → 12 колонок
     • tablet  (769-1024) → 8 колонок
     • mobile  (≤768)    → 2 колонки

   Реализация — через CSS Grid на <body>. Все основные блоки
   (sidebar, navbar, main-content) — grid items с явным
   grid-column. Вертикальный ритм — row-gap 20 px.

   Эта секция идёт ПОСЛЕ всех предыдущих и переопределяет
   старый flex-layout. Старые правила оставлены — на случай
   если потребуется быстро откатить.
   ------------------------------------------------------------ */

:root {
    --gutter:   20px;     /* колоночный gutter */
    --margin:   15px;     /* боковые внешние отступы */
    --baseline: 8px;      /* "8dp baseline" — Material Design / IBM Carbon proven */
}

/* ── Mobile-first: 2 columns + 8-px вертикальный ритм ──────── */
body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Эксплицитный baseline ритм по вертикали:
       все авто-строки = кратные --baseline (8px),
       минимум 5 единиц (40px) чтобы пустые строки не визуально схлопывались;
       max-content позволяет высоким блокам расти естественно.
       Делает строки видимыми в DevTools "grid" inspector. */
    grid-auto-rows: minmax(calc(var(--baseline) * 5), max-content);
    column-gap: var(--gutter);
    row-gap: 0;            /* ритм держит сам baseline через padding/margin кратные 8 */
    padding-left:  var(--margin);
    padding-right: var(--margin);
    align-items: start;
}

/* Each top-level block spans the full row by default on mobile */
.navbar,
.sidebar,
.main-content {
    grid-column: 1 / -1;     /* full width */
    min-width: 0;             /* let grid children shrink */
}

/* ── Tablet (769-1024) — 8 columns ────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    body { grid-template-columns: repeat(8, 1fr); }
    /* sidebar is hidden on tablet — navbar takes its role */
    .navbar       { grid-column: 1 / -1; }
    .main-content { grid-column: 1 / -1; }
    /* v4: страницы-сироты (прямые дети body вне layout) — на всю сетку,
       иначе 404/500/техработы сжимаются в одну колонку grid'а body */
    .err-page, .maint-page { grid-column: 1 / -1; }
}

/* ── Desktop (≥1025) — 12 columns ─────────────────────────────── */
@media (min-width: 1025px) {
    body {
        display: grid;                                  /* override old flex */
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--gutter);
        padding-left:  var(--margin);
        padding-right: var(--margin);
        align-items: stretch;
    }
    .navbar       { display: none; }                    /* sidebar replaces navbar */
    .sidebar      {
        grid-column: 1 / 3;                             /* cols 1-2 (2 of 12) */
        width: auto;                                    /* width is now grid-controlled */
        position: static;                               /* drop sticky — grid handles it */
        margin: 0;
    }
    .main-content {
        grid-column: 3 / 13;                            /* cols 3-12 (10 of 12) */
        max-width: none;
        margin: 0;
    }
}

/* ── Vertical rhythm inside chat — all gaps follow gutter (20) ── */
.chat-container {
    /* keep full-height + column flex from earlier */
    gap: 0;                                /* spacing handled by per-block padding */
}
.chat-header,
.chat-banner,
.chat-input-area,
.chat-messages {
    padding-left:  var(--gutter);
    padding-right: var(--gutter);
}
.chat-header     { padding-top: var(--gutter); padding-bottom: var(--gutter); min-height: auto; }
.chat-banner     { padding-top: var(--margin); padding-bottom: var(--margin); min-height: auto; }
.chat-input-area { padding-top: var(--gutter); padding-bottom: var(--gutter); }
.chat-messages   { padding-top: var(--gutter); padding-bottom: var(--gutter); gap: var(--margin); }

/* Form/input inside chat — gap = gutter for consistency */
.chat-form { gap: 0; max-width: var(--grid-max); } /* v4: единый серый контейнер, по ширине сообщений */

/* Sidebar internal rhythm follows the same gutter/margin */
@media (min-width: 1025px) {
    .sidebar {
        gap: var(--u2);                /* 16px — кратно сетке */
        padding: 0 var(--u2);          /* верт. 0 (линия лого ровно на 64px,
                                          как нижняя граница chat-header), гориз. 16 */
    }
    .sidebar-user  { padding: var(--u2); gap: var(--u1); }
    .sidebar-nav   { gap: var(--u1); }
    .sidebar-link  { padding: var(--u1) var(--u2); }   /* 8/16 — единый левый край */
    .sidebar-contacts { padding: var(--u2); }

    /* ── Anti-cramped tweaks for the now-narrower 2-col sidebar ── */

    /* Allow long text (emails, names) to wrap instead of overflowing */
    .sidebar-user__name,
    .sidebar-contact-value,
    .sidebar-contact-link {
        overflow-wrap: anywhere;
        white-space: normal;
        line-height: 1.4;
    }

    /* Logo: drop letter-spacing so "Очаг" doesn't fight for room.
       Гориз. padding 16 (с margin -16 ниже) → иконка начинается на 16px
       от края sidebar — на одной вертикали с CTA и пунктами навигации. */
    .sidebar-logo { letter-spacing: 0; padding: 0 var(--u2); }

    /* "Осталось … 0 ч. 29 мин." — label + value on two lines reads
       better than squished horizontal split in a narrow column */
    .sidebar-user__time {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .sidebar-user__time-label {
        margin-bottom: 0;
    }

    /* Contact rows stack the label above the value (label on its own
       line) — gives long values (email, ИНН) full column width */
    .sidebar-contact-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
    }

    /* Slightly looser inter-item spacing inside contacts for breath */
    .sidebar-contacts { gap: 0; }
}

/* Mobile-fine: cap small-screen padding too */
@media (max-width: 480px) {
    .chat-header,
    .chat-banner,
    .chat-input-area,
    .chat-messages {
        padding-left:  var(--margin);
        padding-right: var(--margin);
    }
}


/* ============================================================
   === Mobile & tablet refinements (after grid changes) =====
   ============================================================

   Решает: бургер-меню «шиворот навыворот», слишком толстые
   паддинги вокруг чата на мобильнике (наследовались от
   desktop'ного --gutter=20), некрасивые формы-в-навбаре. */

/* ── Burger dropdown: every row must be left-aligned & full width ──
   Root cause: the base rule (.nav-links { align-items: center }) used
   for desktop persists into the mobile column-flex dropdown and
   centers content-sized items. Reset it here.                       */
@media (max-width: 1024px) {
    .nav-links {
        align-items: stretch;          /* full width for every row */
        text-align: left;
        gap: 0;                         /* spacing handled by item padding */
    }
    .nav-links > *,
    .nav-links .nav-link {
        width: 100%;
        text-align: left;
        margin: 0;
    }
    .nav-link-form {
        display: block;
        width: 100%;
        margin: 0;
    }
    .nav-link-form .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: var(--u2) var(--u3);   /* 16/24 — на сетке, tap-target ≥44px */
        font-family: inherit;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        font-size: var(--text-base);
        color: var(--text-mid);
    }
    /* Hide form's own visual artifacts that could cause "empty row" feel */
    .nav-link-form { border: none; padding: 0; }
}

/* ── Mobile chat layout — restore tight, readable spacing ──────── */
@media (max-width: 768px) {
    /* The new grid-section padded chat blocks by 20px (gutter).
       Mobile screens are too narrow for that — bring back compact
       paddings that the original mobile design used. */
    .chat-header {
        padding: 12px var(--margin);
        min-height: 56px;
    }
    .chat-banner {
        padding: 12px var(--margin);
        min-height: auto;
    }
    .chat-input-area {
        padding: 12px var(--margin);
        /* +32px снизу — чтобы абсолютный счётчик "0/1000" (висит на -20px
           относительно wrapper'а) гарантированно был выше browser-chrome
           мобильного браузера (URL-бар Яндекс/Safari). +safe-area для
           home-indicator на iPhone. */
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }
    .chat-messages {
        padding: var(--margin);
        gap: 12px;
    }
    .chat-form {
        gap: 12px;
    }
    .message-bubble {
        max-width: 85%;
    }

    /* Body grid: only one column on mobile is enough — the burger menu
       and dropdown handle navigation, no sidebar exists at this size */
    body {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .navbar, .main-content { grid-column: 1; }
}

/* ── Tablet (769-1024) — keep 8-col grid but content full-width ── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* On tablet sidebar is hidden — let main content + navbar use the
       full grid width (no half-empty columns). */
    .navbar, .main-content, .err-page, .maint-page { grid-column: 1 / -1; }

    /* Chat content stays comfortable, not edge-to-edge */
    .chat-header,
    .chat-banner,
    .chat-input-area,
    .chat-messages {
        padding-left:  var(--gutter);
        padding-right: var(--gutter);
    }
}


/* ============================================================
   === Final typography unification — two classes only ======
   ============================================================

   Заказчик: «шрифты слишком разнородные, бросаются в глаза».
   Решение: ВСЕ uppercase-лейблы получают ИДЕНТИЧНЫЙ стиль до
   пикселя; ВСЕ значения/имена — другой ИДЕНТИЧНЫЙ стиль.
   Это явное переопределение поверх ранее заданных значений
   (для них могли остаться расхождения в letter-spacing,
   font-weight, color и т.п.). */

/* ── A. Все «лейблы» (uppercase-текст-подсказка) ──────────── */
/* Контент страниц — 12px */
/* .modal-privacy СОЗНАТЕЛЬНО выведен из этой группы: это не лейбл, а связный
   текст со ссылкой на Политику конфиденциальности. В капсе и без подчёркивания
   ссылка сливалась с текстом — человек не понимал, что на неё можно нажать.
   Базовые стили абзаца остаются выше (.modal-privacy, ~строка 775). */
.form-label,
.profile-label {
    font-size:      var(--text-xs);          /* 12 px */
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--text-light);
    line-height:    var(--lh-tight);
    margin:         0;
}

/* Ссылка внутри примечания о приватности — по образцу .chat-privacy-note */
.modal-privacy a {
    color:           var(--accent-olive-dark);
    text-decoration: underline;
}
/* Основное меню — строго 16px (стиль лейбла сохраняем) */
.sidebar-user__status,
.sidebar-user__time-label,
.sidebar-contacts-title,
.sidebar-contact-label,
.nav-contacts-title {
    font-size:      var(--text-base);        /* 16 px */
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--text-light);
    line-height:    var(--lh-tight);
    margin:         0;
}

/* ── B. Все «значения» (имена, контактные данные, числа) ── */
/* Контент страниц — 14px */
.profile-value {
    font-size:      var(--text-sm);          /* 14 px */
    font-weight:    600;
    text-transform: none;
    letter-spacing: 0;
    color:          var(--text-mid);
    line-height:    var(--lh-base);
}
/* Основное меню — строго 16px */
.sidebar-user__name,
.sidebar-user__time-value,
.sidebar-contact-value,
.sidebar-contact-link,
.nav-contacts-item,
.nav-contacts-link {
    font-size:      var(--text-base);        /* 16 px */
    font-weight:    600;
    text-transform: none;
    letter-spacing: 0;
    color:          var(--text-mid);
    line-height:    var(--lh-base);
}

/* Sidebar contact link slightly less heavy — email is long, looks
   bossy if 600. Override only the link variant. */
.sidebar-contact-link,
.nav-contacts-link {
    font-weight: 500;
    color: var(--text-mid); /* v4: тан-как-текст нечитаем */
}
.sidebar-contact-link:hover,
.nav-contacts-link:hover { color: var(--accent-olive-dark); }

/* Время в шапке чата — то же что у "значений", но размер = текст 16px */
.chat-remaining {
    font-size:      var(--fs-text);
    font-weight:    500;
    color:          var(--text-light);
    letter-spacing: 0;
}


/* ── Mood quick replies (shown only as the first interaction) ────── */
.mood-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    /* Align with the bot's bubble — leave-room style indent feels natural */
    padding-left: 4px;
    animation: fadeInUp 0.4s ease;
}
.mood-btn {
    width: 56px;
    height: 56px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--chip-soft); /* v4: чиповый язык — белый терялся на белой карточке */
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mood-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 63, 53, 0.1);
    background: var(--bg-card-hover);
}
.mood-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(61, 63, 53, 0.08);
}
.mood-btn:focus-visible {
    outline: 2px solid var(--accent-olive-dark); /* v4: видимый фокус */
    outline-offset: 2px;
}
/* Вариант B первого экрана (A/B first_screen_v1): подсказки-темы словами вместо
   эмодзи-шкалы. Тот же чиповый язык, но кнопка по ширине текста. Класс идёт ВМЕСТЕ
   с .mood-btn, чтобы обработчик быстрых ответов в chat.js работал без правок. */
.mood-btn.topic-btn {
    width: auto;
    height: auto;
    min-height: 44px; /* тач-таргет: у текста высота не набирается сама */
    padding: var(--u1) var(--u2); /* 8/16 — по базовой сетке, как у .widget-chips__chip */
    font-family: inherit; /* Inter, а не эмодзи-стек */
    font-size: var(--fs-text); /* 16px — весь текст чата в одном размере */
    font-weight: 400;
    line-height: var(--lh-tight);
    color: var(--text-mid);
}

@media (max-width: 480px) {
    .mood-btn { width: 52px; height: 52px; font-size: 26px; }
    .mood-quick-replies { gap: 10px; }
}


/* ── Интерактивные виджеты чата (v4) ──────────────────────────────────────────
   Ванильные компоненты; только токены :root, ритм 8px, веса 300–500.
   «Предложение, а не показ»: мягкая кремовая карточка под ответом бота. */
/* Карточка виджета живёт внутри строки .message--neuro (как реплика бота): позицию
   слева по колонке сообщений и вертикальный ритм даёт обёртка, карточке — только вид. */
.widget-card {
    max-width: 480px;
    padding: var(--u2);
    background: var(--chip-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--u2);
}
.widget-card.is-done { opacity: 0.85; }
.widget-card.is-done .widget-suds__btn,
.widget-card.is-done .widget-chips__chip,
.widget-card.is-done .widget-circumplex,
.widget-card.is-done .widget-breathe__toggle { pointer-events: none; }

.widget-card__label {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--text-mid);
    line-height: var(--lh-base);
}
.widget-card__dismiss {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-light);
    cursor: pointer;
    text-decoration: underline;
}
.widget-card__dismiss:hover { color: var(--accent-olive-dark); }
.widget-card__dismiss:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

/* SUDS 0–10 */
.widget-suds { display: flex; flex-wrap: wrap; gap: var(--u1); }
.widget-suds__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--u1);
    font-family: inherit;
    font-size: var(--fs-text);
    color: var(--text-mid);
    background: var(--bg-frame);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}
.widget-suds__btn:hover { background: var(--chip); }
.widget-suds__btn.is-selected { background: var(--wanderlust); border-color: var(--wanderlust); }
.widget-suds__btn:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

/* Быстрые ответы (чипы) */
.widget-chips { display: flex; flex-wrap: wrap; gap: var(--u1); }
.widget-chips__chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--u1) var(--u2);
    font-family: inherit;
    font-size: var(--fs-text);
    color: var(--text-mid);
    background: var(--chip);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}
.widget-chips__chip:hover { background: var(--cta-peach); }
.widget-chips__chip:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

/* Мудчек (валентность × активация) */
.widget-circumplex {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    align-self: center;
    background:
        linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat,
        linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat,
        var(--bg-frame);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: crosshair;
}
.widget-circumplex:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }
.widget-circumplex__axis {
    position: absolute;
    font-size: var(--text-xs);
    color: var(--text-light);
    pointer-events: none;
}
.widget-circumplex__axis--top { top: 4px; left: 50%; transform: translateX(-50%); }
.widget-circumplex__axis--bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
.widget-circumplex__axis--left { left: 4px; top: 50%; transform: translateY(-50%); }
.widget-circumplex__axis--right { right: 4px; top: 50%; transform: translateY(-50%); }
.widget-circumplex__dot {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: var(--accent-olive-dark);
    border: 2px solid var(--bg-frame);
    border-radius: 50%;
    pointer-events: none;
}

/* Дыхание */
.widget-breathe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--u2);
    min-height: 200px;
}
.widget-breathe__circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--wanderlust);
    transform: scale(1);
}
.widget-breathe__phase { font-size: var(--fs-text); color: var(--text-light); }
.widget-breathe__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 44px;
    padding: var(--u1) var(--u3);
    font-family: inherit;
    font-size: var(--fs-text);
    color: var(--text-mid);
    background: var(--wanderlust);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.widget-breathe__toggle:hover { background: var(--primary-dark); }
.widget-breathe__toggle:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

/* Экстренные ресурсы (кризис) — отличаем от рядового чипа danger-рамкой (как .alert--error) */
.widget-card--emergency_resources {
    background: var(--chip);
    border-color: rgba(181, 86, 78, 0.35);
}
.widget-emergency__title {
    font-size: var(--fs-text);
    font-weight: var(--fw-regular);
    color: var(--danger);
}
.widget-emergency__btn {
    display: block;
    padding: var(--u2);
    font-size: var(--fs-text);
    font-weight: var(--fw-regular);
    color: var(--text-mid);
    background: var(--wanderlust);
    border-radius: var(--radius-sm);
    text-align: center;
    text-decoration: none;
}
.widget-emergency__btn:hover { background: var(--primary-dark); }
.widget-emergency__btn:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .message--widget { animation: none; }
    .widget-breathe__circle { transition: none !important; }
}
@media (max-width: 480px) {
    .widget-card { max-width: 100%; }
}

/* ── Онбординг-подсказки ──────────────────────────────────────────────────
   Карточка, указывающая на живой элемент (поле ввода, чип «Темы», варианты
   опроса). Намеренно НЕ модалка: оверлея нет, экран не блокируется — иначе
   подсказка закрыла бы то, про что рассказывает.
   Слой 950: выше сайдбара (101) и cookie-баннера (900), ниже модалок (1000) —
   промо и модалка почты остаются главнее, и подсказка их не перекрывает. */
.hint {
    position: fixed;
    z-index: 950;
    max-width: 320px;
    padding: var(--u2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: fadeInUp 0.3s ease;
}
.hint[hidden] { display: none; }

.hint__text {
    margin: 0 0 var(--u2);
    font-size: var(--fs-text);
    line-height: var(--lh-base);
    color: var(--text-mid);
}
.hint__footer {
    display: flex;
    align-items: center;
    gap: var(--u1);
}
.hint__step {
    flex-grow: 1;                    /* прижимает кнопки вправо */
    font-size: var(--text-xs);
    color: var(--text-light);
}
.hint__skip {
    padding: var(--u1);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--accent-olive-dark);
    background: none;
    border: none;
    cursor: pointer;
}
.hint__skip:hover { text-decoration: underline; }
.hint__skip:focus-visible,
.hint .btn:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

/* Каретка — квадрат под 45°, две смежные грани которого дают рамку карточки.
   Позицию по горизонтали ставит chat.js: она смотрит в центр цели. */
.hint__caret {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transform: rotate(45deg);
}
.hint--sheet .hint__caret { display: none; }  /* лист по центру низа — указывать нечем */
.hint--above .hint__caret { bottom: -7px; border-top: none; border-left: none; }
.hint--below .hint__caret { top: -7px; border-bottom: none; border-right: none; }

/* На телефоне не якорим: карточка шириной с экран неизбежно перекрыла бы цель,
   ради которой существует. Нижний лист над зоной ввода, каретки нет. */
@media (max-width: 768px) {
    .hint {
        left: var(--margin);
        right: var(--margin);
        top: auto;
        max-width: none;
        /* Отступ снизу считает chat.js: лист встаёт над всей зоной ввода,
           чтобы не закрывать поле и чип «Темы», про которые и рассказывает. */
        bottom: calc(var(--u2) + env(safe-area-inset-bottom, 0px));
    }
    .hint__caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hint { animation: none; }
}

/* Ненавязчивая ссылка на политику конфиденциальности под полем ввода чата. */
.chat-privacy-note {
    display: block;
    margin-top: var(--u1);
    font-size: var(--text-xs);
    color: var(--text-light);
    text-align: center;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.chat-privacy-note:hover { color: var(--accent-olive-dark); opacity: 1; text-decoration: underline; }
.chat-privacy-note:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; opacity: 1; }


/* ── Опросник первых шагов (новая когорта) ────────────────────────────────
   Кнопочный опрос в зоне сообщений: вопрос — обычный пузырь бота, варианты —
   чипы .widget-chips__chip (переиспользуем виджетный язык), новых цветов нет. */
.survey-flow {
    display: flex;
    flex-direction: column;
    gap: var(--u2);              /* 16 — вертикальный ритм блока */
    animation: fadeInUp 0.4s ease;
}
.survey-progress {
    padding-left: 4px;           /* тот же сдвиг, что у .mood-quick-replies */
    font-size: var(--text-xs);
    color: var(--text-light);
}
.survey-options { padding-left: 4px; }
/* Peach-hover базового чипа здесь гасим: наведённый (#E5C8AE) был почти
   неотличим от выбранного тана (#D0C2B5, контраст ≈1.1:1) — на десктопе
   наведённый чип выглядел уже выбранным. Тихий hover — светлый чип. */
.survey-option:hover { background: var(--chip-soft); }
/* Выбранный вариант: тан-заливка + НЕ-цветовые признаки (WCAG 1.4.1) — галочка
   и рамка --text-mid: тогглы «3 из 10» должны читаться не только оттенком.
   Паддинг компенсирует рамку 2px, чтобы чип не прыгал при выборе. */
.survey-option.is-selected,
.survey-option.is-selected:hover {
    background: var(--wanderlust);
    border: 2px solid var(--text-mid);
    padding: calc(var(--u1) - 1px) calc(var(--u2) - 1px);
}
.survey-option.is-selected::before { content: '✓\00a0'; font-weight: 500; }
.survey-actions {
    display: flex;
    align-items: center;
    gap: var(--u2);
    padding-left: 4px;
    min-height: 0;
}
.survey-hint { font-size: var(--text-sm); color: var(--text-light); }

/* Опросник с планшета и шире: не растянутая лента вверху экрана, а
   центрированная колонка; варианты — ровная сетка в две колонки крупными
   целями (на вопросе с десятью симптомами чипы иначе рассыпаются «ёлочкой»).
   Ниже 769px всё остаётся как было: одна колонка во всю ширину. */
@media (min-width: 769px) {
    .survey-flow {
        max-width: 720px;
        width: 100%;
        /* auto по всем сторонам: центрирует и по горизонтали, и по вертикали
           внутри .chat-messages, но не обрезает верх, когда вопрос длинный
           (в отличие от justify-content: center у скролл-контейнера). */
        margin: auto;
    }
    /* Пузырь вопроса лежит внутри обёртки .message--neuro — без вложенного
       селектора правило не срабатывает (проверено на живой странице). */
    .survey-flow .message-bubble {
        font-size: var(--fs-heading);
        line-height: var(--lh-tight);
        text-align: center;
    }
    .survey-progress { padding-left: 0; text-align: center; }
    .survey-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--u2);
        padding-left: 0;
    }
    .survey-option {
        min-height: var(--u8);              /* 64 — крупная цель вместо 44 */
        padding: var(--u2) var(--u3);
        border-radius: var(--radius);
    }
    /* Рамка выбранного 2px — паддинг компенсируем, чтобы ячейка не прыгала. */
    .survey-option.is-selected,
    .survey-option.is-selected:hover {
        padding: calc(var(--u2) - 1px) calc(var(--u3) - 1px);
    }
    .survey-actions { justify-content: center; padding-left: 0; }
    .survey-help { padding-left: 0; text-align: center; }
}

/* Строка вместо скрытого поля ввода на время опроса */
.survey-input-note {
    padding: var(--u2) 0;        /* 16/0 — держит высоту зоны ввода */
    font-size: var(--fs-text);
    color: var(--text-light);
    text-align: center;
}

/* «Нужна срочная помощь?» — ненавязчивый локальный раскрыватель телефонов.
   Ссылка-строка как .chat-privacy-note; раскрытая карточка — готовый
   .widget-card--emergency_resources. */
.survey-help { padding-left: 4px; }
.survey-help__link {
    display: inline-block;
    padding: var(--u1) 0;        /* тач-таргет: голая строка 20px — мало для кризисной ссылки */
    font-size: var(--text-sm);
    color: var(--text-light);
    text-decoration: underline;
    cursor: pointer;
    list-style: none;            /* без маркера details */
}
.survey-help__link::-webkit-details-marker { display: none; }
.survey-help__link:hover { color: var(--accent-olive-dark); }
.survey-help__link:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }
.survey-help[open] .widget-card { margin-top: var(--u1); }

/* Чип «Темы» (только прошедшим опрос): на телефоне — строкой над полем,
   с планшета — в одной строке с полем. Раскрытый ряд тем в обоих случаях
   остаётся НАД строкой: тумблер вставляет его первым ребёнком бара. */
.chat-topics-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--u1);
    margin-bottom: var(--u1);
}
.chat-topics-row { margin: 0; }  /* ряд тем без внешних отступов mood-блока */

/* С 769px места хватает, чтобы чип встал рядом с полем. `display: contents`
   распускает бар прямыми элементами сетки — чип и форма встают на одну линию
   без правки шаблона. Ниже 769px так нельзя: чип съедал бы четверть строки,
   плейсхолдер переносился на две строки, а счётчик наезжал на ссылку. */
@media (min-width: 769px) {
    .chat-input-area {
        display: grid;
        grid-template-columns: auto 1fr;   /* пустая колонка схлопывается в 0 */
        align-items: center;
    }
    .chat-topics-bar { display: contents; }
    .chat-topics-row {
        grid-column: 1 / -1;
        margin: 0 0 var(--u1);             /* ряд тем над строкой */
    }
    .chat-topics-toggle {
        grid-column: 1;
        justify-self: start;               /* по содержимому, а не во всю колонку */
        align-self: stretch;               /* высота ровно как у поля, без магических чисел */
        /* Зазор даёт margin, а не gap сетки: при отсутствии чипа пустая колонка
           не должна сдвигать поле вправо и ломать выравнивание с сообщениями. */
        margin-right: var(--u2);
        border-radius: var(--radius);      /* 14 как у поля — строка читается цельной */
    }
    /* width+justify-self вместо `margin: 0 auto`: авто-поля в сетке отменяют
       растяжение, и форма схлопывалась до ширины содержимого. */
    .chat-form {
        grid-column: 2;
        width: 100%;
        justify-self: center;
    }
    /* Одиночные строки зоны ввода — во всю ширину сетки: иначе ссылка на
       политику встаёт в первую колонку и раздувает её, отрывая поле от чипа. */
    .chat-input-area > .survey-input-note,
    .chat-input-area > .chat-connecting,
    .chat-input-area > .chat-privacy-note { grid-column: 1 / -1; }
}


/* Brand logo (flame icon) was removed — kept just the "Очаг" text.
   logo.svg and apple-touch-icon.svg are still in /static/ for favicon use. */


/* ============================================================
   === About pages ("О проекте", "О нас") =================
   ============================================================

   Дизайн-цели заказчика:
   • Фон страницы — тот же что у чата (--bg-page), а не белый
   • Каждая карточка — отдельный белый блок (как .sidebar-user)
   • Больше воздуха между карточками, заполняем весь экран
   • Без иконок-заглушек и без верхней градиентной полоски

   Карточки выводятся в одну колонку (вертикальная лента),
   на десктопе ограничены по ширине для читаемости. */

.about-page {
    /* Растягиваем фон на всю высоту контента, цвет — как у чата */
    background: var(--bg-page);
    min-height: 100%;
    padding: 48px 24px 80px;
    /* Грид-ребёнок main-content уже центрируется CSS Grid'ом снаружи */
}
/* Внутренний контейнер — ограничивает ширину текста для удобства чтения */
.about-page > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Hero ─────────────────────────────────────────────────── */
.about-hero {
    text-align: center;
    margin-bottom: 40px;
}
.about-title {
    font-size: var(--text-2xl);   /* v4: 32px по шкале макета */
    font-weight: 500;
    color: var(--text-mid);
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.about-lead {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    color: var(--text-mid);
    max-width: 600px;
    margin: 0 auto;
}
.about-lead__brand { color: var(--text-light); } /* v4: «Очаг» подсвечен розово-коричневым */

/* ── Cards: vertical stack, generous spacing ──────────────── */
/* v4 (макет): секция = ОДНА большая белая карточка radius-24,
   подразделы («Кто мы», «Во что верим»…) — внутри неё без своих плашек */
.about-cards {
    display: flex;
    flex-direction: column;
    gap: var(--u4);
    margin-bottom: 40px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--u4) var(--u5);
    box-shadow: var(--shadow);
}

.about-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ── Card title & body ────────────────────────────────────── */
.about-card__title {
    font-size: var(--fs-heading);        /* v4: 24px, Inter 400 */
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-mid);
    margin: 0 0 var(--u2);               /* 16 — кратно сетке */
}
.about-card__text {
    font-size: var(--fs-text);           /* v4: 16px, Inter 300 */
    font-weight: 300;
    line-height: 1.65;
    color: var(--text-mid);
    margin: 0 0 var(--u2);               /* 16 — кратно сетке */
}
.about-card__text:last-child { margin-bottom: 0; }

/* Email-ссылка внутри карточки */
/* v4: тёмная ссылка с постоянным подчёркиванием (как в макете), hover — олива */
.about-card__link {
    color: var(--text-mid);
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s ease;
    word-break: break-all;
}
.about-card__link:hover {
    color: var(--accent-olive-dark);
    border-bottom-color: currentColor;
}

/* ── CTA — v4: персиковая карточка с белой кнопкой (как в макете) ── */
.about-cta {
    text-align: center;
    padding: var(--u4) var(--u4);         /* 32 — кратно сетке */
    background: var(--cta-peach);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.about-cta__title {
    font-size: var(--fs-heading);
    font-weight: 400;
    color: var(--text-light);            /* розово-коричневый заголовок CTA из макета */
    margin: 0 0 var(--u2);               /* 16 — кратно сетке */
    line-height: 1.3;
}
.about-cta__lead {
    font-size: var(--fs-text);
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-mid);
    margin: 0 auto 24px;
    max-width: 560px;
}
.about-cta .btn {
    padding: var(--u2) var(--u5);         /* 16/40 — кратно сетке */
    font-size: var(--fs-text);
    border-radius: var(--radius);
    background: var(--bg-card);           /* белая кнопка «Перейти в чат →» */
    color: var(--text-mid);
    box-shadow: var(--shadow);
}
.about-cta .btn:hover { background: var(--chip-soft); }

/* ── Mobile padding ───────────────────────────────────────── */
@media (max-width: 600px) {
    .about-page  { padding: 32px 16px 64px; }
    .about-cards { padding: 24px 20px; gap: 24px; } /* v4: паддинг у секции-карточки */
    .about-cta   { padding: 24px 20px; }
}


/* ============================================================
   === Sidebar restructure: main CTA + contacts modal =====
   ============================================================ */

/* Большая верхняя кнопка (Войти / Регистрация / Профиль) */
.sidebar-main-cta {
    margin: 0;                       /* без доп. отступа — левый/правый край
                                        совпадает с пунктами навигации и лого */
    padding: var(--u2);              /* v4: крупный главный CTA, как в макете */
    /* 16px, а не 20: конвенция «два уровня» отводит крупный кегль только логотипу.
       С Inter (x-height выше, чем у Jost) «Войти / Регистрация» в 20px переставало
       влезать в 2-колоночный сайдбар на 1025px — вылезало на 5px. */
    font-size: var(--fs-text);
    font-weight: 400;
    border-radius: var(--radius);
    text-align: center;
}

/* Кнопка "Контакты" — выглядит как обычная sidebar-link */
.sidebar-link--contacts {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-mid);
}
.sidebar-link--contacts:hover {
    background: transparent;
    color: var(--accent-olive-dark); /* v4: как у остальных пунктов */
}

/* Контакты модалка */
.modal--contacts {
    max-width: 420px;
    width: 100%;
    padding: 32px 28px;
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s ease;
}
.modal-close:hover { color: var(--text-mid); }
/* Фокус-ринг как во всём виджетном слое: промо-модалка открывается сама, и
   клавиатурному пользователю нужно видеть, где он находится. */
.modal-close:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

.modal-title {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-mid);
    margin: 0 0 20px;
}

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.contacts-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contacts-item__label {
    font-size: var(--text-base);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
}
.contacts-item__value {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--text-mid);
    word-break: break-all;
}
.contacts-item__link {
    color: var(--text-mid); /* v4: тан стал нечитаем как текст */
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.15s ease;
}
.contacts-item__link:hover {
    color: var(--accent-olive-dark);
}


/* ============================================================
   === Logo (flame + "Очаг" text) ==========================
   ============================================================ */

.sidebar-logo, .nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
}
.sidebar-logo__img, .nav-logo__img {
    /* Clean square SVG (48×56) — readable even at small sizes */
    height: 34px;
    width: auto;
    flex-shrink: 0;
    display: block;
    /* Drop shadow even at tiny size helps icon "pop" against backgrounds */
    filter: drop-shadow(0 2px 4px rgba(233, 79, 27, 0.15));
}
.nav-logo__img  { height: 26px; }

@media (min-width: 1025px) {
    .sidebar-logo__img { height: 36px; }
    .sidebar-logo { justify-content: flex-start; }   /* лого слева, как пункты меню */
}

.sidebar-logo__text, .nav-logo__text {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.5px;
}

@media (max-width: 380px) {
    .nav-logo__text { display: none; }
}


/* About-страницы — чистый фон var(--bg-page), без aurora-эффектов.
   (v4: устаревшие редекларации .about-card/.about-cta удалены — они
   перебивали персиковую CTA и возвращали рамки карточкам.) */
.about-page {
    background: var(--bg-page);
}

/* ── Subsection (О продукте / О нас на единой странице) ──── */
.about-section {
    margin-bottom: 40px;
    scroll-margin-top: 24px;       /* отступ при клике по якорю */
}
.about-section:last-of-type { margin-bottom: 32px; }

/* v4: метка секции — розово-коричневая, лёгкая, БЕЗ подчёркивания (как в макете) */
.about-section__title {
    font-size: var(--fs-heading);
    font-weight: 300;
    color: var(--text-light);
    margin: 0 0 20px;
    padding-bottom: 0;
    border-bottom: none;
    letter-spacing: -0.2px;
}

/* Подменю под hero — переход к секциям одной кнопкой */
.about-subnav {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
/* v4: якорные кнопки — белые скруглённые чипы с тенью (как в макете) */
.about-subnav__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 24px;
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--text-light);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}
.about-subnav__link:hover {
    background: var(--chip-soft);
    color: var(--text-mid);
    transform: translateY(-1px);
}


/* Mobile padding tweaks */
@media (max-width: 600px) {
    .about-page    { padding: 32px 16px 64px; }
    .about-hero    { margin-bottom: 40px; }
    .about-cards   { gap: 16px; margin-bottom: 40px; }
    .about-card    { padding: 24px 20px; }
}


/* ============================================================
   === Debug grid overlay (proven Figma "Layout Grid" style) =
   ============================================================

   Включается классом ".grid-debug" на <body>. Можно поставить
   вручную в DevTools (Elements → body → add class) или нажать
   Ctrl+G (Cmd+G на Mac) — JS-обработчик в base.html.

   Рисует:
   • Вертикальные полосы — 12 колонок (десктоп), 8 (планшет), 2
     (мобильник) с gutter 20px и боковыми margin 15px.
   • Горизонтальный baseline — линии каждые 8px по всей высоте
     страницы. Если элементы вёрстаны кратно 8px, их грани
     ложатся ровно на линии.

   Это эталонный приём «Layout Grid» из Figma/Sketch — позволяет
   глазами видеть выравнивание без замеров. */

body.grid-debug {
    position: relative;
}
body.grid-debug::before,
body.grid-debug::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99998;
}

/* Вертикальные колонки — синие полосы через repeating-gradient */
body.grid-debug::before {
    margin: 0 var(--margin);
    background-image: repeating-linear-gradient(
        to right,
        rgba(91, 122, 220, 0.10) 0,
        rgba(91, 122, 220, 0.10) calc((100% - 11 * var(--gutter)) / 12),
        transparent             calc((100% - 11 * var(--gutter)) / 12),
        transparent             calc((100% - 11 * var(--gutter)) / 12 + var(--gutter))
    );
}
@media (min-width: 769px) and (max-width: 1024px) {
    body.grid-debug::before {
        background-image: repeating-linear-gradient(
            to right,
            rgba(91, 122, 220, 0.10) 0,
            rgba(91, 122, 220, 0.10) calc((100% - 7 * var(--gutter)) / 8),
            transparent             calc((100% - 7 * var(--gutter)) / 8),
            transparent             calc((100% - 7 * var(--gutter)) / 8 + var(--gutter))
        );
    }
}
@media (max-width: 768px) {
    body.grid-debug::before {
        background-image: repeating-linear-gradient(
            to right,
            rgba(91, 122, 220, 0.10) 0,
            rgba(91, 122, 220, 0.10) calc((100% - var(--gutter)) / 2),
            transparent             calc((100% - var(--gutter)) / 2),
            transparent             calc((100% - var(--gutter)) / 2 + var(--gutter))
        );
    }
}

/* Горизонтальный baseline — тонкая линия каждые 8 px (полностью на экран) */
body.grid-debug::after {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--baseline) - 1px),
        rgba(220, 91, 91, 0.10) calc(var(--baseline) - 1px),
        rgba(220, 91, 91, 0.10) var(--baseline)
    );
}

/* Маркер активного режима (нижний правый угол) */
body.grid-debug .grid-debug-badge {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 99999;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-family: monospace;
    border-radius: 6px;
    pointer-events: none;
}


/* ============================================================
   === Реферальный кабинет партнёра ==========================
   Два размера: --fs-heading (22) / --fs-text (16); сетка 8px;
   только палитра + var(--border)/--radius. Без inline-стилей.
   ============================================================ */

.ref-link-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--u2);
    margin-bottom: var(--u2);
}
.ref-link {
    flex: 1 1 240px;
    min-width: 0;
    padding: var(--u1) var(--u2);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-text);
    color: var(--text-mid);
    word-break: break-all;
}

.ref-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u2);
    margin-bottom: var(--u2);
}
.ref-custom {
    display: flex;
    gap: var(--u1);
    flex: 1 1 260px;
}
.ref-code-input { flex: 1 1 auto; min-width: 0; }
.ref-hint {
    margin: 0;
    font-size: var(--fs-text);
    color: var(--text-light);
    line-height: var(--lh-base);
}

/* Сводка — три показателя */
.ref-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--u2);
    margin-bottom: var(--u2);
}
.ref-stat {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    padding: var(--u2);
    text-align: center;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.ref-stat--accent { border-color: var(--accent-olive); } /* v4: акцент оливой, не чёрной рамкой */
.ref-stat__value {
    font-size: var(--fs-heading);
    font-weight: 500;
    color: var(--text-mid);
}
.ref-stat__label {
    font-size: var(--fs-text);
    color: var(--text-light);
}

/* Фильтр по датам */
.ref-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--u2);
    margin-bottom: var(--u2);
}
.ref-filter__field {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
}

/* Таблица покупок */
/* Узкие экраны: 4-колоночная таблица не помещается — горизонтальный
   скролл на обёртке, сама таблица держит структуру. */
.ref-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-text);
}
.ref-table th,
.ref-table td {
    padding: var(--u1) var(--u2);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.ref-table th {
    color: var(--text-light);
    font-weight: 400;
}

/* Статус выплаты — чип с фоном (различимо не только весом). Размер в
   конвенции --fs-text (16), палитра + var(--border), без рыжего/зелёного. */
.ref-badge {
    display: inline-block;
    padding: 2px var(--u1);
    border-radius: var(--radius-sm);
    background: var(--bg-card-hover);
    font-size: var(--fs-text);
    font-weight: 500;
    color: var(--text-light);
}
.ref-badge--paid {
    background: var(--bg-page);
    border: 1px solid var(--border);
    font-weight: 400;
    color: var(--text-mid);
}

.ref-empty {
    margin: 0;
    font-size: var(--fs-text);
    color: var(--text-light);
}

@media (min-width: 481px) and (max-width: 768px) {
    .ref-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ref-stats { grid-template-columns: 1fr; }
    .ref-filter { flex-direction: column; align-items: stretch; }
}

/* ── Чекбокс согласия (лист ожидания, экран /chat/) ──────────────────────────
   Единственный новый класс: готового layout под «чекбокс + многострочная
   подпись со ссылкой» в системе не было. Значения — из существующей шкалы. */
.waitlist-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--u1);
    margin: var(--u2) 0;
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    color: var(--text-mid);
    cursor: pointer;
}
.waitlist-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--accent-olive-dark);
    cursor: pointer;
}
.waitlist-consent a {
    color: var(--accent-olive-dark);
    text-decoration: underline;
}

/* ── Баннер cookie и подвал (задача 0.9/1.5 заключения юриста) ───────────────
   Кнопки согласия НАМЕРЕННО одинаковые (.btn--secondary): требование юриста —
   «Принять всё» и «Только необходимые» равнозначны по размеру и контрасту. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--u2);
    padding: var(--u2) var(--u3);
    background: var(--bg-frame);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 16px rgba(61, 63, 53, 0.07);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
    flex: 1 1 320px;
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    color: var(--text-mid);
}
.cookie-banner__text a {
    color: var(--accent-olive-dark);
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    gap: var(--u1);
    flex-wrap: wrap;
}
.cookie-banner__actions .btn { min-height: 44px; }

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u2);
    justify-content: center;
    padding: var(--u3) var(--u2);
    font-size: var(--text-sm);
}
.site-footer a {
    color: var(--text-light);
    text-decoration: none;
}
.site-footer a:hover { color: var(--accent-olive-dark); }

@media (max-width: 480px) {
    .cookie-banner { flex-direction: column; align-items: stretch; }
    .cookie-banner__actions .btn { flex: 1; }
}

/* Ссылка удаления данных в профиле — доступна, но не подталкивает (задача 1.2). */
.profile-danger-zone {
    margin-top: var(--u4);
    padding-top: var(--u2);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--text-sm);
}
.profile-danger-zone a {
    color: var(--text-light);
    text-decoration: underline;
}
.profile-danger-zone a:hover { color: var(--danger); }

/* ── Узкий десктоп 1025–1100: сайдбар занимает 2 колонки из 12,
      и на нижней границе диапазона это ~148px на всё. С Inter (x-height
      выше, чем у прежнего Jost) пункты 20px и подзаголовок переставали
      помещаться и вылезали за край сайдбара на 6–16px. Кегль макета
      не трогаем — ужимаем только горизонтальные отступы, а подзаголовок
      опускаем до 16px по конвенции «два уровня» (крупный кегль — логотипу).
      От 1100px и шире всё возвращается к обычному виду. ───────────── */
@media (min-width: 1025px) and (max-width: 1100px) {
    .sidebar-link { padding-left: var(--u1); padding-right: var(--u1); }
    .sidebar-tagline__sub { font-size: var(--fs-text); }
}

/* ============================================================
   === Посадочная страница «/» (landing) ======================
   Макет коллег: светлый кремовый фон с мягкими разводами, шапка
   во всю ширину (без сайдбара даже на десктопе), крупная дисплейная
   типографика, чёрный подвал.

   Новых цветов НЕ вводим: фон страницы — --chip-soft, шапка — --chip,
   карточки — --bg, подвал — --text-mid, кнопка — --cta-peach.
   Иконки карточек — Lucide (ISC), инлайном в шаблоне.
   ============================================================ */

/* ── Каркас: лендинг живёт во всю ширину и без сайдбара ────── */
body.landing {
    /* Гасим боковые поля body: шапка и подвал должны доходить до краёв.
       Внутренние отступы дают сами секции (.landing-hero и т.п.). */
    padding-left: 0;
    padding-right: 0;
    background: var(--chip-soft);
    /* Иллюстрация первого экрана намеренно выходит за контейнер вправо.
       clip, а не hidden: hidden сделал бы body скролл-контейнером и сломал
       липкую шапку, а вертикальную прокрутку нам терять нельзя. */
    overflow-x: clip;
}
body.landing .main-content { grid-column: 1 / -1; }

@media (min-width: 1025px) {
    /* На десктопе у сайта сайдбар, а у лендинга — горизонтальная шапка.
       Специфичность (0,2,1) перебивает и `.navbar{display:none}` (:1092, :1710),
       и правила ширины .main-content. */
    body.landing .sidebar { display: none; }
    body.landing .navbar  { display: block; }

    /* Снимаем «читаемую ширину» контентных страниц: секции ограничивают
       себя сами, иначе чёрный подвал и фон обрежутся по 1100px. */
    body.landing:not(:has(.chat-container)) .main-content { padding: 0; }
    body.landing:not(:has(.chat-container)) .main-content > * {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

body.landing .navbar { background: var(--chip); }

/* Шапка шире содержимого: при 1160px логотип «прилипал» к невидимой границе
   контейнера, и слева от него зияла пустая полоса в полсотни пикселей.
   Теперь он стоит у края страницы, как и меню справа. */
body.landing .nav-container {
    max-width: 1440px;
    padding-left: var(--u5);
    padding-right: var(--u5);
}

/* ── Круглая иконка профиля в правом углу (только посадочная, только десктоп)
   На планшете и телефоне рядом стоит бургер, а внутри его меню уже есть
   текстовый «Войти / Регистрация»: иконка была бы и дублем, и теснотой. ── */
.nav-account { display: none; }

@media (min-width: 1025px) {

body.landing .nav-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* В разметке иконка стоит сразу за бургером — иначе на мобильных она
       оказалась бы внутри выпадающего меню. На десктопе порядком двигаем её
       в правый угол: без этого flex ставит её между логотипом и пунктами. */
    order: 2;
    width: 44px;                     /* тач-таргет */
    height: 44px;
    flex-shrink: 0;
    margin-left: var(--u2);
    border-radius: 50%;
    background: var(--bg-frame);
    color: var(--text-mid);
    box-shadow: var(--shadow);
    transition: background 0.2s ease, color 0.2s ease;
}
body.landing .nav-account:hover {
    background: var(--cta-peach);
    color: var(--text-mid);
}
body.landing .nav-account:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }
body.landing .nav-account svg { width: 24px; height: 24px; display: block; }

body.landing .nav-links { order: 1; }

/* Текстовый вход прячем: иконка ведёт туда же, два входа в одно место подряд
   выглядят как недосмотр. Остальные пункты меню остаются. */
body.landing .nav-links > a[href*='/accounts/login/'],
body.landing .nav-links > a[href*='/accounts/profile/'] {
    display: none;
}

}   /* /@media (min-width: 1025px) — иконка профиля и связанные правила */

/* Неподвижный фон. Отдельным слоем, а не background-attachment: fixed —
   тот на iOS ведёт себя как scroll. И не псевдоэлементом body — там уже
   живёт debug-сетка (Ctrl/Cmd+G). Оттенки — rgba существующих токенов:
   --cta-peach (229,200,174) и --chip (246,234,224). */
.landing__bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Первое пятно приглушено (0.30, а не 0.45): под ним лежит мелкая заметка
           про бесплатные минуты, и на более плотном персике её контраст падал
           до 4.5:1 — ровно на границу AA. */
        radial-gradient(60% 55% at 15% 10%,  rgba(229, 200, 174, 0.30), transparent 62%),
        radial-gradient(52% 48% at 88% 20%,  rgba(246, 234, 224, 0.85), transparent 66%),
        radial-gradient(70% 55% at 50% 100%, rgba(229, 200, 174, 0.30), transparent 70%);
}

/* ── Дисплейная шкала — ТОЛЬКО здесь ──────────────────────────
   Живёт на .landing-page, а не в :root: для остального сайта правило
   «только 12/14/16/20/24/32» остаётся в силе буквально. На узких экранах
   clamp сводит заголовки к --text-2xl (32) и --text-base (16), то есть
   к разрешённой шкале; 50/22 из макета появляются лишь на широких. */
.landing-page {
    --ls-display: 50px;
    --ls-lead:    22px;
}

.landing-hero,
.landing-section,
.landing-final,
.landing-page .specialists {   /* блок специалистов живёт и вне лендинга, поэтому ширину
                                  получает здесь, вместе с остальными секциями страницы */
    max-width: 1160px;
    margin: 0 auto;
    padding-left: var(--u3);
    padding-right: var(--u3);
}

/* ── Первый экран ─────────────────────────────────────────── */
.landing-hero { padding-top: var(--u7); padding-bottom: var(--u6); }

/* Текст поверх свечения. Иллюстрация идёт в разметке после текстового блока
   (так она не попадает в выпадающее меню на мобильных), а значит по умолчанию
   рисуется НАД ним. Увеличенный огонь заходит левым краем под заголовок,
   и без этого правила полупрозрачные лепестки легли бы прямо на буквы. */
.landing-hero__text { position: relative; z-index: 1; }

/* ── Иллюстрация первого экрана ────────────────────────────────
   По умолчанию скрыта: на телефоне она съела бы весь экран до кнопки,
   а первый экран должен доводить до «Начать бесплатно», а не любоваться. */
.landing-hero__art { display: none; }

@media (min-width: 1025px) {
    .landing-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        align-items: center;
        gap: var(--u5);
    }
    .landing-hero__art { display: block; }

    /* Вытягиваем свечение к самому краю экрана. Секция ограничена 1160px
       и центрирована, поэтому справа от огня оставалось поле страницы —
       на широком мониторе это полторы сотни пикселей пустоты ровно там,
       где картинка должна досказывать фразу. Отрицательный отступ снимает
       ровно половину разницы между экраном и контейнером.
       Обрезку держит body (overflow-x: clip ниже), а не сама секция:
       clip на секции срезал бы этот вынос.
       min(0px, …) обязателен: на экране уже 1160px разница отрицательная,
       формула дала бы ПОЛОЖИТЕЛЬНЫЙ отступ и втянула картинку внутрь
       (проверено на 1025px: +67px и лишняя дыра справа). */
    .landing-hero__art { margin-right: min(0px, calc((1160px - 100vw) / 2)); }
}

/* Планшет: место есть, но меньше — картинка уже и не спорит с текстом. */
@media (min-width: 769px) and (max-width: 1024px) {
    .landing-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
        align-items: center;
        gap: var(--u3);
    }
    .landing-hero__art { display: block; }
}

.landing-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    /* Потолок по высоте экрана. Без него на большом мониторе увеличенный огонь
       разрастался до 1775px при окне в 900 и на 270px залезал на раздел
       «Как это работает» — свечение просвечивало между карточками.
       Ограничиваем именно высотой: она тут ведущая, ширина идёт следом. */
    max-height: 64vh;
    width: auto;
    margin-left: auto;
    /* Огонь заметно крупнее своей колонки. Расширять колонку нельзя — тогда
       у заголовка отнимается ширина и он рассыпается на лишние строки.
       Поэтому растим само изображение и растим вправо: края растворены маской,
       так что выход за границы читается как свечение, а не как обрезка,
       а справа как раз пустовало полполосы. */
    transform: scale(1.6);
    transform-origin: right center;
    /* Края растворяем маской. Фон снимка (#FAF1E8) чуть темнее фона страницы
       (--chip-soft), и без маски виден прямоугольный стык — картинка выглядит
       наклейкой. Красить фон снимка в точный оттенок бессмысленно: он всё равно
       разойдётся с градиентными пятнами .landing__bg под ним. */
    -webkit-mask-image: radial-gradient(ellipse 54% 58% at 50% 58%, #000 18%, transparent 82%);
    mask-image: radial-gradient(ellipse 54% 58% at 50% 58%, #000 18%, transparent 82%);
}

.landing-hero__title {
    font-size: clamp(var(--text-2xl), 5vw, var(--ls-display));
    font-weight: var(--fw-medium);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--text-mid);
    margin: 0 0 var(--u3);
    max-width: 30ch;   /* как в макете: две строки на широком экране */
}

.landing-hero__lead {
    font-size: clamp(var(--text-base), 2.1vw, var(--ls-lead));
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--text-mid);
    margin: 0 0 var(--u1);
    max-width: 46ch;
}
.landing-hero__lead strong { font-weight: var(--fw-medium); }

.landing-hero__note {
    font-size: var(--text-sm);
    /* 400, а не 300: это единственный на странице мелкий текст вторичным цветом,
       и лежит он ровно под персиковым пятном фона — на 300 контраст выходил
       на границу AA (4.5:1). Вместе с приглушённым первым градиентом даёт запас. */
    font-weight: var(--fw-regular);
    color: var(--text-light);
    margin: 0 0 var(--u4);
    max-width: 46ch;
}

/* ── Кнопка призыва ───────────────────────────────────────────
   Своим классом, а не .btn: у `.btn:not(…)` (:1462) специфичность (0,5,0),
   и любое разумное переопределение ей проигрывает. */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--u7);
    padding: var(--u2) var(--u6);
    background: var(--cta-peach);
    color: var(--text-mid);
    font-family: inherit;
    font-size: var(--text-lg);
    /* 500 — самый плотный вес, который у нас есть: Inter подключён в диапазоне
       300–500, и 600/700 браузер либо зажмёт до 500, либо нарисует поддельный
       жирный с рваными краями. */
    font-weight: var(--fw-medium);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    /* Блик пробегает слева направо. Держим его деликатным: тема сервиса
       не терпит витринного мигания, поэтому блик полупрозрачный, проход
       занимает меньше секунды, а между проходами — пауза в четыре секунды
       (движение уложено в первые 18% цикла, дальше блик стоит за краем).
       overflow скрывает его за скруглением, position — точка отсчёта для ::after. */
    position: relative;
    overflow: hidden;
}

.landing-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    pointer-events: none;   /* блик не должен перехватывать нажатие */
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-180%);
    animation: landing-cta-shine 5s ease-in-out infinite;
}

@keyframes landing-cta-shine {
    0% {
        transform: translateX(-180%);
    }
    18%,
    100% {
        transform: translateX(280%);
    }
}

/* Человек попросил систему не анимировать — уважаем. В проекте уже есть такой
   медиазапрос для виджетов чата; правило то же. */
@media (prefers-reduced-motion: reduce) {
    .landing-btn::after { animation: none; opacity: 0; }
}
.landing-btn:hover {
    background: var(--wanderlust);
    color: var(--text-mid);
    transform: translateY(-1px);
}
.landing-btn:focus-visible { outline: 2px solid #8A7373; outline-offset: 2px; }

/* ── Секции ───────────────────────────────────────────────── */
.landing-section {
    padding-top: var(--u5);
    padding-bottom: var(--u5);
    scroll-margin-top: var(--u10);
}

.landing-section__title {
    font-size: clamp(var(--text-2xl), 4.2vw, var(--ls-display));
    font-weight: var(--fw-light);
    line-height: 1.2;
    color: var(--text-mid);
    text-align: center;
    margin: 0 0 var(--u2);
}

.landing-section__lead {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--text-mid);
    text-align: center;
    max-width: 52ch;
    margin: 0 auto var(--u5);
}

/* ── Карточки ─────────────────────────────────────────────── */
.landing-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u2);
}

.landing-card {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    background: var(--bg);
    border-radius: var(--radius);
    padding: var(--u3);
}

.landing-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--u7);
    height: var(--u7);
    margin-bottom: var(--u1);
    border-radius: 50%;
    background: var(--chip-soft);
    color: var(--accent-olive-dark);
    flex-shrink: 0;
}
.landing-card__icon svg { width: 24px; height: 24px; display: block; }

.landing-card__title {
    font-size: var(--fs-text);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    color: var(--text-mid);
    margin: 0;
}

.landing-card__text {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.55;
    color: var(--text-mid);
    margin: 0;
}

/* ── Витрина возможностей на лендинге ─────────────────────────────────────
   Сценки собраны из тех же токенов, что и настоящие виджеты чата: карточка —
   --chip-soft на рамке --border, кнопки шкалы — белые с --wanderlust у
   выбранной, чипы — --chip. Видео заменено анимацией намеренно: ролик тянул
   бы мегабайты и плеер ради того, что рисуется двумя ключевыми кадрами.

   Важное правило разметки: базовое состояние элементов ВИДИМОЕ, прозрачность
   задаётся только внутри @keyframes. Тогда при `prefers-reduced-motion`
   (анимации выключены) сценка остаётся читаемой, а не исчезает. */

.showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u3);
}
@media (min-width: 769px) {
    .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u4); }
}

.showcase__item {
    display: flex;
    flex-direction: column;
    gap: var(--u2);
    min-width: 0;                    /* иначе элемент сетки не сжимается ниже содержимого */
}
/* Сцена — «окно» фиксированной высоты: без неё карточки прыгали бы в такт
   анимации и утаскивали за собой соседей по сетке. */
.showcase__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: var(--u3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.showcase__title {
    font-size: var(--fs-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    color: var(--text-mid);
    margin: 0;
}
.showcase__text {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--text-mid);
    margin: 0;
}

/* ── Общие детали сценок (копируют виджеты чата) ── */
.sc-chat {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    width: 100%;
    min-width: 0;
    max-width: 340px;
}
.sc-bubble {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    color: var(--text-mid);
}
.sc-bubble--user {
    align-self: flex-end;
    padding: var(--u1) var(--u2);
    background: var(--chip);
    border-radius: var(--radius);
}
.sc-card {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    padding: var(--u2);
    background: var(--chip-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.sc-card__title {
    font-size: var(--text-sm);
    color: var(--text-mid);
}
.sc-card--alarm .sc-card__title { color: var(--danger); }
.sc-tel {
    padding: var(--u1) var(--u2);
    font-size: var(--text-sm);
    color: var(--text-mid);
    background: var(--wanderlust);
    border-radius: var(--radius-sm);
    text-align: center;
}
/* На широком экране ряд 0–10 идёт одной строкой: перенос одной кнопки вниз
   читался бы как дефект вёрстки. На телефоне — перенос, как у настоящего
   виджета (.widget-suds тоже wrap): nowrap там задавал минимальную ширину
   454px и распирал горизонтальной прокруткой всю страницу. */
.sc-suds { display: flex; flex-wrap: wrap; gap: 4px; }
@media (min-width: 769px) {
    .sc-suds { flex-wrap: nowrap; }
}
.sc-suds__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: var(--text-xs);
    color: var(--text-mid);
    background: var(--bg-frame);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.sc-chips { display: flex; flex-wrap: wrap; gap: var(--u1); }
.sc-chip {
    padding: 6px var(--u2);
    font-size: var(--text-sm);
    color: var(--text-mid);
    background: var(--chip);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.sc-line {
    height: 8px;
    border-radius: 4px;
    background: var(--chip);
}
.sc-line--short { width: 60%; }
.sc-mail {
    font-size: var(--text-xs);
    color: var(--accent-olive-dark);
}

/* ── Сценка 1: дыхание (ритм 4-4-4, как у настоящего виджета) ── */
.sc-breathe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u2);
}
.sc-breathe__circle {
    width: 96px;
    height: 96px;
    background: var(--wanderlust);
    border-radius: 50%;
    animation: sc-breathe 12s ease-in-out infinite;
}
.sc-breathe__phase {
    position: relative;
    display: block;
    width: 120px;
    height: 24px;
    font-size: var(--text-sm);
    color: var(--text-light);
    text-align: center;
}
.sc-phase {
    position: absolute;
    inset: 0;
    animation: sc-phase 12s steps(1, end) infinite;
}
/* Задержки ОТРИЦАТЕЛЬНЫЕ: при положительной элемент до старта показан базовым
   стилем, и все три подписи наезжали друг на друга. Отрицательная запускает
   цикл уже в нужной точке — периода ожидания не существует. */
.sc-phase--2 { animation-delay: -8s; }
.sc-phase--3 { animation-delay: -4s; }

@keyframes sc-breathe {
    0%   { transform: scale(0.7); }
    33%  { transform: scale(1); }
    66%  { transform: scale(1); }
    100% { transform: scale(0.7); }
}
/* Фазы сменяют друг друга шагами: подпись обязана совпадать с движением круга,
   а не «переползать» плавно — иначе человек дышит не в такт. */
@keyframes sc-phase {
    0%   { opacity: 1; }
    33%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ── Сценки-диалоги: элементы появляются по очереди и цикл повторяется ── */
/* fill-mode: backwards — во время задержки берётся кадр 0% (скрыто). Без него
   элемент виден базовым стилем и появляется раньше своей очереди. */
.sc-step-1 { animation: sc-appear 9s ease-in-out infinite backwards; }
.sc-step-2 { animation: sc-appear 9s ease-in-out 0.7s infinite backwards; }
.sc-step-3 { animation: sc-appear 9s ease-in-out 1.6s infinite backwards; }

@keyframes sc-appear {
    0%        { opacity: 0; transform: translateY(8px); }
    10%, 88%  { opacity: 1; transform: none; }
    100%      { opacity: 0; transform: translateY(8px); }
}

/* Выбор значения на шкале и чипов — тем же цветом, что в чате. */
.sc-suds__btn--picked { animation: sc-pick 9s ease-in-out 1.6s infinite backwards; }
.sc-chip--picked      { animation: sc-pick 9s ease-in-out 0.4s infinite backwards; }
.sc-chip--picked2     { animation: sc-pick 9s ease-in-out 1s infinite backwards; }

@keyframes sc-pick {
    0%, 8%    { background: var(--bg-frame); border-color: var(--border); }
    16%, 88%  { background: var(--wanderlust); border-color: var(--wanderlust); }
    100%      { background: var(--bg-frame); border-color: var(--border); }
}

/* ── Память: два разговора рядом ── */
.showcase-memory { margin-top: var(--u5); }
.showcase-memory__title {
    font-size: var(--fs-heading);
    font-weight: var(--fw-regular);
    color: var(--text-mid);
    text-align: center;
    margin: 0 0 var(--u3);
}
.showcase-memory__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u2);
}
@media (min-width: 769px) {
    .showcase-memory__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u4); }
}
.sc-talk {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    padding: var(--u3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.sc-talk__when {
    font-size: var(--text-xs);
    color: var(--text-light);
    margin-bottom: var(--u1);
}
.showcase-memory__text {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--text-mid);
    text-align: center;
    max-width: 52ch;
    margin: var(--u3) auto 0;
}

/* ── Абзац доверия ── */
.showcase-trust {
    max-width: 62ch;
    margin: var(--u5) auto 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--text-light);
    text-align: center;
}
.showcase-trust__link { color: var(--accent-olive-dark); }

@media (max-width: 480px) {
    .showcase__stage { padding: var(--u2); }
}

/* Уважение к «уменьшенной анимации»: сценки замирают в собранном виде —
   благодаря видимому базовому состоянию они остаются читаемыми. */
@media (prefers-reduced-motion: reduce) {
    .sc-breathe__circle,
    .sc-phase,
    .sc-step-1, .sc-step-2, .sc-step-3,
    .sc-suds__btn--picked,
    .sc-chip--picked,
    .sc-chip--picked2 { animation: none; }
    .sc-phase--2, .sc-phase--3 { display: none; }
    .sc-suds__btn--picked,
    .sc-chip--picked,
    .sc-chip--picked2 { background: var(--wanderlust); border-color: var(--wanderlust); }
}

/* ── Финальный призыв ─────────────────────────────────────── */
.landing-final {
    padding-top: var(--u6);
    padding-bottom: var(--u8);
}

.landing-final__title {
    font-size: clamp(var(--text-2xl), 4.6vw, var(--ls-display));
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--text-mid);
    margin: 0 0 var(--u2);
    max-width: 24ch;   /* две строки, как в макете */
}

.landing-final__lead {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--text-mid);
    margin: 0 0 var(--u4);
    max-width: 52ch;
}

/* ── Чёрный подвал (вне .main-content, во всю ширину) ─────── */
.landing-footer {
    grid-column: 1 / -1;
    background: var(--text-mid);
    color: var(--bg-frame);
    padding: var(--u5) var(--u3);
}

.landing-footer__inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u3);
    text-align: center;
}

.landing-footer__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;               /* тач-таргет: это ссылка в чат */
    gap: var(--u1);
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    color: var(--bg-frame);
    text-decoration: none;
}
.landing-footer__logo:hover { color: var(--cta-peach); }
.landing-footer__logo-img { width: 28px; height: 28px; flex-shrink: 0; }

.landing-footer__nav,
.landing-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--u1) var(--u3);
}

.landing-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;               /* тач-таргет */
    font-family: inherit;
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--bg-frame);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}
.landing-footer__link:hover { color: var(--cta-peach); }
.landing-footer__legal .landing-footer__link {
    font-size: var(--text-sm);
    color: var(--wanderlust);
}
.landing-footer__legal .landing-footer__link:hover { color: var(--cta-peach); }

/* ── Планшет: карточки по две ─────────────────────────────── */
@media (min-width: 600px) {
    .landing-cards { grid-template-columns: repeat(2, 1fr); gap: var(--u3); }
}

/* ── Десктоп: четыре в ряд, как в макете ──────────────────── */
@media (min-width: 1025px) {
    .landing-cards { grid-template-columns: repeat(4, 1fr); }
    .landing-hero  { padding-top: var(--u10); padding-bottom: var(--u8); }
    .landing-card  { padding: var(--u4) var(--u3); }
}

/* ── Мелкие телефоны ──────────────────────────────────────── */
@media (max-width: 480px) {
    .landing-hero,
    .landing-section,
    .landing-final {
        padding-left: var(--u2);
        padding-right: var(--u2);
    }
    .landing-hero { padding-top: var(--u5); }
    .landing-btn  { width: 100%; padding-left: var(--u3); padding-right: var(--u3); }
    .landing-footer { padding-left: var(--u2); padding-right: var(--u2); }
}


/* ============================================================
   === Отчёт о неделе (/accounts/report/) =====================
   ============================================================

   Страница собрана на классах .about-* (лента секций-карточек),
   поэтому здесь только то, чего в них нет: плитки чисел недели,
   инлайновый SVG-график напряжения и список прошлых недель.
   Новых цветов и кеглей не вводим — всё из палитры v4. */

/* ── Числа недели ─────────────────────────────────────────── */
.report-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.report-fact {
    background: var(--chip-soft);
    border-radius: var(--radius);
    padding: var(--u2);
}
.report-fact__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: var(--lh-tight);
    color: var(--text-light);
}
.report-fact__value {
    display: block;
    margin-top: var(--u1);
    font-size: var(--text-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    color: var(--text-mid);
}
/* Сравнение с прошлой неделей — намеренно тише самого числа:
   это справка, а не оценка того, как человек прожил неделю. */
.report-fact__delta {
    display: block;
    margin-top: var(--u1);
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    line-height: var(--lh-base);
    color: var(--text-light);
}

/* Пояснение под блоком (первая неделя, границы дат) */
.report-note {
    margin-top: var(--u2);
    font-size: var(--text-sm);
    color: var(--text-light);
}

/* ── График напряжения ────────────────────────────────────── */
/* Цвета задаём классами, а не атрибутами SVG: var(--…) в атрибуте
   не работает, а хардкодить hex в разметке нельзя. */
.report-chart {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--u1) 0;
    overflow: visible;              /* кружки крайних точек не срезаются */
}
.report-chart__grid {
    stroke: var(--border);
    stroke-width: 1;
}
.report-chart__line {
    fill: none;
    stroke: var(--accent-olive-dark);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.report-chart__dot { fill: var(--accent-olive-dark); }

/* Подписи шкалы — обычный текст над и под графиком (внутри SVG он
   масштабировался бы вместе с viewBox и на телефоне стал бы вдвое мельче). */
.report-chart__axis {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    line-height: var(--lh-base);
    color: var(--text-light);
}

/* ── Прошлые недели ───────────────────────────────────────── */
.report-history {
    display: flex;
    flex-direction: column;
    gap: var(--u1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.report-history__link {
    display: flex;
    align-items: center;
    min-height: 44px;               /* тач-таргет */
    padding: 0 var(--u2);
    background: var(--chip-soft);
    border-radius: var(--radius-sm);
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    color: var(--text-mid);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.report-history__link:hover {
    background: var(--chip);
    color: var(--accent-olive-dark);
}

/* ── Ссылка на отчёт в профиле ────────────────────────────── */
/* Кликабельна вся строка (см. profile.html), поэтому модификатор
   существующего .profile-row, а не отдельный блок. */
.profile-row--link {
    align-items: center;
    min-height: 44px;               /* тач-таргет */
    text-decoration: none;
}
.profile-row--link:hover .profile-value { color: var(--accent-olive-dark); }

/* ── Планшет и шире: числа недели в ряд ───────────────────── */
/* auto-fit, а не фиксированное число колонок: набор показателей
   в отчёте может отличаться, и сетка не должна ломаться от того,
   что их стало три вместо четырёх. */
@media (min-width: 600px) {
    .report-facts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════
   НАШИ СПЕЦИАЛИСТЫ  (templates/partials/specialists.html)
   Блок один на весь сайт: включается и в лендинг, и в «О проекте».
   Поэтому оформление нейтральное — белая карточка, которая одинаково
   читается и на бежевом фоне лендинга, и среди белых карточек about.
   ══════════════════════════════════════════════════════════════ */
.specialists {
    padding-top: var(--u5);
    padding-bottom: var(--u5);
    scroll-margin-top: var(--u10);
}

.specialists__title {
    font-size: var(--fs-heading);
    font-weight: var(--fw-regular);
    line-height: 1.25;
    color: var(--text-mid);
    text-align: center;
    margin: 0 0 var(--u2);
}

.specialists__lead {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--text-mid);
    text-align: center;
    max-width: 52ch;
    margin: 0 auto var(--u4);
}

/* На «О проекте» блок идёт следом за секцией, у которой уже есть нижний отступ:
   margin и padding соседей не схлопываются, и зазор удвоился бы против принятого
   на этой странице ритма. Заголовок там же приводим к виду соседних H2 — иначе
   он выглядит тяжелее и темнее «О продукте» и «О нас» на той же странице. */
.about-page .specialists { padding-top: 0; }

.about-page .specialists__title {
    font-weight: var(--fw-light);
    color: var(--text-light);
}

/* На лендинге заголовки секций крупнее общей шкалы (локальные токены
   .landing-page) — подхватываем их, чтобы блок не выбивался из страницы. */
.landing-page .specialists__title {
    font-size: clamp(var(--text-2xl), 4.2vw, var(--ls-display));
    font-weight: var(--fw-light);
    line-height: 1.2;
}

.specialists__list {
    display: flex;
    flex-direction: column;
    gap: var(--u4);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--u4) var(--u3);
    box-shadow: var(--shadow);
}

/* ── Один специалист: фото слева, регалии справа ───────────── */
.specialist {
    display: grid;
    grid-template-columns: 1fr;      /* mobile-first: фото над текстом */
    gap: var(--u3);
    align-items: start;
}

/* Второй и далее отделяются линией: между людьми нужна пауза,
   а пустого места на узком экране для неё не хватает. */
.specialist + .specialist {
    padding-top: var(--u4);
    border-top: 1px solid var(--border);
}

/* Кадрирует CSS, а не редактор: исходные снимки приходят с разными
   пропорциями (портрет, альбом), и подгонять каждый под сетку руками
   пришлось бы при каждой замене фотографии. */
.specialist__photo {
    width: 160px;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--chip-soft);    /* видно рамку кадра, пока фото не загрузилось */
    flex-shrink: 0;
}

.specialist__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;     /* лицо обычно в верхней трети портрета */
}

.specialist__name {
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    color: var(--text-mid);
    margin: 0 0 var(--u1);
}

.specialist__role {
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--accent-olive-dark);
    margin: 0 0 var(--u3);
}

.specialist__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin: 0 0 var(--u1);
}

.specialist__list-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.specialist__list-items li {
    position: relative;
    padding-left: var(--u2);
    font-size: var(--fs-text);
    font-weight: var(--fw-light);
    line-height: 1.55;
    color: var(--text-mid);
}

.specialist__list-items li + li { margin-top: var(--u1); }

/* Маркер рисуем сами: у списка убран list-style, а точка нужна —
   без неё длинные строки с переносом читаются как сплошной текст. */
.specialist__list-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;                       /* по первой строке, не по центру блока */
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-olive);
}

/* ── Планшет и десктоп: фото уходит влево ──────────────────── */
@media (min-width: 600px) {
    .specialists__list { padding: var(--u5); }

    .specialist {
        grid-template-columns: 200px 1fr;
        gap: var(--u4);
    }

    .specialist__photo { width: 200px; }
}