/* ============================================
   НАВИГАЦИЯ — плоская колонка разделов слева
   ============================================

   Один уровень: РАЗДЕЛ (колонка слева). Контекстная строка над контентом остаётся только
   там, где у страницы есть НАСТОЯЩИЕ подвкладки — фильтры трейдов, источник инвентаря,
   источник чатов, — и зеркалит их, а не заводит собственные.

   Колонка position: fixed, а отступ под неё даётся body — так не нужно оборачивать
   <main> на девятнадцати страницах, каждая из которых свёрстана по-своему.

   Никакого backdrop-filter: живое размытие заметно тормозит на машине владельца. */

:root {
    /* 196, а не 178: на 178 «Рассылка ботами» обрезалась многоточием. Восемнадцать
       пикселей дешевле, чем урезанное название раздела. */
    --ms-side-w: 196px;
    --ms-side-w-mini: 54px;
    /* Близко к реальной высоте шапки (20px паддинга сверху и снизу + ряд кнопок). Точное
       значение подставит nav.js после замера; разница в пару пикселей незаметна, а вот
       колонка, стартующая от нуля и потом прыгающая вниз, — очень даже. */
    --ms-header-h: 77px;
    /* ЕДИНАЯ ШИРИНА КОНТЕНТА. Аудит показал четыре разных значения max-width на десяти
       страницах: 1680 у семи, 1280 у двух, 1180 у одной. При переходе между ними контент
       прыгал по ширине, и сайт переставал ощущаться одним целым. 1680 взято потому, что
       это уже большинство и именно столько нужно сеткам предметов. */
    --ms-page-max: 1680px;
}

html.ms-nav-on .container { max-width: var(--ms-page-max); }

/* ===== ОТСТУП ПОД КОЛОНКУ ===== */
/* Класс вешает сам nav.js — до его загрузки страница выглядит как раньше, без пустой
   полосы слева. Если компонент упадёт, отступа просто не появится. */
html.ms-nav-on body { padding-left: var(--ms-side-w); }
html.ms-nav-mini body { padding-left: var(--ms-side-w-mini); }

/* ЛОГОТИП ОСТАЁТСЯ В УГЛУ, НАД КОЛОНКОЙ.
   Сначала шапке добавлялся отступ на ширину колонки — и верхний левый угол оказывался
   пустым, а колонка из-за этого читалась как приставленная сбоку чужая панель, а не как
   часть сайта. Теперь содержимое шапки начинается от края, логотип стоит ровно над
   колонкой и связывает их в одну оболочку.
   Отступ подобран по колонке: 9px её собственных + 10px внутри пункта = подписи разделов
   начинаются там же, где буква «M» в логотипе. */
html.ms-nav-on .header { margin-left: calc(-1 * var(--ms-side-w)); padding-left: 0; }
html.ms-nav-mini .header { margin-left: calc(-1 * var(--ms-side-w-mini)); }
html.ms-nav-on .header__container { padding-left: 19px; }

/* Шапка при сворачивании больше НЕ ДВИГАЕТСЯ — логотип и так стоит у края. Это и убрало
   половину дёрганья: раньше одновременно анимировались отступ страницы, поля шапки и
   ширина колонки, то есть браузер пересчитывал раскладку всей страницы три раза за кадр. */

/* ===== ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ =====

   ЗАДАЧА. У сайтов вроде csboard колонка навигации не моргает при переходах просто потому,
   что они одностраничные приложения: документ не перезагружается, колонка не пересоздаётся.
   Переписывать девятнадцать страниц в SPA ради этого — несоразмерно.

   РЕШЕНИЕ. Браузер умеет то же самое для обычных многостраничных сайтов: при переходе он
   удерживает картинку старой страницы, дожидается новой и сшивает их. Элементы с одинаковым
   view-transition-name он считает ОДНИМ И ТЕМ ЖЕ элементом по обе стороны перехода — то есть
   колонка и шапка не исчезают и не появляются заново, а остаются на месте. Меняется только
   содержимое.

   Это чистое улучшение: где механизм не поддерживается (Firefox на сегодня), переход
   происходит как раньше — резерв места под колонку уже и так не даёт раскладке прыгать. */
@view-transition { navigation: auto; }

/* Колонка и шапка переживают переход как одни и те же элементы, а не гасятся и
   не появляются снова. Имена должны быть уникальны в пределах страницы. */
.ms-side { view-transition-name: ms-sidebar; }
.header { view-transition-name: ms-header; }

/* Содержимое меняется мягкой сменой кадра, а не рывком. Короткая длительность выбрана
   намеренно: переход должен читаться как отклик, а не как анимация, которую ждут. */
::view-transition-old(root) { animation-duration: 90ms; }
::view-transition-new(root) { animation-duration: 90ms; }

/* Закреплённые элементы вообще не анимируем — им нужно просто стоять на месте. */
::view-transition-group(ms-sidebar),
::view-transition-group(ms-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ===== КОЛОНКА РАЗДЕЛОВ ===== */
.ms-side {
    position: fixed;
    left: 0;
    bottom: 0;
    top: var(--ms-header-h);
    width: var(--ms-side-w);
    background: #0D0E0D;
    border-right: 1px solid #1E201E;
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9;
}
html.ms-nav-mini .ms-side { width: var(--ms-side-w-mini); }

/* Разделитель между торговой частью и аккаунтом. Заголовков групп нет намеренно:
   «ОБМЕНЫ» и «МОЁ» капслоком повторяли то, что и так говорит порядок, и занимали
   две строки на каждый экран. */
.ms-side-sep { margin: 10px 4px; border-top: 1px solid #1E201E; }

.ms-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 11px;
    border: none;
    border-radius: 9px;
    background: none;
    color: #8B908B;
    font-family: inherit;
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.ms-item:hover { background: rgba(255, 255, 255, 0.04); color: #E8E8E8; }
.ms-item.on { background: rgba(0, 229, 153, 0.12); color: #00E599; font-weight: 600; }
.ms-item:focus-visible { outline: 2px solid #00E599; outline-offset: -2px; }
.ms-item .ms-ic { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; }
.ms-ic svg { width: 18px; height: 18px; display: block; }
/* Без многоточия (владелец 08.10: обрезанный текст выглядит багом). Ширина колонки
   подобрана так, что все названия встают в строку; если шрифт у человека крупнее,
   название переносится, а не превращается в «Рассылка бо…». */
.ms-item .ms-lbl { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
/* Зелёная точка «на связи» у «Помощи» */
.ms-item { position: relative; }
.ms-item .ms-dot {
    width: 8px;
    height: 8px;
    flex: none;
    margin-left: auto;
    border-radius: 50%;
    background: #00E599;
    box-shadow: 0 0 0 3px rgba(0, 229, 153, 0.14);
}
html.ms-nav-mini .ms-item .ms-dot { position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; }
.ms-item .ms-cnt {
    font-size: 0.66rem;
    font-weight: 700;
    color: #00E599;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* Метка тарифа у раздела, доступного не всем. Не «замок», а подпись: раздела, который
   человеку не положен, в списке просто нет. */
.ms-item .ms-badge {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #00E599;
    border: 1px solid rgba(0, 229, 153, 0.35);
    border-radius: 5px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* Свёрнутое состояние: только иконки. Подписи и счётчики прячутся, но остаются в DOM —
   скринридер продолжает их читать, а всплывающая подсказка берётся из title. */
html.ms-nav-mini .ms-lbl,
html.ms-nav-mini .ms-cnt,
html.ms-nav-mini .ms-badge { display: none; }
html.ms-nav-mini .ms-item { justify-content: center; padding: 8px 0; }
html.ms-nav-mini .ms-side-sep { margin-top: 10px; padding-top: 10px; }

.ms-collapse {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 9px;
    background: none;
    color: #5F645F;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.ms-collapse:hover { background: rgba(255, 255, 255, 0.04); color: #E8E8E8; }
.ms-collapse .ms-ic { width: 17px; height: 17px; flex-shrink: 0; display: grid; place-items: center; }
.ms-collapse .ms-ic svg { width: 15px; height: 15px; }
html.ms-nav-mini .ms-collapse { justify-content: center; padding: 8px 0; }

/* ===== КАРТОЧКА ТАРИФА ВНИЗУ КОЛОНКИ (вариант 1А, 09.10) =====
   Срок, дни и полоска оставшегося срока; за три дня до конца желтеет и даёт «Продлить».
   Прижата к низу колонки над «Свернуть». Разметку собирает frontend/nav.js, renderPlan. */
.ms-plan-box {
    margin-top: auto;
    padding-top: 12px;
    display: grid;
    gap: 8px;
    flex: none;
}
.ms-plan-box[hidden] { display: none; }
/* низ колонки держит карточка; у гостя её нет, и тогда к низу прижимается «Свернуть» */
.ms-plan-box:not([hidden]) ~ .ms-collapse { margin-top: 8px; }
.ms-plan {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #121514;
    border: 1px solid #1E221F;
    color: #E8E8E8;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.ms-plan:hover { background: #161a18; border-color: #2A2F2C; }
.ms-plan:focus-visible { outline: 2px solid #00E599; outline-offset: 2px; }
.ms-plan.on { border-color: rgba(0, 229, 153, 0.35); background: rgba(0, 229, 153, 0.07); }
.ms-plan__ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(0, 229, 153, 0.1);
    color: #00E599;
}
.ms-plan__ico svg { width: 18px; height: 18px; display: block; }
.ms-plan__t { min-width: 0; }
.ms-plan__t b { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.25; }
.ms-plan__t small { display: block; font-size: 0.75rem; color: #8A918D; line-height: 1.3; }
.ms-plan__sub { grid-column: 1 / -1; margin-top: -2px; font-size: 0.75rem; color: #8A918D; line-height: 1.3; }
.ms-plan--warn .ms-plan__t small { color: #FFB800; font-weight: 600; }
.ms-plan__go { color: #5B615D; display: grid; place-items: center; }
.ms-plan__go svg { width: 16px; height: 16px; display: block; }
.ms-plan:hover .ms-plan__go { color: #8A918D; }
.ms-plan__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #232825; overflow: hidden; }
.ms-plan__bar i { display: block; height: 100%; border-radius: 2px; background: #00E599; transition: width 360ms ease; }
/* три дня до конца и меньше */
.ms-plan--warn { border-color: rgba(255, 184, 0, 0.35); background: rgba(255, 184, 0, 0.06); }
.ms-plan--warn:hover { border-color: rgba(255, 184, 0, 0.5); background: rgba(255, 184, 0, 0.09); }
.ms-plan--warn .ms-plan__ico { background: rgba(255, 184, 0, 0.12); color: #FFB800; }
.ms-plan--warn .ms-plan__bar i { background: #FFB800; }
/* тарифа нет */
.ms-plan--none .ms-plan__ico { background: #1C201E; color: #8A918D; }
.ms-plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 10px;
    background: #00E599;
    color: #03140C;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow 140ms ease;
}
.ms-plan-cta:hover { box-shadow: 0 0 16px rgba(0, 229, 153, 0.35); }
.ms-plan-cta:focus-visible { outline: 2px solid #00E599; outline-offset: 2px; }
/* свёрнутая колонка: от карточки остаётся корона, подробности во всплывающей подсказке */
html.ms-nav-mini .ms-plan { grid-template-columns: 34px; justify-content: center; padding: 0; border: 0; background: none; }
html.ms-nav-mini .ms-plan__t,
html.ms-nav-mini .ms-plan__go,
html.ms-nav-mini .ms-plan__sub,
html.ms-nav-mini .ms-plan__bar,
html.ms-nav-mini .ms-plan-cta { display: none; }

/* ===== КОНТЕКСТНАЯ СТРОКА ===== */
.ms-ctx {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #1E201E;
    padding: 9px 0;
    margin: 0 0 20px;
}
.ms-ctx button {
    background: none;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.79rem;
    color: #8B908B;
    padding: 6px 13px;
    border-radius: 8px;
    cursor: pointer;
}
.ms-ctx button:hover { color: #E8E8E8; background: rgba(255, 255, 255, 0.04); }
.ms-ctx button.on {
    color: #00E599;
    background: rgba(0, 229, 153, 0.12);
    border-color: rgba(0, 229, 153, 0.4);
}
.ms-ctx button:focus-visible { outline: 2px solid #00E599; outline-offset: 2px; }
/* display:flex выше перебивает [hidden] из браузерного стиля (класс сильнее тега), и на
   страницах БЕЗ подвкладок пустая строка всё равно занимала 19px и рисовала линию снизу.
   Замерено аудитом: так было на шести страницах из десяти. */
.ms-ctx[hidden] { display: none !important; }

/* Оригинальная полоса вкладок страницы, которую подняли наверх зеркалом. Прячем классом,
   а не удалением: её обработчики продолжают работать, клик по зеркалу нажимает именно её. */
.ms-mirrored { display: none !important; }

/* Старая полоса .nav-tabs скрывается СРАЗУ, вместе с резервом места под колонку, — иначе
   она успевала отрисоваться и исчезнуть, и контент подпрыгивал вверх на её высоту.
   Удаляет её потом всё равно JS, но к тому моменту её уже никто не видел. */
html.ms-nav-on .nav-tabs { display: none !important; }

/* Собственный вертикальный список вкладок на странице аккаунта. Все его пункты теперь
   стоят в общей колонке слева, поэтому второй такой же список рядом не нужен.
   С 09.10 (вариант 1А) уходит и вся вторая колонка: тариф стал карточкой внизу общей
   колонки, «Нужна помощь?» стала зелёной точкой у пункта «Помощь». Если nav.js не
   поднялся, класса ms-nav-on нет, и старая колонка с карточками остаётся запасным путём. */
html.ms-nav-on #accountSidebar { display: none !important; }
html.ms-nav-on .account-sidebar { display: none !important; }

/* ===== ЗАГОЛОВКИ СТРАНИЦ =====

   Заголовок, повторяющий подсвеченный раздел колонки, — это одно и то же слово дважды и
   около шестидесяти пикселей высоты впустую. «P2P Trades» над колонкой, где горит «Трейды»,
   не сообщает ничего нового.

   Аудит показал, что заголовков было четыре разных кегля (28.8 / 25.6 / 24 / 18px), отступ
   над ними гулял от 39 до 242px, а на четырёх страницах их не было вовсе. Приводить этот
   разнобой к общему знаменателю бессмысленно: правильный знаменатель — ноль.

   Остаются заголовки, которые говорят то, чего колонка не знает: «Создать предложение»,
   «Оффер #12», «Сделка», имя игрока в его профиле. */
html.ms-nav-on .page-header,
html.ms-nav-on .supertrade-header,
html.ms-nav-on .tab-head h1 { display: none; }

/* .tab-head держит ещё и индикатор сохранения — прячем только сам заголовок, но убираем
   и отступ, который под него закладывался. */
html.ms-nav-on .tab-head { margin: 0; min-height: 0; }

/* ===== МЕНЮ ПОД АВАТАРКОЙ ===== */
/* Перекрывает узкий .user-menu .dropdown из css/header.css: там было три текстовые строки
   на 160px, здесь — карточка аккаунта с балансом.

   ОТДЕЛЬНО про .show. app.js переключает этот класс по клику (setupUserMenu), но в
   css/header.css правила под него нет вообще — открывалось меню ТОЛЬКО по наведению.
   То есть на телефоне и планшете оно не открывалось никак. Правило ниже это чинит. */
.user-menu .dropdown.show {
    display: flex !important;
    flex-direction: column;
    opacity: 1 !important;
    visibility: visible !important;
}
.ms-um {
    width: 248px !important;
    right: -8px !important;
    padding: 0 !important;
    background: #1A1C1A;
    border: 1px solid #262826;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.ms-um-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 15px 11px;
}
.ms-um-name {
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 650;
    color: #E9EBE9;
    /* длинный ник Steam переносом, без многоточия */
    overflow-wrap: anywhere;
}
.ms-um-tier {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #00E599;
    background: rgba(0, 229, 153, 0.1);
    border: 1px solid rgba(0, 229, 153, 0.3);
    border-radius: 5px;
    padding: 2px 7px;
}

/* Деньги — главная строка меню, поэтому она на своей подложке, а не в общем списке. */
.ms-um-money {
    display: block;
    margin: 0 11px 10px;
    padding: 11px 13px;
    background: #0D0E0D;
    border: 1px solid #242624;
    border-radius: 11px;
    text-decoration: none;
    position: relative;
}
.ms-um-money:hover { border-color: rgba(0, 229, 153, 0.35); }
.ms-um-sum {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #E9EBE9;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.ms-um-eq {
    display: block;
    font-size: 0.7rem;
    color: #8B908B;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.ms-um-topup {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 650;
    color: #05140E;
    background: #00E599;
    border-radius: 8px;
    padding: 6px 11px;
    cursor: pointer;
}
.ms-um-topup:hover { box-shadow: 0 0 16px rgba(0, 229, 153, 0.4); }

.ms-um-sep { border-top: 1px solid #242624; margin: 0 0 5px; }
.ms-um-sep + .ms-um-row { margin-top: 0; }

/* Перебиваем .user-menu .dropdown a/button из header.css: там display:block и свои отступы. */
.ms-um .ms-um-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 15px !important;
    font-size: 0.82rem;
    color: #C9CCC9;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.ms-um .ms-um-row:hover { background: rgba(255, 255, 255, 0.05); color: #E9EBE9; }
.ms-um .ms-um-row:last-child { margin-bottom: 7px; }
.ms-um-ic { width: 16px; height: 16px; display: grid; place-items: center; flex-shrink: 0; color: #8B908B; }
.ms-um-ic svg { width: 16px; height: 16px; }
.ms-um .ms-um-row:hover .ms-um-ic { color: #00E599; }

.ms-um .ms-um-exit { color: #FF6B6B; }
.ms-um .ms-um-exit:hover { background: rgba(255, 51, 85, 0.1); color: #FF3355; }
.ms-um .ms-um-exit .ms-um-ic { color: #FF6B6B; }
.ms-um .ms-um-row.ms-um-exit:hover .ms-um-ic { color: #FF3355; }

/* ===== МОБИЛЬНАЯ КНОПКА И ШТОРКА ===== */
.ms-burger {
    display: none;
    width: 34px;
    height: 34px;
    border: 1px solid #262826;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #E8E8E8;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ms-burger svg { width: 17px; height: 17px; }
.ms-burger:hover { border-color: rgba(0, 229, 153, 0.4); }

.ms-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 8;
}
.ms-backdrop.open { display: block; }

@media (max-width: 900px) {
    /* На узком экране колонка перестаёт занимать место и выезжает поверх контента.
       Отступ у body снимается, иначе на телефоне пропадает треть ширины. */
    html.ms-nav-on body { padding-left: 0; }
    html.ms-nav-on .header,
    html.ms-nav-mini .header { margin-left: 0; padding-left: 0; }

    .ms-burger { display: flex; }

    .ms-side,
    html.ms-nav-mini .ms-side {
        width: 250px;
        top: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        /* выше липких полос страниц: плашка раздела настроек (z 20) и нижние вкладки (z 30)
           ложились поверх открытой шторки и закрывали пункты (09.10) */
        z-index: 60;
        box-shadow: 0 0 48px rgba(0, 0, 0, 0.7);
    }
    .ms-side.open { transform: translateX(0); }
    .ms-backdrop { z-index: 59; }

    /* В шторке колонка всегда развёрнута, даже если на десктопе была свёрнута. */
    html.ms-nav-mini .ms-lbl,
    html.ms-nav-mini .ms-cnt,
    html.ms-nav-mini .ms-badge { display: revert; }
    html.ms-nav-mini .ms-item { justify-content: flex-start; padding: 8px 10px; }
    .ms-collapse { display: none; }
    /* и карточка тарифа в шторке целиком, даже если на компьютере колонка свёрнута */
    html.ms-nav-mini .ms-plan { grid-template-columns: 34px minmax(0, 1fr) 16px; justify-content: stretch; padding: 10px; border: 1px solid #1E221F; background: #121514; }
    html.ms-nav-mini .ms-plan__t,
    html.ms-nav-mini .ms-plan__go,
    html.ms-nav-mini .ms-plan__sub,
    html.ms-nav-mini .ms-plan__bar { display: revert; }
    html.ms-nav-mini .ms-plan-cta { display: flex; }
    html.ms-nav-mini .ms-item .ms-dot { position: static; width: 8px; height: 8px; }
}


/* ===== ШТОРКА НА ТЕЛЕФОНЕ: «ОТОБРАЖЕНИЕ» =====
   Цены, валюта и язык строками (frontend/nav.js, renderDisp). Только до 600 px: шире кнопки
   умещаются в шапке квадратами, и второй вход в то же место был бы повтором. */
.ms-disp { display: none; }
@media (max-width: 600px) {
    .ms-disp:not([hidden]) {
        display: grid;
        gap: 2px;
        flex: none;
        margin-top: 12px;
        padding: 6px;
        border-radius: 14px;
        background: #111413;
        border: 1px solid #1E201E;
    }
}
.ms-disp__h {
    padding: 6px 8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A918D;
}
.ms-disp__row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 14px;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    box-sizing: border-box;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #C9CFCB;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.ms-disp__row:hover,
.ms-disp__row:active { background: rgba(255, 255, 255, 0.05); }
.ms-disp__row:focus-visible { outline: 2px solid #00E599; outline-offset: -2px; }
.ms-disp__row b { color: #E8E8E8; font-weight: 600; white-space: nowrap; }
.ms-disp__row svg { width: 14px; height: 14px; color: #5B615D; }
.ms-disp__row .hdc__cur { width: 30px; }
.ms-disp__row .hdc__emo { width: 26px; height: 26px; justify-self: center; }

/* Системная настройка «меньше движения» — выключаем и выезд шторки. */
@media (prefers-reduced-motion: reduce) {
    .ms-side { transition: none !important; }
}