/*
 * app-shell.css — оболочка кабинета: rail-навигация, топбар, раскладка контента
 * (templates/app/shell.php, parts/app-sidebar.php, parts/app-topbar.php).
 *
 * ВАЖНО ДЛЯ ПОДКЛЮЧЕНИЯ (см. отчёт агента): в отличие от остальных файлов assets/css/pages/*,
 * этот нужен НА КАЖДОМ экране /app/*, а не только на одном am_view — inc/class-am-assets.php
 * сейчас подключает по одному файлу на page-key (PAGE_STYLES), для рельса/топбара нужен
 * отдельный безусловный enqueue (по образцу того, как там же безусловно, если файл существует,
 * подключается assets/css/app.css в enqueue_app()).
 *
 * Только var(--am-*) — свои цвета/радиусы/тени здесь не заводятся.
 */

/* =========================================================================================
 * 0. [hidden] обязан реально скрывать элемент на КАЖДОМ экране кабинета.
 *
 *    components.css задаёт `.am-btn { display: inline-flex }` (и другие компоненты — свой
 *    display) БЕЗ оговорки на [hidden]. Специфичность класса и атрибутного UA-правила
 *    [hidden]{display:none} формально равна, но это не имеет значения: авторский normal-стиль
 *    в каскаде побеждает браузерный normal-стиль независимо от специфичности — поэтому
 *    `.am-btn[hidden]` всё равно рисуется как flex. Фактически измерено на стенде: кнопка
 *    «Пополнить баланс» (data-tool-run-topup, hidden=true при balance>=price) имела
 *    computedDisplay=flex и реальный bounding box — ровно находка 7 STAND_FINDINGS.md.
 *    Тот же класс бага, что drawer в находках 1/8 (родное состояние элемента перебито
 *    классом темы). Это правило подключено на КАЖДОМ /app/* экране (enqueue_app(), см.
 *    class-am-assets.php) и после components.css в цепочке зависимостей — значит побеждает
 *    там, где что-то в кабинете переключает .hidden/[hidden] на любом компоненте с display.
 * =======================================================================================*/

[hidden] {
    display: none !important;
}

/* =========================================================================================
 * 1. Раскладка: рельс + тело (топбар + контент)
 * =======================================================================================*/

.am-shell {
    display: flex;
    align-items: flex-start;
}

.am-shell--guest {
    display: block;
}

.am-shell__body {
    flex: 1 1 auto;
    min-width: 0; /* иначе широкие таблицы/чипы внутри распирают колонку за экран */
}

.am-shell__content {
    max-width: var(--am-container);
    padding: 0 var(--am-s-8) var(--am-s-12);
}

@media (max-width: 1180px) {
    .am-shell__content {
        padding-inline: var(--am-s-5);
    }
}

/* =========================================================================================
 * 2. Rail-навигация (≥1181px) — редизайн 2026-07-28 (REDESIGN_2026_07_28/03-NAVIGATION.md).
 *
 *    Светлая, минималистичная навигация — прямой референс кабинета polza.ai (задание потока
 *    «навигация»: «СВЕТЛАЯ тема, не тёмная», один акцентный цвет var(--am-link), без декора
 *    и без градиентов). Заменяет прежний var(--am-grad-rail) на плоскую светлую поверхность.
 *
 *    Два состояния через [data-collapsed] на .am-app-sidebar — parts/app-sidebar.php ПО
 *    УМОЛЧАНИЮ НЕ печатает этот атрибут вовсе: без него работает чистый CSS-автодефолт по
 *    ширине (§2a ниже), атрибут появляется только из JS (ручной клик/localStorage) и тогда
 *    всегда сильнее автодефолта — 03-NAVIGATION.md §5.2.
 * =======================================================================================*/

.am-app-sidebar {
    position: sticky;
    top: var(--am-s-6);
    flex-shrink: 0;
    width: var(--am-rail-w-expanded);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: var(--am-s-6) 0 var(--am-s-6) var(--am-s-5);
    padding: var(--am-s-4) var(--am-s-3);
    /*
     * overflow ДОЛЖЕН оставаться visible: подписи-подсказки свёрнутого состояния и результаты
     * поиска всплывают шире самого рельса. Высота рельса не ограничена искусственно (нет
     * max-height/overflow-y) — sticky-элемент выше одного экрана просто продолжает страницу
     * дальше вниз при скролле, это штатное поведение sticky, а не баг верстки.
     */
    overflow: visible;
    background: var(--am-surface);
    border: 1px solid var(--am-border-soft);
    border-radius: var(--am-r-2xl);
    box-shadow: var(--am-sh-card);
    z-index: var(--am-z-rail);
    transition: width var(--am-dur-base) var(--am-ease-out);
}

/* 2a. Свёрнутое состояние — автодефолт на 1181–1359px без ручного выбора (:not([data-collapsed])),
 *     ИЛИ явный [data-collapsed="true"] на любой ширине. Явный выбор всегда сильнее автодефолта:
 *     на 1181–1359px [data-collapsed="false"] форсирует развёрнутый вид поверх автодефолта. */
@media (max-width: 1359px) {
    .am-app-sidebar:not([data-collapsed]) {
        width: var(--am-rail-w);
        align-items: center;
    }

    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__label,
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__group-label,
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__sublist,
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__recent,
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__storage {
        display: none;
    }

    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__link {
        justify-content: center;
        width: 44px;
        height: 44px;
        padding-inline: 0;
        margin-inline: auto;
    }

    /* Поиск не прячется целиком — сворачивается до той же 44px иконки-кнопки, что и остальные
     * пункты (§4.2 03-NAVIGATION.md): клик по ней (parts/app-sidebar.php, инлайн-скрипт)
     * разворачивает рельс и ставит фокус в поле — саму строку ввода до этого момента видеть незачем. */
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__search {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        margin-inline: auto;
        border-color: transparent;
        background: transparent;
    }

    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__search:hover {
        background: var(--am-surface-muted);
    }

    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__search-input,
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__search-results,
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__search-empty {
        display: none;
    }

    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__tooltip {
        display: block;
    }
}

.am-app-sidebar[data-collapsed="true"] {
    width: var(--am-rail-w);
    align-items: center;
}

.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__label,
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__group-label,
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__sublist,
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__recent,
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__storage {
    display: none;
}

.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__link {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding-inline: 0;
    margin-inline: auto;
}

/* Поиск сворачивается до иконки-кнопки, а не прячется целиком — см. докблок автодефолта выше. */
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__search {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    margin-inline: auto;
    border-color: transparent;
    background: transparent;
}

.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__search:hover {
    background: var(--am-surface-muted);
}

.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__search-input,
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__search-results,
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__search-empty {
    display: none;
}

.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__tooltip {
    display: block;
}

.am-app-sidebar[data-collapsed="false"] {
    width: var(--am-rail-w-expanded);
    align-items: stretch;
}

/* Стрелка тумблера смотрит влево «свернуть» по умолчанию; в свёрнутом состоянии — «развернуть». */
.am-app-sidebar[data-collapsed="true"] .am-app-sidebar__collapse-toggle svg {
    transform: scaleX(-1);
}

@media (max-width: 1359px) {
    .am-app-sidebar:not([data-collapsed]) .am-app-sidebar__collapse-toggle svg {
        transform: scaleX(-1);
    }
}

/* =========================================================================================
 * 2b. Шапка рельса — лого + тумблер сворачивания.
 * =======================================================================================*/

.am-app-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--am-s-2);
    padding: 0 var(--am-s-1) var(--am-s-2);
}

.am-app-sidebar__logo {
    display: inline-flex;
    flex-shrink: 0;
    padding: var(--am-s-2);
    border-radius: var(--am-r-md);
}

.am-app-sidebar__collapse-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--am-r-sm);
    background: transparent;
    color: var(--am-text-subtle);
    cursor: pointer;
    transition: background-color var(--am-dur-base) var(--am-ease-out),
                color var(--am-dur-base) var(--am-ease-out);
}

.am-app-sidebar__collapse-toggle:hover {
    background: var(--am-surface-muted);
    color: var(--am-text);
}

.am-app-sidebar__collapse-toggle svg {
    transition: transform var(--am-dur-base) var(--am-ease-out);
}

/* =========================================================================================
 * 2c. Поиск — единственная точка входа с любого экрана кабинета (03-NAVIGATION.md §5.5).
 *     Результаты — position:fixed (не absolute внутри рельса): рельс использует overflow:visible
 *     намеренно ради тултипов, fixed не зависит от этого и не обрезается им (§7.4 доки).
 *     Координаты top/left/width результатов проставляет JS (assets/js/app.js) при показе —
 *     чистым CSS без известной ширины триггера якорь не построить.
 * =======================================================================================*/

.am-app-sidebar__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--am-s-2);
    margin: var(--am-s-1) 0 var(--am-s-3);
    padding: var(--am-s-2) var(--am-s-3);
    border-radius: var(--am-r-md);
    border: 1px solid var(--am-border-soft);
    background: var(--am-surface-sunken);
    color: var(--am-text-subtle);
    transition: border-color var(--am-dur-base) var(--am-ease-out);
}

.am-app-sidebar__search:focus-within {
    border-color: var(--am-link);
}

.am-app-sidebar__search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--am-text);
    font-family: var(--am-font);
    font-size: var(--am-fs-sm);
}

.am-app-sidebar__search-input::placeholder {
    color: var(--am-text-subtle);
}

.am-app-sidebar__search-input:focus {
    outline: none;
}

.am-app-sidebar__search-results {
    position: fixed;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--am-s-2);
    border-radius: var(--am-r-lg);
    border: 1px solid var(--am-border-soft);
    background: var(--am-surface);
    box-shadow: var(--am-sh-dropdown);
    z-index: var(--am-z-dropdown);
}

.am-app-sidebar__search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--am-s-3);
    padding: var(--am-s-2) var(--am-s-3);
    border-radius: var(--am-r-sm);
    color: var(--am-text);
    font-size: var(--am-fs-sm);
}

.am-app-sidebar__search-item:hover,
.am-app-sidebar__search-item.is-active {
    background: var(--am-surface-muted);
}

.am-app-sidebar__search-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--am-fw-medium);
}

.am-app-sidebar__search-item-meta {
    flex-shrink: 0;
    font-family: var(--am-font-mono);
    font-size: var(--am-fs-2xs);
    color: var(--am-text-subtle);
}

.am-app-sidebar__search-item--all {
    justify-content: center;
    color: var(--am-link);
    font-weight: var(--am-fw-semi);
}

.am-app-sidebar__search-empty {
    position: fixed;
    padding: var(--am-s-3);
    border-radius: var(--am-r-lg);
    border: 1px solid var(--am-border-soft);
    background: var(--am-surface);
    box-shadow: var(--am-sh-dropdown);
    color: var(--am-text-muted);
    font-size: var(--am-fs-xs);
    z-index: var(--am-z-dropdown);
}

/* Внутри мобильного дровера те же классы поиска рендерятся инлайн под полем, а не всплывающим
 * попапом — панель и так узкая и уже скроллится сама, второй плавающий слой поверх неё лишний. */
.am-app-mobile-nav .am-app-sidebar__search-results,
.am-app-mobile-nav .am-app-sidebar__search-empty {
    position: static;
    margin-top: var(--am-s-2);
    box-shadow: none;
}

/* =========================================================================================
 * 2d. Списки, пункты, состояние «выбрано».
 * =======================================================================================*/

.am-app-sidebar__group-label {
    padding: var(--am-s-3) var(--am-s-2) var(--am-s-1);
    font-size: var(--am-fs-eyebrow);
    font-weight: var(--am-fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--am-ls-eyebrow);
    color: var(--am-text-subtle);
}

.am-app-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.am-app-sidebar__divider {
    margin: var(--am-s-2) var(--am-s-2) 0;
    height: 1px;
    background: var(--am-border-soft);
}

.am-app-sidebar__spacer {
    flex: 1;
}

.am-app-sidebar__item {
    position: relative;
    width: 100%;
}

.am-app-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--am-s-3);
    width: 100%;
    min-height: 40px;
    padding: var(--am-s-2) var(--am-s-3);
    border-radius: var(--am-r-md);
    color: var(--am-text-muted);
    background: transparent;
    font-size: var(--am-fs-sm);
    font-weight: var(--am-fw-medium);
    transition: background-color var(--am-dur-base) var(--am-ease-out),
                color var(--am-dur-base) var(--am-ease-out);
}

.am-app-sidebar__link .am-app-sidebar__icon {
    flex-shrink: 0;
    color: inherit;
}

.am-app-sidebar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.am-app-sidebar__link:hover {
    background: var(--am-surface-muted);
    color: var(--am-text);
}

/* Активный пункт — залитая светло-серая плашка (референс polza.ai), а не заливка акцентом:
 * акцент (var(--am-link)) остаётся только на иконке — единственный цвет-акцент, не декор. */
.am-app-sidebar__link[aria-current="page"] {
    background: var(--am-surface-muted);
    color: var(--am-text);
    font-weight: var(--am-fw-bold);
}

.am-app-sidebar__link[aria-current="page"] .am-app-sidebar__icon {
    color: var(--am-link);
}

/* «Инструменты» — мягкая подсветка секции на любом экране .../tools/..., не только на точном
 * совпадении URL (03-NAVIGATION.md §5.3): полный акцент зарезервирован под aria-current. */
.am-app-sidebar__item--parent.is-section-active > .am-app-sidebar__link:not([aria-current]) {
    background: var(--am-surface-sunken);
    color: var(--am-text);
}

.am-app-sidebar__link--danger {
    color: var(--am-state-attention-fg);
}

.am-app-sidebar__link--danger:hover {
    background: var(--am-state-attention-bg);
    color: var(--am-state-attention-fg);
}

/* Тултип-подпись по hover/focus в свёрнутом состоянии (DESIGN_SYSTEM.md §2.9) — floating-попап
 * остаётся тёмным независимо от светлой поверхности рельса (тот же принцип, что и у дропдаунов/
 * модалок, DESIGN_SYSTEM.md §1.6). Только opacity/transform — под global reduced-motion
 * транзишн схлопывается до 1мс, отдельной ветки не нужно. */
.am-app-sidebar__tooltip {
    display: none;
    position: absolute;
    left: calc(100% + var(--am-s-2));
    top: 50%;
    transform: translate(-8px, -50%);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 7px var(--am-s-3);
    border-radius: var(--am-r-md);
    background: var(--am-navy-700);
    border: 1px solid var(--am-border-dark);
    color: var(--am-white);
    font-size: var(--am-fs-2xs);
    font-weight: var(--am-fw-semi);
    box-shadow: var(--am-sh-popover);
    z-index: var(--am-z-tooltip);
    transition: opacity var(--am-dur-fast) var(--am-ease-out),
                transform var(--am-dur-fast) var(--am-ease-out);
}

.am-app-sidebar__item:hover .am-app-sidebar__tooltip,
.am-app-sidebar__link:focus-visible + .am-app-sidebar__tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

/* =========================================================================================
 * 2e. Подсписок направлений под «Инструменты» и недавние задачи под «Задачи» — только в
 *     развёрнутом состоянии рельса (§2a прячет их в свёрнутом) и в мобильном дровере, где
 *     свёрнутого состояния не существует вовсе.
 * =======================================================================================*/

.am-app-sidebar__sublist,
.am-app-sidebar__recent {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 var(--am-s-2) 30px; /* выравнивание под текст родителя: иконка 20px + gap 12px */
}

.am-app-sidebar__subitem {
    width: 100%;
}

.am-app-sidebar__sublink {
    display: flex;
    align-items: center;
    gap: var(--am-s-2);
    padding: 6px var(--am-s-2);
    border-radius: var(--am-r-sm);
    color: var(--am-text-muted);
    font-size: var(--am-fs-xs);
    transition: background-color var(--am-dur-base) var(--am-ease-out),
                color var(--am-dur-base) var(--am-ease-out);
}

.am-app-sidebar__sublink:hover {
    background: var(--am-surface-muted);
    color: var(--am-text);
}

.am-app-sidebar__sublink[aria-current="page"] {
    background: var(--am-surface-muted);
    color: var(--am-text);
    font-weight: var(--am-fw-semi);
}

.am-app-sidebar__sublink[aria-current="page"] .am-app-sidebar__icon {
    color: var(--am-link);
}

.am-app-sidebar__count {
    margin-left: auto;
    font-family: var(--am-font-mono);
    font-size: var(--am-fs-2xs);
    color: var(--am-text-subtle);
}

.am-app-sidebar__recent-item {
    display: flex;
    align-items: center;
    gap: var(--am-s-2);
    padding: 5px var(--am-s-2);
    border-radius: var(--am-r-sm);
    color: var(--am-text-subtle);
    transition: background-color var(--am-dur-base) var(--am-ease-out),
                color var(--am-dur-base) var(--am-ease-out);
}

.am-app-sidebar__recent-item:hover {
    background: var(--am-surface-muted);
    color: var(--am-text);
}

/* Статус не только цветом — точка сопровождается текстом в title на самом элементе (родитель
 * этого span). PRODUCT.md, Accessibility: «состояние не передаётся одним цветом». */
.am-app-sidebar__recent-status {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--am-r-full);
    background: var(--am-state-neutral-fg);
}

.am-app-sidebar__recent-status.is-done     { background: var(--am-state-success-fg); }
.am-app-sidebar__recent-status.is-progress { background: var(--am-state-progress-fg); }
.am-app-sidebar__recent-status.is-failed   { background: var(--am-state-attention-fg); }

.am-app-sidebar__recent-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--am-fs-xs);
}

/* =========================================================================================
 * 2f. Индикатор занятого хранилища — обязательный паттерн 8 эталона polza.ai
 *     (docs/spec/REDESIGN_2026_07_29/polza-reference.md: «13.0 КБ / 5.0 МБ» тонким прогресс-баром
 *     в самом низу сайдбара). Значения считает parts/app-sidebar.php (AM_REST_App::storage_usage()).
 *     Знаменателя/бара может не быть (лимита в коде нет, см. докблок PHP) — тогда рендерится
 *     только .am-app-sidebar__storage-label, второй элемент в DOM просто отсутствует, отдельная
 *     CSS-ветка на этот случай не нужна. В свёрнутом рельсе весь блок скрыт правилами §2a/§2d.
 * =======================================================================================*/

.am-app-sidebar__storage {
    padding: var(--am-s-3) var(--am-s-2) var(--am-s-1);
}

.am-app-sidebar__storage-label {
    display: block;
    font-family: var(--am-font-mono);
    font-size: var(--am-fs-2xs);
    color: var(--am-text-subtle);
}

.am-app-sidebar__storage-bar {
    display: block;
    margin-top: var(--am-s-2);
    height: 4px;
    border-radius: var(--am-r-full);
    background: var(--am-surface-sunken);
    overflow: hidden;
}

.am-app-sidebar__storage-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--am-link);
}

@media (max-width: 1180px) {
    .am-app-sidebar {
        display: none;
    }
}

/* =========================================================================================
 * 3. Топбар кабинета (parts/app-topbar.php)
 * =======================================================================================*/

.am-app-topbar {
    display: flex;
    align-items: center;
    gap: var(--am-s-4);
    padding: var(--am-s-5) var(--am-s-8) 0;
}

@media (max-width: 1180px) {
    .am-app-topbar {
        padding-inline: var(--am-s-5);
    }
}

.am-app-topbar__menu {
    display: none;
}

@media (max-width: 1180px) {
    .am-app-topbar__menu {
        display: inline-flex;
    }
}

.am-app-topbar__balance {
    display: flex;
    align-items: baseline;
    gap: var(--am-s-2);
    margin-right: auto;
}

.am-app-topbar__balance-label {
    font-size: var(--am-fs-2xs);
    color: var(--am-text-subtle);
}

.am-app-topbar__balance-value {
    font-weight: var(--am-fw-bold);
    color: var(--am-text);
}

/* =========================================================================================
 * 4. Мобильное меню кабинета — дровер на <dialog> (≤1180px, когда рельс скрыт)
 * =======================================================================================*/

/*
 * ВАЖНО: display задаётся ТОЛЬКО для открытого диалога.
 * У <dialog> без атрибута open браузер сам ставит display:none, но авторское правило
 * `display:flex` на базовом селекторе это перебивает — и закрытое меню висит поверх кабинета
 * второй панелью слева, перехватывая клики. Ровно этот баг уже ловили на публичном дровере;
 * здесь он остался в собственном меню кабинета и был виден на каждом экране /app/.
 */
/* Светлая тема — тот же принцип, что и у рельса (§2): единая поверхность на десктопе и мобильном,
 * а не «тёмный дровер поверх светлого кабинета» (product.md: «одинаковый визуальный словарь»). */
dialog.am-app-mobile-nav-dialog {
    border: 0;
    padding: 0;
    position: fixed;
    inset: 0 auto 0 0;
    margin: 0;
    width: min(320px, 88vw);
    height: 100%;
    max-height: none;
    background: var(--am-surface);
    color: var(--am-text);
}

dialog.am-app-mobile-nav-dialog[open] {
    display: flex;
    flex-direction: column;
}

dialog.am-app-mobile-nav-dialog::backdrop {
    background: color-mix(in srgb, var(--am-navy-900) 55%, transparent);
}

.am-app-mobile-nav-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--am-s-4) var(--am-s-5);
    border-bottom: 1px solid var(--am-border-soft);
    flex-shrink: 0;
}

.am-app-mobile-nav-dialog__title {
    font-weight: var(--am-fw-bold);
    color: var(--am-text);
}

.am-app-mobile-nav-dialog .am-btn--icon {
    color: var(--am-text-muted);
}

.am-app-mobile-nav-dialog .am-btn--icon:hover {
    background: var(--am-surface-muted);
    color: var(--am-text);
}

.am-app-mobile-nav {
    padding: var(--am-s-4) var(--am-s-3);
    overflow-y: auto;
    flex: 1;
}

.am-app-mobile-nav__sep {
    border: 0;
    border-top: 1px solid var(--am-border-soft);
    margin: var(--am-s-3) var(--am-s-2);
}

.am-app-mobile-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.am-app-mobile-nav__link {
    display: flex;
    align-items: center;
    gap: var(--am-s-3);
    padding: var(--am-s-3);
    border-radius: var(--am-r-md);
    color: var(--am-text);
    font-weight: var(--am-fw-semi);
}

.am-app-mobile-nav__link .am-app-sidebar__icon {
    flex-shrink: 0;
}

.am-app-mobile-nav__link:hover,
.am-app-mobile-nav__link:focus-visible {
    background: var(--am-surface-muted);
}

.am-app-mobile-nav__link.is-active {
    background: var(--am-surface-muted);
    font-weight: var(--am-fw-bold);
}

.am-app-mobile-nav__link.is-active .am-app-sidebar__icon {
    color: var(--am-link);
}

.am-app-mobile-nav__link--danger {
    margin-top: var(--am-s-3);
    color: var(--am-state-attention-fg);
}

.am-app-mobile-nav__link--danger:hover {
    background: var(--am-state-attention-bg);
    color: var(--am-state-attention-fg);
}

/* Дровер — всегда «развёрнутое» состояние по смыслу (03-NAVIGATION.md §4.3): подсписки/поиск/
 * история переиспользуют классы рельса без [data-collapsed], поэтому рендерятся как обычно,
 * без единой лишней строки CSS — только чуть более просторные отступы под touch-таргет. */
.am-app-mobile-nav .am-app-sidebar__sublist,
.am-app-mobile-nav .am-app-sidebar__recent {
    padding-left: 34px;
}

.am-app-mobile-nav .am-app-sidebar__sublink,
.am-app-mobile-nav .am-app-sidebar__recent-item {
    padding-block: var(--am-s-2);
}

@media (prefers-reduced-motion: reduce) {
    .am-app-sidebar__tooltip {
        transition: none;
    }
}