.demo-db-banner {
            width: 100%;
            box-sizing: border-box;
            background: #dc2626;
            color: #ffffff;
            padding: 7px 14px;
            text-align: center;
            font-size: 13px;
            line-height: 1.25;
            font-weight: 400;
            letter-spacing: 0;
        }
        .demo-db-banner__sep {
            margin: 0 8px;
            opacity: 0.6;
        }
        .demo-db-banner__link {
            color: #ffffff;
            font-weight: 700;
            text-decoration: underline;
            cursor: pointer;
        }
        .demo-db-banner__link:hover { opacity: 0.85; }
        /*
           ПЛАШКА ВИДНА ТОЛЬКО В «ЗАПРОСАХ В 1С», ХОТЯ ЛЕЖИТ В ОБЩЕМ КАРКАСЕ.

           ⚠️ ДВА ДОВОДА, И ОНИ НЕ СПОРЯТ. Первый (shell.php:406) — почему разметка в каркасе, а не в панели
              чата: плашка про состояние АККАУНТА, а внутри панели она оказывалась ниже кнопки возврата, общей
              для всех вкладок. Второй — этот: показывать её везде незачем, 1С касается только «Запросов в 1С»,
              а красная полоса на «Поручениях» или «Заявках» пугает там, где делать нечего. Поэтому разметка
              осталась общей, а видимость сузили здесь. Не переносите её обратно в панель по первому доводу:
              он про место в DOM, а не про то, на каких вкладках она нужна.
           ⚠️ ВКЛАДКУ БЕРЁМ ГОТОВУЮ: .shell-chat-active тоглит showTab (shell.php:498) на каждом переключении,
              на нём же держатся раскладка чата и полоса возврата. Свой признак «сейчас чат» заводить не нужно.
           ⚠️ !important ОБЯЗАТЕЛЕН: показ идёт ИНЛАЙНОМ (app.php:495 style.display='block'), обычное правило
              инлайн не перебивает. Тот же случай и та же причина, что у native_hide.php:43.
           ⚠️ УСЛОВИЕ ДЕМО-БАЗЫ НЕ ТРОГАЕМ: его по-прежнему решает updateDemoDbBanner (app.php:484-497).
              Здесь добавлено ровно «И активна вкладка чата» — правило умеет только прятать, показать не может.
        */
        body:not(.shell-chat-active) .demo-db-banner { display: none !important; }

        :root {
            color-scheme: light;
            --bg: #f4f6fb;
            --card: #ffffff;
            --surface-1: #f4f6fb; /* фон карточки отдела на белой панели (чуть темнее белого) */
            --text: #111827;
            --muted: #6b7280;
            --border: #e5e7eb;
            --primary: #4f46e5;
            --primary-dark: #3730a3;
            --primary-soft: #eef2ff; /* левый сайдбар (side_nav.php): фон активного пункта */
            --danger: #b91c1c;
            --success: #047857;
            /* ⚠️ ГРАНИЦА КОНТРОЛА ТЕМНЕЕ ГРАНИЦЫ КАРТОЧКИ, И ЭТО ЕДИНСТВЕННАЯ ПРИЧИНА ВТОРОГО ИМЕНИ.
               rgba(17,24,39,.17) на белом даёт ≈#d6d8da против #e5e7eb у --border — разница видна, поле
               ввода не теряется на панели. Соседние значения из того же ряда (.10 для границы панели и
               .12 для разделителя) на белом дают ≈#e7e8e9 и ≈#e2e3e5 — от --border неотличимы, и своих
               имён им не заводили: см. отчёт по «единой строке фильтров». */
            --border-strong: rgba(17, 24, 39, .17);
            /* Фон «полки» — подложки сегментов и тихих кнопок-дропдаунов. НЕ --primary-soft: тот индиговый
               (#eef2ff) и означает «активный пункт», а это нейтральный серый и означает «фон группы». */
            --shelf: #eef0f7;
            --shadow-1: 0 1px 2px rgba(16, 40, 34, .05);      /* карточка/панель на странице */
            --shadow-pop: 0 12px 28px rgba(16, 24, 40, .16);  /* всплывающая панель поверх содержимого */
            /* Бейдж «в архиве» — ЗНАЧЕНИЯ ПРОДУКТОВОЙ ЯНТАРНОЙ ПАРЫ (.zay-badge--rev), но ПОД СВОИМИ
               ИМЕНАМИ. Цвет на экране обязан быть один: два похожих янтарных рядом читались бы как
               разные состояния, которых нет. Имя своё — потому что архив не стадия процесса, а признак
               самой формы: переиспользуй мы класс стадии, правка палитры стадий перекрасила бы то, что
               к стадиям отношения не имеет. */
            --badge-archive-bg: #fde68a;
            --badge-archive-ink: #92400e;
            /* ⚠️ ШРИФТЫ — ТОЛЬКО ДЛЯ САЙДБАРА (.side-nav), НЕ ДЛЯ body. Задача — левый сайдбар десктопа;
               переводить весь интерфейс (сейчас Arial) на Plex здесь не просили, и это была бы правка
               за рамками задачи. Токены объявлены в общем :root, чтобы следующий раздел, которому Plex
               понадобится, не заводил их заново — но применяет их пока только сайдбар. */
            --font-sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
            --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
            /* ⚠️ РАДИУС КНОПКИ — ОДНО ЧИСЛО НА ВЕСЬ ИНТЕРФЕЙС. Замер до сведения: семь разных значений на
               кнопках — 6, 7, 8, 10, 12, 14 и 999. Здесь оно одно, как ширина колонки в wrap.css.
               ⚠️ КНОПКА — ПРЯМОУГОЛЬНЫЙ ЭЛЕМЕНТ-ДЕЙСТВИЕ, с подписью словом или со значком. Исключения
               названы в UI-Kit и держатся radius-check.js: круглые кнопки-иконки (50%, ширина равна
               высоте), чипы и бейджи (пилюля — их язык, и это не действия), строки списков (строка, а не
               кнопка, даже когда она <button>), поля ввода, чекбоксы, пункты меню и превью файлов.
               ⚠️ В ОБЩИХ ФАЙЛАХ ТОКЕН ПИШЕТСЯ С ЗАПАСНЫМ ЗНАЧЕНИЕМ — var(--btn-radius, 10px). Они грузятся
               и на страницах без app.css (диалоги, лента комментариев, чек-лист), а неизвестная переменная
               обнуляет свойство целиком: кнопка стала бы прямоугольной без скругления. */
            --btn-radius: 10px;
            /* Дополнительные роли палитры для общей темы; светлые значения сохраняют привычный вид интерфейса. */
            --text-secondary: #374151;
            --surface-hover: #f6f8fa;
            --surface-subtle: #fafbff;
            --surface-muted: #f8fafc;
            --surface-2: #eef0f4;
            --primary-ink: #3730a3;
            --danger-strong: #d1242f;
            --info: #0969da;
            --warning: #92400e;
            --danger-ink: #b91c1c;
            --success-ink: #047857;
            --warning-ink: #92400e;
            --info-ink: #0969da;
            --danger-button: #d1242f;
            --success-button: #1a7f37;
            --warning-button: #d97706;
            --info-button: #2563eb;
            --primary-border: #c7d2fe;
            --info-border: #b6c7e5;
            --danger-bg: #fef2f2;
            --badge-danger-bg: #fdecee;
            --danger-border: #fecaca;
            --success-bg: #ecfdf5;
            --badge-success-bg: #dcfce7;
            --success-border: #bbf7d0;
            --warning-bg: #fffbeb;
            --badge-warning-bg: #fef3c7;
            --warning-border: #fde68a;
            --info-bg: #eff6ff;
            --purple-bg: #f5f3ff;
            --violet-bg: #ede9fe;
            --violet-border: #ddd6fe;
            --violet-ink: #5b21b6;
            --teal-bg: #ccfbf1;
            --teal-border: #99f6e4;
            --teal-ink: #115e59;
        }

        /* ==== Самохостинг IBM Plex (сайдбар) ====
           ⚠️ БЕЗ CDN/Google Fonts НАМЕРЕННО: с этой страницы не должно уходить ни одного запроса на
              fonts.googleapis.com/fonts.gstatic.com — файлы лежат в /fonts/ibm-plex/ этого же контура.
           ⚠️ ДВА unicode-range НА НАЧЕРК (latin + cyrillic), А НЕ ОДИН ФАЙЛ. Диапазоны — как отдаёт сам
              Google Fonts для этих подмножеств: браузер грузит cyrillic для кириллического текста и latin
              отдельно для цифр/латиницы в моно-суммах, не оба сразу. */
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-400-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;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-400-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-500-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;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-500-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-600-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;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-600-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-700-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;
        }
        @font-face {
            font-family: 'IBM Plex Sans';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-sans-700-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'IBM Plex Mono';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-mono-500-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;
        }
        @font-face {
            font-family: 'IBM Plex Mono';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'IBM Plex Mono';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-mono-600-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;
        }
        @font-face {
            font-family: 'IBM Plex Mono';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/fonts/ibm-plex/ibm-plex-mono-600-cyrillic.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
        }
        /* L1 (shell-merge): body{overflow:hidden} клипал скролл вкладок «Поручения»/«Уведомления». Теперь скролл-лок чата —
           ТОЛЬКО когда активна вкладка чата: shell тоглит .shell-chat-active на <body> (showTab). app.css грузит лишь shell. */
        body.shell-chat-active { overflow: hidden; }

        .hero {
            position: relative;
            flex: 0 0 auto;
        }

        .hero-inner {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            align-items: flex-start;
        }

        .hero-text {
            min-width: 0;
        }

        .hero-billing__links {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            font-size: 13px;
        }

        .hero-billing__links a {
            color: var(--info-ink, #2563eb);
            text-decoration: none;
            font-weight: 700;
        }


        @media (max-width: 760px) {
            .hero-inner {
                flex-direction: column;
            }

            .hero-billing__links {
                justify-content: flex-start;
            }
        }

        .hero h1 {
            margin: 0 0 10px;
            font-size: 30px;
            line-height: 1.2;
        }

        .hero p {
            margin: 0;
            color: #000;
            font-size: 15px;
            line-height: 1.5;
        }

        .query-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }

        .query-button:hover {
            background: var(--primary-dark);
        }

        .query-button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .example {
            border: 1px solid var(--border);
            background: var(--surface-muted, #f9fafb);
            color: var(--text-secondary, #374151);
            padding: 6px 9px;
            border-radius: var(--btn-radius, 10px);
            font-size: 12px;
            cursor: pointer;
        }

        .example:hover {
            border-color: var(--primary);
            color: var(--primary-ink, var(--primary));
        }

        .example:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .status {
            display: none;
            margin: 0;
            padding: 12px 14px;
            border-radius: 14px;
            font-size: 14px;
            flex: 0 0 auto;
            order: 2;
        }

        .status.is-visible {
            display: block;
        }

        .status.loading {
            background: var(--primary-soft, #eef2ff);
            color: var(--primary-ink, #3730a3);
            border: 1px solid var(--primary-border, #c7d2fe);
        }

        .status.error {
            background: var(--danger-bg, #fef2f2);
            color: var(--danger-ink);
            border: 1px solid var(--danger-border, #fecaca);
        }

        .result-view {
            display: none;
        }

        .result-view.is-active {
            display: block;
        }

        /* ⚠️ flex: 0 0 auto ОБЯЗАТЕЛЕН. Лента — единственный flex-элемент перевёрнутого .result, и с
           flex-shrink по умолчанию (1) при min-height:0 она сжимается до высоты вьюпорта: scrollHeight
           становится равен clientHeight, прокрутка пропадает, scrollTop залипает в нуле. Проверено. */
        .chat-feed.is-active {
            display: flex;
            flex-direction: column;
            gap: 14px;
            flex: 0 0 auto;
        }

        .chat-message {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .chat-message--user {
            align-items: flex-end;
        }

        .chat-message--assistant {
            align-items: flex-start;
        }

        .chat-bubble {
            max-width: min(900px, 100%);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 14px 16px;
            background: var(--card, #ffffff);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
            min-width: 0;
        }

        .chat-message--user .chat-bubble {
            max-width: min(720px, 88%);
            background: var(--primary);
            color: #ffffff;
            border-color: var(--primary);
        }

        .chat-message--assistant .chat-bubble {
            width: min(100%, 980px);
        }

        .chat-bubble--pending {
            color: var(--muted);
        }

        /* Появление сообщения: простой fade in + лёгкий подъём. Одинаково для входящих/исходящих.
           Анимируется только transform/opacity → не влияет на layout/scrollHeight (автоскролл цел). */
        @keyframes chatFadeIn {
            from { opacity: 0; transform: translateY(9px); }
            to   { opacity: 1; transform: none; }
        }

        .chat-bubble--enter {
            animation: chatFadeIn 0.22s ease-out both;
            will-change: transform, opacity;
        }

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

        .chat-progress {
            margin-top: 6px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }
        /* Индикатор обработки «Думаю…»: плавная пульсация текста + бегущие точки. */
        .chat-progress--live { animation: chatThinkPulse 1.4s ease-in-out infinite; }
        .chat-progress__dots::after { content: ''; animation: chatThinkDots 1.2s steps(1, end) infinite; }
        @keyframes chatThinkPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes chatThinkDots {
            0% { content: ''; }
            25% { content: '.'; }
            50% { content: '..'; }
            75%, 100% { content: '...'; }
        }
        @media (prefers-reduced-motion: reduce) {
            .chat-progress--live { animation: none; }
            .chat-progress__dots::after { content: '…'; animation: none; }
        }

        .chat-bubble--error {
            border-color: var(--danger-border, #fecaca);
            background: var(--danger-bg, #fef2f2);
            color: var(--danger-ink);
        }

        .chat-bubble--stopped {
            border-color: var(--warning-border, #fde68a);
            background: var(--warning-bg, #fffbeb);
            color: var(--warning-ink, #92400e);
        }

        /* Системное уведомление (напр. «Баланс пополнен») — нейтральный центрированный бабл. */
        .chat-message--system { justify-content: center; }
        .chat-bubble--system {
            border-color: var(--success-border, #bbf7d0);
            background: var(--success-bg, #f0fdf4);
            color: var(--success-ink, #166534);
            text-align: center;
            font-size: 13px;
            box-shadow: none;
        }

        /* Уведомление О ПОРУЧЕНИИ (есть task_id): ВЕСЬ пузырь кликабелен → /porucheniya.php?task=N (обработчик в JS).
           Намёк — курсор + лёгкая подсветка фона на hover. Без отдельной ссылки-строки: ведёт сам пузырь.
           Уведомления про заказы (без task_id) класс НЕ получают → остаются некликабельными, как обычный текст. */
        .chat-bubble--notif-link {
            cursor: pointer;
            transition: background-color .12s ease, border-color .12s ease;
        }

        .chat-bubble--notif-link:hover {
            background: var(--success-bg, #dcfce7); /* на тон насыщеннее фона пузыря (#f0fdf4) — намёк «нажми» */
            border-color: var(--success-border, #86efac);
        }

        .chat-text {
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .chat-bubble .ai-report {
            margin-top: 4px;
            max-width: 100%;
            overflow: hidden;
        }

        /* Баланс < 500 руб — сумма красным (веб). */
        .balance--low { color: var(--danger-strong, #d1242f); font-weight: 700; }

        .chat-message-time {
            margin-top: 4px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1;
        }

        .chat-message--user .chat-message-time {
            margin-right: 8px;
            text-align: right;
        }

        .chat-message--assistant .chat-message-time {
            margin-left: 8px;
            text-align: left;
        }

        .chat-date-separator {
            align-self: center;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid var(--border);
            color: var(--muted);
            font-size: 12px;
            line-height: 1;
        }

        /* Ленивая подгрузка истории: спиннер сверху + маркер начала переписки. */
        .chat-older-spinner {
            align-self: center;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            color: var(--muted);
            font-size: 12px;
        }
        .chat-older-spinner__dot {
            width: 12px;
            height: 12px;
            border: 2px solid var(--border);
            border-top-color: var(--muted);
            border-radius: 50%;
            animation: chatOlderSpin 0.7s linear infinite;
        }
        @keyframes chatOlderSpin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .chat-older-spinner__dot { animation: none; }
        }
        .chat-history-start {
            align-self: center;
            padding: 4px 12px;
            color: var(--muted);
            font-size: 12px;
            opacity: 0.75;
        }

        .report-feedback {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .report-feedback__label {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .report-feedback__button {
            border: 1px solid var(--border);
            border-radius: var(--btn-radius);
            background: var(--surface-muted, #f9fafb);
            color: var(--text-secondary, #374151);
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
            padding: 7px 10px;
            position: relative; /* якорь для кастомного тултипа */
        }

        .report-feedback__button:hover:not(:disabled) {
            border-color: var(--primary);
            color: var(--primary-ink, var(--primary));
        }

        .report-feedback__button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Кастомный тултип фидбэка — появляется МГНОВЕННО (без браузерной задержки title). */
        .report-feedback__button[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: #111827;
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 6px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity .08s ease;
            z-index: 60;
        }
        .report-feedback__button[data-tooltip]:hover::after {
            opacity: 1;
        }

        .report-feedback__status {
            color: var(--muted);
            font-size: 12px;
        }

        .empty-state {
            background: var(--card);
            border: 1px dashed var(--border);
            border-radius: 18px;
            padding: 34px;
            text-align: center;
            color: var(--muted);
        }

        .meta {
            margin-top: 14px;
            color: var(--muted);
            font-size: 13px;
        }

        .billing-details {
            background: var(--card, #fff);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px;
        }

        /* Панель детализации повторяет выезжающий drawer карточки клиента и лежит на уровне документа,
           поэтому открывается над любым разделом и не меняет экран под собой. */
        #billingModalScreen { --crm-side-offset: 0px; position: fixed; z-index: 50; inset: 0; display: flex;
            justify-content: flex-end; background: rgba(15, 23, 42, .18); overflow-x: clip; overflow-y: hidden; }
        #billingModalScreen[hidden] { display: none; }
        #billingModalScreen .crm-drawer { box-sizing: border-box; width: calc(100% - var(--crm-side-offset) - clamp(24px, 3vw, 48px)); height: 100%;
            overflow-y: auto; padding: 24px clamp(18px, 4vw, 56px) 36px; background: var(--card, #fff);
            box-shadow: -12px 0 32px rgba(15, 23, 42, .16); animation: crmDrawerIn .24s ease-out; -webkit-overflow-scrolling: touch; }
        #billingModalScreen .crm-drawer.is-closing { pointer-events: none; animation: crmDrawerOut .22s ease-in forwards; }
        #billingModalScreen .crm-drawer__body { box-sizing: border-box; width: 100%; max-width: none; margin: 0; }
        #billingModalScreen .billing-drawer__head { display: flex; align-items: flex-start; gap: 12px; min-height: 40px; margin: 0 0 24px; }
        #billingModalScreen .billing-drawer__ttl { flex: 1; min-width: 0; margin: 0; color: var(--text); font-size: 19px; font-weight: 600; line-height: 1.35; }
        #billingModalScreen .billing-drawer__close { flex: none; border: 0; background: none; padding: 0 4px; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
        #billingModalScreen .billing-drawer__close:hover { color: var(--text); }
        @media (prefers-reduced-motion: reduce) { #billingModalScreen .crm-drawer { animation: none !important; } }
        @media (min-width: 1024px) {
            body.side-nav-active #billingModalScreen { --crm-side-offset: 248px; }
            html.side-collapsed body.side-nav-active #billingModalScreen { --crm-side-offset: 88px; }
        }
        @media (max-width: 760px) {
            #billingModalScreen .crm-drawer { width: calc(100% - 18px); padding: 16px 14px 28px; }
        }

        .billing-details h2 {
            margin: 0 0 14px;
            font-size: 18px;
            font-weight: 500; /* единый размер/вес заголовка раздела — эталон .eh-title (Поручения) */
        }

        .billing-details table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .billing-details th,
        .billing-details td {
            border-bottom: 1px solid var(--border);
            padding: 10px 8px;
            text-align: left;
            vertical-align: top;
            font-size: 13px;
        }

        .billing-details th {
            background: var(--surface-muted, #f9fafb);
            color: var(--text-secondary, #374151);
            font-weight: 800;
        }

        .billing-details__cost {
            white-space: nowrap;
            font-weight: 800;
        }
        .billing-details__cost--in {
            color: var(--success-ink, #1a7f37); /* зачисление (возврат/пополнение) — зелёным со знаком + */
        }

        /* Таблица «Контроль сделок» — те же токены, что .billing-details (стиль чата, без ad-hoc цветов). */
        .deals-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .deals-table th, .deals-table td {
            border-bottom: 1px solid var(--border);
            padding: 10px 8px;
            text-align: left;
            vertical-align: top;
            font-size: 13px;
        }
        .deals-table th { background: var(--surface-muted, #f9fafb); color: var(--text-secondary, #374151); font-weight: 800; }
        .deals-table td.deals-table__num { white-space: nowrap; }
        .deals-table td.deals-table__action { text-align: right; white-space: nowrap; }
        .deals-table__detail { color: var(--muted); }
        .deals-table__badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--success-ink, #1a7f37); } /* «задача поставлена» (вариант А: одна задача на заказ) */

        /* Документы клиента (акты + счета) во вкладке «Документы» — геометрия .deals-table. */
        .docs-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .docs-table th, .docs-table td {
            border-bottom: 1px solid var(--border);
            padding: 10px 8px;
            text-align: left;
            font-size: 13px;
            white-space: nowrap;
        }
        .docs-table th { background: var(--surface-muted, #f9fafb); color: var(--text-secondary, #374151); font-weight: 800; }
        .docs-table td:last-child, .docs-table th:last-child { text-align: right; }
        .docs-table a { color: var(--primary-ink, #4f46e5); text-decoration: none; font-weight: 700; }
        .docs-table a:hover { text-decoration: underline; }
        /* Действия в строке документа — вид ссылки, а не кнопки: рядом с «Открыть», не перегружают таблицу. */
        .docs-table .btn--link {
            background: none; border: 0; padding: 0 0 0 12px; margin: 0;
            color: var(--primary-ink, #4f46e5); font: inherit; font-weight: 700; cursor: pointer;
        }
        .docs-table .btn--link:hover { text-decoration: underline; }
        .docs-table .btn--link.btn--muted { color: var(--muted); font-weight: 600; }

        .billing-details__pager {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
        }

        .billing-details__pager button {
            border: 0;
            border-radius: var(--btn-radius);
            padding: 9px 12px;
            background: var(--info-button, #2563eb);
            color: #fff;
            font-weight: 800;
            cursor: pointer;
        }

        .billing-details__pager button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .billing-details__pager span {
            color: var(--muted);
            font-size: 13px;
        }


        .user-settings {
            /* контейнер: карточками теперь являются сами разделы-панели (.user-settings__panel) */
        }

        .user-settings h2 {
            margin: 0 0 14px;
            font-size: 18px;
            font-weight: 500; /* единый размер/вес заголовка раздела — эталон .eh-title (Поручения) */
        }

        .user-settings__panel {
            display: none;
        }

        .user-settings__panel.is-active {
            display: block;
        }

        .user-settings__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .user-settings label {
            display: block;
            margin: 10px 0 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-secondary, #334155);
        }

        .user-settings input,
        .user-settings select,
        .user-settings textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 14px;
            background: var(--card, #ffffff);
        }
        .user-settings textarea { resize: vertical; font-family: inherit; line-height: 1.5; }

        .user-settings input[disabled] {
            background: var(--surface-muted, #f8fafc);
            color: var(--muted, #64748b);
        }

        /* ⚠️ ФЛАЖОК — НЕ ПОЛЕ ВВОДА, И ПРАВИЛО ВЫШЕ БЬЁТ ПО НЕМУ ТОЖЕ. «.user-settings input { width: 100% }»
           писалось про текстовые поля, но селектор не различает типы: замерено в Chrome на «Настройки →
           Переписка» — у флажка «Пароль в приложении включён» вычисленная ширина 420px. Растянутый на всю
           строку квадрат выдавливает подпись на следующую строку, и галочка встаёт НАД текстом, а не рядом.
           ⚠️ НИЖЕ БАЗОВОГО ПРАВИЛА НАМЕРЕННО: специфичность у них разная (0,2,1 против 0,1,1), но порядок
           держим тот же, что и везде в проекте, — исключение читается сразу после правила, которое оно
           сужает. */
        .user-settings input[type="checkbox"],
        .user-settings input[type="radio"] {
            width: auto;
            /* ⚠️ flex: none — РАДИ ПОДПИСИ РЯДОМ. Внутри inline-flex подписи флажок иначе сжимается до нуля,
               когда текст длинный: беда та же (галочки не видно), только с другой стороны. */
            flex: none;
            padding: 0;
            margin: 0;
        }

        .user-settings__buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        /* ===== Общие классы редизайна настроек (палитра из :root, единый язык) ===== */
        .card {
            background: var(--card, #fff);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        }
        .btn, .user-settings__buttons button {
            border: 0;
            border-radius: var(--btn-radius);
            padding: 11px 16px;
            background: var(--primary);
            color: #fff;
            font-weight: 700;
            cursor: pointer;
            font-size: 14px;
        }
        .btn:hover, .user-settings__buttons button:hover { filter: brightness(1.06); }
        .btn:disabled, .user-settings__buttons button:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
        .btn--secondary, .user-settings__buttons button.btn--secondary { background: var(--surface-2, #e2e8f0); color: var(--text, #111827); }
        .btn--danger, .user-settings__buttons button.btn--danger { background: var(--danger-button, #d1242f); color: #fff; }
        /* Кнопка «Что делать?» в таблице сигналов — родная .btn .btn--secondary, но компактнее под ячейку. */
        .signal-howto { padding: 5px 12px; font-size: 13px; border-radius: 8px; white-space: nowrap; margin-left: 4px; }
        /* Кнопка «Поставить задачу» в окне сделок — компактная как .signal-howto, но СВОЙ класс (howto-делегат её не ловит). */
        .deals-task-btn { padding: 5px 12px; font-size: 13px; border-radius: var(--btn-radius); white-space: nowrap; }
        /* Ячейка «задача поставлена»: бейдж + НИЖЕ кнопка «Отменить задачу» (.btn .btn--danger, компактная). Отмена — только главному. */
        .deals-task-set { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
        .deals-cancel-task-btn { padding: 5px 12px; font-size: 13px; white-space: nowrap; } /* размер; цвет/радиус/вес — от .btn .btn--danger */
        /* Возраст в бейдже: КРАСНЫЙ (токен --danger), если задача висит не с сегодня (overdue) — сигнал. */
        .deals-task-age--overdue { color: var(--danger-ink); }
        /* Инлайн-подтверждение отмены В СТИЛЕ приложения (вместо системного confirm): «Отменить задачу? [Да][Отмена]» */
        .deals-confirm { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
        .deals-confirm__q { font-size: 13px; color: var(--text); font-weight: 600; }
        .deals-confirm__row { display: flex; gap: 6px; }
        .deals-confirm__btn { padding: 5px 14px; font-size: 13px; }

        .badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 9px; border-radius: 999px;
            font-size: 12px; font-weight: 600; line-height: 1.7; vertical-align: middle;
        }
        .badge--ok { background: var(--success-bg, #dcfce7); color: var(--success-ink, #166534); }
        .badge--off { background: var(--surface-2, #eef0f4); color: var(--muted, #64748b); }
        .badge--warn { background: var(--warning-bg, #fef3c7); color: var(--warning-ink, #92400e); }

        /* ЧИП-ФИЛЬТР — ОБЩИЙ КОМПОНЕНТ ЧЕТЫРЁХ ПАНЕЛЕЙ: поручения, планировщик, заявки, чат.
           ⚠️ ПЕРЕЕХАЛ СЮДА ИЗ ТРЁХ ПАНЕЛЬНЫХ CSS, где лежал тремя копиями (por-panel.css, zay-panel.css,
              planner-panel.css) с одинаковыми значениями. Копии и обнаружились ровно тем способом, каким такое
              обычно и обнаруживается: чат объявил у себя разметку с class="chip", и она осталась НЕОФОРМЛЕННОЙ —
              общим у чипов было только имя класса, а каждое правило заскоуплено под чужую панель (#tab-tasks
              .chip и т.д.). Четвёртая копия закрепила бы это навсегда.
           ⚠️ Скоупа здесь нет намеренно, и это безопасно: class="chip" во всём проекте встречается только в
              porucheniya.php, zayavki.php, planner.js и chat.js — все четыре внутри одной оболочки. Вне shell
              (настройки, помощь, партнёрский кабинет) класса нет. Похожее имя .chips — это КОНТЕЙНЕР, другой
              селектор, его это правило не трогает.
           ⚠️ Меняя вид, помните, что меняете его СРАЗУ ВЕЗДЕ. Это и есть цель переезда: раньше правка чипов в
              поручениях молча расходилась с остальными тремя разделами. */
        .chip {
            border: 1px solid var(--border, #e5e7eb); background: var(--card, #fff); color: var(--text, #111827);
            border-radius: var(--btn-radius, 10px); padding: 6px 12px; font-size: 13px;
            cursor: pointer; font-family: inherit; white-space: nowrap;
        }
        .chip:hover { border-color: var(--primary, #4f46e5); }
        .chip.is-active { background: var(--primary, #4f46e5); color: #fff; border-color: var(--primary, #4f46e5); }

        /* Раздел = активная панель-карточка; внутри — заголовок + описание-обоснование. */
        .user-settings__panel.is-active {
            display: block;
            background: var(--card, #fff);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        }
        .section-head { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--text, #111827); }
        .section-desc { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

        /* Вкладка «Структура компании» — ПЛОСКИЙ список карточек отделов: карточка НЕ сдвигается вправо при вложенности,
           все карточки одной ширины от одного левого края на любом уровне. Вложенность — ТОЛЬКО отступом первой ячейки
           (.org-dc--name, --depth × 16px) + короткая линия слева от названия; это и даёт совпадение колонок по всей
           структуре. Внутри карточки ДВЕ независимые таблицы: (а) .org-dept-row — строка отдела (5 колонок; Переименовать —
           иконкой ✍️ у названия); (б) .org-emp-table — сотрудники (2 СВОИ колонки .org-ec-*, с таблицей отдела НЕ
           выравниваются). ⚠️ Скоуп строго через .org-dept / .org-emp. «Без отдела» — плоский список .org-emp. */
        .org-root-title { font-weight: 700; font-size: 16px; }
        .org-btn-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
        .org-section-title { font-weight: 700; margin: 16px 0 6px; font-size: 15px; }
        .org-empty { color: var(--muted); font-size: 14px; }
        /* Карточка отдела: фон чуть темнее белой панели, БЕЗ рамки (блок читается фоном), скругление, отступ между
           карточками. Без left-margin → все карточки от одного левого края независимо от глубины. */
        .org-dept { background: var(--surface-1); border-radius: 8px; padding: 9px 10px; margin: 0 0 7px; }
        /* Таблица 1 (строка отдела) и Таблица 2 (сотрудники) — обе table-layout:fixed, ширины в px. Явная width = сумме
           colgroup → не тянутся/не сжимаются; одинаковы во всех отделах на всех уровнях (карточки не сдвигаются). */
        .org-dept-row, .org-emp-table { table-layout: fixed; border-collapse: collapse; }
        .org-dept-row { width: 842px; }   /* 250+210+100+200+82 (ширина колонки «Переименовать» отдана первым — селекты просторнее) */
        .org-emp-table { width: calc(var(--org-fio-w, 300px) + 175px); margin-top: 4px; }   /* col1 ФИО динамическая (JS) + селект 175px */
        .org-c-name { width: 250px; }
        .org-c-head { width: 210px; }
        .org-c-add  { width: 100px; }
        .org-c-move { width: 200px; }   /* «в:» + селект в одну строку */
        .org-c-del  { width: 82px; }
        .org-ec-name { width: var(--org-fio-w, 300px); }  /* динамическая: JS (orgSizeFioColumn) считает по самому длинному ФИО, единая для всех таблиц сотрудников */
        .org-ec-dept { width: 175px; }  /* селект отдела — виден текст целиком («Моя компания», «Отдел продаж») */
        .org-dc { padding: 3px 5px; vertical-align: middle; }
        .org-emp-table .org-dc { border-top: 1px dashed var(--border, #e6e9f0); }
        /* Отступ по глубине — в первой ячейке ОБЕИХ таблиц: base + глубина×16px. --depth приходит из разметки (данные). */
        .org-dc--name { padding-left: calc(5px + var(--depth, 0) * 16px); }
        /* Название отдела: жирное + короткая вертикальная линия слева от названия (индикатор вложенности). */
        .org-dept__name { font-weight: 700; font-size: 14px; border-left: 2px solid var(--border-strong, #b8bfcc); padding-left: 8px; }
        /* Название + иконка ✍️ — в ОДНУ строку (не переносить). Только строка отдела (.org-dept-row); таблицу сотрудников
           (.org-ec-*) не трогаем, у неё свой nowrap на ФИО. */
        .org-dept-row .org-dc--name { white-space: nowrap; }
        /* ✍️ «Переименовать» — отдельная кликабельная иконка после названия (приём как у 👤): размер как у текста,
           приглушённая (opacity — у эмодзи цвет не меняется), при наведении — обычная; курсор-указатель. */
        .org-dept__edit { margin-left: 6px; cursor: pointer; font-size: inherit; opacity: 0.55; }
        .org-dept__edit:hover { opacity: 1; }
        .org-dept__desc { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
        .org-emp-empty { color: var(--muted); font-size: 13px; margin: 2px 0 0; padding: 3px 5px; }
        /* Сотрудник: 👤 (без подчёркивания) + ФИО жирным подчёркнутым. Иконка вне .org-emp__name — иначе
           text-decoration имени прошло бы и на неё. .org-emp__* — в таблице отдела и в списке «Без отдела». */
        .org-emp__who { display: inline-flex; align-items: baseline; }
        .org-emp__icon { margin-right: 6px; }
        .org-emp__who .org-emp__name { font-weight: 700; text-decoration: underline; }
        /* ФИО в таблице отдела — в ОДНУ строку, обычного размера (наследуется), жирное+подчёркнутое. Ширина колонки
           подгоняется под имя (JS orgSizeFioColumn), поэтому ellipsis виден ТОЛЬКО при упоре в потолок (тогда title —
           полное имя). max-width:100% + min-width:0 нужны, чтобы имя обрезалось внутри ячейки, а не налезало на селект. */
        .org-emp-table .org-emp__who { max-width: 100%; }
        .org-emp-table .org-emp__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .org-emp__badge { font-size: 11px; color: var(--primary-ink, #6d28d9); background: var(--purple-bg, #f5f3ff); border-radius: 20px; padding: 2px 8px; }
        .org-emp__inactive { color: var(--muted, #9ca3af); }
        /* «Без отдела» — плоский список: 👤 ФИО + select в строку (в карточки-таблицы не входит). */
        .org-emp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; font-size: 14px; border-top: 1px dashed var(--border, #f0f2f7); }
        .org-emp:first-child { border-top: 0; }
        /* Селекты «Без отдела» — по содержимому. .org-emp select (0,1,1) перебивает .user-settings select порядком (ниже). */
        .org-emp select { width: auto; max-width: 260px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; }
        /* Селекты в таблицах карточки — во всю ширину колонки (текст селекта виден целиком). */
        .org-dept-row select, .org-emp-table select { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit; }
        /* «в:» + селект — в ОДНОЙ ячейке, в ОДНУ строку: подпись слева, селект занимает остаток.
           .org-move select перебивает общий width:100% выше (специфичность 0,2,1 > 0,1,1). */
        .org-move { display: flex; align-items: center; gap: 4px; }
        .org-movelabel { color: var(--muted); font-size: 11px; white-space: nowrap; }
        .org-dept-row .org-move select { flex: 1; min-width: 0; width: auto; }
        /* Кнопки строки отдела — компактные, во всю ширину ячейки, текст в одну строку (перебивают глобальный .btn
           ТОЛЬКО внутри .org-dept-row). «Удалить» — красный текст, без заливки. */
        .org-dept-row .btn { width: 100%; padding: 5px 6px; font-size: 12px; border-radius: var(--btn-radius); white-space: nowrap; }
        .org-dept-row .btn--danger { background: transparent; color: var(--danger-ink); border: 1px solid var(--border); }
        .org-dept-row .btn--danger:hover { background: var(--danger-bg, #fdecee); filter: none; }

        /* Под-карточки внутри раздела (гейт / шаги / 2FA / пароль / удаление). */
        .subcard, .user-settings__panel .onb-step {
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 14px 16px;
            background: var(--surface-subtle, #fbfcfe);
            margin-top: 14px;
        }
        .subcard__title, .user-settings__panel .onb-step h3 {
            margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text, #111827);
        }

        .user-settings__status {
            display: none;
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            font-size: 13px;
        }

        .user-settings__status.is-ok {
            display: block;
            background: var(--success-bg, #ecfdf5);
            color: var(--success-ink, #047857);
        }

        .user-settings__status.is-error {
            display: block;
            background: var(--danger-bg, #fef2f2);
            color: var(--danger-ink, #b91c1c);
        }

        @media (max-width: 760px) {
            .user-settings__grid {
                grid-template-columns: 1fr;
            }
        }

        .auth-screen {
            position: fixed;
            inset: 0;
            z-index: 50;
            background: linear-gradient(135deg, #111827, #312e81);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }

        .auth-screen.is-hidden {
            display: none;
        }

        .auth-card {
            width: 100%;
            max-width: 420px;
            background: var(--card, #ffffff);
            border-radius: 22px;
            padding: 24px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
        }

        .auth-card h2 {
            margin: 0 0 8px;
            font-size: 24px;
        }

        .auth-card p {
            margin: 0 0 18px;
            color: var(--muted);
            line-height: 1.5;
        }

        .auth-field {
            margin-bottom: 12px;
        }

        .auth-field label {
            display: block;
            font-size: 13px;
            color: var(--text-secondary, #374151);
            margin-bottom: 6px;
        }

        .auth-field input {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 13px 14px;
            font-size: 15px;
            outline: none;
        }

        .auth-field input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }

        .auth-button {
            width: 100%;
            height: 46px;
            border: 0;
            border-radius: var(--btn-radius);
            background: var(--primary);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        .auth-button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .auth-error {
            display: none;
            margin-top: 12px;
            padding: 10px 12px;
            background: var(--danger-bg, #fef2f2);
            color: var(--danger-ink);
            border: 1px solid var(--danger-border, #fecaca);
            border-radius: 12px;
            font-size: 14px;
        }

        .auth-error.is-visible {
            display: block;
        }

        .auth-notice {
            margin-top: 12px;
            padding: 10px 12px;
            background: var(--success-bg, #f0fdf4);
            color: var(--success-ink, #166534);
            border: 1px solid var(--success-border, #bbf7d0);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
        }

        .onboarding-screen {
            /* В ПОТОКЕ внутри .page (под шапкой): заполняет область ниже шапки и центрирует карту.
               Раньше был fixed-оверлей inset:0 → накрывал шапку.
               order:2 — ПОСЛЕ шапки (.app-header order:1). Без order карта получала default 0 → вставала
               ПЕРЕД шапкой, а flex:1 раздувал её и толкал шапку вниз. */
            order: 2;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        /* При онбординге прячем чат-блоки (ввод/статус/результат) — остаётся шапка + карта выбора. */
        .page.is-onboarding .query-card,
        .page.is-onboarding .status,
        .page.is-onboarding .result { display: none; }
        /* ⚠️ ПРАВИЛА .page.is-service УДАЛЕНЫ ВМЕСТЕ С СЕРВИС-ВИДОМ. Они гасили строку ввода и статус чата,
           пока поверх ленты показывались настройки; настройки стали своим разделом оболочки, и композер
           прячет обычный механизм вкладок — снятие .is-active с #tab-chat. Класс больше никто не ставит. */
        .onboarding-card {
            max-width: 560px;
            width: 100%;
            background: var(--card, #fff);
            border-radius: 18px;
            padding: 28px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
        }
        .onboarding-card h2 { margin: 0 0 6px; font-size: 20px; }
        .onboarding-sub { margin: 0 0 18px; color: var(--muted, #57606a); font-size: 14px; }
        .onboarding-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        @media (max-width: 520px) { .onboarding-options { grid-template-columns: 1fr; } }
        .onboarding-option {
            text-align: left;
            border: 1px solid var(--border, #d0d7de);
            border-radius: 14px;
            padding: 16px;
            background: var(--card, #fff);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .onboarding-option:hover { border-color: var(--primary, #1f6feb); box-shadow: 0 4px 14px rgba(31, 111, 235, .12); }
        .onboarding-option__title { font-weight: 700; font-size: 15px; }
        .onboarding-option__desc { color: var(--muted, #57606a); font-size: 13px; }
        .onboarding-notice { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: var(--info-bg, #eff6ff); color: var(--info-ink, #1f3a8a); font-size: 14px; }

        .page.is-locked {
            display: none;
        }

        .history-total {
            background: var(--surface-muted, #f9fafb);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 6px 9px;
            font-size: 12px;
            color: var(--text-secondary, #374151);
        }

        @media (max-width: 720px) {
            .page {
                padding: 12px 10px 0;
                gap: 10px;
            }

            .query-form {
                flex-direction: row;   /* поле + иконки одной строкой и на мобайле */
            }

            .query-card {
                padding: 12px;
                margin-bottom: 10px;
                border-radius: 14px;
            }

            .query-button {
                height: 48px;
                width: 100%;
            }

            .examples {
                max-height: 84px;
                overflow-y: auto;
            }

            .hero {
                padding: 22px;
            }

            .hero h1 {
                font-size: 24px;
            }
        }
        .hero-billing {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 10px 12px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

        .hero-billing__main {
            display: flex;
            align-items: baseline;
            gap: 6px;
            white-space: nowrap;
        }

        .hero-billing__label {
            font-size: 13px;
            color: var(--muted);
        }

        .hero-billing__balance {
            font-size: inherit;
            line-height: 1;
            font-weight: 800;
            color: var(--text, #111827);
        }

        .hero-billing__actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .billing-action {
            border: 1px solid var(--border);
            background: var(--card, #ffffff);
            color: var(--text, #111827);
            border-radius: var(--btn-radius);
            padding: 7px 9px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            white-space: nowrap;
        }

        .billing-action__icon {
            font-size: 15px;
            line-height: 1;
        }

        .billing-action__text {
            font-size: 12px;
            line-height: 1;
            color: var(--text-secondary, #374151);
            white-space: nowrap;
        }

        .billing-action:hover {
            border-color: var(--info-border, #2563eb);
        }

        @media (max-width: 720px) {
            .hero-billing {
                justify-content: flex-start;
            }

            .hero-billing__actions {
                width: 100%;
                justify-content: space-between;
            }

            .billing-action {
                flex: 1;
                justify-content: center;
            }
        }

    
        .hero-billing__balance-line {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            white-space: nowrap;
            font-size: 18px;
            line-height: 1.2;
            font-weight: 400;
            color: var(--muted, #6b7280);
        }

        .hero-billing__balance-line #billingBalance {
            font-weight: 800;
            color: var(--text, #111827);
            font-size: 20px;
        }

    
        .label-note {
            color: var(--muted, #64748b);
            font-weight: 400;
            font-size: 12px;
        }
        .req-star { color: var(--danger-strong, #d1242f); font-weight: 700; } /* звёздочка обязательного поля */
        /* Подпись с флажком — ОДНОЙ СТРОКОЙ: квадрат перед надписью, кликается весь label.
           ⚠️ СЕЛЕКТОР ПО СОДЕРЖИМОМУ, А НЕ ТОЛЬКО ПО КЛАССУ, И ЭТО НЕ ИЗЛИШЕСТВО. Класс .checkbox-inline
           проставлен у пяти флажков настроек из шести; шестой («Пароль в приложении включён», MAX) его не
           получил — и встал галочкой над подписью, потому что .user-settings label — это display: block.
           Полагаться на то, что следующий автор разметки вспомнит про класс, значит ждать седьмого такого
           же. :has() описывает МАРШРУТ — «подпись, внутри которой флажок», — и работает независимо от того,
           вспомнили класс или нет. Класс оставлен: он читается в разметке и не зависит от поддержки :has(). */
        .user-settings label:has(> input[type="checkbox"]),
        .user-settings label:has(> input[type="radio"]),
        .checkbox-inline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-weight: 400;
        }
        .checkbox-inline input[type="checkbox"] { margin: 0; cursor: pointer; }
        /* Информационная строка настроек (read-only, без рамки/инпута): «Лейбл: значение». */
        .settings-info-row {
            margin-bottom: 12px;
            font-size: 14px;
            line-height: 1.4;
        }
        .settings-info-row__label { color: var(--muted, #64748b); }
        .settings-info-row__value { color: var(--text, #111827); font-weight: 600; }

        /* ⚠️ order ЗДЕСЬ НЕ ОБЪЯВЛЯТЬ — ОН ПЕРЕЕХАЛ НИЖЕ, К .page > .app-header. Шапка рисуется в трёх
           раскладках: внутри .page (flex-колонка, там порядок и нужен — онбординг идёт следом, order:2),
           прямым ребёнком body в shell.php и прямым ребёнком body в help/*.php. Пока body был блоком,
           order у первых двух молчал; как только body стал flex-колонкой (коммит 69042d5), он ожил СРАЗУ
           НА ВСЕХ ВОСЬМИ ВКЛАДКАХ и увёл шапку в конец колонки: замер на 386×736 — шапка 482..524 под
           контентом 41..482, а sticky поднимал её поверх текста при прокрутке. Дважды это уже лечили на
           месте (shell.php, чат и диалог сообщений) — оба сброса сняты вместе с этой строкой. */
        .app-header {
            flex: 0 0 auto;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 6px 8px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
            position: relative;
            z-index: 30;
        }
        /* ПОРЯДОК — ТОЛЬКО ТАМ, ГДЕ ОН ЧТО-ТО ЗНАЧИТ: внутри .page (flex-колонка чата). Здесь шапка обязана
           стоять первой, а онбординг — следом (.onboarding-screen{order:2}), иначе его flex:1 раздувал карту
           и выталкивал шапку вниз. В остальных раскладках (прямой ребёнок body в shell.php и help/*.php)
           порядок задаёт сам DOM, и объявлять его значит ломать эти две страницы ради одной. */
        .page > .app-header { order: 1; }

        .app-brand {
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 800;
            color: var(--text, #111827);
        }

        .app-brand__mark {
            width: 30px;
            height: 30px;
            border-radius: 7px;      /* лого Вегонис (app-icon) — скруглённый квадрат, не круг */
            object-fit: cover;
            display: block;
            flex: 0 0 auto;
        }

        .app-brand__title {
            font-size: 15px;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ФИО аккаунта — правый угол шапки (space-between прижимает вправо); длинное имя/почта усекается многоточием */
        .app-fio {
            min-width: 0;
            max-width: 60%;
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-shell {
            position: relative;
            flex: 0 0 auto;
        }

        .profile-button {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: var(--card, #ffffff);
            color: var(--text, #111827);
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
        }

        .profile-button:hover {
            border-color: var(--primary);
            color: var(--primary-ink, var(--primary));
        }

        .profile-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 44px;
            width: min(320px, calc(100vw - 24px));
            padding: 12px;
            background: var(--card, #ffffff);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
            z-index: 60;
        }

        .profile-menu.is-open {
            display: block;
        }

        .profile-menu__user {
            padding: 2px 2px 10px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 10px;
        }

        .profile-menu__name {
            font-size: 14px;
            font-weight: 800;
            color: var(--text, #111827);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .profile-menu__hint,
        .profile-menu__label {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .profile-menu__billing {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            padding: 10px;
            border-radius: 12px;
            background: var(--surface-muted, #f8fafc);
            margin-bottom: 10px;
        }

        .profile-menu__balance {
            font-weight: 800;
            color: var(--text, #111827);
        }

        .profile-menu__actions {
            display: grid;
            gap: 8px;
        }

        .profile-menu .billing-action {
            width: 100%;
            justify-content: flex-start;
            border-radius: 12px;
            padding: 10px 11px;
        }

        .profile-menu .billing-action--danger {
            color: var(--danger-ink);
        }

        .profile-menu .billing-action--danger:hover {
            border-color: var(--danger-border, #fecaca);
            background: var(--danger-bg, #fef2f2);
        }

        .profile-menu .billing-action--danger .billing-action__text {
            color: var(--danger-ink);
        }

        .profile-menu__status {
            display: none;
            margin-top: 10px;
            padding: 8px 10px;
            border-radius: 10px;
            background: var(--danger-bg, #fef2f2);
            color: var(--danger-ink);
            font-size: 12px;
            line-height: 1.35;
        }

        .profile-menu__status.is-visible {
            display: block;
        }

        /* ⚠️ ОДНО ОПИСАНИЕ НА ЭКРАН ЧАТА, И СВЕДЕНО ОНО СЮДА. Раньше их было два: первое наверху файла
           (отступы 18px, зазор 14px), второе здесь — компактная переделка композера. Второе перекрывало
           первое по padding и gap, и те две строки не работали никогда, но читались как действующие.
           ⚠️ СВЕДЕНО ВНИЗ, А НЕ ВВЕРХ, И ЭТО НЕ ВКУСОВЩИНА. Между прежними местами лежит медиазапрос
           (@media ниже), который тоже задаёт padding и gap: подними мы значения наверх, на узком экране
           выиграл бы медиазапрос, и вид поехал бы. Перенос ВНИЗ ни одного правила между ними не задевает —
           сверено по свойствам. */
        /* ⚠️ ЧАТ И КНОПКА ВОЗВРАТА РАСТЯНУТЫ НА ВСЮ РАБОЧУЮ ОБЛАСТЬ ОДНОЙ ПЕРЕМЕННОЙ. Ограничение в
           1180px оставляло на широком десктопе большие пустые поля и сжимало одновременно список и ленту.
           `none` штатно отключает max-width и здесь, и в shell.php — внешние края остаются выровнены. */
        :root { --chat-max: none; }

        /* ⚠️ КОЛОНКА ЗАЯВОК — ТОЖЕ ОДНО ЧИСЛО НА ДВА МЕСТА, и по той же причине, что --chat-max. Её читают
           сам реестр (#tab-requests .wrap, zay-panel.css) и общая кнопка возврата, которая живёт в оболочке
           ВНЕ панели. Объявить её у .wrap было нельзя: до кнопки переменная оттуда не доезжает — каскад
           идёт по дереву, а кнопка соседка панели, а не её потомок.
           ⚠️ ФОЛБЭК У --wrap-max ОБЯЗАТЕЛЕН И НЕ ЯВЛЯЕТСЯ ДУБЛЁМ: сама --wrap-max объявлена на .tab-panel
              (wrap.css), и в контексте кнопки её просто нет. Внутри панели разрешится 960 оттуда, снаружи —
              960 из фолбэка; оба пути дают одно число, поэтому колонки не разъезжаются.
           Расшифровка: не уже общей колонки, дальше 90% экрана, но не шире 1600 (довод про 27" — в zay-panel.css). */
        :root { --zay-wrap-max: min(max(var(--wrap-max, 960px), 90%), 1600px); }

        .page {
            max-width: var(--chat-max);
            margin: 0 auto;
            padding: 8px 10px 0;
            height: 100dvh;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .has-demo-banner .page {
            height: calc(100dvh - 28px);
        }

        /* ⚠️ НИЗ ДЕРЖИТ LAYOUT, А НЕ JS. column-reverse на СКРОЛЛЕРЕ переворачивает систему координат:
           scrollTop = 0 — это НИЗ ленты, и он остаётся низом сам, сколько бы контент снизу ни дорастал
           (дорисовка отчёта, картинки, поздний async-рост). Проверено: рост последнего бабла на 500px не
           сдвигает низ ни на пиксель — тогда как прижатие через justify-content/margin-top:auto уезжало
           ровно на 500px, потому что scrollTop — обычная координата и сама не движется.
           ⚠️ ПОРЯДОК СООБЩЕНИЙ НЕ ПЕРЕВОРАЧИВАЕТСЯ: у .result ровно ОДИН ребёнок (#chatView), а reverse
           меняет порядок flex-элементов — переворачивать нечего. Ставить column-reverse на саму ленту
           (.chat-feed) НЕЛЬЗЯ: бабблы встанут вверх ногами, а координаты скроллера останутся прежними,
           потому что скроллер здесь — .result, и перевёрнутые координаты даёт только он.
           ⚠️ ПРОКРУТКА ВВЕРХ ДАЁТ ОТРИЦАТЕЛЬНЫЙ scrollTop (Chrome; в WebKit знак может отличаться).
           Поэтому весь JS считает близость к краям через Math.abs(scrollTop) — см. isChatNearBottom. */
        .result {
            order: 3;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 2px 2px 8px;
            scroll-behavior: smooth;
            display: flex;
            flex-direction: column-reverse;
        }

        .query-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px 14px 0 0;
            padding: 8px;
            margin: 0;
            box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
            order: 4;
            flex: 0 0 auto;
            position: sticky;
            bottom: 0;
            z-index: 10;
        }

        .query-form {
            display: flex;             /* поле + иконки в одном ряду; колокольчик не выталкивает «Отправить» */
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
        }

        .query-form .composer-icon,
        .query-form .query-button {
            flex: 0 0 auto;            /* фикс-иконки не сжимаются и не переносятся */
        }

        .query-form .query-input {
            flex: 1 1 auto;            /* поле занимает остаток ширины */
        }

        .query-input {
            flex: 1;
            width: 100%;
            min-width: 0;
            height: 42px;
            border: 1px solid #2d2c76;
            border-radius: 12px;
            padding: 0 12px;
            font-size: 15px;
            outline: none;
        }

        .composer-icon,
        .query-button {
            width: 42px;
            min-width: 42px;
            height: 42px;
            padding: 0;
            border-radius: var(--btn-radius);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
        }

        /* ⚠️ ФОРМА — ИЗ ГРУППЫ ВЫШЕ, ЗДЕСЬ ТОЛЬКО ЦВЕТ. Прежде у кнопки был свой полный блок в начале файла
           (радиус 14, паддинг 0 22px, кегль 15, min-width 150px) — всё это группа перекрывала, и четыре
           строки не работали никогда. Живое — цвет, фон и вес — перенесено сюда, к своей группе; группу с
           .composer-icon не трогаем, иначе кнопки-иконки покрасились бы в основной цвет. */
        .query-button {
            border: 0;
            background: var(--primary);
            color: #fff;
            font-weight: 700;
        }

        .composer-icon {
            border: 1px solid var(--border);
            background: var(--card, #ffffff);
            color: var(--text-secondary, #374151);
        }

        .composer-icon:hover {
            border-color: var(--primary);
            color: var(--primary-ink, var(--primary));
        }

        .composer-icon:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        /* Колокольчик-тумблер Web Push включён (VegonisPush .is-on) — активный вид, чтобы статус подписки был виден. */
        .composer-icon.is-on {
            border-color: var(--primary);
            background: var(--primary);
            color: #ffffff;
        }

        /* ⚠️ «margin-top: 8px» ИЗ ПРЕЖНЕГО ВЕРХНЕГО ОПИСАНИЯ СЮДА НЕ ПЕРЕНЕСЁН, И ЭТО НЕ ПОТЕРЯ. Он был мёртв
           и там: ниже в этом же блоке стоит «margin: 0» — шорткат гасит длинную форму независимо от того,
           в каком блоке она объявлена. Замер до/после это подтвердил: margin-top у панели был и остался 0. */
        .examples {
            display: none;
            position: absolute;
            left: 8px;
            bottom: calc(100% + 8px);
            width: min(520px, calc(100vw - 20px));
            max-height: min(280px, 42dvh);
            overflow: auto;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0;
            padding: 10px;
            background: var(--card, #ffffff);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
            z-index: 40;
        }

        .examples.is-open {
            display: flex;
        }

        .status.is-visible {
            display: none;
        }

        @media (max-width: 720px) {
            .page {
                padding: 6px 8px 0;
                gap: 6px;
            }

            .demo-db-banner {
                padding: 5px 10px;
                font-size: 12px;
            }

            .app-header {
                min-height: 42px;
                max-height: 44px;
                padding: 4px 6px;
                border-radius: 12px;
            }

            .app-brand__mark {
                width: 30px;
                height: 30px;
            }

            .app-brand__title {
                max-width: 150px;
            }

            .profile-button {
                width: 34px;
                height: 34px;
            }

            .profile-menu {
                position: fixed;
                left: 8px;
                right: 8px;
                top: auto;
                bottom: 68px;
                width: auto;
                max-height: 70dvh;
                overflow: auto;
                border-radius: 16px;
            }

            .query-card {
                padding: 7px;
            }

            .query-form {
                gap: 5px;              /* flex-ряд сохраняется и на мобайле */
            }

            .query-input,
            .composer-icon,
            .query-button {
                height: 40px;
                min-width: 40px;
                border-radius: 11px;
            }

            .query-button {
                width: 40px;
            }

            .examples {
                left: 7px;
                right: 7px;
                width: auto;
                max-height: 36dvh;
            }
        }

        /* Прогресс-бар обучения (клиентский кабинет, шаг 4) */
        .onb-bar {
            height: 10px;
            background: var(--surface-2);
            border-radius: 999px;
            overflow: hidden;
            margin: 8px 0 6px;
        }
        .onb-bar__fill {
            height: 100%;
            background: var(--primary, #4f46e5);
            border-radius: 999px;
            transition: width .4s ease;
        }
        .onb-bar--done .onb-bar__fill { background: var(--success-button, #1a7f37); }
        .onb-bar.is-indeterminate .onb-bar__fill {
            width: 40%;
            animation: onbIndeterminate 1.2s ease-in-out infinite;
        }
        @keyframes onbIndeterminate {
            0%   { margin-left: -40%; }
            100% { margin-left: 100%; }
        }
        .onb-bar__label { color: var(--muted, #57606a); }

        /* ===== Сотрудники (настройки): строки-карточки — аватар-инициалы, статус-бейдж, выровненные кнопки. Косметика. ===== */
        .emp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
        .emp-count { font-size: 13px; color: var(--muted); }
        .emp-list { display: flex; flex-direction: column; gap: 8px; }
        .emp-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
        .emp-ava { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surface-2, #eef0f4); color: var(--muted); }
        .emp-ava--ok { background: var(--success-bg, #dcfce7); color: var(--success-ink, #047857); }
        .emp-ava--off { background: var(--surface-2, #eef0f4); color: var(--muted, #6b7280); }
        .emp-ava--wait { background: var(--warning-bg, #fef3c7); color: var(--warning-ink, #92400e); }
        .emp-main { flex: 1 1 auto; min-width: 0; }
        .emp-name { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .emp-name--muted { color: var(--muted); }
        .emp-tag { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 6px; }
        .emp-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
        .emp-badge { flex: 0 0 auto; font-size: 11px; border-radius: 999px; padding: 3px 10px; font-weight: 600; white-space: nowrap; }
        .emp-badge--ok { background: var(--success-bg, #dcfce7); color: var(--success-ink, #047857); }
        .emp-badge--off { background: var(--surface-2, #f3f4f6); color: var(--muted, #6b7280); border: 1px solid var(--border); }
        .emp-badge--wait { background: var(--warning-bg, #fef3c7); color: var(--warning-ink, #92400e); }
        /* «Главный» — не статус, а ПРИВИЛЕГИЯ: стоит в строке рядом со статусным бейджем, поэтому цвет свой.
           Три модификатора выше заняты статусами (active/disabled/invited); переиспользовать любой из них значило бы
           показать в одной строке два одинаковых бейджа или чужой смысл. Индиго — акцент интерфейса (--primary). */
        .emp-badge--mgr { background: var(--primary-soft, #eef2ff); color: var(--primary-ink, var(--primary)); border: 1px solid var(--primary-border, #d9ddfb); }
        .emp-actions { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
        .emp-btn { font-size: 13px; padding: 6px 12px; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--card, #fff); color: var(--text); cursor: pointer; font-family: inherit; white-space: nowrap; }
        .emp-btn:hover { background: var(--surface-subtle, #f7f8fa); }
        .emp-btn:disabled { opacity: .55; cursor: not-allowed; }
        .emp-btn--danger { color: var(--danger-ink); border-color: var(--danger-border, #f3c6c6); }
        .emp-btn--danger:hover { background: var(--danger-bg, #fef2f2); }
        .emp-btn--accent { color: #fff; background: var(--primary); border-color: var(--primary); }
        .emp-btn--accent:hover { background: var(--primary-dark); }
        .emp-email { width: 100%; max-width: 280px; box-sizing: border-box; height: 30px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; margin-top: 3px; }
        /* Массовое добавление сотрудников без 1С: строки (номер + имя + email + ошибка) + «Ещё»/«Пригласить всех». */
        .emp-add-mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
        .emp-add-num { flex: 0 0 auto; width: 20px; text-align: right; color: var(--muted); font-size: 13px; }
        .emp-add-mrow .emp-m-name, .emp-add-mrow .emp-m-email { flex: 1 1 140px; min-width: 120px; box-sizing: border-box; height: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
        .emp-m-err { flex: 1 1 100%; font-size: 12px; color: var(--danger-ink); margin-left: 28px; }
        .emp-m-err:empty { display: none; }
        .emp-add-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
        @media (max-width: 560px) {
            .emp-card { flex-wrap: wrap; }
            .emp-actions { width: 100%; justify-content: flex-start; margin-top: 2px; }
        }