/* ============================================================================
   Стили Студии (чат/картинки/видео/озвучка) — вынесены из studio.html.
   Раньше 108КБ CSS ехали инлайном в некэшируемом HTML при каждом визите;
   теперь файл кэшируется через ?v={{ static_v }} как остальная статика.
   Порядок подключения важен: ПОСЛЕ style.css (перекрывает токены),
   ДО settings_modal.css — как стоял инлайн.
   ========================================================================== */
    /* Срок хранения файлов: баннер сверху вкладок + бейдж «удалится через N дн.» */
    .ret-banner{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 13px;font-size:12.5px;
        line-height:1.4;color:var(--text-muted);border:1px solid var(--accent-line);border-radius:var(--radius-md);
        background:var(--hover-veil)}
    .ret-banner b{color:var(--text);font-weight:600}
    /* Бейдж срока хранения — по DESIGN.md 7.5: высота 20px, поля 0 8px,
       скругление «пилюля» (--r-full), текст 11px/600, ЗАЛИВКА и белый текст на ней. Прежний вид
       («цветные буквы на мягкой подложке 10px») правило запрещает прямо: на 11-м
       кегле такая пара даёт 4.0–4.3:1 при норме 4.5:1 — пометка читалась хуже
       соседнего обычного текста. */
    .ret-badge{display:inline-flex;align-items:center;height:20px;margin-top:6px;padding:0 8px;
        border-radius:var(--r-full);font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
        background:var(--surface-3);color:var(--text-2)}
    .ret-badge--warn{background:var(--warn-fill);color:var(--on-accent)}
    .ret-badge--urgent{background:var(--danger-fill);color:var(--on-accent)}
    /* Прикрепление референс-фото (image-to-image / редактирование) */
    .ref-upload{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
    .ref-thumbs{display:flex;flex-wrap:wrap;gap:8px}
    .ref-thumb{position:relative;width:56px;height:56px;border-radius:var(--r-1);overflow:hidden;border:1px solid var(--accent-line)}
    .ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .ref-thumb button{position:absolute;top:2px;right:2px;width:17px;height:17px;border:0;border-radius:50%;
        background:var(--overlay);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
    /* Пальцем в 17 пикселей не попасть. Увеличиваем саму зону нажатия, не
       раздувая при этом кружок: он остаётся прежнего размера. */
    @media (hover: none){
        .ref-thumb button::after{content:'';position:absolute;top:-9px;right:-9px;bottom:-9px;left:-9px}
    }
    .ref-add-btn{border:1px dashed var(--accent-line);background:transparent;color:var(--text-muted);
        border-radius:var(--r-1);padding:9px 13px;font-size:12px;cursor:pointer;transition:all .15s}
    .ref-add-btn:hover{border-color:var(--accent-line);color:var(--text)}
    /* Адаптивная сетка сравнения: переносится в несколько рядов, на узких экранах — в колонку */
    /* Бейдж «NEW» на пресет-чипе новой модели */
    .chip-badge{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:var(--r-1);font-size:9px;font-weight:700;
        letter-spacing:.04em;vertical-align:middle;background:var(--accent-fill);color:#fff}
    /* Расширенные параметры видео (Seedance): аудио / водяной знак / seed */
    .vid-adv{display:grid;gap:10px;margin-top:10px;padding:12px;border:1px solid var(--accent-line);
        border-radius:var(--radius-md);background:var(--hover-veil)}
    .vid-adv__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .vid-adv__row label{font-size:12.5px;color:var(--text-muted);cursor:pointer}
    .vid-switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto;cursor:pointer}
    .vid-switch input{opacity:0;width:0;height:0;position:absolute}
    .vid-switch span{position:absolute;inset:0;border-radius:var(--r-4);background:var(--line-strong);transition:.18s;cursor:pointer}
    .vid-switch span::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;
        background:#fff;transition:.18s}
    .vid-switch input:checked+span{background:var(--accent-fill)}
    .vid-switch input:checked+span::before{transform:translateX(18px)}
    .vid-adv input[type=number]{width:120px;background:var(--surface-2,var(--hover-veil));border:1px solid var(--accent-line);
        border-radius:var(--r-1);padding:6px 9px;color:var(--text);font-size:12.5px}

    /* ════════════════ Единое окно чата MegaAPI Chat ════════════════ */
    #legacy{display:none!important}
    /* атрибут hidden ОБЯЗАН побеждать display:flex/grid у компонентов ниже */
    #csRoot [hidden], #studioMain [hidden]{display:none!important}
    .cs-wrap{margin-top:6px}
    .cs{display:grid;grid-template-columns:266px 1fr;height:calc(100dvh - 230px);min-height:520px;
        border:1px solid var(--panel-border);border-radius:var(--radius-lg);overflow:hidden;
        background:var(--panel);box-shadow:var(--shadow-md);position:relative;transition:grid-template-columns .2s ease}
    html.studio-embed .studio-header{display:none}
    html.studio-embed .studio-wrap{padding:0;min-height:0}
    html.studio-embed .cs-wrap{margin-top:0}
    html.studio-embed .cs{height:100vh;height:100dvh;border-radius:0}
    /* В Telegram Mini App: высота строго по реальному вьюпорту (--tg-vh),
       иначе webview «сжимается» и сетка моделей съезжает. */
    html.is-tg-app,html.is-tg-app body{height:var(--tg-vh,100dvh);overflow:hidden}
    html.is-tg-app .cs{height:var(--tg-vh,100dvh)!important}

    /* Отступы под «чёлку» и под интерфейс Telegram Студия расставляет САМА —
       у своей шапки, композера и боковой панели. Общий отступ у страницы для
       полноэкранного приложения не годится: он сдвигает вниз всё окно целиком,
       вместе с боковой панелью, и лента перестаёт начинаться от верха. */
    html.is-tg-app body{padding:0}

    /* ── Полоса управления Telegram ─────────────────────────────────────────
       Сверху мессенджер рисует ПОВЕРХ страницы свои плавающие кнопки: слева
       «Закрыть», справа «свернуть» и «ещё», а над ними — часы и батарею.

       Отступ задаётся ОДНИМ числом и применяется к окну целиком, а не к каждой
       части по отдельности. Так было раньше — и получалось вразнобой: шапка
       чата отодвигалась, а боковая панель нет, поэтому «Новый чат» оказывался
       под кнопкой «Закрыть»; в самом же чате над лентой повисала пустая полоса
       высотой в полторы кнопки. Одно число — и всё выравнивается само. */
    html.is-tg-app{--tg-top:var(--tg-safe-top,0px)}
    html.tg-fullscreen{--tg-top:max(var(--tg-safe-top,0px), env(safe-area-inset-top,0px), 46px)}
    html.is-tg-app .cs{box-sizing:border-box;padding-top:var(--tg-top)}
    /* Отступы шапки чата НЕ переопределяются ни здесь, ни для клавиатуры: формула
       одна и совпадает с шапкой боковой панели (см. .cs-head ниже). Раньше за этот
       отступ спорили три правила, и высота шапки гуляла: 62px в вебе, 58px на
       планшете, 48px в Telegram, 44px при открытой клавиатуре — кнопка панели
       вместе с ней уезжала на 4–13px от кнопки сворачивания в панели.
       Правило html.is-tg-app .cs-side__top тоже снято: класса cs-side__top в
       разметке нет вовсе (первый ребёнок панели — .cs-side__brand). */
    /* Боковая панель живёт внутри окна, поэтому отступ достаётся ей сам. */
    html.studio-embed .cs-side{top:0;bottom:0;padding-top:var(--tg-top,0px);box-sizing:border-box}
    /* Композер не должен прятаться под нижним хромом и жестовой полосой. */
    html.studio-embed .cs-composer{
        padding-bottom:calc(14px + max(var(--tg-safe-bottom,0px), env(safe-area-inset-bottom,0px)))}
    html.is-tg-app .cs-profile{
        padding-bottom:calc(10px + max(var(--tg-safe-bottom,0px), env(safe-area-inset-bottom,0px)))}
    /* Выпадающий список моделей считаем от РЕАЛЬНОЙ высоты окна: при открытой
       клавиатуре 64vh — это больше, чем всё видимое место, и список уезжал за
       край, из-за чего модель было не выбрать. */
    /* ── Открытая клавиатура ──
       Места остаётся вдвое меньше. Приветственный блок с подсказками прячем, а
       поле ввода прижимаем к низу видимой области: раньше он оставался по
       центру, и кнопка выбора модели уезжала под клавиатуру. */
    html.kbd-open .cs-empty{display:none}
    /* При открытой клавиатуре поле прижимается к низу видимой области. Раньше это
       делал justify-content на всей колонке — вместе с шапкой; теперь центровку
       держат авто-марджины внутреннего блока, поэтому гасим верхний. */
    html.kbd-open .cs-main.is-empty .cs-thread{margin-top:0}
    /* Гасить верхний авто-марджин ленты мало: у композера в пустом чате остаётся
       `margin: 0 auto auto`, то есть авто СНИЗУ. Свободное место собиралось под
       ним, и композер прыгал к ВЕРХУ видимой области — между полем и клавиатурой
       оставалась пустая полоса. Пока клавиатура на экране, поле стоит внизу. */
    html.kbd-open .cs-main.is-empty .cs-composer{margin-bottom:0}
    html.kbd-open .cs-composer{padding-bottom:10px}
    /* ── Telegram Mini App / embed: ВСЕГДА одно-колоночный mobile-layout (сайдбар = drawer),
         независимо от ширины окна десктопного Telegram. Иначе на широком окне включалась
         десктопная сетка с боковой колонкой 268px и контент «съезжал»/казался сжатым. ── */
    html.studio-embed .cs,html.studio-embed .cs.cs-collapsed{grid-template-columns:1fr!important}
    html.studio-embed .cs-head{display:flex}
    html.studio-embed .cs-side{position:absolute;inset:0 auto 0 0;width:280px;max-width:86vw;z-index:60;
        transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-lg);opacity:1!important;pointer-events:auto!important}
    html.studio-embed .cs.side-open .cs-side{transform:none}
    html.studio-embed .cs.side-open::after{content:"";position:absolute;inset:0;background:var(--overlay);z-index:55}
    /* Поле ввода и пикер модели — во всю ширину окна мини-аппа */
    html.studio-embed .cs-main.is-empty .cs-composer{max-width:none}
    /* Выбор модели на телефоне — лист во всю высоту окна, а не полка над полем
       ввода. Раньше высота считалась от видимой области минус композер: стоило
       появиться клавиатуре, и на список оставалось меньше двухсот точек — одна
       строка. Полистать каталог из 260 моделей было нечем. */
    /* top:0, а не var(--tg-top): лист вкладывается в .cs-main, у которого верх УЖЕ
       отодвинут на --tg-top правилом html.is-tg-app .cs{padding-top:…}. Отступ
       учитывался дважды — замер давал 164px вместо 82px, и над листом висела
       пустая полоса в высоту хрома Telegram. */
    html.studio-embed .cs-modelpop{left:0;right:0;width:auto;border-radius:0;border-left:0;border-right:0;
        top:0;bottom:0;max-height:none;height:auto}
    /* В Telegram (любая ширина окна) строка модели тоже переносит мету на 2-ю строку. */
    html.studio-embed .cs-modelopt{flex-wrap:wrap;row-gap:5px}
    html.studio-embed .cs-modelopt__id{flex:1 1 60%}
    html.studio-embed .cs-modelopt__price{margin-left:auto}
    /* ── Полноэкранное приложение (как Qwen): студия = одно чистое окно на весь экран ── */
    .site-header{display:none}
    /* Подвал прятался только во встроенном режиме, поэтому на обычном сайте
       страница «ехала»: окно чата занимало ровно высоту экрана, а под ним
       оставался подвал — и всё это прокручивалось вместе. */
    .footer{display:none}
    html,body{height:100%;overflow:hidden}
    .studio-wrap{padding:0;min-height:0}
    .studio-wrap>.container{max-width:none;padding:0;margin:0}
    .studio-header{display:none}
    .cs-wrap{margin:0}
    .cs{height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}
    #authWall.studio-auth-wall{min-height:100vh;min-height:100dvh;justify-content:center;padding:24px}
    /* ── Сайдбар диалогов ── */
    .cs-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--panel-border);
        background:var(--surface-2)}
    .cs-convlist{flex:1;overflow-y:auto;padding:4px 9px 9px;min-height:0;display:flex;flex-direction:column;gap:3px}
    /* ── Основная область ── */
    /* padding:0 обязателен и не декоративен. Колонка чата — это <section>, а в
       style.css у типа `section` стоят отступы посадочной страницы
       (`clamp(58px,8vh,100px) 0`, на телефоне 50px). Замер живым браузером:
       колонка чата получала 72px сверху и снизу на десктопе и 50px на телефоне —
       поэтому кнопка панели стояла на 50px ниже шапки сайдбара, лента съезжала,
       а под композером зияла пустая полоса. Класс сильнее типа, так что одно
       правило закрывает утечку целиком. */
    .cs-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;padding:0}
    /* На десктопе шапка не нужна — навигация в сайдбаре. Видна только на узком экране / в Telegram. */
    /* Чистая шапка: без полосы-разделителя и фона — только плавающая кнопка-тоггл.
       Кнопка выровнена ТОЧНО по уровню и размеру контрола сворачивания в сайдбаре
       (#csCollapse: 32px, отступ сверху 13px) — при открытии панели тоггл не «прыгает». */
    /* Формула ОДНА для обеих шапок: `padding:0 12px 6px; min-height:44px` —
       ровно то, что стоит у .cs-side__brand. Тогда кнопка «панель» в чате и
       кнопка сворачивания в панели стоят на одном уровне при любой ширине и в
       любом клиенте (замерено браузером: расхождение центров 0px в Telegram и
       на телефоне, 1px в полосе 769–860px). Раньше здесь было 13px сверху,
       которые гасились только внутри Telegram. */
    .cs-head{display:none;align-items:center;gap:8px;padding:0 12px 6px;min-height:44px;background:transparent}

    .cs-head .cs-iconbtn:hover{background:var(--neon-soft);border-color:transparent;color:var(--neon)}
    .cs-profmenu__bal{padding:7px 11px 5px;font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
    .cs-profmenu__bal b{color:var(--balance);font-size:14px}
    .cs-iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-2);
        border:1px solid transparent;background:transparent;color:var(--text-2);font-size:17px;cursor:pointer;
        transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
    .cs-iconbtn:hover{background:var(--hover-veil);color:var(--text)}
    .cs-thread{flex:1;overflow-y:auto;padding:22px clamp(12px,5vw,64px);min-height:0;scroll-behavior:smooth}
    .cs-empty{max-width:560px;margin:auto;text-align:center;padding:40px 16px;color:var(--text-muted)}
    .cs-empty h2{font-size:24px;line-height:1.3;letter-spacing:-.015em;margin:14px 0 20px;color:var(--text)}
    .cs-empty p{font-size:13.5px;margin:0 0 18px}
    .cs-suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
    .cs-suggest button{padding:8px 13px;border-radius:var(--r-2);border:1px solid var(--panel-border);
        background:var(--panel);color:var(--text);font-size:12.5px;cursor:pointer;transition:all .15s}
    .cs-suggest button:hover{border-color:var(--neon);color:var(--neon)}
    /* ── Медиа в сообщениях ── */
    .cs-media{display:flex;flex-direction:column;gap:8px;max-width:520px}
    /* aspect-ratio держит место до загрузки картинки: без него лента
       прыгала на каждое подгруженное превью (CLS), особенно на lazy. */
    .cs-media img,.cs-media video{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;border-radius:var(--radius-md);display:block;cursor:zoom-in;background:var(--press-veil)}
    .cs-media audio{width:100%}
    .cs-media__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;max-width:680px}
    .cs-media__cell{display:flex;flex-direction:column;gap:5px}
    .cs-media__cell .cs-media__lbl{font-size:11px;color:var(--text-faint);text-align:center}
    .cs-media__meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-faint);flex-wrap:wrap}
    .cs-media__meta a{color:var(--neon);text-decoration:none}
    .cs-skel{aspect-ratio:1;display:grid;place-items:center;background:var(--accent-soft);border-radius:var(--radius-md)}
    /* ── Медиа-библиотека (полноэкранная вкладка над основной областью) ── */
    .cs-mediaview{position:absolute;inset:0;z-index:46;background:var(--bg-1);display:none;flex-direction:column}
    .cs-mediaview.is-on{display:flex}
    /* Мобайл / Telegram: «Медиа» = полноэкранный модал поверх ВСЕГО окна (а не inset:0
       внутри .cs-main, из-за чего на узком webview оно показывалось «наполовину»). */
    @media(max-width:860px){ .cs-mediaview{position:fixed;z-index:1100} }
    html.studio-embed .cs-mediaview{position:fixed;z-index:1100}
    /* «Медиа» на телефоне — окно поверх ВСЕГО, отступ окна ему не достаётся.
       Считаем от того же одного числа, что и всё приложение: через
       env(safe-area-inset-top) в полноэкранном Telegram выходит ноль, и шапка
       с кнопкой возврата уезжала под «Закрыть». */
    html.studio-embed .cs-mediaview{padding-top:var(--tg-top,0px);box-sizing:border-box}
    .cs-mediaview__head{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--panel-border)}
    /* Возврат — той же кнопкой, что в окне «Настройки». Подписи нет: на телефоне
       окно настроек её тоже прячет (settings_modal.css), а текстовых ссылок на
       другие поверхности в шапках продукта не бывает (DESIGN.md 15.2).
       Размер — пальцевый: цель нажатия 40px, на телефоне 44px (DESIGN.md 11.2). */
    .cs-mediaback{display:inline-flex;align-items:center;justify-content:center;
        width:40px;height:40px;padding:0;
        border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:transparent;
        color:var(--text-muted);cursor:pointer;flex:0 0 auto}
    @media(max-width:760px){ .cs-mediaback{width:44px;height:44px} }
    .cs-mediaback:hover{color:var(--text);border-color:var(--neon)}
    .cs-mediaback svg{width:16px;height:16px}
    .cs-mediaview__head h2{font-size:18px;line-height:1.4;margin:0;color:var(--text)}
    .cs-mediaview__hint{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
    .cs-mediaview__tabs{display:flex;gap:6px;padding:11px 16px 4px;flex-wrap:wrap}
    .cs-mediatab{padding:6px 14px;border-radius:var(--r-1);border:1px solid var(--panel-border);
        background:transparent;color:var(--text-muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .14s}
    .cs-mediatab:hover{border-color:var(--neon);color:var(--neon)}
    .cs-mediatab.is-active{border-color:var(--neon);color:var(--neon);background:var(--neon-soft)}
    .cs-mediagrid{flex:1;overflow-y:auto;padding:16px;display:grid;align-content:start;
        grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
    /* На 360px две колонки по 168px с полями 16×2 и зазором не помещались, и
       сетка схлопывалась в одну — карточка занимала весь экран. Двум колонкам
       здесь важнее точного минимума: галерея просматривается взглядом. */
    @media(max-width:400px){
        .cs-mediagrid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}
    }
    /* ── Массовое выделение/удаление в «Медиа» ──
       Кнопки «Выбрать» в шапке нет: режим открывается долгим нажатием на
       карточку. Системное меню iOS при удержании картинки перебивало жест —
       гасим его здесь, одного preventDefault на contextmenu в WKWebView мало. */
    .cs-mediacard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
    .cs-mediacard img,.cs-mediacard video{-webkit-user-drag:none;user-select:none}
    .cs-mediaselbar{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--panel-border)}
    .cs-mediaselbar__count{font-size:13px;font-weight:600;color:var(--text)}
    .cs-mediaselbar__sp{flex:1}
    .cs-mediaselbar__act{padding:7px 14px;border-radius:var(--r-1);border:1px solid var(--panel-border);
        background:transparent;color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .14s}
    .cs-mediaselbar__act:hover{border-color:var(--neon);color:var(--neon)}
    .cs-mediaselbar__act--del{border-color:var(--danger);color:var(--danger)}
    .cs-mediaselbar__act--del:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
    .cs-mediaselbar__act:disabled{opacity:.45;cursor:default;border-color:var(--panel-border);color:var(--text-faint);background:transparent}
    .cs-mediacard.is-sel{outline:2px solid var(--neon);outline-offset:-2px}
    .cs-mediagrid.is-selecting .cs-mediacard{cursor:pointer}
    .cs-mediagrid.is-selecting .cs-mediacard__media{cursor:pointer}
    .cs-mediacard__check{position:absolute;top:7px;left:7px;z-index:3;width:22px;height:22px;border-radius:50%;
        border:2px solid #fff;background:var(--overlay);display:grid;place-items:center;color:#fff;box-shadow:0 1px 4px var(--press-veil)}
    .cs-mediacard.is-sel .cs-mediacard__check{background:var(--neon);border-color:var(--neon)}
    .cs-mediacard__check svg{width:13px;height:13px;opacity:0}
    .cs-mediacard.is-sel .cs-mediacard__check svg{opacity:1}
    .cs-mediacard{border:1px solid var(--panel-border);border-radius:var(--radius-md);overflow:hidden;
        background:var(--panel);display:flex;flex-direction:column}
    .cs-mediacard__media{position:relative;aspect-ratio:1;background:var(--press-veil);display:grid;place-items:center;overflow:hidden}
    .cs-mediacard__media[data-open]{cursor:pointer}
    .cs-mediacard__media img,.cs-mediacard__media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
    /* Пока превью не загрузилось, плитка «дышит» шиммером: долгая загрузка в
       Mini App была неотличима от поломки (та же пустая тёмная плитка).
       :has — прогрессивное улучшение: без поддержки просто нет шиммера. */
    .cs-mediacard__media img{opacity:0;transition:opacity .25s}
    .cs-mediacard__media img.is-loaded{opacity:1}
    .cs-mediacard__media:has(img:not(.is-loaded))::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--text) 7%,transparent) 50%,transparent 70%) no-repeat;background-size:220% 100%;animation:csShimmer 1.3s linear infinite}
    @keyframes csShimmer{from{background-position:160% 0}to{background-position:-60% 0}}
    @media (prefers-reduced-motion: reduce){.cs-mediacard__media::before{animation:none}}
    .cs-mediacard__media[data-open]:hover img,.cs-mediacard__media[data-open]:hover video{opacity:.85}
    .cs-mediacard__media--audio{background:var(--neon-soft)}
    .cs-mediacard__audioic{color:var(--neon)}.cs-mediacard__audioic svg{width:38px;height:38px}
    .cs-mediacard__play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
        display:grid;place-items:center;background:var(--overlay);color:#fff;pointer-events:none;}
    .cs-mediacard__play svg{width:22px;height:22px;margin-left:2px}
    .cs-mediacard__pending{font-size:11.5px;color:var(--text-faint)}
    .cs-mediacard__broken{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text-faint);font-size:10.5px;padding:10px;text-align:center}
    .cs-mediacard__broken svg{width:26px;height:26px;opacity:.6}
    .cs-mediacard__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px}
    .cs-mediacard__model{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
    /* 32px против прежних 26: §6.1 не знает 26px, а на телефоне зона нажатия
       расширяется невидимыми полями до 44px (§11.2). */
    .cs-mediacard__dl{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border:none;background:transparent;
        color:var(--text-muted);cursor:pointer;border-radius:var(--r-1);transition:.15s;position:relative}
    .cs-mediacard__dl::after{content:"";position:absolute;inset:-6px}
    .cs-mediacard__dl:hover{background:var(--neon-soft);color:var(--neon)}
    .cs-mediacard__dl svg{width:15px;height:15px}
    /* «Показать ещё» — на всю ширину сетки: в колонке она выглядела бы карточкой. */
    .cs-mediamore{grid-column:1/-1;justify-self:center;min-height:40px;padding:0 20px;
        border:1px solid var(--line);border-radius:var(--r-1);background:transparent;
        color:var(--text-2);font:500 14px/1 inherit;cursor:pointer;margin-top:8px}
    .cs-mediamore:hover{border-color:var(--accent-line);color:var(--text)}
    .cs-mediamore:disabled{opacity:.6;cursor:default}
    /* Размер значков у кнопок, где раньше стоял текстовый глиф (§9 их
       запрещает: символ зависит от шрифта системы и в двух темах выглядит
       по-разному). Без явного размера встроенный svg растягивается по
       контейнеру. Кегли — из шкалы 9-го раздела: 16px в мелких кнопках,
       14px у стрелки-шеврона рядом с подписью. */
    #chatAttachRemove svg,.ref-thumb button svg,.vid-ref-item__rm svg,
    .icon-btn svg,.modal__close svg{width:16px;height:16px;flex:0 0 auto}
    .cs-caret svg,.cs-think__caret svg{width:14px;height:14px;display:block}
    .chat-copy svg{width:14px;height:14px;display:block}
    .cs-send svg,#chatSend svg{width:18px;height:18px}
    /* Корзина: удалить картинку/видео/аудио (бэкенд DELETE /history|/videos|/audio).
       Красный в ПОКОЕ, а не только под курсором: на телефоне наведения не бывает
       вовсе, и кнопка удаления там ничем не отличалась от «Скачать» рядом. Ровно
       это правило раньше держал класс истории, которую сняли 13 августа, — теперь
       его держат живые кнопки. */
    .cs-mediacard__del{color:var(--danger)}
    .cs-mediacard__del:hover{background:var(--danger-soft);color:var(--danger)}
    /* Тот же красный, что у всех опасных действий: свой оттенок здесь был
       восьмым способом нарисовать одну и ту же кнопку. */
    .cs-lb__btn--del{color:var(--danger)}
    .cs-lb__btn--del:hover{background:var(--danger);color:#fff}
    .cs-mediacard .ret-badge{margin:0 9px 8px}
    .cs-mediaempty{grid-column:1/-1;text-align:center;color:var(--text-faint);padding:54px 16px;font-size:13px}
    /* ── Лайтбокс/слайдшоу ── */
    /* Затемнение с размытием 8px — единственное разрешённое (DESIGN.md 7.7).
       Сплошной `--surface` читался как ещё одна страница, а не как окно поверх
       работы. */
    .cs-lb{position:fixed;inset:0;z-index:1200;background:var(--overlay);
        backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
        display:flex;flex-direction:column;animation:csLbIn .18s ease}
    @keyframes csLbIn{from{opacity:0}to{opacity:1}}
    .cs-lb[hidden]{display:none}
    /* Поля 24px по 7.7 (было 14/18) и отступ под шапку клиента: у «Медиа» такой
       отступ есть, а у лайтбокса не было — в полноэкранном Telegram весь верхний
       ряд (счётчик, «Скачать», «Удалить», «Закрыть») уезжал под системную панель
       и был недоступен. */
    .cs-lb__top{display:flex;align-items:center;gap:12px;padding:24px 24px 16px;z-index:2}
    html.studio-embed .cs-lb__top{padding-top:calc(24px + var(--tg-top,0px))}
    html.is-tg-app .cs-lb__top{padding-top:calc(24px + var(--tg-top,0px))}
    .cs-lb__count{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
    .cs-lb__ret .ret-badge{margin:0}
    .cs-lb__sp{flex:1}
    .cs-lb__btn{display:grid;place-items:center;width:40px;height:40px;border:none;border-radius:var(--r-2);
        background:var(--surface-3);color:var(--text);cursor:pointer;transition:background var(--t-fast) var(--ease)}
    .cs-lb__btn:hover{background:var(--surface-2)}
    .cs-lb__btn svg{width:18px;height:18px}
    .cs-lb__stage{flex:1;display:grid;place-items:center;padding:0 12px 8px;min-height:0;position:relative}
    .cs-lb__stage img,.cs-lb__stage video{max-width:94vw;max-height:80vh;border-radius:var(--r-1);display:block;object-fit:contain;
        box-shadow:0 18px 60px var(--overlay)}
    .cs-lb__audio{display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--text)}
    .cs-lb__audio svg{width:72px;height:72px;opacity:.85}
    .cs-lb__audio audio{width:min(420px,80vw)}
    .cs-lb__broken{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-2);font-size:13px}
    .cs-lb__broken svg{width:46px;height:46px;opacity:.5}
    .cs-lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:none;border-radius:var(--r-2);
        background:var(--surface-3);color:var(--text);cursor:pointer;display:grid;place-items:center;
        transition:background var(--t-fast) var(--ease)}
    .cs-lb__nav:hover{background:var(--surface-2)}
    .cs-lb__nav svg{width:22px;height:22px}
    .cs-lb__nav--prev{left:14px}.cs-lb__nav--next{right:14px}
    .cs-lb__cap{padding:0 18px 16px;text-align:center;color:var(--text-2);font-size:12.5px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    @media(max-width:600px){ .cs-lb__nav--prev{left:6px} .cs-lb__nav--next{right:6px}
        .cs-lb__stage img,.cs-lb__stage video{max-height:72vh} }
    /* ── Пузырь «видео генерируется» в ленте ── */
    .cs-vidpending{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px dashed var(--panel-border);
        border-radius:var(--radius-md);background:var(--hover-veil);max-width:420px}
    .cs-vidpending__t{font-size:13.5px;color:var(--text);font-weight:500}
    .cs-vidpending__s{font-size:11.5px;color:var(--text-faint);line-height:1.45}
    /* ── Композер ── */
    .cs-composer{border-top:1px solid var(--panel-border);padding:12px clamp(10px,4vw,36px) 14px;
        background:var(--surface);position:relative}
    /* Пустой диалог: приветствие + поле ввода поднимаются в вертикальный центр (как Qwen),
       поле — компактная карточка по центру без разделителя; при первом сообщении всё
       возвращается к привычному виду (лента сверху, композер снизу). */
    /* Пустой чат: приветствие и поле ввода стоят по центру колонки, но шапку с
       кнопкой панели центрировать НЕЛЬЗЯ — она обязана стоять на одном уровне с
       шапкой боковой панели в любом состоянии.
       Раньше шапку для этого вынимали из потока (`position:absolute;top:0`), и
       получалось хуже: `top:0` считается от ГРАНИЦЫ блока, то есть выше его
       отступа (а у колонки чата был отступ посадочной страницы — 50px на
       телефоне, см. утечку правила `section` у .cs-main). В Telegram кнопка
       уезжала под строку «Закрыть» и в пустом чате её не было видно вовсе, а с
       первым сообщением она прыгала на 50px вниз вместе с лентой: замер живым
       браузером давал сдвиг ленты на 62px и композера на 109px.
       Теперь шапка в потоке ВСЕГДА, а центрируется только внутренний блок —
       авто-марджинами. Порядок правил важен: margin у композера идёт ниже и
       обязан сохранить `auto` снизу, иначе он погасит центровку. */
    .cs-main.is-empty .cs-thread{flex:0 0 auto;overflow:visible;padding-bottom:8px;margin-top:auto}
    .cs-main.is-empty .cs-empty{padding-bottom:8px}
    .cs-main.is-empty .cs-composer{border-top:0;background:none;width:100%;max-width:720px;margin:0 auto auto}
    .cs-main.is-empty .cs-foot-hint{display:none}
    .cs-attach{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
    /* Полоса вложений композера: миниатюры + счётчик лимита модели */
    .cs-attachstrip{display:flex;align-items:center;gap:8px;margin-bottom:9px;
        overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    /* display:flex перебил бы UA-правило [hidden] вне #csRoot — прячем локально */
    .cs-attachstrip[hidden]{display:none}
    .cs-attachstrip::-webkit-scrollbar{display:none}
    .cs-attachstrip .cs-attach__item{flex:0 0 auto;width:46px;height:46px}
    .cs-strip__count{flex:0 0 auto;font-size:11.5px;color:var(--text-faint);
        border:1px solid var(--panel-border);border-radius:var(--r-full);padding:3px 9px;white-space:nowrap}
    /* Бейдж-счётчик на скрепке: видно, что и сколько прикреплено, без настроек */
    .cs-attachbtn{position:relative}
    /* accent-fill, не accent: белый на #5B8CFF в тёмной теме ≈3.3:1 — ниже AA */
    .cs-attach-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
        border-radius:var(--r-full);background:var(--accent-fill);color:#fff;font-size:10px;font-weight:700;
        line-height:16px;text-align:center;padding:0 4px;pointer-events:none}
    .cs-attach__item{position:relative;width:58px;height:58px;border-radius:var(--r-1);overflow:hidden;border:1px solid var(--panel-border)}
    .cs-attach__item img{width:100%;height:100%;object-fit:cover}
    .cs-attach__item button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;
        background:var(--overlay);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
    /* Композер-карточка: поле ввода большое (полноценное диалоговое окно) сверху,
       компактная панель инструментов (модель/режим/настройки/отправка) — снизу. */
    .cs-bar{display:flex;flex-direction:column;align-items:stretch;gap:7px;background:var(--panel);
        border:1px solid var(--panel-border);border-radius:var(--r-3);padding:11px 13px 10px;transition:border-color .15s}
    .cs-bar:focus-within{border-color:var(--neon)}
    .cs-roundbtn{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-2);
        border:1px solid transparent;background:transparent;color:var(--text-2);font-size:19px;cursor:pointer;
        transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
    .cs-roundbtn:hover{background:var(--hover-veil);color:var(--text)}
    /* font-size ≥16px ОБЯЗАТЕЛЕН: iOS Safari/Telegram-webview авто-зумит инпут с мелким
       шрифтом при фокусе (то самое «приближает/искажает» в мини-приложении). */
    .cs-input{width:100%;min-width:0;resize:none;border:0;background:transparent;color:var(--text);font:inherit;
        font-size:16px;line-height:1.5;padding:4px 2px 2px;min-height:46px;max-height:240px;outline:none}
    .cs-input::placeholder{color:var(--text-faint)}
    /* Панель инструментов под полем ввода (кнопка модели растягивается, заполняя ряд) */
    /* Одна строка: кнопка отправки НИКОГДА не переносится вниз. Когда места мало —
       сжимается/обрезается кнопка модели (flex:1 1 auto + min-width:0 + ellipsis ниже),
       а не переносится «стрелочка». flex-wrap:wrap раньше ронял ↑ на 2-ю строку. */
    .cs-tools{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0}
    .cs-send{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-2);
        border:0;background:var(--accent-fill);color:var(--on-accent);font-size:18px;cursor:pointer;
        transition:background var(--t-fast) var(--ease)}
    .cs-send:hover{background:var(--accent-hover)}
    .cs-send:active{background:var(--accent-press)}
    .cs-send.is-stop{background:var(--danger)}
    .cs-send.is-busy{opacity:.55;pointer-events:none}
    /* Кнопка модели растягивается на всю свободную ширину строки (без пустоты),
       стрелка ▾ прижата вправо — видно полное имя модели и её цену. */
    .cs-modelbtn{flex:1 1 auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;
        border-radius:var(--r-2);border:1px solid var(--line);background:var(--surface-3);color:var(--text);
        font-size:13px;font-weight:600;cursor:pointer;max-width:none;min-width:0;
        transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
    .cs-modelbtn:hover{background:var(--surface-2);border-color:var(--line-strong)}
    .cs-modelbtn__key{opacity:.8;flex:0 0 auto;display:inline-flex}
    .cs-modelbtn__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
    .cs-modelbtn__price{color:var(--text-faint);font-weight:500;font-size:11px;flex:0 0 auto;white-space:nowrap}
    .cs-modelbtn>span:last-child{margin-left:auto;flex:0 0 auto}   /* стрелка ▾ → вправо */
    .cs-foot-hint{margin:8px 2px 0;font-size:11px;color:var(--text-faint)}
    /* Режим размышления (Авто/Размышление/Быстро) — Qwen-стиль */
    .cs-think{flex:0 0 auto;display:none;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:var(--r-2);
        border:1px solid var(--line);background:var(--surface-3);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
        transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
    .cs-think.is-shown{display:inline-flex}
    .cs-think:hover{background:var(--surface-2);border-color:var(--line-strong)}
    .cs-think svg{width:16px;height:16px;color:var(--neon)}
    .cs-thinkpop{right:clamp(10px,4vw,36px);bottom:74px;width:236px;padding:6px}
    /* Строка про молчаливое размышление: пояснение, а не пункт выбора, поэтому
       12px и приглушённый цвет, с разделителем над ней. */
    .cs-thinkpop__note{margin:6px 2px 2px;padding-top:7px;border-top:1px solid var(--panel-border);
        font-size:12px;line-height:1.45;color:var(--text-faint)}
    .cs-think__opt{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:var(--radius-sm);
        border:0;background:transparent;color:var(--text);cursor:pointer}
    .cs-think__opt:hover,.cs-think__opt.is-active{background:var(--neon-soft)}
    .cs-think__opt b{font-size:13px;font-weight:600}
    .cs-think__opt small{display:block;color:var(--text-faint);font-size:11px;font-weight:400}
    /* ── Поповеры (меню режимов / выбор модели) ── */
    .cs-pop{position:absolute;z-index:40;background:var(--bg-2);border:1px solid var(--panel-border);
        border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden}
    .cs-menu{left:clamp(10px,4vw,36px);bottom:74px;width:248px;padding:6px}
    .cs-menu__item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:var(--radius-sm);
        border:0;background:transparent;color:var(--text);font-size:13.5px;cursor:pointer;text-align:left}
    .cs-menu__item:hover{background:var(--neon-soft)}
    .cs-menu__item .ic{width:20px;text-align:center;font-size:16px}
    .cs-menu__item small{display:block;color:var(--text-faint);font-size:11px;font-weight:400}
    .cs-menu__sep{height:1px;background:var(--panel-border);margin:5px 8px}
    .cs-menu__item--attach{font-weight:600}
    .cs-modelpop{right:clamp(10px,4vw,36px);bottom:74px;width:min(460px,94vw);max-height:68vh;display:flex;flex-direction:column}
    /* Шапка листа: на широком экране не нужна — там поповер закрывается щелчком
       мимо, а лист во весь экран закрыть нечем. */
    .cs-modelpop__head{display:none;align-items:center;gap:10px;padding:10px 12px;flex:0 0 auto;
        border-bottom:1px solid var(--panel-border)}
    .cs-modelpop__head b{font-size:15px;font-weight:600}
    .cs-modelpop__head button{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;
        border:0;background:transparent;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer}
    .cs-modelpop__head button:hover{background:var(--hover-veil);color:var(--text)}
    html.studio-embed .cs-modelpop__head{display:flex}
    /* Фильтр-строки и поиск НЕ сжимаются (flex:0 0 auto) — иначе при длинном списке
       строка брендов схлопывалась в тонкую полоску с искажёнными иконками. */
    .cs-modelpop__cats{display:flex;gap:6px;padding:9px 9px 0;flex-wrap:wrap;flex:0 0 auto}
    .cs-modelpop__cat{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--radius-pill);
        border:1px solid var(--panel-border);background:transparent;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
    .cs-modelpop__cat svg{width:14px;height:14px}
    .cs-modelpop__cat:hover{border-color:var(--neon);color:var(--text)}
    .cs-modelpop__cat.is-active{border-color:var(--neon);background:var(--neon-soft);color:var(--neon)}
    /* Вторая строка фильтров — по семейству/бренду (кому принадлежит нейросеть).
       Плашки с заливкой и чётким бордером, чтобы строка была хорошо заметна. */
    .cs-modelpop__brands{display:flex;align-items:center;gap:7px;padding:9px 10px;margin:0;overflow-x:auto;
        flex:0 0 auto;min-height:46px;scrollbar-width:thin;border-bottom:1px solid var(--panel-border)}
    .cs-modelpop__brands::-webkit-scrollbar{height:6px}
    .cs-modelpop__brands::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:var(--r-1)}
    .cs-modelpop__brand{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 12px;border-radius:var(--radius-pill);
        border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;
        white-space:nowrap;transition:all .14s}
    .cs-modelpop__brand .brand-logo{width:20px;height:20px;flex:0 0 20px;padding:2px}
    .cs-modelpop__brand:hover{border-color:var(--neon);color:var(--neon);background:var(--neon-soft)}
    .cs-modelpop__brand.is-active{border-color:var(--neon);background:var(--accent-fill);color:var(--on-accent)}
    /* Бейджи возможностей модели (для чего она) */
    .cs-modelopt__tags{display:inline-flex;gap:4px;flex:0 0 auto}
    .cs-modeltag{display:inline-flex;align-items:center;height:20px;padding:0 8px;
        border-radius:var(--r-full);font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
    /* Цвета типов — из единой палитры style.css (var(--type-*)) → идентичны всем вкладкам */
    .cs-modeltag--text{background:var(--type-text-bg);color:var(--type-text)}
    .cs-modeltag--code{background:var(--type-code-bg);color:var(--type-code)}
    .cs-modeltag--vision{background:var(--type-vision-bg);color:var(--type-vision)}
    .cs-modeltag--image{background:var(--type-image-bg);color:var(--type-image)}
    .cs-modeltag--video{background:var(--type-video-bg);color:var(--type-video)}
    .cs-modeltag--audio{background:var(--type-audio-bg);color:var(--type-audio)}
    .cs-modeltag--embedding{background:var(--type-embedding-bg);color:var(--type-embedding)}
    .cs-modeltag--moderation{background:var(--type-moderation-bg);color:var(--type-moderation)}
    .cs-modeltag--ocr{background:var(--warn-soft);color:var(--warn)}
    /* Плашка возможности — приглушённая: рядом с ярким бейджем типа она вторая по
       важности, и два ярких пятна в одной строке спорят друг с другом. */
    .cs-modeltag--cap{background:var(--surface-3);color:var(--text-2);font-weight:500}
    .cs-modelpop__search{padding:10px;border-bottom:1px solid var(--panel-border);flex:0 0 auto}
    .cs-modelpop__search input{width:100%;padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--panel-border);
        background:var(--panel);color:var(--text);font-size:13px;outline:none}
    .cs-modelpop__list{overflow-y:auto;padding:6px;flex:1 1 auto;min-height:0}
    .cs-modelpop__group{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
        padding:9px 10px 4px;display:flex;align-items:center;gap:7px}
    /* Логотип-«папка» в заголовке группы — фиксированный, не растягивается flex:1 ниже */
    .cs-modelpop__group .brand-logo{flex:0 0 20px;width:20px;height:20px;padding:2px}
    .cs-modelopt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
        border-radius:var(--radius-sm);border:0;background:transparent;color:var(--text);font-size:12.5px;cursor:pointer;text-align:left}
    .cs-modelopt:hover{background:var(--neon-soft)}
    .cs-modelopt.is-active{background:var(--neon-soft);outline:1px solid var(--panel-border)}
    /* Имя модели переносится по словам, но НИКОГДА не сжимается до колонки букв.
       Так и было: `overflow-wrap:anywhere` разрешал разрыв в любом месте, а
       нерастяжимая цена со ступенями ($45.000/$270.000 → $90.000/$405.000)
       съедала всю строку — имя оставалось шириной в один символ и читалось
       сверху вниз по букве. Минимальная ширина не даёт этому повториться. */
    .cs-modelopt__id{flex:1 1 auto;min-width:14ch;text-align:left;white-space:normal;
        overflow-wrap:break-word;word-break:normal;line-height:1.3}
    .cs-modelpop__group>span{flex:1}
    /* Цена уступает место имени: сжимается и при нехватке ужимается многоточием. */
    .cs-modelopt__price{flex:0 1 auto;min-width:0;color:var(--text-faint);font-size:11px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cs-modelopt__free{color:var(--green);font-size:10px;font-weight:700}
    /* Бейдж биллинга в строке модели — как в ЛК / на сайте «Модели и цены» */
    /* Метка биллинга — ровно как в каталоге и в кабинете (.billing-pill). */
    .cs-modelopt__bill{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;
        border-radius:var(--r-full);font-size:11px;font-weight:500;line-height:1;white-space:nowrap;
        background:transparent;border:1px solid var(--line);color:var(--text-3)}
    /* Иконка семейства в строке модели — всегда ровный квадрат, без растяжения */
    .cs-modelopt .brand-logo{width:22px;height:22px;flex:0 0 22px;padding:3px}
    .cs-modelopt .brand-logo img{width:100%;height:100%;object-fit:contain}
    .cs-modelpop__empty{padding:18px 12px;text-align:center;color:var(--text-faint);font-size:12.5px}
    /* ── Шторка настроек режима — всплывает НАД композером, не сжимая ленту диалога ── */
    /* Настройки модели — диалоговое окно. Раньше это была полка над композером:
       фиксированные 52% высоты, фон var(--bg-2) вместо панельного (оттого
       чужой цвет), перекрывала ленту и на телефоне занимала пол-экрана. */
    /* Окно подтверждения. Тот же слой, что у остальных окон продукта. */
    .cs-ask{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
        padding:clamp(16px,6vw,40px);background:var(--overlay)}
    .cs-ask__box{width:min(400px,100%);background:var(--bg-2);border:1px solid var(--panel-border);
        border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:20px}
    html.light .cs-ask__box{background:var(--bg-1)}
    .cs-ask__title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
    .cs-ask__text{font-size:13.5px;line-height:1.5;color:var(--text-muted)}
    .cs-ask__input{width:100%;margin-top:14px}
    .cs-ask__row{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
    .cs-ask__row .btn{flex:1 1 auto}
    .cs-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;
        justify-content:center;padding:clamp(12px,4vw,32px)}
    .cs-modal[hidden]{display:none}
    /* Размытие 8px под модалкой — единственное место в продукте, где DESIGN.md
       7.7 его разрешает, и здесь его как раз не было. */
    .cs-modal__backdrop{position:absolute;inset:0;background:var(--overlay);
        backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .cs-settings{position:relative;z-index:1;width:min(680px,100%);
        display:flex;flex-direction:column;
        border:1px solid var(--panel-border);border-radius:var(--radius-lg);
        background:var(--bg-2);box-shadow:var(--shadow-xl);
        max-height:min(78dvh,720px);overflow:hidden}
    /* Внутренние поля модалки — 24px (DESIGN.md 7.7). Было 18/14/12: ни одного
       из этих значений нет в шкале отступов 4.1. */
    .cs-settings>*{padding-left:24px;padding-right:24px}
    .cs-settings>.cs-panel__head{padding-top:16px;padding-bottom:16px;
        border-bottom:1px solid var(--panel-border);flex:0 0 auto}
    /* Прокручивается только содержимое: шапка остаётся на месте, и кнопка
       закрытия не уезжает вверх при длинном списке настроек.
       Скроллер — на ОБЩЕЙ обёртке, а не на каждой группе. Когда прокрутку
       вешали на группы, режим «Анализ» (там видны сразу две: пояснение про
       скрепку и настройки модели) давал два независимых скроллера в одном
       окне — flexbox сжимал обе до щели, и каждую надо было листать отдельно.
       Инвариант «в диалоге ровно один скроллер» описан ниже и проверяется
       тестом test_settings_dialog_has_exactly_one_scroller. */
    .cs-settings>.cs-settings__body{overflow-y:auto;overscroll-behavior:contain;
        flex:1 1 auto;min-height:0;padding-top:16px;padding-bottom:24px;
        display:flex;flex-direction:column;gap:16px}
    /* Светлая тема берёт токен, а не свой цвет: в тёмной --bg-2 это плотный
       var(--surface) и годится как поверхность окна, а в светлой он насыщенно-синий и
       рядом с почти белыми панелями читается как «другое окно». --bg-1 — тот же
       светлый ряд, что у остальных поверхностей продукта. */
    html.light .cs-settings{background:var(--bg-1)}
    html.light .cs-modal__backdrop{background:var(--overlay)}
    /* На телефоне — лист снизу: до него дотягивается большой палец, и он не
       перекрывает то, что пользователь только что напечатал. */
    @media(max-width:620px){
        .cs-modal{align-items:flex-end;padding:0}
        /* 92vh по DESIGN.md 4.3 (было 82dvh): в одном окне у Seedance в
           референсном режиме помещается режим, пять зон загрузки, четыре
           селектора кадра и шесть дополнительных параметров — в 82 они не
           влезали, и «одно окно» на телефоне проиграло бы вкладкам. */
        .cs-settings{width:100%;max-height:92dvh;
            border-radius:var(--r-4) var(--r-4) 0 0;border-bottom:0;
            padding-bottom:env(safe-area-inset-bottom)}
        /* Ручка 36×4px цвета --line-strong (7.7): без неё лист не читается как
           перетаскиваемый, а закрыть свайпом было нельзя вообще. */
        .cs-settings::before{content:"";display:block;width:36px;height:4px;flex:0 0 auto;
            margin:8px auto 0;border-radius:var(--r-full);background:var(--panel-hover)}
    }
    .cs-set-group{display:flex;flex-direction:column;gap:9px}
    .cs-set-group .form-label{margin-top:4px}
    /* Видео: длительность/размер/разрешение/соотношение — компактные выпадашки в один ряд */
    .cs-vidgrid{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end}
    .cs-vidgrid>div{flex:1 1 132px;min-width:118px;margin:0;display:flex;flex-direction:column}
    .cs-vidgrid .form-label{margin:0 0 4px}
    .cs-vidgrid select{width:100%}
    .cs-vidfield{display:flex;flex-direction:column}
    .cs-set-lbl{font-size:11.5px;font-weight:600;color:var(--text-muted);margin:2px 0 -2px}
    .cs-set-note{font-size:11px;color:var(--text-faint);margin:2px 0 0}
    /* Настройка чата: подпись, поле и пояснение одним блоком. */
    /* Одна настройка чата выглядит РОВНО как настройка картинок, видео и
       озвучки: та же подпись, тот же отступ, без рамки и своего фона.
       Раньше здесь была карточка с подсветкой, и вкладка «Чат» выделялась из
       остальных пяти — окно читалось как три разных инструмента в одном.
       Подпись повторяет правило #csSettings .form-label (46 мест разметки);
       за совпадением следит тест test_chat_controls_look_like_every_other_row. */
    .cs-chatctl{display:flex;flex-direction:column;gap:5px;min-width:0}
    .cs-chatctl__top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
    /* Тот же вид, что у общей подписи поля (DESIGN.md 7.1): 13px/500. Прежние
       11.5px/600 в таблице размеров 3.2 отсутствуют, а 11px там закреплён за
       «Микро» — им теперь подписаны секции, и подпись поля не должна сливаться
       с надзаголовком в один кегль. */
    .cs-chatctl__name{margin:0;font-size:13px;font-weight:500;letter-spacing:0;
        text-transform:none;color:var(--text-muted);cursor:pointer}
    /* Показ значения: включённое — цветом бренда, «по умолчанию» — приглушённо,
       чтобы сразу читалось, тронута ручка или нет. */
    /* Значение параметра обычным цветом текста: акцент в системе отвечает за
       интерактив (чек-лист п.3), а покрашенное значение читалось как ссылка. */
    .cs-chatctl__val{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);
        flex:0 0 auto;white-space:nowrap}
    .cs-chatctl__val--off{color:var(--text-faint);font-weight:500}
    .cs-chatctl .cs-set-note{margin:0}
    /* Ссылка-кнопка «Сбросить» у ползунка: возвращает параметр в состояние
       «не передавать». Прячется, пока значение не тронуто. */
    .cs-linkbtn{background:none;border:0;padding:0 2px;cursor:pointer;
        font:inherit;font-size:11px;color:var(--text-faint);margin-left:auto}
    .cs-linkbtn[hidden]{display:none}
    .cs-linkbtn:hover{color:var(--neon);text-decoration:underline}

    /* Поля контролов чата — тот же компонент, что и остальные поля окна.
       Раньше числовое поле носило класс `.form-input`, а он задаёт
       `flex:1 1 140px`; внутри колоночного флекса основной размер берётся из
       `flex-basis`, и `height:40px` из того же правила игнорировался — поле
       выходило 140px против 40px у выпадающего списка и 24px у ползунка. Высота
       ряда сетки равна самому высокому элементу, отсюда и «дыры». */
    .cs-chatctl select,.cs-chatctl .cs-fld{width:100%;min-width:0;flex:0 0 auto}
    .cs-settings .cs-fld{height:40px;padding:0 12px;font-size:15px;color:var(--text);
        background-color:var(--field);border:1px solid var(--line);border-radius:var(--r-1);outline:none}
    .cs-settings .cs-fld:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
    /* Параметры чата — сетка в две колонки на широком экране: их бывает по
       десять, и в один столбик окно вытягивается на два экрана. Отступы из
       шкалы 4.1 (было 9px/10px — таких значений в шкале нет). */
    #csSetChat .cs-sect__b{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
        gap:12px;align-items:start}
    /* Кнопка размышления: активно (is-on) + статичный always-режим (без меню) */
    .cs-think.is-on{border-color:var(--neon);color:var(--neon);background:var(--neon-soft)}
    .cs-think.cs-think--static{cursor:default}
    .cs-think.cs-think--static:hover{border-color:var(--panel-border)}
    /* Информационная карточка в поповере размышления (авто-модели): не кнопка */
    .cs-think__opt--info{cursor:default}
    /* Мини-иконки возможностей модели в пикере (размышление/изображения/PDF) */
    .cs-modelopt__caps{display:inline-flex;gap:3px;flex:0 0 auto;align-items:center}
    .cs-capb{display:inline-flex;width:15px;height:15px;color:var(--text-faint)}
    .cs-capb svg{width:15px;height:15px}
    /* ── Ход мысли: сворачиваемый блок над текстом ответа ──
       Что здесь исправлено 13 августа. Шеврон был текстовым глифом ('▸'/'▾') —
       §9 запрещает глифы вместо значков: символ зависит от системного шрифта.
       Кегль 12px/600 в шкале §3.2 отсутствует, а строка заголовка была высотой
       ~26px против пальцевых 40px (§11.2). Внутренний скроллер стоял ВСЕГДА,
       то есть внутри скроллящейся ленты был второй скроллер: теперь он только на
       время размышления (чтобы пузырь не рос скачками), а раскрытая плашка
       разворачивается целиком. */
    .chat-reason{margin:0 0 8px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);
        background:var(--hover-veil)}
    /* padding-right под кнопку «Скопировать»: она лежит в правом верхнем углу
       пузыря абсолютом, а плашка — первый ребёнок пузыря, то есть их зоны
       нажатия пересекались (§11.2 требует 8px между целями). */
    .chat-reason>summary{display:flex;align-items:center;gap:7px;cursor:pointer;min-height:40px;
        padding:6px 44px 6px 12px;font-size:13px;font-weight:500;color:var(--text-muted);
        list-style:none;user-select:none}
    .chat-reason>summary::-webkit-details-marker{display:none}
    .chat-reason>summary:hover{color:var(--text)}
    .chat-reason__ic{width:16px;height:16px;flex:0 0 auto;color:var(--neon);
        transition:transform var(--t-mid) var(--ease)}
    .chat-reason[open] .chat-reason__ic{transform:rotate(90deg)}
    .chat-reason__lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        font-variant-numeric:tabular-nums}
    /* Точки ожидания в заголовке — тот же индикатор, что и в ленте, но мельче. */
    .chat-reason>summary .cs-typing{height:12px;gap:4px}
    .chat-reason>summary .cs-typing span{width:5px;height:5px}
    .chat-reason__body{padding:0 12px 10px;font-size:13px;line-height:1.5;color:var(--text-faint);
        white-space:pre-wrap;overflow-wrap:anywhere}
    /* Пока модель думает (в заголовке есть точки ожидания) — окно фиксированной
       высоты с автопрокруткой к хвосту: иначе длинная мысль выдавливает ленту и
       ответ уезжает за экран. Как только плашка «запечатана», ограничения нет —
       человек открывает её сам и читает целиком. */
    .chat-reason:has(.cs-typing) .chat-reason__body{max-height:160px;overflow-y:auto}
    @media(prefers-reduced-motion:reduce){.chat-reason__ic{transition:none}}
    /* Минималистичные плитки соотношения сторон в шторке настроек (компактно, без подписи) */
    .cs-settings .ratio-grid{grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:5px}
    .cs-settings .ratio-btn{padding:5px 4px;font-size:11px;border-radius:var(--r-1)}
    .cs-settings .ratio-btn span{display:none}
    /* Подписи и поля описаны ОДИН раз, ниже. Здесь были свои значения, а в
       блоке #csSettings — другие: два правила спорили, и результат зависел от
       порядка в файле. Именно отсюда бралось ощущение «всё как-то странно». */
    .cs-settings .cs-set-group{gap:6px}
    /* Соотношения — маленькие плитки фикс. ширины, прижаты влево (НЕ растягиваем на всю строку) */
    .cs-settings .ratio-grid{grid-template-columns:repeat(auto-fill,52px);justify-content:start;gap:5px}
    .cs-settings .count-row{gap:5px;flex-wrap:wrap}
    .cs-settings .count-row .count-btn{flex:0 0 auto;min-width:40px;padding:5px 11px;font-size:13px}
    .cs-settings #qualityRow,.cs-settings #genSeedRow,.cs-settings #genCustomSizeRow,.cs-settings #genFormatRow{margin-bottom:5px!important}
    /* Ширина поля — одна на все вкладки: раньше здесь стояло width:auto с
       ограничением 240px, а ниже — width:100%, и поля прыгали по ширине в
       зависимости от того, в какой вкладке оказались. */
    .cs-settings .cs-vidgrid select{min-width:0;width:100%}
    /* Секции настроек вместо вкладок. Надзаголовок — единственный стиль, который
       DESIGN.md 3.2 отводит под эту роль: «Микро», 11px/600/+0.08em/ВЕРХНИЙ
       РЕГИСТР, цвет --text-3. Прежняя активная вкладка была залита сплошным
       акцентом (`background:var(--neon)`) — то есть на экране появлялась вторая
       синяя площадь рядом с главной кнопкой, против 2.4 и 6.3. */
    .cs-sect{display:flex;flex-direction:column}
    .cs-sect[hidden]{display:none}
    .cs-sect+.cs-sect{margin-top:16px}
    .cs-sect__h{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;
        text-transform:uppercase;color:var(--text-faint);margin:0 0 8px}
    .cs-sect__h[hidden]{display:none}
    .cs-sect__b{display:flex;flex-direction:column;gap:8px}
    /* ═══ ЕДИНЫЙ РИТМ ШТОРОК НАСТРОЕК (image/video/tts/compare): одинаковые
       отступы, высоты, радиусы — «дышит» одинаково во всех режимах. ID #csSettings,
       чтобы надёжно перебить частные правила контролов. ═══ */
    #csSettings .cs-set-group{gap:9px}
    #csSettings .cs-sect__b{gap:12px}
    /* Единственное описание подписи поля. DESIGN.md 7.1: 13px/500, отступ
       снизу 6px. Прежние 11.5px/600 в таблице размеров 3.2 отсутствуют вовсе, а
       11px там закреплён за «Микро» — и им теперь подписаны СЕКЦИИ, а не поля,
       иначе подпись поля и надзаголовок секции сливались в один кегль. */
    #csSettings .form-label{margin:0 0 6px;font-size:13px;font-weight:500;
        letter-spacing:0;text-transform:none;color:var(--text-muted)}
    #csSettings .cs-set-note{margin:2px 0 0}
    /* «+ Добавить фото» — единый чип-плитка той же высоты, что и превью референса */
    #csSettings .ref-upload{gap:8px;margin-top:0}
    #csSettings .ref-add-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
        height:56px;padding:0 16px;border:1px dashed var(--panel-border);border-radius:var(--radius-sm);
        background:var(--hover-veil);color:var(--text-muted);font-size:12px;font-weight:600;transition:all .15s}
    #csSettings .ref-add-btn:hover{border-color:var(--neon);color:var(--neon);background:var(--neon-soft)}
    /* Превью референса — единый размер/радиус/бордер во ВСЕХ режимах (картинки/видео/сравнение) */
    #csSettings .ref-thumb{width:56px;height:56px;border-radius:var(--radius-sm);border:1px solid var(--panel-border)}
    /* Зона загрузки в шторке — компактная. Полноразмерная (padding 36px) занимает
       около девяноста пикселей, а в референсных режимах их видно сразу три. */
    #csSettings .upload-zone{padding:13px 14px;border-width:1px;border-radius:var(--radius-sm)}
    #csSettings .upload-zone p{margin:0;font-size:12px}
    #csSettings .upload-zone p+p{margin-top:2px;font-size:10.5px}
    #csSettings .upload-zone img,#csSettings .upload-zone video{max-height:96px}
    /* Несколько зон подряд встают рядом, если хватает ширины. */
    #csSetVideo .cs-sect__b{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
        gap:12px;align-items:start}
    #csSetVideo .cs-sect__b>.form-label,#csSetVideo .cs-sect__b>p,
    #csSetVideo .cs-sect__b>#vidModeChips,#csSetVideo .cs-sect__b>.cs-vidgrid,
    #csSetVideo .cs-sect__b>.vid-adv{grid-column:1/-1}
    #csSettings .ref-thumb:hover{border-color:var(--neon)}
    /* Кнопки количества и плитки соотношений — одинаковая высота 32px */
    #csSettings .count-row{gap:6px;flex-wrap:wrap}
    #csSettings .count-btn{flex:0 0 auto;min-width:40px;height:32px;display:inline-flex;align-items:center;
        justify-content:center;padding:0 12px;font-size:13px;border-radius:var(--r-1)}
    #csSettings .ratio-grid{grid-template-columns:repeat(auto-fill,52px);justify-content:start;gap:6px}
    #csSettings .ratio-btn{height:32px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-size:11px;border-radius:var(--r-1)}
    #csSettings .ratio-btn span{display:none}
    /* Компактный ряд видео: равные поля, подписи и селекты выровнены по низу */
    #csSettings .cs-vidgrid{gap:8px 10px;align-items:end}
    #csSettings .cs-vidgrid>div{flex:1 1 120px;min-width:108px;margin:0}
    #csSettings .cs-vidgrid .form-label{margin:0 0 4px}
    /* Расширенные параметры видео — карточка в общем стиле шторки */
    #csSettings .vid-adv{gap:9px;padding:11px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);
        background:var(--hover-veil)}
    #csSettings .vid-adv__row label{font-size:12.5px}
    /* Дроп-зоны видео (первый кадр / исходное видео / аудио) — компактнее, не «перегруз» */
    #csSettings .upload-zone{border-width:1px;border-radius:var(--radius-sm);padding:16px 14px}
    #csSettings .upload-zone p:first-child{font-size:12.5px}
    /* Telegram/мобайл: фокусируемые поля ≥16px, иначе iOS/Telegram-webview авто-зумит
       (ID-селектор перебивает компактные 13px выше — без него вернулся бы зум-баг). */
    /* Слайдер (скорость озвучки) — фирменный неон через accent-color (кросс-браузерно,
       включая Telegram-webview): заполнение + бегунок в цвете бренда, без браузерной серости. */
    #csSettings input[type=range]{accent-color:var(--neon);width:100%;height:24px;cursor:pointer;margin:0}
    /* Мульти-референсы видео/аудио (Seedance/Wan) — единые чипы файлов (без эмодзи, SVG) */
    #csSettings .vid-ref-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);
        background:var(--hover-veil);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:6px 9px}
    #csSettings .vid-ref-item__ic{width:16px;height:16px;flex:0 0 auto;color:var(--neon)}
    #csSettings .vid-ref-item__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #csSettings .vid-ref-item__rm{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;border:0;
        border-radius:var(--r-1);background:transparent;color:var(--text-faint);cursor:pointer;font-size:15px;line-height:1;transition:all .14s}
    #csSettings .vid-ref-item__rm:hover{background:var(--danger-soft);color:var(--danger)}
    /* «Сравнение» — список выбора моделей в едином стиле (скролл, неон-выделение) */
    /* Список моделей для сравнения НЕ скроллится сам. Так и было — и именно из-за
       этого он превращался в щель на две строки: тело диалога
       (.cs-settings > .cs-set-group) уже скроллится, а флексбокс сжимает того
       ребёнка, который умеет прятать своё содержимое. Скроллер в диалоге ровно
       один — тело; список просто выкладывается целиком внутри него.
       За этим следит test_settings_dialog_has_exactly_one_scroller. */
    #csSettings .compare-model-list{gap:5px;margin:0;flex:0 0 auto}
    /* Ни один ребёнок тела диалога не должен сжиматься: иначе длинный блок
       съедает соседей, и пользователь видит обрезки вместо настроек. */
    #csSettings .cs-set-group>*{flex:0 0 auto}
    #csSettings .compare-model-item{padding:8px 10px;border-radius:var(--radius-sm);background:var(--panel)}
    #csSettings .compare-model-item:hover{border-color:var(--neon)}
    #csSettings .compare-model-item:has(input:checked){border-color:var(--neon);background:var(--neon-soft)}
    #csSettings .compare-model-item .brand-logo{width:20px;height:20px;flex:0 0 20px}
    /* Настройки по моделям в «Сравнении»: одна строка на модель — её логотип, id и
       СВОИ селекторы. Наборы соотношений и шкала качества у семейств разные, и
       общий выбор подходит не всем; здесь видно, что реально уйдёт в каждую. */
    .cmp-permodel{display:flex;flex-direction:column;gap:6px;margin-top:6px}
    .cmp-permodel__row{border:1px solid var(--panel-border);border-radius:var(--radius-sm);
        background:var(--panel);padding:8px 10px}
    .cmp-permodel__head{display:flex;align-items:center;gap:7px;min-width:0}
    .cmp-permodel__head .brand-logo{width:18px;height:18px;flex:0 0 18px}
    .cmp-permodel__id{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        font-size:12px;font-weight:600;color:var(--text)}
    .cmp-permodel__own{flex:0 0 auto;padding:1px 6px;border-radius:var(--radius-pill);
        border:1px solid var(--neon);color:var(--neon);font-size:9.5px;font-weight:700;letter-spacing:.02em}
    /* Два селектора рядом на широком экране, в столбик на узком (Telegram). */
    .cmp-permodel__ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin-top:7px}
    .cmp-permodel__ctrl{display:flex;flex-direction:column;gap:3px;min-width:0}
    .cmp-permodel__ctrl>span{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
    /* `padding-right` — под шеврон: это правило (два класса) сильнее общего
       `.cs-settings select` (один класс), и без явного отступа длинная подпись
       вида «свой — 1536x1024» заезжала бы под стрелку. */
    .cmp-permodel__ctrl select{width:100%;min-width:0;font-size:12px;padding:5px 30px 5px 8px}
    .cmp-permodel__note{font-size:10.5px;color:var(--text-faint);margin:6px 0 0}
    .cmp-permodel__reset{align-self:flex-start;border:0;background:transparent;padding:0;cursor:pointer;
        color:var(--neon);font-size:11px;font-weight:600}
    .cs-settingsbtn.is-on{border-color:var(--neon);color:var(--neon);background:var(--neon-soft)}
    /* Точка «настройки изменены» на шестерёнке. Ряд чипов под композером снят
       (дублировал окно и держал вторую кнопку открытия), а признак остался:
       DESIGN.md 7.5 разрешает точку статуса 6px там, где плашка избыточна. */
    .cs-settingsbtn{position:relative}
    .cs-settingsbtn.has-changes::after{content:"";position:absolute;top:5px;right:5px;
        width:6px;height:6px;border-radius:var(--r-full);background:var(--neon)}
    /* контролы, перенесённые из легаси-панелей, получают единый вид внутри шторки */
    /* Поля по DESIGN.md 7.1: высота 40px, скругление 8px, внутренние поля
       0 12px, кегль 15px. Было 9px/14px и min-height 34px — ни одного из этих
       значений нет ни в шкале отступов 4.1, ни в таблице размеров 3.2. */
    .cs-settings select,.cs-settings textarea,.cs-settings .studio-model-input{width:100%;
        background-color:var(--field);border:1px solid var(--line);border-radius:var(--r-1);
        padding:0 12px;min-height:40px;color:var(--text);font-size:15px;outline:none}
    .cs-settings textarea{padding:12px;min-height:96px;border-radius:var(--r-2)}
    .cs-settings select:focus,.cs-settings textarea:focus,.cs-settings .studio-model-input:focus{border-color:var(--accent-line)}
    .cs-settings select option,.cs-settings select optgroup{background:var(--surface);color:var(--text)}
    /* Свой шеврон у выпадашек настроек (убираем браузерную стрелку → единый стиль).
       Раньше здесь стоял #csSettings select со своими min-height:34px и
       font-size:13px — id перебивал правило размеров выше, и в одном окне
       выпадашки были 34px/13px рядом с полями 40px/15px. Селектор понижен до
       класса, а размеры не переопределяются вовсе: правило задаёт только
       стрелку и место под неё. Картинка стоит отдельным background-image, а не
       сокращением background, иначе тема (--field ниже) сбрасывала бы шеврон. */
    .cs-settings select{appearance:none;-webkit-appearance:none;padding-right:34px;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8CA8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
    /* Третье описание подписи убрано: значения были свои (11px, прописные),
       и какое победит, зависело от специфичности. Одно описание — выше. */
    .cs-settings .form-label{display:block}
    :root.light .cs-settings select,:root.light .cs-settings textarea,:root.light .cs-settings .studio-model-input{
        color-scheme:light}
    :root.light .cs-settings select option,:root.light .cs-settings select optgroup{background:var(--surface);color:var(--text)}
    /* В светлой теме меняется только цвет стрелки — фон приходит из правила выше.
       Цвет — светлый --text-3 (#64718A) из той же таблицы 7.1. */
    :root.light .cs-settings select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364718A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
    /* ── Панель режима: шапка + цепочка выбора модели (компания→модель) ── */
    .cs-panel__head{display:flex;align-items:center;gap:8px;margin:0}
    /* Заголовок модалки — 18px/600 (DESIGN.md 7.7). Было 15px/700: кегля 15
       для заголовка в таблице 3.2 нет, а вес 700 отведён крупным числам. */
    .cs-panel__mode{font-size:18px;font-weight:600;color:var(--text)}
    /* Крестик — иконка-кнопка 32px (7.7). Прежние 36px и текстовый символ «×»
       вместо значка: символ зависит от шрифта системы и в разных темах
       выглядел по-разному. */
    .cs-panel__close{margin-left:auto;background:none;border:0;color:var(--text-muted);
        cursor:pointer;line-height:1;width:32px;height:32px;
        display:grid;place-items:center;border-radius:var(--r-1);flex:0 0 auto}
    .cs-panel__close svg{width:18px;height:18px;pointer-events:none}
    .cs-panel__close:hover{color:var(--text);background:var(--panel)}
    .cs-chooser{margin-bottom:10px}
    .cs-chooser__step{font-size:11.5px;color:var(--text-faint);margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .cs-chooser__back{background:none;border:0;color:var(--neon);cursor:pointer;font-size:12px;padding:0;font-weight:600}
    .cs-chooser__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
    .cs-chooser__co{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--panel-border);
        border-radius:var(--radius-sm);background:var(--panel);color:var(--text);cursor:pointer;font-size:12.5px;transition:all .15s}
    .cs-chooser__co:hover{border-color:var(--neon);background:var(--neon-soft)}
    .cs-chooser__co>span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cs-chooser__co small{color:var(--text-faint);font-size:11px}
    .cs-chooser__models{display:flex;flex-direction:column;gap:4px;max-height:38vh;overflow-y:auto}
    .cs-chooser__model{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
        border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);
        cursor:pointer;font-size:13px;transition:all .15s;text-align:left}
    .cs-chooser__model:hover{border-color:var(--neon);background:var(--neon-soft)}
    .cs-chooser__model.is-active{border-color:var(--neon);background:var(--neon-soft)}
    .cs-chooser__mid{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cs-chooser__mprice{color:var(--text-faint);font-size:11px;flex:0 0 auto}
    .cs-chooser__cur{display:flex;align-items:center;gap:9px;font-size:13px;flex-wrap:wrap}
    .cs-chooser__cur b{color:var(--text)}
    .cs-chooser__lbl{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
    .cs-chooser__price{color:var(--text-faint);font-size:12px}
    .cs-chooser__change{margin-left:auto;background:none;border:1px solid var(--panel-border);border-radius:var(--r-1);
        color:var(--neon);cursor:pointer;font-size:12px;padding:4px 13px}
    .cs-chooser__change:hover{border-color:var(--neon);background:var(--neon-soft)}
    /* ── Адаптив: сайдбар как drawer ── */
    @media(max-width:860px){
        .cs-head{display:flex}
        .cs{grid-template-columns:1fr}
        .cs.cs-collapsed{grid-template-columns:1fr}
        .cs-side{position:absolute;inset:0 auto 0 0;width:280px;max-width:86vw;z-index:60;
            transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-lg);opacity:1!important;pointer-events:auto!important}
        .cs.side-open .cs-side{transform:none}
        .cs.side-open::after{content:"";position:absolute;inset:0;background:var(--overlay);z-index:55}
        .cs-modelbtn{max-width:130px}
        .cs-thread{padding:16px 14px}
    }

    /* ════════════════ Редизайн под Qwen: сайдбар-рейл, проекты, профиль ════════════════ */
    .cs{grid-template-columns:268px 1fr}
    /* Свёрнутый сайдбар = узкий рейл с иконками (а не полное скрытие) */
    .cs.cs-collapsed{grid-template-columns:62px 1fr}
    .cs.cs-collapsed>.cs-side{opacity:1;pointer-events:auto}
    .cs.cs-collapsed .cs-hide-rail{display:none!important}
    /* Свёрнутая панель — законченный рейл, а не обрубок развёрнутой.
       Знак и кнопка встают друг под другом: рядом они не помещались в 62 точки
       (знак 30 + зазор 9 + кнопка 32 = 71) и налезали друг на друга. */
    .cs.cs-collapsed .cs-side__brand{flex-direction:column;gap:6px;padding:8px 0 10px;min-height:0}
    .cs.cs-collapsed .cs-brand{justify-content:center}
    .cs.cs-collapsed .cs-side__act{padding:0 9px;gap:4px}
    .cs.cs-collapsed .cs-act{justify-content:center;padding:0;width:44px;height:44px;margin:0 auto}
    /* «Новый чат» — единственное главное действие, поэтому у него заливка. */
    .cs.cs-collapsed .cs-act--primary{background:var(--accent-fill);color:var(--on-accent);border:0}
    .cs.cs-collapsed .cs-act--primary:hover{filter:brightness(1.06)}
    .cs.cs-collapsed .cs-sec,.cs.cs-collapsed .cs-proj,.cs.cs-collapsed .cs-convlist,.cs.cs-collapsed .cs-search{display:none}
    .cs.cs-collapsed .cs-scroll{flex:0 0 auto;padding:0}
    /* В свёрнутом рейле профиль показывает аватар, а колокольчик встаёт под ним:
       иначе число непрочитанных исчезало с экрана вовсе (класс cs-hide-rail его
       прятал), и о новом сообщении поддержки узнать было негде. */
    .cs.cs-collapsed .cs-profile{flex-direction:column;justify-content:center;gap:6px;padding:11px 0;margin-top:auto}
    /* Кнопка выхода из полосы — такая же крупная, как остальные значки: она в
       ней единственная и должна быть заметнее всех, а была самой мелкой. */
    .cs.cs-collapsed .cs-collapse{width:44px;height:44px}
    /* Знак в полосе — это ссылка на главную. В развёрнутом виде она рядом с
       названием и понятна, а в полосе это самый заметный элемент, и нажатие
       уводило из приложения. В полосе знак не нажимается. */
    .cs.cs-collapsed .cs-brand{pointer-events:none}
    /* Подпись рядом со значком — на наведение. В рейле подписи скрыты, и без
       неё человек не знает, что делает кнопка, пока не нажмёт. */
    .cs.cs-collapsed .cs-act,.cs.cs-collapsed .cs-collapse{position:relative}
    .cs.cs-collapsed .cs-act::after,
    .cs.cs-collapsed .cs-collapse::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;
        transform:translateY(-50%);white-space:nowrap;padding:5px 9px;border-radius:var(--radius-sm);
        background:var(--surface-3);color:var(--text);font-size:12px;font-weight:500;
        box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .12s;z-index:80}
    .cs.cs-collapsed .cs-act:hover::after,.cs.cs-collapsed .cs-act:focus-visible::after,
    .cs.cs-collapsed .cs-collapse:hover::after,.cs.cs-collapsed .cs-collapse:focus-visible::after{opacity:1}

    .cs-side{background:var(--bg-1);gap:0}
    .cs-side svg{width:18px;height:18px;flex:0 0 auto;stroke-width:1.6}
    /* Бренд + кнопка-свернуть */
    .cs-side__brand{display:flex;align-items:center;gap:9px;padding:0 12px 6px;min-height:44px}
    .cs-brand{display:flex;align-items:center;gap:10px;color:var(--text);
        font-weight:700;font-size:16px;letter-spacing:-.01em;min-width:0}
    .cs-brand img{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-1)}
    .cs-brand__txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
    .cs-brand__txt small{font-size:10.5px;font-weight:500;color:var(--text-3);letter-spacing:0}
    .cs-brand span,.cs-brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cs-collapse{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--radius-sm);
        border:0;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}
    .cs-collapse:hover{background:var(--neon-soft);color:var(--neon)}
    /* Кнопки-действия (новый чат / поиск) */
    .cs-side__act{display:flex;flex-direction:column;gap:4px;padding:6px 9px 4px}
    .cs-act{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--radius-sm);
        border:1px solid transparent;background:transparent;color:var(--text);font-size:13.5px;font-weight:500;
        cursor:pointer;transition:all .14s;text-align:left}
    .cs-act:hover{background:var(--neon-soft)}
    .cs-act--primary{background:var(--accent-fill);color:var(--on-accent);font-weight:600}
    .cs-act--primary:hover{background:var(--accent-hover)}
    .cs-act--primary:active{background:var(--accent-press)}
    /* Поиск */
    .cs-search{padding:2px 9px 6px}
    .cs-search input{width:100%;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--panel-border);
        background:var(--panel);color:var(--text);font-size:12.5px;outline:none}
    .cs-search input:focus{border-color:var(--neon)}
    .cs-search input::placeholder{color:var(--text-faint)}
    /* Прокручиваемая зона (проекты + чаты) */
    .cs-scroll{flex:1;min-height:0;overflow-y:auto;padding:2px 0 8px;display:flex;flex-direction:column;gap:1px}
    /* Заголовок секции с шевроном */
    .cs-sec{display:flex;align-items:center;gap:4px;padding:9px 13px 4px}
    .cs-sec__h{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:7px;flex:1;min-width:0;border:0;background:transparent;cursor:pointer;
        color:var(--text-faint);padding:0;text-align:left}
    .cs-sec__h svg{width:13px;height:13px;transition:transform .18s}
    .cs-sec.is-closed .cs-sec__h svg{transform:rotate(-90deg)}
    .cs-sec__h:hover{color:var(--text-muted)}
    .cs-sec__add{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r-1);border:0;
        background:transparent;color:var(--text-faint);cursor:pointer;transition:all .14s}
    .cs-sec__add:hover{background:var(--neon-soft);color:var(--neon)}
    .cs-sec__add svg{width:15px;height:15px}
    .cs-sec.is-closed + .cs-proj,.cs-sec.is-closed + .cs-convlist{display:none}
    /* Список проектов */
    .cs-proj{display:flex;flex-direction:column;gap:1px;padding:0 7px}
    .cs-projitem{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:var(--radius-sm);
        border:0;background:transparent;color:var(--text);font-size:13px;cursor:pointer;transition:all .14s;text-align:left}
    .cs-projitem:hover{background:var(--neon-soft)}
    .cs-projitem.is-active{background:var(--neon-soft);color:var(--neon)}
    .cs-projitem svg{width:16px;height:16px;color:var(--neon)}
    .cs-projitem__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cs-projitem__n{flex:0 0 auto;color:var(--text-faint);font-size:11px}
    .cs-proj__empty{padding:4px 11px 6px;font-size:11.5px;color:var(--text-faint)}
    /* Группа чатов по времени */
    .cs-grouplbl{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:11px 13px 3px;
        color:var(--text-faint)}
    .cs-convlist{flex:0 0 auto;padding:0 7px;gap:1px}
    .chat-conv-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:var(--radius-sm);
        cursor:pointer;transition:background .14s;position:relative}
    .chat-conv-item:hover{background:var(--neon-soft)}
    .chat-conv-item.active{background:var(--neon-soft)}
    .chat-conv-item.active .chat-conv-title{color:var(--neon)}
    .chat-conv-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        font-size:13px;color:var(--text)}
    .chat-conv-menu{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:var(--r-1);
        background:transparent;color:var(--text-faint);cursor:pointer;opacity:0;transition:all .14s}
    .chat-conv-item:hover .chat-conv-menu{opacity:1}
    .chat-conv-menu:hover{background:var(--accent-soft);color:var(--text)}
    /* На устройствах без наведения меню обязано быть видно всегда: иначе
       переименовать или удалить чат с телефона невозможно в принципе. */
    @media (hover: none){
        .chat-conv-menu{opacity:.75;width:34px;height:34px}
        .chat-conv-menu svg{width:17px;height:17px}
    }
    .chat-conv-menu svg{width:15px;height:15px}
    .chat-conv-empty{padding:14px 13px;font-size:12px;color:var(--text-faint);line-height:1.5}
    /* Профиль снизу */
    .cs-profile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--panel-border);
        cursor:pointer;transition:background .14s;position:relative}
    .cs-profile:hover{background:var(--neon-soft)}
    .cs-profile__av{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;width:32px;height:32px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;
        background:var(--accent-fill);color:var(--on-accent)}
    .cs-profile__av img{width:100%;height:100%;object-fit:cover}
    .cs-profile__meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
    .cs-profile__meta b{font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cs-profile__meta small{font-size:11px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* Баланс рядом с профилем — просто зелёная цифра. Рамка и подложка вокруг
       неё делали из суммы предупреждение и светились ярче всего в панели. */
    .cs-profile__bal{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--ok);white-space:nowrap;
        background:transparent;border:0;padding:0;border-radius:0}
    /* Поповер профиля */
    .cs-profmenu{position:absolute;left:10px;bottom:62px;width:228px;z-index:70;background:var(--bg-2);
        border:1px solid var(--panel-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px}
    .cs-profmenu a,.cs-profmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--radius-sm);
        border:0;background:transparent;color:var(--text);font-size:13px;cursor:pointer;text-align:left;text-decoration:none}
    .cs-profmenu a:hover,.cs-profmenu button:hover{background:var(--neon-soft)}
    .cs-profmenu svg{width:16px;height:16px;color:var(--text-muted)}
    .cs-profmenu hr{border:0;border-top:1px solid var(--panel-border);margin:5px 4px}

    /* Кнопки-иконки в композере и меню теперь держат SVG (не эмодзи) */
    .cs-roundbtn svg,.cs-send svg,.cs-iconbtn svg{width:20px;height:20px;stroke-width:1.7}
    .cs-send svg{stroke:#fff}
    .cs-menu__item .ic{width:22px;height:22px;display:grid;place-items:center;color:var(--neon);flex:0 0 auto}
    .cs-menu__item .ic svg{width:19px;height:19px}
    .cs-menu__item.is-active{background:var(--neon-soft)}
    .cs-menu__item.is-active .ic{color:var(--neon)}
    .cs-empty svg.cs-empty__hero{width:46px;height:46px;color:var(--neon);opacity:.9}
    .cs-suggest button{display:inline-flex;align-items:center;gap:7px}
    .cs-suggest button svg{width:15px;height:15px;color:var(--neon)}
    .cs-modelbtn__key{display:inline-grid;place-items:center}
    .cs-modelbtn__key svg{width:15px;height:15px;color:var(--neon)}
    .cs-media__meta svg{width:14px;height:14px;vertical-align:-2px}

    /* Микрофон (бесплатный голосовой ввод, Web Speech API) */
    .cs-mic{flex:0 0 auto;width:40px;height:40px;display:none;place-items:center;border-radius:var(--r-2);
        border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;
        transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
    .cs-mic.is-supported{display:grid}
    .cs-mic:hover{background:var(--hover-veil);color:var(--text)}
    .cs-mic svg{width:19px;height:19px}
    .cs-mic.is-recording{border-color:var(--danger);color:var(--danger);background:var(--danger-soft);
        animation:csMicPulse 1.3s ease-in-out infinite}
    @keyframes csMicPulse{0%,100%{box-shadow:0 0 0 0 var(--danger-soft)}50%{box-shadow:0 0 0 6px transparent}}

    /* Размеры знака задаём тут, а вид (подложка, скругление) — один на весь
       продукт, в style.css. Раньше здесь стоял свой фон, и белая подложка,
       без которой почти чёрные знаки тонут на тёмном полотне, не работала. */
    .brand-logo img{object-fit:contain!important}
    .brand-logo--sm{width:20px;height:20px}
    .brand-logo--md{width:26px;height:26px}
    .cs-chooser__co .brand-logo--sm,.cs-chooser__model .brand-logo--sm{width:22px;height:22px}


    @media(max-width:860px){
        .cs.cs-collapsed{grid-template-columns:1fr}
        .cs-profmenu{left:12px;bottom:64px}
    }
    /* ── Узкий экран / Telegram: поле ввода во всю ширину, инструменты компактным рядом ── */
    @media(max-width:600px){
        .cs-input{min-height:44px;max-height:170px;padding:2px 2px}
        .cs-modelbtn{flex:1 1 96px;max-width:none}
        .cs-modelbtn__price{display:none}
        /* Узкий экран: кнопка размышления тоже может ужаться (подпись с многоточием),
           чтобы в одну строку без переноса влезли модель + размышление + микрофон + ↑. */
        .cs-think{padding:0 10px;flex:0 1 auto;min-width:0}
        .cs-think #csThinkLbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
        .cs-roundbtn,.cs-send,.cs-mic{flex:0 0 auto}
        .cs-tools{gap:6px}
        /* Пикер модели на узком экране/в Telegram: на всю ширину, компактные фильтры */
        /* То же на узком экране браузера: лист во всю высоту, а не полка. */
        .cs-modelpop{right:0;left:0;width:auto;top:0;bottom:0;max-height:none;height:auto;
            border-radius:0;border-left:0;border-right:0}
        .cs-modelpop__head{display:flex}
        .cs-modelpop__cats{gap:5px;padding:8px 8px 0}
        .cs-modelpop__cat{padding:5px 9px;font-size:11.5px}
        .cs-modelpop__cat span{display:inline}
        .cs-modeltag{font-size:9px;padding:1px 5px}
        /* Узкий экран: строка модели переносит мету (тип/биллинг/цена) на 2-ю строку,
           чтобы бейджи НЕ налезали за край поповера (фикс «плашка выходит за пределы»). */
        .cs-modelopt{flex-wrap:wrap;row-gap:5px}
        .cs-modelopt__id{flex:1 1 60%}
        .cs-modelopt__price{margin-left:auto}
        .cs-mediagrid{grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:10px;padding:12px}
        .cs-mediaview__hint{display:none}
        .cs-mediaview__head h2{font-size:16px}
        .cs-thread{padding:14px 12px}
        .cs-empty h2{font-size:22px}
    }
    
    /* ─────────────────────────────────────────────────────────────────────────
       Запрет авто-зума. Блок стоит ПОСЛЕДНИМ намеренно.
       Раньше запрет стоял выше, а ниже шло правило для тех же выпадающих
       списков с более мелким шрифтом и той же силой селектора — и перебивало его. В Telegram и на iOS тап по любому
       выпадающему списку в окне настроек тянул страницу: webview увеличивает
       её, когда шрифт поля меньше 16px, и обратно уже не отдаёт.
       Порог 768px, а не 600: Mini App на планшете шире телефона.
       За порядком следит test_no_field_font_defeats_the_zoom_guard.
       ───────────────────────────────────────────────────────────────────────── */
    @media(max-width:768px){
        #csSettings input,#csSettings select,#csSettings textarea,
        .cs-settings select,.cs-settings textarea,.cs-settings .studio-model-input,
        .vid-adv input,.vid-adv select,
        .cs-input,#csModelPopSearch,.cs-modelpop__search input,.cs-search input,
        .form-input,.studio-model-input{font-size:16px}
    }

/* C2: браузер пропускает вёрстку/отрисовку сообщений вне вьюпорта — длинные
   переписки скроллятся без фризов. Для неподдерживающих браузеров — no-op. */
.chat-msg{content-visibility:auto;contain-intrinsic-size:auto 120px}

/* Плашка «часть истории не отправлена модели» (политика обрезки 1.2). */
.chat-trim-note{margin:12px 0;padding:10px 12px;border:1px solid var(--line);
    border-radius:var(--radius-md);background:var(--press-veil);
    color:var(--text-muted);font-size:12.5px;line-height:1.45}