/* ==========================================================================
   Lobby — скин v2 «Inside 2026» поверх Element Web 1.12.32 (наш форк).

   Источник правды по виду — docs/design/lobby/lobby-mockup-v1.html,
   требования — docs/design/lobby/LOBBY_REDESIGN_TZ.md. Файл вставляется в
   <head> через sub_filter (element/nginx-inside.conf.template); статика
   (шрифт, обои, значки) — element/static/ → /inside-static/.

   Порядок файла
   -------------
     v2 · Шрифт                    Onest локально, табличные цифры
     v2 · Токены                   --lobby-* светлые, затем тёмные
     v2 · Отображение в Compound   --cpd-* из --lobby-* (одно место на обе темы)
     v2 · Основа                   шрифт страницы, фокус, выделение мышью
     v2 · Каркас окна              карточки, колонки, правая панель поверх чата
     v2 · Рейл папок
     v2 · Список чатов
     v2 · Аватары
     v2 · Обои
     v2 · Каркас загрузки          заглушка до старта приложения (inside-defaults.js)
     v2 · Лента и пузыри           ┐
     v2 · Обсуждения               │ разделы итерации 2: у каждого свой
     v2 · Шапка чата               │ владелец, чужие разделы не править
     v2 · Строка ввода             │
     v2 · Правая панель            │
     v2 · Настройки                │
     v2 · Меню, диалоги, тосты     ┘
     v2 · Узкий экран
     ЛОМКИЕ СЕЛЕКТОРЫ              всё на хешированных классах CSS-модулей
                                   ([class*="_x_"]), с подразделами по тем же
                                   владельцам

   Правила
   -------
   * Цвета — только через токены --lobby-*. Новых hex в компонентах нет.
   * Красный (--lobby-signal) — только в шести местах п. 3 ТЗ: непрочитанное,
     «Отправить» с текстом, полоса цитаты/ответа/превью ссылки, опасные
     действия, выбранная плитка выбора, текущий этап лида.
   * Тёмная тема — класс cpd-theme-dark, который Element ставит на <html>.
     Утроенный класс (.cpd-theme-dark.cpd-theme-dark.cpd-theme-dark) — чтобы
     перебить (0,2,0) Compound, тема которого грузится динамически и может
     оказаться позже нашего файла.
   * mx_* стабильны между версиями; хешированные классы берём только через
     [class*="_имя_"] и только в блоке «ломкие селекторы» в конце.
   * Удвоенный класс (.mx_EventTile.mx_EventTile) — перебить специфичность
     темы Element, а не «на всякий случай».

   После обновления Element: node scripts/shoot.mjs --local --theme both и
   сверить с макетом; первым делом проверить блок «ломкие селекторы».
   ========================================================================== */


/* ==== v2 · Шрифт */

/* Onest variable (OFL, element/static/fonts/OFL-Onest.txt), файлы из
   @fontsource-variable/onest 5.3.1. Три подмножества — браузер качает только
   нужные по unicode-range. Никаких запросов к Google Fonts. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inside-static/fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations"),
    url("/inside-static/fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inside-static/fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations"),
    url("/inside-static/fonts/onest-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inside-static/fonts/onest-latin-wght-normal.woff2") format("woff2-variations"),
    url("/inside-static/fonts/onest-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==== v2 · Токены */

/* Значения — таблица п. 3 ТЗ и токены макета (.app / .app.dark). Здесь —
   общее для обеих тем и светлая тема; ниже — переопределения тёмной. */
:root,
.cpd-theme-light.cpd-theme-light.cpd-theme-light {
  color-scheme: light;

  /* Поверхности */
  --lobby-window: #e6e6e4;          /* фон окна за панелями */
  --lobby-panel: #ffffff;           /* список, правая панель, диалоги */
  --lobby-fill: #f4f4f3;            /* вторичная заливка: поиск, группы, плитки */
  --lobby-hover: #f1f1f0;           /* наведение на строку */
  --lobby-line: #ececeb;            /* разделители */
  --lobby-line-2: #e2e2e0;          /* рамки меток, выключенный тумблер */

  /* Текст */
  --lobby-ink: #1e1e1e;
  --lobby-ink-2: #4a4a4a;
  --lobby-muted: #7a7a7a;           /* время, превью, подписи */
  --lobby-faint: #a3a3a3;           /* ⌘K, неактивные табы */

  /* Акцент и выбор */
  --lobby-accent: #1e1e1e;          /* кнопки, тумблеры, primary */
  --lobby-accent-hover: #333333;
  --lobby-accent-pressed: #0a0a0a;
  --lobby-accent-ink: #ffffff;
  --lobby-sel: #1e1e1e;             /* выбранная строка / пункт настроек */
  --lobby-sel-ink: #ffffff;

  /* Сигнал — красный, только шесть мест (см. шапку файла) */
  --lobby-signal: #c8102e;
  --lobby-signal-hover: #a80d26;
  --lobby-signal-ink: #ffffff;
  --lobby-mute-badge: #b5b5b3;      /* счётчик заглушённого чата */

  /* Рейл */
  --lobby-rail: #141414;
  --lobby-rail-active: #262626;
  --lobby-rail-ink: #8e8e8e;
  --lobby-rail-ink-hover: #d8d8d8;
  --lobby-rail-ink-on: #ffffff;
  --lobby-rail-badge: #e2483a;
  --lobby-rail-badge-muted: #555555;

  /* Обои (п. 7): только у ленты и панели обсуждения */
  --lobby-wall: #ececec;
  --lobby-wall-img: url("/inside-static/pattern-light.svg");

  /* Стекло: шапка, строка ввода, круглые кнопки над обоями */
  --lobby-glass: rgba(255, 255, 255, 0.78);
  --lobby-glass-line: rgba(30, 30, 30, 0.06);
  --lobby-glass-blur: blur(22px) saturate(160%);
  --lobby-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Пузыри */
  --lobby-b-in: #ffffff;
  --lobby-b-in-ink: #1e1e1e;
  --lobby-b-in-meta: #9a9a9a;
  --lobby-b-out: #1e1e1e;
  --lobby-b-out-ink: #ffffff;
  --lobby-b-out-meta: rgba(255, 255, 255, 0.55);
  --lobby-b-out-2: rgba(255, 255, 255, 0.72);   /* вторичный текст в своём */
  --lobby-b-out-line: rgba(255, 255, 255, 0.12);
  --lobby-b-out-fill: rgba(255, 255, 255, 0.14); /* реакции, кружок файла в своём */
  --lobby-quote-bg-in: #f6f6f5;
  --lobby-quote-bg-out: rgba(255, 255, 255, 0.1);
  --lobby-link-src: #c8102e;     /* домен в превью ссылки, чужой пузырь (= сигнал) */
  --lobby-link-src-out: #ff8a7e; /* домен в графитовом пузыре */

  /* Плашки дат и служебных событий */
  --lobby-pill: rgba(30, 30, 30, 0.56);              /* владелец: белый на .42 не читался (2.9:1 → 4.4:1) */
  --lobby-pill-radius: 15px;                        /* как служебные сообщения Telegram */
  --lobby-pill-ink: #ffffff;

  /* Имена авторов в ленте — тона аватаров (п. 6.3); в тёмной светлее */
  --lobby-name-1: #2c7370;
  --lobby-name-2: #26608f;
  --lobby-name-3: #4a55a0;
  --lobby-name-4: #47795a;
  --lobby-name-5: #8a5a3e;
  --lobby-name-6: #6d7a2c;
  --lobby-name-7: #6b4fa8;
  --lobby-name-8: #8e3d52;

  /* Окна и кнопки-капсулы */
  --lobby-dialog-bg: #ffffff;
  --lobby-dialog-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 18px 50px rgba(0, 0, 0, 0.22);
  --lobby-menu-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  --lobby-overlay-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --lobby-input-bg: #f4f4f3;
  --lobby-input-border: rgba(30, 30, 30, 0.14);

  /* --- Общее для обеих тем --- */
  --lobby-online: #3aa36b;          /* точка «в сети» */
  --lobby-brand: linear-gradient(135deg, #e2483a 0%, #c8102e 55%, #9e0b22 100%);
  --lobby-av-1: #2c7370;
  --lobby-av-2: #26608f;
  --lobby-av-3: #4a55a0;
  --lobby-av-4: #47795a;
  --lobby-av-5: #8a5a3e;
  --lobby-av-6: #6d7a2c;
  --lobby-av-7: #6b4fa8;
  --lobby-av-8: #8e3d52;
  --lobby-radius-card: 16px;
  --lobby-radius-bubble: 17px;
  --lobby-radius-dialog: 18px;
  --lobby-radius-input: 12px;
  --lobby-gap: 8px;                 /* зазор между карточками */
  --lobby-pad: 10px;                /* внешний отступ окна */
  --lobby-rail-w: 76px;
  --lobby-list-w: 320px;
  --lobby-font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

.cpd-theme-dark.cpd-theme-dark.cpd-theme-dark {
  color-scheme: dark;

  --lobby-window: #0e0e0e;
  --lobby-panel: #1a1a1a;
  --lobby-fill: #222222;
  --lobby-hover: #232323;
  --lobby-line: #262626;
  --lobby-line-2: #2e2e2e;

  --lobby-ink: #f1f1f1;
  --lobby-ink-2: #c9c9c9;
  --lobby-muted: #8e8e8e;
  --lobby-faint: #6a6a6a;

  --lobby-accent: #f1f1f1;
  --lobby-accent-hover: #ffffff;
  --lobby-accent-pressed: #d8d8d8;
  --lobby-accent-ink: #141414;
  --lobby-sel: #343434;
  --lobby-sel-ink: #ffffff;

  --lobby-signal: #e2483a;
  --lobby-signal-hover: #c93a2e;
  --lobby-mute-badge: #4a4a4a;

  --lobby-rail: #0a0a0a;
  --lobby-rail-active: #222222;

  --lobby-wall: #161513;
  --lobby-wall-img: url("/inside-static/pattern-dark.svg");

  --lobby-glass: rgba(30, 30, 30, 0.72);
  --lobby-glass-line: rgba(255, 255, 255, 0.06);
  --lobby-shadow: none;

  --lobby-b-in: #232323;
  --lobby-b-in-ink: #f1f1f1;
  --lobby-b-in-meta: #8a8a8a;
  --lobby-b-out: #3a3a3a;
  --lobby-b-out-ink: #ffffff;
  --lobby-b-out-meta: rgba(255, 255, 255, 0.5);
  --lobby-quote-bg-in: #2b2b2b;
  --lobby-quote-bg-out: rgba(255, 255, 255, 0.08);
  --lobby-link-src: #ff8a7e;     /* .lp .src макета: в тёмной теме и в чужом */
  --lobby-link-src-out: #ff8a7e;

  --lobby-pill: rgba(255, 255, 255, 0.12);

  --lobby-name-1: #6fb3af;
  --lobby-name-2: #74a8d4;
  --lobby-name-3: #98a1e0;
  --lobby-name-4: #85b896;
  --lobby-name-5: #cf9b7c;
  --lobby-name-6: #b0bd6c;
  --lobby-name-7: #ac94e0;
  --lobby-name-8: #d4849a;

  --lobby-dialog-bg: #1a1a1a;
  --lobby-dialog-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 50px rgba(0, 0, 0, 0.5);
  --lobby-menu-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 30px rgba(0, 0, 0, 0.45);
  --lobby-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 40px rgba(0, 0, 0, 0.5);
  --lobby-input-bg: #222222;
  --lobby-input-border: rgba(255, 255, 255, 0.14);
}

/* Добавлено (часть F, настройки): ещё два тона для квадратов разделов
   настроек — тёплый графит и охра из макета (Шифрование, Лаборатория). */
:root {
  --lobby-av-9: #6b655e;
  --lobby-av-10: #9a6a11;
}


/* ==== v2 · Отображение в Compound */

/* Один блок на обе темы: --cpd-* ссылаются на --lobby-*, а те уже свои у
   каждой темы. Шкалы Compound перекрашены целиком — так меняются разом все
   экраны Element, которые мы не раскрашиваем по отдельности:
     gray-*        нейтральный серый вместо синеватого (вся база текста и фона);
     green-*       акцент Compound живёт на зелёной шкале — она стала графитом;
     blue-*        ссылки, фокус, «инфо» — тоже графит: синего нигде нет;
     red           — не шкала, а только семантические critical-токены = сигнал.
   Список переопределённых --cpd-* — в отчёте итерации (docs/design/lobby/). */
:root,
.cpd-theme-light.cpd-theme-light.cpd-theme-light {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #fafafa;
  --cpd-color-gray-200: #f7f7f6;
  --cpd-color-gray-300: #f4f4f3;
  --cpd-color-gray-400: #ececeb;
  --cpd-color-gray-500: #e2e2e0;
  --cpd-color-gray-600: #cfcfcd;
  --cpd-color-gray-700: #b5b5b3;
  --cpd-color-gray-800: #8e8e8e;
  --cpd-color-gray-900: #7a7a7a;
  --cpd-color-gray-1000: #6b6b6b;
  --cpd-color-gray-1100: #4a4a4a;
  --cpd-color-gray-1200: #3a3a3a;
  --cpd-color-gray-1300: #2b2b2b;
  --cpd-color-gray-1400: #1e1e1e;
  --cpd-color-alpha-gray-100: rgba(30, 30, 30, 0.02);
  --cpd-color-alpha-gray-200: rgba(30, 30, 30, 0.04);
  --cpd-color-alpha-gray-300: rgba(30, 30, 30, 0.06);
  --cpd-color-alpha-gray-400: rgba(30, 30, 30, 0.12);
  --cpd-color-alpha-gray-500: rgba(30, 30, 30, 0.2);
  --cpd-color-alpha-gray-600: rgba(30, 30, 30, 0.26);
  --cpd-color-alpha-gray-700: rgba(30, 30, 30, 0.35);
  --cpd-color-alpha-gray-800: rgba(30, 30, 30, 0.5);
  --cpd-color-alpha-gray-900: rgba(30, 30, 30, 0.61);
  --cpd-color-alpha-gray-1000: rgba(30, 30, 30, 0.66);
  --cpd-color-alpha-gray-1100: rgba(30, 30, 30, 0.71);
  --cpd-color-alpha-gray-1200: rgba(30, 30, 30, 0.77);
  --cpd-color-alpha-gray-1300: rgba(30, 30, 30, 0.84);
  --cpd-color-alpha-gray-1400: rgba(30, 30, 30, 0.9);

  --cpd-color-green-100: #f4f4f3;
  --cpd-color-green-200: #ececeb;
  --cpd-color-green-300: #e2e2e0;
  --cpd-color-green-400: #cfcfcd;
  --cpd-color-green-500: #b5b5b3;
  --cpd-color-green-600: #8e8e8e;
  --cpd-color-green-700: #6b6b6b;
  --cpd-color-green-800: #4a4a4a;
  --cpd-color-green-900: #1e1e1e;
  --cpd-color-green-1000: #333333;
  --cpd-color-green-1100: #3a3a3a;
  --cpd-color-green-1200: #0a0a0a;
}

.cpd-theme-dark.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-theme-bg: #1a1a1a;
  --cpd-color-gray-100: #141414;
  --cpd-color-gray-200: #1e1e1e;
  --cpd-color-gray-300: #222222;
  --cpd-color-gray-400: #262626;
  --cpd-color-gray-500: #2e2e2e;
  --cpd-color-gray-600: #3a3a3a;
  --cpd-color-gray-700: #4a4a4a;
  --cpd-color-gray-800: #6a6a6a;
  --cpd-color-gray-900: #8e8e8e;
  --cpd-color-gray-1000: #a3a3a3;
  --cpd-color-gray-1100: #c9c9c9;
  --cpd-color-gray-1200: #d8d8d8;
  --cpd-color-gray-1300: #e6e6e6;
  --cpd-color-gray-1400: #f1f1f1;
  --cpd-color-alpha-gray-100: rgba(241, 241, 241, 0.02);
  --cpd-color-alpha-gray-200: rgba(241, 241, 241, 0.04);
  --cpd-color-alpha-gray-300: rgba(241, 241, 241, 0.06);
  --cpd-color-alpha-gray-400: rgba(241, 241, 241, 0.1);
  --cpd-color-alpha-gray-500: rgba(241, 241, 241, 0.15);
  --cpd-color-alpha-gray-600: rgba(241, 241, 241, 0.2);
  --cpd-color-alpha-gray-700: rgba(241, 241, 241, 0.27);
  --cpd-color-alpha-gray-800: rgba(241, 241, 241, 0.41);
  --cpd-color-alpha-gray-900: rgba(241, 241, 241, 0.54);
  --cpd-color-alpha-gray-1000: rgba(241, 241, 241, 0.61);
  --cpd-color-alpha-gray-1100: rgba(241, 241, 241, 0.68);
  --cpd-color-alpha-gray-1200: rgba(241, 241, 241, 0.79);
  --cpd-color-alpha-gray-1300: rgba(241, 241, 241, 0.89);
  --cpd-color-alpha-gray-1400: rgba(241, 241, 241, 0.95);

  --cpd-color-green-100: #1a1a1a;
  --cpd-color-green-200: #222222;
  --cpd-color-green-300: #262626;
  --cpd-color-green-400: #2e2e2e;
  --cpd-color-green-500: #3a3a3a;
  --cpd-color-green-600: #4a4a4a;
  --cpd-color-green-700: #6a6a6a;
  --cpd-color-green-800: #8e8e8e;
  --cpd-color-green-900: #f1f1f1;
  --cpd-color-green-1000: #ffffff;
  --cpd-color-green-1100: #d8d8d8;
  --cpd-color-green-1200: #ffffff;
}

:root,
.cpd-theme-light.cpd-theme-light.cpd-theme-light,
.cpd-theme-dark.cpd-theme-dark.cpd-theme-dark {
  /* Синяя шкала = серая: ссылки, фокус, плашки «инфо» — без синего. */
  --cpd-color-blue-100: var(--cpd-color-gray-100);
  --cpd-color-blue-200: var(--cpd-color-gray-200);
  --cpd-color-blue-300: var(--cpd-color-gray-300);
  --cpd-color-blue-400: var(--cpd-color-gray-400);
  --cpd-color-blue-500: var(--cpd-color-gray-500);
  --cpd-color-blue-600: var(--cpd-color-gray-600);
  --cpd-color-blue-700: var(--cpd-color-gray-700);
  --cpd-color-blue-800: var(--cpd-color-gray-800);
  --cpd-color-blue-900: var(--cpd-color-gray-1100);
  --cpd-color-blue-1000: var(--cpd-color-gray-1200);
  --cpd-color-blue-1100: var(--cpd-color-gray-1300);
  --cpd-color-blue-1200: var(--cpd-color-gray-1400);

  /* Шрифт — Onest; моно-шрифт кода не трогаем. */
  --cpd-font-family-sans: var(--lobby-font);

  /* Основа */
  --cpd-color-bg-canvas-default: var(--lobby-panel);
  --cpd-color-bg-subtle-secondary: var(--lobby-fill);
  --cpd-color-bg-subtle-primary: var(--lobby-line-2);
  --cpd-color-text-primary: var(--lobby-ink);
  --cpd-color-text-secondary: var(--lobby-muted);
  --cpd-color-icon-primary: var(--lobby-ink);
  --cpd-color-icon-secondary: var(--lobby-ink-2);
  --cpd-color-icon-tertiary: var(--lobby-muted);
  --cpd-color-border-focused: var(--lobby-ink);
  --cpd-color-text-link-external: var(--lobby-ink);

  /* Акцент и primary-кнопки — графит (в тёмной — светлый) */
  --cpd-color-text-action-accent: var(--lobby-ink);
  --cpd-color-text-action-primary: var(--lobby-ink);
  --cpd-color-icon-accent-primary: var(--lobby-ink);
  --cpd-color-icon-accent-tertiary: var(--lobby-ink-2);
  --cpd-color-bg-accent-rest: var(--lobby-accent);
  --cpd-color-bg-accent-hovered: var(--lobby-accent-hover);
  --cpd-color-bg-accent-pressed: var(--lobby-accent-pressed);
  --cpd-color-border-accent-primary: var(--lobby-accent);
  --cpd-color-bg-action-primary-rest: var(--lobby-accent);
  --cpd-color-bg-action-primary-hovered: var(--lobby-accent-hover);
  --cpd-color-bg-action-primary-pressed: var(--lobby-accent-pressed);
  --cpd-color-text-on-solid-primary: var(--lobby-accent-ink);
  --cpd-color-icon-on-solid-primary: var(--lobby-accent-ink);

  /* Опасность = сигнал */
  --cpd-color-bg-critical-primary: var(--lobby-signal);
  --cpd-color-bg-critical-hovered: var(--lobby-signal-hover);
  --cpd-color-text-critical-primary: var(--lobby-signal);
  --cpd-color-icon-critical-primary: var(--lobby-signal);
  --cpd-color-border-critical-primary: var(--lobby-signal);
  --cpd-color-border-critical-hovered: var(--lobby-signal-hover);

  /* «Инфо» — нейтрально */
  --cpd-color-text-info-primary: var(--lobby-ink-2);
  --cpd-color-icon-info-primary: var(--lobby-ink-2);
  --cpd-color-bg-info-subtle: var(--lobby-fill);

  /* Аватары и имена авторов (п. 6.3): 6 цветов Compound → тона Insis */
  --cpd-color-bg-decorative-1: var(--lobby-av-1);
  --cpd-color-bg-decorative-2: var(--lobby-av-2);
  --cpd-color-bg-decorative-3: var(--lobby-av-3);
  --cpd-color-bg-decorative-4: var(--lobby-av-4);
  --cpd-color-bg-decorative-5: var(--lobby-av-5);
  --cpd-color-bg-decorative-6: var(--lobby-av-6);
  --cpd-color-text-decorative-1: var(--lobby-name-1);
  --cpd-color-text-decorative-2: var(--lobby-name-2);
  --cpd-color-text-decorative-3: var(--lobby-name-3);
  --cpd-color-text-decorative-4: var(--lobby-name-4);
  --cpd-color-text-decorative-5: var(--lobby-name-5);
  --cpd-color-text-decorative-6: var(--lobby-name-6);
}


/* ==== v2 · Основа */

html,
body,
.mx_MatrixChat_wrapper,
button,
input,
textarea,
select {
  font-family: var(--lobby-font);
}
/* Цифры везде табличные: время и счётчики не «прыгают». */
body {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Рамки фокуса после клика мышью — примета браузера, не приложения.
   С клавиатуры (Tab) рамка остаётся — это доступность. */
:focus:not(:focus-visible) {
  outline: none !important;
}
/* Кольцо фокуса с клавиатуры — цветом текста, как в окнах, не синим
   системным (outline: auto = -webkit-focus-ring-color). :where — нулевая
   специфичность: свои кольца элементов остаются в силе. */
:where(:focus-visible) {
  outline: 2px solid var(--lobby-ink);
  outline-offset: 2px;
}
/* Поля ввода кольца не носят: фокус в них видно по курсору и рамке поля
   (иначе строка ввода чата получала белый прямоугольник, v26). */
:where([contenteditable="true"], textarea, input:not([type="checkbox"], [type="radio"], [type="range"])):focus-visible {
  outline: none;
}
/* Подсказки Compound (наведение на кнопки): Onest 13/18, поля 6×10,
   скругление 8 — как у меню и капсул; у Compound 12/16 и 4. */
div[class*="_tooltip_"]:is([data-floating-ui-focusable], [role="tooltip"]) {
  font-family: var(--lobby-font);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: normal;
  padding: 6px 10px;
  border-radius: 8px;
}
div[class*="_tooltip_"]:is([data-floating-ui-focusable], [role="tooltip"]) [class*="_caption_"] {
  font-size: 12px;
  line-height: 16px;
}
.mx_EventTile:focus,
.mx_EventTile:focus-within,
.mx_EventTile .mx_EventTile_line:focus,
.mx_RoomListItemView:focus,
[role="menu"] :focus,
[role="menuitem"]:focus {
  outline: none !important;
}
* {
  -webkit-tap-highlight-color: transparent;
}

/* Интерфейс мышью не выделяется, как в приложении; текст сообщений, поля
   ввода и окна с текстом — выделяются. */
.mx_SpacePanel,
.mx_LeftPanel,
.mx_RoomHeader,
.mx_RoomListBottomBar,
.mx_MessageComposer_actions,
.mx_TimelineSeparator,
.mx_ThreadSummary,
.mx_MessageTimestamp,
[role="menu"],
button,
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
}
.mx_EventTile_body,
.mx_EventTile_content,
.mx_BasicMessageComposer_input,
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Значки-маски (линейные, сетка 24, штрих 1.8 — как в макете). Явный
   размер ×4 — растр маски не зависит от того, как браузер трактует SVG
   без размера. Цвет — background-color: currentColor у элемента. */
:root {
  --lobby-ic-chats: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 20.5l1.6-5A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E");
  --lobby-ic-users: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .7 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E");
  --lobby-ic-user: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4.2 4-6.5 8-6.5s7.2 2.3 8 6.5'/%3E%3C/svg%3E");
  --lobby-ic-case: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E");
  --lobby-ic-crown: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z'/%3E%3C/svg%3E");
  --lobby-ic-star: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.2L12 17.4 6.4 20.3l1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E");
  --lobby-ic-gear: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-2.7-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3.6 15H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.1-2.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9.7 4.4V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.7H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --lobby-ic-edit: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4z'/%3E%3C/svg%3E");
  --lobby-ic-more: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E");
  --lobby-ic-search: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --lobby-ic-send: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
}


/* ==== v2 · Каркас окна */

/* П. 5: фон окна ровный; колонки — карточки радиусом 16 с зазором 8 и
   внешним отступом 10: рейл 76 → список 320 → чат → правая панель.
   Теней у панелей нет. */
.mx_MatrixChat {
  background: var(--lobby-window);
}
.mx_MatrixChat > div {
  box-sizing: border-box;
  padding: var(--lobby-pad);
  gap: var(--lobby-gap);
  background: transparent;
}
/* Разделитель список|чат остаётся (за него тянут ширину), но невидим и не
   добавляет к зазору ещё два. */
.mx_MatrixChat .mx_Separator,
.mx_MatrixChat .mx_Separator * {
  background: transparent !important;
  border: none !important;
}
/* Ширина разделителя 1 px; отступы съедают ровно один зазор flex и его
   ширину — между списком и чатом остаётся 8, как между рейлом и списком
   (было −8 / −8: зазор схлопывался до 1 px). Сам он — посередине зазора. */
.mx_MatrixChat .mx_Separator {
  margin-inline: calc(-0.5 * var(--lobby-gap)) calc(-0.5 * var(--lobby-gap) - 1px);
  z-index: 2;
}

/* Список — карточка 320 (тянется 260–420). Панели Element раскладывает
   resizable-panels через flex-grow; data-inside-resized ставит форк, когда
   человек сам потянул разделитель. */
.mx_LeftPanel {
  background: var(--lobby-panel);
  border: none;
  border-radius: var(--lobby-radius-card);
  overflow: hidden;
  box-shadow: none;
}
#left-panel {
  min-width: 260px !important;
  max-width: 420px !important;
}
#left-panel:not([data-inside-resized]) {
  flex: 0 0 var(--lobby-list-w) !important;
}

/* Чат: сама комната прозрачна, карточка — колонка ленты (mx_RoomView_body),
   справа от неё отдельной карточкой — правая панель. */
.mx_RoomView,
.mx_RoomView_timeline,
.mx_MainSplit,
.mx_RoomView_messagePanel,
.mx_RoomView_messageListWrapper {
  background: transparent;
}
.mx_RoomView {
  border-radius: var(--lobby-radius-card);
}
.mx_MainSplit {
  position: relative;
}
.mx_RoomView_body {
  border-radius: var(--lobby-radius-card);
  overflow: hidden;
}

/* Правая панель — своя карточка. Ширина по умолчанию 320 (обсуждение —
   360), тянуть её по-прежнему можно. */
/* re-resizable пишет min-width: 320px инлайном — без !important обсуждение
   оставалось 320 − 8 = 312 вместо 360. Шире тянуть по-прежнему можно. */
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
  box-sizing: border-box;
  padding: 0 0 0 var(--lobby-gap);
  min-width: calc(320px + var(--lobby-gap)) !important;
}
.mx_MainSplit > .mx_RightPanel_ResizeWrapper:has(.mx_ThreadView) {
  min-width: calc(360px + var(--lobby-gap)) !important;
}
.mx_MainSplit .mx_RightPanel {
  border-radius: var(--lobby-radius-card);
  overflow: hidden;
  background: var(--lobby-panel);
  box-shadow: none;
}

/* Окно уже 1400: панель не отнимает ширину у чата, а ложится поверх него
   карточкой с тенью и отступами 18, как в Telegram. */
@media (max-width: 1400px) {
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
    position: absolute !important;
    top: 18px;
    right: 18px;
    bottom: 18px;
    height: auto !important;
    max-width: calc(100% - 36px);
    padding: 0;
    min-width: 320px !important;
    z-index: 6;
  }
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper:has(.mx_ThreadView) {
    min-width: 360px !important;
  }
  .mx_MainSplit .mx_RightPanel {
    box-shadow: var(--lobby-overlay-shadow);
  }
  /* «Вниз» и «К непрочитанным» (z-index 1000 у Element) иначе рисовались
     поверх накладной панели: панель — выше них, а сами кнопки уходят
     влево от карточки (16 от её края, как от края ленты). */
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
    z-index: 1001;
  }
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper) .mx_RoomView_body :is(.mx_JumpToBottomButton.mx_JumpToBottomButton, .mx_TopUnreadMessagesBar) {
    right: calc(16px + 18px + 320px);
  }
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper .mx_ThreadView) .mx_RoomView_body :is(.mx_JumpToBottomButton.mx_JumpToBottomButton, .mx_TopUnreadMessagesBar) {
    right: calc(16px + 18px + 360px);
  }
}
/* Строка ввода чата под накладной панелью: при окне от 1200 она
   укорачивается до края карточки (8 зазор) и остаётся рабочей; уже — места
   не хватает, и панель ложится с полями 10 вместо 18 — ровно по краю
   строки ввода, чтобы из-под неё не торчала кнопка микрофона. */
@media (min-width: 1200px) and (max-width: 1400px) {
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper) .mx_RoomView_body > .mx_MessageComposer {
    padding-inline-end: calc(18px + 320px + 8px);
  }
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper .mx_ThreadView) .mx_RoomView_body > .mx_MessageComposer {
    padding-inline-end: calc(18px + 360px + 8px);
  }
}
@media (max-width: 1199px) {
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
    inset: 10px 10px 10px auto;
    max-width: calc(100% - 20px);
  }
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper) .mx_RoomView_body :is(.mx_JumpToBottomButton.mx_JumpToBottomButton, .mx_TopUnreadMessagesBar) {
    right: calc(16px + 10px + 320px);
  }
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper .mx_ThreadView) .mx_RoomView_body :is(.mx_JumpToBottomButton.mx_JumpToBottomButton, .mx_TopUnreadMessagesBar) {
    right: calc(16px + 10px + 360px);
  }
}

/* Стартовый экран без комнаты — карточка на обоях, знак Lobby вместо
   логотипа Element. */
/* Колонка — та же карточка с обоями, что у чата (раньше экран висел прямо
   на фоне окна с полями 25 по бокам). Знак, аватар, приветствие и плитки —
   одним блоком по центру. Подзаголовок — приглушённым (у Element он
   сине-серый #61708b, синего быть не должно), заголовок спокойнее. */
.mx_HomePage.mx_HomePage {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px;
  align-content: center;
  border-radius: var(--lobby-radius-card);
  background-color: var(--lobby-wall);
  background-image: var(--lobby-wall-img);
  background-repeat: repeat;
  background-size: 288px 216px;
  background-position: 0 0;
}
.mx_HomePage_default > svg,
.mx_HomePage_default img {
  display: none;
}
.mx_HomePage_default::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 16px;
  background: url("/inside-static/icons/lobby-icon.svg") center / cover no-repeat;
}
.mx_HomePage_default .mx_HomePage_default_wrapper h1 {
  margin: 16px 0 4px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lobby-ink);
}
.mx_HomePage_default .mx_HomePage_default_wrapper h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lobby-muted);
}
/* Плитки «Написать коллеге / Открытые чаты / Создать групповой чат» —
   как плитки действий правой панели: карточка цвета панели, скругление 14,
   значок над подписью, без графитовой заливки. */
.mx_HomePage_default .mx_HomePage_default_buttons {
  margin: 32px 0 0;
  gap: 12px;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
  box-sizing: border-box;
  width: 160px;
  min-height: 112px;
  margin: 0;
  padding: 16px 12px 14px;
  gap: 10px;
  border-radius: 14px;
  background: var(--lobby-panel);
  color: var(--lobby-ink);
  box-shadow: var(--lobby-shadow);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:hover {
  background: var(--lobby-hover);
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg {
  width: 30px;
  height: 30px;
  margin: 0;
  color: var(--lobby-ink-2);
}

/* «Открыт в другой вкладке» — по центру окна в три этажа, как экраны
   Telegram: значок Lobby, заголовок 20/600, пояснение 15 приглушённым,
   ниже кнопка-капсула «Открыть здесь» (ядро форка) акцентом. Элементы —
   прямые дети SplashPage (h1, h2, кнопка), поэтому столбик задаём ему. */
.mx_SessionLockStolenView.mx_SessionLockStolenView {
  background: var(--lobby-window);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px;
  text-align: center;
}
.mx_SessionLockStolenView.mx_SessionLockStolenView::before {
  content: "";
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: url("/inside-static/icons/lobby-icon.svg") center / cover no-repeat;
}
.mx_SessionLockStolenView > * {
  max-width: 440px;
}
.mx_SessionLockStolenView h1,
.mx_SessionLockStolenView h2 {
  margin: 0;
  text-align: center;
  color: var(--lobby-ink);
}
.mx_SessionLockStolenView h1 {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
.mx_SessionLockStolenView h2 {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--lobby-muted);
}
.mx_SessionLockStolenView .mx_SessionLockStolenView_openHere {
  margin-top: 24px;
  min-width: 200px;
  height: 44px;
  border-radius: 22px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}


/* ==== v2 · Рейл папок */

/* П. 6.1. Панель пространств Element = папки Telegram: тёмный рейл, сверху
   знак Lobby, пункт — значок 22 над подписью 11/500, внизу «Настройки».
   Папки — «Все чаты» и фильтры форка (Группы, Коллеги, Клиенты, VIP,
   Избранное); набор и порядок задаёт форк. */
.mx_SpacePanel.mx_SpacePanel {
  width: var(--lobby-rail-w);
  min-width: var(--lobby-rail-w);
  box-sizing: border-box;
  padding: 12px 0;
  border-radius: var(--lobby-radius-card);
  background: var(--lobby-rail);
  color: var(--lobby-rail-ink);
  box-shadow: none;
}
/* Знак Lobby 40×40, скругление 10 — вместо логотипа. */
.mx_SpacePanel.mx_SpacePanel::before {
  content: "";
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 14px; /* 10 + зазор 4 перед первым пунктом, как в .rail */
  border-radius: 10px;
  background: url("/inside-static/icons/lobby-icon.svg") center / cover no-repeat;
}

/* Создавать пространства и сворачивать рейл сотруднику не нужно: папки
   ведёт администратор. Кнопки остаются в DOM. */
.mx_SpacePanel .mx_SpaceItem_new,
.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
  display: none;
}

/* Ось рейла (бывш. §31): список папок — прокручиваемый блок, браузер
   резервировал справа полосу прокрутки, и кнопки уезжали с оси. */
.mx_SpacePanel .mx_SpaceTreeLevel {
  scrollbar-width: none;
  scrollbar-gutter: auto;
  overflow-x: hidden;
}
.mx_SpacePanel .mx_SpaceTreeLevel::-webkit-scrollbar {
  display: none;
}
.mx_SpacePanel .mx_SpaceTreeLevel > li {
  width: 100%;
}

/* Пункт: 64 в ширину, отступы 8/7, скругление 12. Подпись — из aria-label
   кнопки через attr(): узлов не добавляем. */
.mx_SpacePanel.mx_SpacePanel .mx_SpaceItem .mx_SpaceButton.mx_SpaceButton_narrow {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 64px;
  margin: 0 auto 4px;
  padding: 8px 0 7px;
  border-radius: 12px;
  color: var(--lobby-rail-ink);
  background: transparent;
}
.mx_SpacePanel .mx_SpaceButton_narrow::after {
  content: attr(aria-label);
  display: block;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  color: inherit;
}
.mx_SpacePanel.mx_SpacePanel .mx_SpaceItem .mx_SpaceButton.mx_SpaceButton_narrow:hover {
  color: var(--lobby-rail-ink-hover);
  background: transparent;
}
.mx_SpacePanel.mx_SpacePanel .mx_SpaceItem .mx_SpaceButton.mx_SpaceButton_narrow.mx_SpaceButton_active {
  color: var(--lobby-rail-ink-on);
  background: var(--lobby-rail-active);
}

/* Слои кнопки Element (обёртка выбора, аватар, значок) — в один квадрат
   22 по центру (у обёртки Element рамка 3 — пункт выходил 60 вместо 55
   макета); бейдж — к правому верхнему углу значка. */
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
  width: auto;
  height: auto;
  padding: 0;
  border-width: 0;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}
.mx_SpacePanel .mx_SpaceButton_narrow .mx_SpaceButton_avatarWrapper,
.mx_SpacePanel .mx_SpaceButton_narrow .mx_SpaceButton_avatarPlaceholder,
.mx_SpacePanel .mx_SpaceButton_narrow .mx_SpaceButton_icon {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.mx_SpacePanel .mx_SpaceButton_icon svg {
  width: 22px;
  height: 22px;
  color: currentColor;
}
.mx_SpacePanel .mx_SpaceButton_narrow .mx_SpacePanel_badgeContainer {
  position: absolute;
  top: -6px;
  left: 13px;
  right: auto;
  width: auto;
  height: auto;
  margin: 0;
}
.mx_SpacePanel [data-testid="notification-badge"] {
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--lobby-rail-badge);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  /* Своя рамка Compound (2px серым внутри 18) съедала красный до 14 —
     обводку цветом рейла даёт только тень. */
  border: none;
  box-shadow: 0 0 0 2px var(--lobby-rail);
}
.mx_SpacePanel .mx_SpaceButton_active [data-testid="notification-badge"] {
  box-shadow: 0 0 0 2px var(--lobby-rail-active);
}
/* Число — 11/18 самой капсулы (у Compound в span 10/14). */
.mx_SpacePanel [data-testid="notification-badge"] > span {
  font-size: inherit;
  line-height: inherit;
}

/* Свои значки папок — маски из набора макета, цвет — currentColor. */
.mx_SpaceTreeLevel > li:first-child .mx_SpaceButton_icon svg,
.mx_SpaceButton_insideFolder .mx_SpaceButton_icon svg {
  display: none;
}
.mx_SpaceTreeLevel > li:first-child .mx_SpaceButton_icon::before,
.mx_SpaceButton_insideFolder .mx_SpaceButton_icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--lobby-folder-icon, var(--lobby-ic-chats)) center / contain no-repeat;
  mask: var(--lobby-folder-icon, var(--lobby-ic-chats)) center / contain no-repeat;
}
.mx_SpaceButton_insideFolder_rooms { --lobby-folder-icon: var(--lobby-ic-users); }
.mx_SpaceButton_insideFolder_inside_colleagues { --lobby-folder-icon: var(--lobby-ic-user); }
.mx_SpaceButton_insideFolder_inside_clients { --lobby-folder-icon: var(--lobby-ic-case); }
.mx_SpaceButton_insideFolder_inside_vip { --lobby-folder-icon: var(--lobby-ic-crown); }
.mx_SpaceButton_insideFolder_favourite { --lobby-folder-icon: var(--lobby-ic-star); }

/* Низ рейла: «Обсуждения» (центр активности тредов) — значком, «Настройки»
   — иконкой «ползунки» без подписи, как в Telegram (решение владельца). */
.mx_SpacePanel .mx_ThreadsActivityCentre_container {
  display: flex;
  justify-content: center;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton {
  color: var(--lobby-rail-ink);
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton:hover {
  color: var(--lobby-rail-ink-hover);
}
/* Быстрые настройки — как в Telegram: одна иконка «ползунки» без подписи
   (подпись «Быстрые настройки» — во всплывающей подсказке Element).
   Наведение — плашка активного пункта рейла и белая иконка; своё кольцо
   фокуса вместо синего системного. */
.mx_SpacePanel .mx_QuickSettingsButton.mx_QuickSettingsButton {
  --lobby-ic-sliders: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h9M17 18h3'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='15' cy='18' r='2'/%3E%3C/svg%3E");
  inline-size: 48px !important;
  block-size: 44px !important;
  margin: 4px auto 0;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 12px;
  color: var(--lobby-rail-ink);
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Серую плашку при наведении Element ставит с !important внутри
   @layer app-web — такой !important сильнее нашего вне слоёв; у
   !important побеждает более ранний слой, поэтому — compound-tokens. */
@layer compound-tokens {
  .mx_SpacePanel .mx_QuickSettingsButton.mx_QuickSettingsButton:is(:hover, .mx_QuickSettingsButton_active, [aria-expanded="true"]) {
    color: #fff !important;
    background-color: var(--lobby-rail-active) !important;
  }
}
.mx_SpacePanel .mx_QuickSettingsButton.mx_QuickSettingsButton:focus-visible {
  box-shadow: 0 0 0 2px var(--lobby-rail-ink) !important;
}
.mx_SpacePanel .mx_QuickSettingsButton > div,
.mx_SpacePanel .mx_QuickSettingsButton svg {
  display: none;
}
.mx_SpacePanel .mx_QuickSettingsButton::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--lobby-ic-sliders) center / contain no-repeat;
  mask: var(--lobby-ic-sliders) center / contain no-repeat;
}
.mx_SpacePanel .mx_QuickSettingsButton::after {
  content: none;
}


/* ==== v2 · Список чатов */

/* П. 6.2. Шапка: «…» слева, заголовок 16/600 по центру, карандаш справа;
   поиск-капсула 36; строки 72 с аватаром 54; выбранная — заливка выбора.
   Хешированные части строки — в блоке «ломкие селекторы · Список чатов». */
.mx_RoomListPanel {
  background: transparent;
}
.mx_RoomListPanel > header {
  order: -1;
}

/* Строка чата */
.mx_RoomListItemView {
  box-sizing: border-box;
  margin-inline: 6px;
  width: calc(100% - 12px);
  border-radius: 12px;
}
.mx_RoomListItemView:hover {
  background: var(--lobby-hover);
}
.mx_RoomListItemView.mx_RoomListItemView_selected.mx_RoomListItemView_selected,
.mx_RoomListItemView.mx_RoomListItemView[aria-selected="true"] {
  background: var(--lobby-sel);
}

/* Аватар 54 (размер приходит инлайном из компонента — нужен !important). */
.mx_RoomListItemView .mx_RoomAvatarView {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
}
.mx_RoomListItemView .mx_BaseAvatar {
  --cpd-avatar-size: 54px !important;
  width: 54px;
  height: 54px;
  line-height: 54px;
  font-size: 19px;
  flex: none;
}
.mx_RoomListItemView .mx_BaseAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* «В сети» — зелёная точка 13 в углу с обводкой цвета фона; «не в сети» не
   рисуем (как Telegram). Выемку-маску Element под 32px убираем. */
.mx_RoomListItemView .mx_RoomAvatarView_RoomAvatar_presence {
  -webkit-mask: none;
  mask: none;
}
.mx_RoomListItemView .mx_RoomAvatarView_PresenceDecoration {
  left: auto;
  top: auto;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: var(--lobby-online);
  background: var(--lobby-online);
  box-shadow: 0 0 0 2.5px var(--lobby-panel);
}
.mx_RoomListItemView[aria-selected="true"] .mx_RoomAvatarView_PresenceDecoration,
.mx_RoomListItemView_selected .mx_RoomAvatarView_PresenceDecoration {
  box-shadow: 0 0 0 2.5px var(--lobby-sel);
}
.mx_RoomListItemView .mx_RoomAvatarView_PresenceDecoration[color*="tertiary"] {
  display: none;
}
/* Значок «публичная комната» на аватаре — шум. Вместе со значком убираем
   и выемку-маску под него, иначе у аватара срезан край. */
.mx_RoomListItemView .mx_RoomAvatarView_icon {
  display: none;
}
.mx_RoomListItemView .mx_RoomAvatarView_RoomAvatar_icon {
  -webkit-mask: none;
  mask: none;
}
.mx_RoomListItemView[aria-selected="true"] .mx_BaseAvatar:has(img) {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

/* Нижняя панель списка (ядро форка): Контакты · Чаты · свой аватар. */
.mx_RoomListBottomBar.mx_RoomListBottomBar {
  height: 56px;
  box-sizing: border-box;
  padding: 6px;
  border-top: 1px solid var(--lobby-line);
  justify-content: space-around;
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_button {
  color: var(--lobby-faint);
  border-radius: 10px;
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_button_active,
.mx_RoomListBottomBar .mx_RoomListBottomBar_button_active:hover,
.mx_RoomListBottomBar .mx_RoomListBottomBar_button:hover {
  color: var(--lobby-ink);
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_button:not(.mx_RoomListBottomBar_profile) svg {
  display: none;
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_button:not(.mx_RoomListBottomBar_profile)::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--lobby-tab-icon, var(--lobby-ic-chats)) center / contain no-repeat;
  mask: var(--lobby-tab-icon, var(--lobby-ic-chats)) center / contain no-repeat;
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_button:first-child {
  --lobby-tab-icon: var(--lobby-ic-user);
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_button_active {
  --lobby-tab-icon: var(--lobby-ic-chats);
}
.mx_RoomListBottomBar .mx_UserMenu {
  justify-content: center;
}
.mx_RoomListBottomBar .mx_UserMenu > button {
  margin: 0;
  padding: 0;
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_profile {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.mx_RoomListBottomBar .mx_RoomListBottomBar_profile .mx_BaseAvatar,
.mx_RoomListBottomBar .mx_UserMenu .mx_BaseAvatar {
  --cpd-avatar-size: 28px !important;
  font-size: 12px;
}
.mx_RoomListBottomBar [data-testid="notification-badge"] {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--lobby-signal);
  color: var(--lobby-signal-ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  box-shadow: 0 0 0 2px var(--lobby-panel);
}


/* ==== v2 · Аватары */

/* П. 6.3: буквенные аватары — сплошные тона Insis, белые буквы. Element даёт
   data-color 1–6 (Compound), 7–8 — на будущее. Загруженные аватары не
   трогаем. Правило на хешированном классе — в «ломких селекторах»; здесь —
   переменные Compound, которыми пользуются остальные аватары. */
.mx_BaseAvatar[data-color] {
  --cpd-avatar-color: #ffffff;
}
.mx_BaseAvatar[data-color="1"] { --cpd-avatar-bg: var(--lobby-av-1); }
.mx_BaseAvatar[data-color="2"] { --cpd-avatar-bg: var(--lobby-av-2); }
.mx_BaseAvatar[data-color="3"] { --cpd-avatar-bg: var(--lobby-av-3); }
.mx_BaseAvatar[data-color="4"] { --cpd-avatar-bg: var(--lobby-av-4); }
.mx_BaseAvatar[data-color="5"] { --cpd-avatar-bg: var(--lobby-av-5); }
.mx_BaseAvatar[data-color="6"] { --cpd-avatar-bg: var(--lobby-av-6); }
.mx_BaseAvatar[data-color="7"] { --cpd-avatar-bg: var(--lobby-av-7); }
.mx_BaseAvatar[data-color="8"] { --cpd-avatar-bg: var(--lobby-av-8); }


/* ==== v2 · Обои */

/* П. 7: узор Inside (тот же, что --stage-art в Insis), плитка 288×216 от
   0 0, под ним #ECECEC / #161513. Только у ленты чата и у панели
   обсуждения; фон окна за панелями — ровный. Ничего не анимируется и не
   блюрится — иначе просядет прокрутка длинной ленты. */
.mx_RoomView_body,
.mx_RightPanel .mx_BaseCard.mx_ThreadView {
  background-color: var(--lobby-wall);
  background-image: var(--lobby-wall-img);
  background-repeat: repeat;
  background-size: 288px 216px;
  background-position: 0 0;
}
/* У панели обсуждения шапка — на цвете панели. */
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header {
  background: var(--lobby-panel);
  border-bottom: 1px solid var(--lobby-line);
}
.mx_RightPanel .mx_ThreadView_timelinePanelWrapper {
  background: transparent;
}


/* ==== v2 · Каркас загрузки */

/* Рамка интерфейса, которую inside-defaults.js рисует сразу, ещё до
   приложения: рейл, карточка списка со строками-заглушками, лента на обоях
   с шапкой и строкой ввода — те же места и размеры, что у настоящего окна.
   Тема угадана заранее (data-inside-boot на <html>: тем Element ещё нет),
   поэтому цвета здесь — литералы тех же значений, что у токенов. Как только
   появился настоящий интерфейс (или вход, ошибка, диалог), каркас
   растворяется — без белого экрана и спиннера. */
#inside-skeleton {
  --sk-window: #e6e6e4;
  --sk-rail: #141414;
  --sk-rail-bone: #262626;
  --sk-card: #ffffff;
  --sk-wall: #ececec;
  --sk-glass: rgba(255, 255, 255, 0.78);
  --sk-bone: #f4f4f3;
  --sk-shine: rgba(255, 255, 255, 0.7);
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  gap: 8px;
  padding: 10px;
  box-sizing: border-box;
  background: var(--sk-window);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
[data-inside-boot="dark"] #inside-skeleton,
[data-inside-boot="glass"] #inside-skeleton {
  --sk-window: #0e0e0e;
  --sk-rail: #0a0a0a;
  --sk-rail-bone: #222222;
  --sk-card: #1a1a1a;
  --sk-wall: #161513;
  --sk-glass: rgba(30, 30, 30, 0.72);
  --sk-bone: #222222;
  --sk-shine: rgba(255, 255, 255, 0.05);
}
html[data-inside-boot="light"],
html[data-inside-boot="light"] body {
  background: #e6e6e4;
}
html[data-inside-boot="dark"],
html[data-inside-boot="dark"] body,
html[data-inside-boot="glass"],
html[data-inside-boot="glass"] body {
  background: #0e0e0e;
}
body:has(.mx_MatrixChat, .mx_AuthPage, .mx_ErrorView, .mx_SessionLockStolenView,
    .mx_ConfirmSessionLockTheftView, .mx_CompleteSecurity, .mx_Dialog) #inside-skeleton {
  opacity: 0;
}
html[data-inside-boot] .mx_MatrixChat_splash {
  visibility: hidden;
}
.inside-skeleton-rail,
.inside-skeleton-list,
.inside-skeleton-chat {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.inside-skeleton-rail {
  flex: 0 0 76px;
  background: var(--sk-rail);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.inside-skeleton-rail i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--sk-rail-bone);
}
.inside-skeleton-rail i:first-child {
  width: 40px;
  height: 40px;
  background: var(--lobby-brand);
}
.inside-skeleton-list {
  flex: 0 0 320px;
  background: var(--sk-card);
  padding: 20px 12px 0;
  box-sizing: border-box;
}
.inside-skeleton-title {
  width: 92px;
  height: 14px;
  margin: 0 auto 20px;
  border-radius: 7px;
  background: var(--sk-bone);
}
.inside-skeleton-search {
  height: 36px;
  border-radius: 18px;
  background: var(--sk-bone);
  margin-bottom: 12px;
}
.inside-skeleton-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: 22px 18px;
  column-gap: 10px;
  align-content: center;
  height: 72px;
  padding-inline: 2px;
}
.inside-skeleton-row i {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sk-bone);
  align-self: center;
}
.inside-skeleton-row b,
.inside-skeleton-row s {
  height: 11px;
  border-radius: 6px;
  background: var(--sk-bone);
  align-self: center;
}
.inside-skeleton-row b { width: 55%; }
.inside-skeleton-row s { width: 85%; }
.inside-skeleton-row:nth-child(odd) b { width: 42%; }
.inside-skeleton-row:nth-child(3n) s { width: 70%; }
.inside-skeleton-chat {
  flex: 1;
  background: var(--sk-wall);
}
.inside-skeleton-header {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 52px;
  border-radius: 26px;
  background: var(--sk-glass);
}
.inside-skeleton-composer {
  position: absolute;
  bottom: 10px;
  left: 66px;
  right: 66px;
  height: 48px;
  border-radius: 24px;
  background: var(--sk-glass);
}
/* Перелив по заглушкам — знак «грузится» вместо спиннера. */
.inside-skeleton-list::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--sk-shine) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: inside-skeleton-shine 1.3s ease-in-out infinite;
}
@keyframes inside-skeleton-shine {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .inside-skeleton-list::after {
    animation: none;
  }
}
/* Каркас повторяет вёрстку: без рейла до 925, без чата до 600
   (docs/design/lobby/MOBILE.md). */
@media (max-width: 925px) {
  .inside-skeleton-rail {
    display: none;
  }
}
@media (max-width: 600px) {
  .inside-skeleton-rail,
  .inside-skeleton-chat {
    display: none;
  }
  .inside-skeleton-list {
    flex: 1;
  }
}


/* ==== v2 · Лента и пузыри */

/* П. 6.5, эталон — .tl / .m / .day / .svc макета. Геометрия пузыря
   задаётся на самой плитке (раздел ломких селекторов): плитка ужимается
   по содержимому, а имя автора, пузырь и полоса обсуждения внутри неё
   растягиваются на её ширину — так они читаются одним пузырём.
   Переменные Element гасим, чтобы его отступы не складывались с нашими. */
.mx_EventTile.mx_EventTile {
  --event-tile-bubble-self-background: var(--lobby-b-out);
  --event-tile-bubble-other-background: var(--lobby-b-in);
  --event-tile-bubble-corner-radius: var(--lobby-radius-bubble);
  --event-tile-bubble-margin-inline-start: 0px;
  --event-tile-bubble-margin-inline-end: 0px;
  --event-tile-bubble-line-margin-inline-start: 0px;
  --event-tile-bubble-line-margin-inline-end: 0px;
  --event-tile-bubble-line-max-width: 100%;
  --event-tile-bubble-max-width: 100%;
  --event-tile-bubble-line-height: 1.38;
  --event-tile-body-padding: 0;
  --event-tile-bubble-hover-background: transparent;
}

/* Поля ленты — 9 % ширины колонки, как padding .tl макета (проценты
   паддинга считаются от ширины прокрутки, т. е. колонки чата). Ширина
   пузыря — min(520px, 72 %) от того, что осталось. */
.mx_RoomView_body .mx_RoomView_MessageList {
  padding-inline: 9%;
  --lobby-bubble-max: min(520px, 72%);
  --lobby-bubble-max-group: calc(min(560px, 80%) - 42px);
}
/* Панель обсуждения 360: поля 12, ответы шире (.ttl макета). Обёртка
   списка в ThreadView шире прокрутки на 6 px — справа отступ больше. */
.mx_ThreadView .mx_RoomView_MessageList {
  padding-inline: 12px 18px;
  --lobby-bubble-max: min(520px, 72%);
  --lobby-bubble-max-group: calc(92% - 42px);
}

/* Аватарки прочитавших вдоль ленты скрыты (сам блок нужен как сигнал для
   галочек, см. ломкие селекторы). */
.mx_ReadReceiptGroup {
  display: none;
}
/* Замочек «не зашифровано» у каждого пузыря: на закрытом сервере не новость. */
.mx_EventTile [data-testid="event-tile-slot-padlock"] {
  display: none;
}

/* Дата — капсула .day: 13 / 500, 3 × 10, скругление 12, поля 10 сверху и
   снизу, без линий по бокам. */
.mx_TimelineSeparator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
.mx_TimelineSeparator hr,
.mx_TimelineSeparator [data-orientation="horizontal"] {
  display: none;
}
.mx_TimelineSeparator > *:not(hr),
.mx_EventTileBubble.mx_EventTileBubble,
.mx_GenericEventListSummary[data-layout="bubble"] {
  background: var(--lobby-pill);
  color: var(--lobby-pill-ink);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mx_TimelineSeparator > *:not(hr) {
  border-radius: var(--lobby-pill-radius);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  flex: 0 0 auto;
}
/* Одна таблетка: стиль на обёртке, заголовок внутри прозрачный. */
.mx_TimelineSeparator > *:not(hr) h2,
.mx_TimelineSeparator > *:not(hr) > * {
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: 0; /* у заголовка Compound −0.27 — капсула выходила на 2 px уже */
  color: inherit;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Служебные события — капсула .svc: 13, 5 × 12, скругление 14, поля 8.
   Свёрнутая сводка (.mx_GenericEventListSummary) — одна капсула, ссылка
   «Развернуть» внутри неё справа от текста. */
.mx_GenericEventListSummary[data-layout="bubble"] {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: min(520px, 100%);
  box-sizing: border-box;
  margin: 8px auto;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: normal;
}
.mx_GenericEventListSummary[data-layout="bubble"] > .mx_EventTile_line {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.mx_GenericEventListSummary[data-layout="bubble"] .mx_EventTile_info {
  padding: 0;
  font: inherit;
  color: inherit;
}
.mx_GenericEventListSummary[data-layout="bubble"] .mx_TextualEvent {
  color: inherit;
  font: inherit;
  opacity: 1;
}
.mx_GenericEventListSummary_avatars,
.mx_GenericEventListSummary .mx_MessageTimestamp {
  display: none;
}
.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle {
  order: 2;
  position: static;
  float: none;
  flex: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: inherit;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}
.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle:hover {
  opacity: 1;
}
/* Развёрнутая сводка: капсулы событий столбиком, «Свернуть» под ними. */
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] {
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: auto;
  max-width: none;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_GenericEventListSummary_toggle {
  margin: 2px 0 6px;
  padding: 2px 10px;
  border-radius: var(--lobby-pill-radius);
  background: var(--lobby-pill);
  color: var(--lobby-pill-ink);
  opacity: 1;
  text-decoration: none;
}
.mx_GenericEventListSummary_unstyledList {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Плашка «Сквозное шифрование не включено» — та же служебная капсула в
   одну-две строки: заголовок и ссылка «Включите шифрование в настройках»,
   длинное пояснение Element прячем (ссылка — его единственная польза). */
.mx_EventTileBubble.mx_EventTileBubble {
  display: block;
  width: fit-content;
  max-width: min(440px, 100%);
  box-sizing: border-box;
  min-height: 0;
  border-radius: var(--lobby-pill-radius);
  padding: 5px 12px;
  margin: 8px auto;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.mx_EventTileBubble.mx_EventTileBubble * {
  color: inherit;
}
.mx_EventTileBubble.mx_EventTileBubble > svg,
.mx_EventTileBubble.mx_EventTileBubble > :first-child:is(svg, img, span) {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 7px 0 0;
  vertical-align: -3px;
}
.mx_EventTileBubble.mx_EventTileBubble > :nth-child(2) {
  display: inline;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
}
.mx_EventTileBubble.mx_EventTileBubble > :nth-child(3) {
  display: inline;
  margin: 0;
  font-size: 0;
}
.mx_EventTileBubble.mx_EventTileBubble > :nth-child(3) .mx_AccessibleButton {
  display: inline;
  margin-inline-start: 5px;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
  opacity: 0.85;
}

/* Вводная «Это начало беседы» с крупным аватаром — в Telegram такого нет.
   Прячем всё, кроме плашки о шифровании. */
.mx_NewRoomIntro > :not(.mx_EventTileBubble) {
  display: none;
}
.mx_NewRoomIntro {
  margin: 4px 0;
}

/* «Прочитано до сюда» — не графитовая черта во всю ширину, а тонкая
   линия цвета разделителя в полях ленты. */
.mx_MessagePanel_myReadMarker hr {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--lobby-ink) 14%, transparent);
  opacity: 1;
}

/* Пустота над началом переписки: ScrollPanel округлял высоту списка до
   «страницы» и прижимал к низу. Отдаём естественную высоту, но не меньше
   экрана — короткий чат прижат к низу, как в Telegram. */
.mx_RoomView_MessageList.mx_RoomView_MessageList {
  height: auto !important;
  min-height: 100%;
}
/* …а прижимает его обёртка: у неё высота авто, и min-height списка в
   процентах не срабатывал — короткий чат висел сверху, под ним до строки
   ввода оставалась пустая полоса обоев. Обёртка — не ниже прокрутки,
   flex-end Element ставит список к низу. */
.mx_RoomView_messagePanel > .mx_RoomView_messageListWrapper {
  min-height: 100%;
}

/* Галочки: маски SVG, цвет — из токенов (раздел в ломких селекторах). */
:root {
  --inside-tick-sent: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' viewBox='0 0 16 11'%3E%3Cpath d='M2.6 5.9l3 3L12.4 2.1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --inside-tick-read: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' viewBox='0 0 16 11'%3E%3Cpath d='M0.9 5.9l3 3L10.7 2.1M7.6 8.1l0.8 0.8L15.2 2.1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --inside-tick-sending: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' viewBox='0 0 16 11'%3E%3Ccircle cx='8' cy='5.5' r='4.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 3.1v2.6l1.7 1.1' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --inside-tick-failed: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' viewBox='0 0 16 11'%3E%3Cpath fill-rule='evenodd' d='M8 0a5.5 5.5 0 1 1 0 11A5.5 5.5 0 0 1 8 0zM7.25 2.3h1.5v4.1h-1.5zM7.25 7.3h1.5v1.5h-1.5z'/%3E%3C/svg%3E");
}


/* Аватар автора — у последнего пузыря серии (форк -16 ставит его только
   туда: mx_EventTile_inside_lastInSeries), низ к низу пузыря вместе с
   полосой обсуждения и реакциями — как .gm макета (align-items: flex-end).
   Геометрия — в ломких селекторах («event-tile-slot-avatar»). */

/* --- Файл отправляется (форк -16: InsidePendingUploads) --- */
/* Свой пузырь в конце ленты, как отправленное медиа: графит, скругление
   17, хвостик 5 со стороны отправителя (пузырь всегда последний).
   Картинка / видео — во весь пузырь, приглушены на 40 %, по центру белое
   кольцо 48 с крестиком «Отменить»; слева сверху капсула «12,3 из 42,5 МБ»
   11.5 на тёмном полупрозрачном. Файл — как наша плитка файла: кольцо в
   круге 44, имя 14 / 600, под ним прогресс. Не отправилось — красная
   строка и капсулы «Повторить» / «Удалить». */
.mx_RoomView_MessageList > li.mx_InsidePendingUpload {
  display: flex;
  justify-content: flex-end;
  margin: 3px 0 8px;
  padding: 0;
  list-style: none;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_bubble {
  max-width: min(520px, 72%);
  overflow: hidden;
  border-radius: var(--lobby-radius-bubble);
  border-end-end-radius: 5px;
  background: var(--event-tile-bubble-self-background, var(--lobby-b-out));
  color: var(--lobby-b-out-ink);
  box-shadow: var(--lobby-shadow);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_media {
  max-width: 100%;
  background: #000;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_overlay {
  background: rgba(0, 0, 0, 0.4);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_ringWrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_ring {
  stroke-width: 2.5px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_ringTrack {
  stroke: rgba(255, 255, 255, 0.28);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_ringValue {
  stroke: #fff;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_cancel {
  color: #fff;
  background: transparent;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_cancel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_cancel svg {
  width: 20px;
  height: 20px;
  color: inherit;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_media .mx_InsidePendingUpload_progressText {
  top: 8px;
  inset-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_file {
  gap: 11px;
  min-width: 220px;
  padding: 9px 12px 9px 12px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_file > :is(.mx_InsidePendingUpload_ringWrap, .mx_InsidePendingUpload_fileIcon) {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lobby-b-out-fill);
  color: var(--lobby-b-out-ink);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_fileIcon svg {
  width: 20px;
  height: 20px;
  color: inherit;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_fileInfo {
  gap: 1px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_fileName {
  color: inherit;
  font-size: 14px;
  line-height: 1.38;
  font-weight: 600;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_fileInfo .mx_InsidePendingUpload_progressText {
  color: var(--lobby-b-out-meta);
  font-size: 12.5px;
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_caption {
  padding: 7px 11px 8px 12px;
  color: inherit;
  font-size: 14.5px;
  line-height: 1.38;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_file + .mx_InsidePendingUpload_caption {
  padding-top: 0;
}
/* Не отправилось: на графите красный Lobby (#C8102E) не читается —
   берём сигнал тёмной темы (#E2483A), он и есть «красный на тёмном». */
.mx_InsidePendingUpload .mx_InsidePendingUpload_failedActions {
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px 12px;
  font-size: 13px;
  line-height: 17px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_failedText {
  margin-inline-end: auto;
  color: #e2483a;
  font-weight: 500;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_failedActions .mx_AccessibleButton {
  padding: 5px 12px;
  border-radius: 14px;
  background: var(--lobby-b-out-fill);
  color: var(--lobby-b-out-ink);
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  text-decoration: none;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_failedActions .mx_AccessibleButton:hover {
  background: rgba(255, 255, 255, 0.22);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_failedActions .mx_InsidePendingUpload_delete {
  color: #e2483a;
}

/* --- Документ в ленте (форк -17: InsideDocumentTile) --- */
/* Как документ Telegram: слева скруглённая миниатюра 68 (первая страница
   PDF на белом или значок документа с типом), справа имя 14 / 600 в одну
   строку (середина длинного имени режется, расширение видно) и под ним
   «8,6 МБ · PDF» 13 приглушённо; справа круглая кнопка «Скачать» 32.
   В своём графитовом пузыре текст белый, подпись — белый 55 %; в чужом
   белом — чернила и приглушённый. Сам пузырь (фон, поля 6 / 12 / 6 / 6,
   время в углу) — в ломких селекторах, у строки медиа нет своего фона.
   Цвет берём currentColor пузыря — так одна запись на обе стороны и темы. */
.mx_EventTile .mx_MFileBody_inside_doc {
  gap: 6px;
  min-width: 240px;
  max-width: 340px;
}
.mx_EventTile .mx_MFileBody_inside_open {
  gap: 11px;
  border-radius: 11px;
}
.mx_EventTile .mx_MFileBody_inside_open:focus-visible,
.mx_EventTile .mx_MFileBody_inside_download:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.mx_EventTile .mx_MFileBody_inside_thumb {
  width: 68px;
  height: 68px;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
}
/* Первая страница — лист бумаги: белый с тонкой линией, без синей рамки.
   Линия — поверх картинки (::after): inset-тень самой рамки картинка
   перекрывает, и белый лист в белом пузыре сливался с ним. */
.mx_EventTile .mx_MFileBody_inside_thumb_picture {
  position: relative;
  background: #fff;
  box-shadow: none;
}
.mx_EventTile .mx_MFileBody_inside_thumb_picture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.mx_EventTile .mx_MFileBody_inside_thumb_picture img {
  border-radius: inherit;
}
.mx_EventTile .mx_MFileBody_inside_icon {
  gap: 3px;
  color: inherit;
}
.mx_EventTile .mx_MFileBody_inside_icon svg {
  width: 26px;
  height: 26px;
  color: inherit;
  opacity: 0.85;
}
.mx_EventTile .mx_MFileBody_inside_iconLabel {
  font-size: 10.5px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.mx_EventTile .mx_MFileBody_inside_info {
  gap: 2px;
}
.mx_EventTile .mx_MFileBody_inside_name {
  color: inherit;
  font: 600 14px / 1.38 var(--lobby-font);
}
.mx_EventTile .mx_MFileBody_inside_meta {
  color: var(--lobby-b-in-meta);
  font: 400 13px / 1.38 var(--lobby-font);
  font-variant-numeric: tabular-nums;
}
.mx_EventTile .mx_MFileBody_inside_download {
  align-self: center;
  width: 32px;
  height: 32px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
}
.mx_EventTile .mx_MFileBody_inside_download:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
}
.mx_EventTile .mx_MFileBody_inside_download svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

/* Файл отправляется, у PDF — его первая страница (форк -17,
   mx_InsidePendingUpload_filePage): та же миниатюра 68 со скруглением 11,
   что у отправленного документа, приглушена на 45 %, по центру белое
   кольцо 40 с крестиком; под именем «12 % · 12,3 из 42,5 МБ» белым 55 %.
   Поля пузыря — как у плитки документа: 6 / 12 / 6 / 6. */
.mx_InsidePendingUpload .mx_InsidePendingUpload_file:has(> .mx_InsidePendingUpload_filePage) {
  gap: 11px;
  min-width: 240px;
  padding: 6px 14px 6px 6px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_filePage {
  width: 68px;
  height: 68px;
  border-radius: 11px;
  background: #fff;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_filePage .mx_InsidePendingUpload_overlay {
  background: rgba(0, 0, 0, 0.45);
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_filePage .mx_InsidePendingUpload_ringWrap {
  width: 40px;
  height: 40px;
  background: transparent;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_filePage .mx_InsidePendingUpload_cancel svg {
  width: 18px;
  height: 18px;
}
.mx_InsidePendingUpload .mx_InsidePendingUpload_percent {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

/* «Отправить файл» с PDF (форк -17): первая страница — лист на вторичной
   заливке со скруглением 12 и тонкой рамкой, по высоте не больше 260,
   по центру; под ним та же тихая строка «имя · размер». */
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_document .mx_UploadConfirmDialog_inside_mediaFrame {
  display: flex;
  justify-content: center;
  padding: 14px 0;
  border-radius: 12px;
  background: var(--lobby-fill);
  box-shadow: inset 0 0 0 1px var(--lobby-line-2);
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_document .mx_UploadConfirmDialog_inside_mediaFrame img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 260px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* ==== v2 · Обсуждения */

/* П. 6.6, эталон — .thr / .tpanel макета. Полоса «N ответов» — нижняя
   часть пузыря (геометрия — в ломких селекторах): иконка 17 → «N ответов»
   13.5 / 600 → аватар 20 с обводкой цветом пузыря → «Имя: ответ»
   приглушённым с многоточием → красная точка 8, если есть новые → шеврон. */
.mx_ThreadSummary.mx_ThreadSummary {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 8px 11px 9px 12px;
  border: none;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: 13.5px;
  line-height: 1.38;
  box-shadow: none;
}
.mx_ThreadSummary.mx_ThreadSummary:hover,
.mx_ThreadSummary.mx_ThreadSummary:focus-visible {
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: none;
}

/* Шапка панели обсуждения: «Обсуждение» 15 / 600 (.tph b макета). */
.mx_ThreadView .mx_BaseCard_header_title_heading {
  color: var(--lobby-ink);
  font-size: 15px;
  font-weight: 600;
}
/* Под ней — «Отдел продаж · 6 ответов» 13 приглушённым в одну строку
   (форк -16, .tph span макета). */
.mx_ThreadView .mx_ThreadView_inside_title {
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
}
.mx_ThreadView .mx_ThreadView_inside_subtitle {
  font-size: 13px;
  line-height: 17px;
  font-weight: 400;
  color: var(--lobby-muted);
}

/* Стопка участников обсуждения (форк -16): до трёх аватаров 20 с обводкой
   2 цветом подложки, каждый следующий заходит на предыдущий на 6. */
.mx_ThreadSummary_inside_avatars.mx_ThreadSummary_inside_avatars {
  display: inline-flex;
  flex: none;
  margin: 0;
}
.mx_ThreadSummary_inside_avatars > .mx_ThreadSummary_inside_avatar + .mx_ThreadSummary_inside_avatar {
  margin-inline-start: -6px;
}

/* Список обсуждений чата (ThreadPanel): исходное сообщение — в две
   строки, под ним плашка как в ленте — капсула на вторичной заливке:
   иконка 17 → число ответов 600 → аватар 20 → последний ответ. */
.mx_ThreadPanel .mx_EventTile .mx_EventPreview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  font-size: 14px;
  line-height: 1.38;
}
.mx_ThreadPanel .mx_EventTile .mx_EventTile_line {
  white-space: normal;
}
.mx_ThreadPanel_replies.mx_ThreadPanel_replies {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 6px;
  padding: 8px 11px 9px 12px;
  border-radius: 12px;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
  font-size: 13.5px;
  line-height: 1.38;
}
.mx_ThreadPanel_replies > svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  color: inherit;
}
.mx_ThreadPanel_replies .mx_ThreadPanel_replies_amount {
  flex: none;
  padding: 0;
  color: inherit;
  font-weight: 600;
}
.mx_ThreadPanel_replies .mx_BaseAvatar {
  --cpd-avatar-size: 20px !important;
  flex: none;
  margin: 0;
  box-shadow: 0 0 0 2px var(--lobby-fill);
  font-size: 8.5px;
  font-weight: 600;
}
.mx_ThreadPanel_replies > :is(.mx_BaseAvatar, .mx_ThreadSummary_inside_avatars) ~ * {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--lobby-muted);
}

/* Строка ввода панели (.tcomp макета): поля 10, капсула от 44 (скругление
   22), справа через 8 — круглая кнопка 44. Скрепки в узкой панели Element
   не рисует (вложение — в «⋯»). Пустое поле — микрофон 44 на акценте
   (форк -16 включил его и в обсуждении), с текстом — красная «Отправить»
   44 (п. 6.7: стрелка вверх на сигнале); стиль круга — общий со строкой
   ввода чата. */
.mx_RightPanel .mx_MessageComposer {
  margin: 0;
  padding: 0;
}
.mx_RightPanel .mx_MessageComposer_wrapper.mx_MessageComposer_wrapper {
  margin: 10px;
  min-height: 44px;
  border-radius: 22px;
}
.mx_RightPanel .mx_MessageComposer_wrapper.mx_MessageComposer_wrapper:has(.mx_MessageComposer_sendMessage) {
  margin-inline-end: calc(10px + 8px + 44px);
}
.mx_RightPanel .mx_MessageComposer_wrapper .mx_BasicMessageComposer {
  min-height: 42px;
}
.mx_RightPanel .mx_MessageComposer_wrapper .mx_BasicMessageComposer_input {
  margin-block: 10px;
}
.mx_RightPanel .mx_MessageComposer_wrapper .mx_MessageComposer_actions {
  margin-bottom: 3px;
}
.mx_RightPanel .mx_MessageComposer_sendMessage {
  inset-inline-end: calc(-1px - 8px - 44px);
  width: 44px;
  height: 44px;
}
.mx_RightPanel .mx_MessageComposer_sendMessage svg {
  width: 20px;
  height: 20px;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}


/* ==== v2 · Шапка чата */

/* П. 6.4 и макет (.ch / .chp / .chb): шапка плавает над обоями в 10 px от
   краёв, высота 52. Слева капсула «аватар 38 · имя 15/600 · статус 13»,
   справа через 8 px — отдельная капсула с круглыми кнопками 40 (зазор 2,
   поля 6). Лента уходит ПОД шапку: отрицательный нижний отступ, а место
   над первым сообщением — padding-top у списка (74, как .tl в макете).
   Сам <header> прозрачный, обе капсулы — его ::before / ::after: правая по
   ширине = 42·N + 12, где N — число видимых кнопок (считается в ломком
   блоке через :has). Иконки — штриховые маски макета (п. 8, линия 1.8). */
:root {
  --lobby-ico-search: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --lobby-ico-more: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E");
  --lobby-ico-panel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E");
  --lobby-ico-thread: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M7 8h10M7 12h6'/%3E%3C/svg%3E");
}
.mx_RoomView_body > .mx_RoomHeader.mx_RoomHeader {
  --lobby-hb-n: 2;                                  /* кнопок справа */
  --lobby-hb-w: calc(var(--lobby-hb-n) * 42px + 12px);
  position: relative;
  z-index: 3;
  isolation: isolate;
  box-sizing: border-box;
  flex: none;
  height: 52px;
  min-height: 52px;
  margin: 10px 10px -62px;
  padding: 0 7px 0 9px;
  gap: 2px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}
.mx_RoomView_body > .mx_RoomHeader.mx_RoomHeader:hover {
  background: none;
}
.mx_RoomView_body > .mx_RoomHeader::before,
.mx_RoomView_body > .mx_RoomHeader::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 1px solid var(--lobby-glass-line);
  border-radius: 26px;
  background: var(--lobby-glass);
  -webkit-backdrop-filter: var(--lobby-glass-blur);
  backdrop-filter: var(--lobby-glass-blur);
  box-shadow: var(--lobby-shadow);
  pointer-events: none;
}
.mx_RoomView_body > .mx_RoomHeader::before {
  left: 0;
  right: calc(var(--lobby-hb-w) + 8px);
}
.mx_RoomView_body > .mx_RoomHeader::after {
  right: 0;
  width: var(--lobby-hb-w);
}
/* Аватар 38, до имени 10; буквы 14/600, как .chp .av макета (у Element —
   0.5625 размера, 21). */
.mx_RoomHeader .mx_BaseAvatar {
  --cpd-avatar-size: 38px !important;
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
}
.mx_RoomView_body > .mx_RoomHeader > .mx_BaseAvatar,
.mx_RoomView_body > .mx_RoomHeader > .mx_WithPresenceIndicator {
  margin-inline-end: 8px;
}
/* Имя и статус; до первой кнопки 8 + рамка + 6 = 15. */
.mx_RoomHeader .mx_RoomHeader_infoWrapper {
  margin-inline-end: 13px;
  gap: 0;
}
.mx_RoomHeader .mx_RoomHeader_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.mx_RoomHeader .mx_RoomHeader_heading {
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  color: var(--lobby-ink);
}
/* Статус личного чата — по точке присутствия Element. */
.mx_RoomHeader .mx_RoomHeader_info::after {
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  color: var(--lobby-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx_RoomHeader:has(.mx_PresenceIconView_online) .mx_RoomHeader_info::after {
  content: "в сети";
}
.mx_RoomHeader:has(.mx_PresenceIconView_unavailable) .mx_RoomHeader_info::after {
  content: "нет на месте";
}
.mx_RoomHeader:has(.mx_PresenceIconView_dnd) .mx_RoomHeader_info::after {
  content: "не беспокоить";
}
.mx_RoomHeader:has(.mx_PresenceIconView_offline) .mx_RoomHeader_info::after {
  content: "не в сети";
}
/* Статус группы — «N участников»: счётчик Element (FacePile) переезжает под
   имя, стопка аватарок скрыта, клик по-прежнему открывает список людей. */
.mx_RoomHeader:has(.mx_FacePile) .mx_RoomHeader_info {
  padding-bottom: 17px;
}
.mx_RoomView_body > .mx_RoomHeader .mx_FacePile.mx_FacePile {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  color: var(--lobby-muted);
  white-space: nowrap;
  outline: none;
}
.mx_RoomView_body > .mx_RoomHeader .mx_FacePile.mx_FacePile:hover,
.mx_RoomView_body > .mx_RoomHeader .mx_FacePile.mx_FacePile_toggled {
  background: none;
  color: var(--lobby-ink-2);
  font-weight: 400;
}
.mx_RoomView_body > .mx_RoomHeader .mx_FacePile > div {
  display: none;
}
.mx_RoomHeader .mx_FacePile::after {
  content: " участников";
}
.mx_RoomHeader .mx_FacePile:is([aria-label$="1 members"], [aria-label$="1 member"]):not([aria-label$="11 members"])::after {
  content: " участник";
}
.mx_RoomHeader .mx_FacePile:is([aria-label$="2 members"], [aria-label$="3 members"], [aria-label$="4 members"]):not([aria-label$="12 members"], [aria-label$="13 members"], [aria-label$="14 members"])::after {
  content: " участника";
}
/* «6 участников · 2 в сети» (форк -16): та же строка статуса, тот же
   13 приглушённый, через « · ». Клик — только по счётчику участников. */
.mx_RoomHeader .mx_RoomHeader_inside_online {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  color: var(--lobby-muted);
}
.mx_RoomHeader .mx_RoomHeader_inside_online::before {
  content: "\00a0·\00a0";
}
/* Лента под шапкой: место над первым сообщением, как .tl в макете. */
.mx_RoomView_body > .mx_RoomHeader ~ .mx_RoomView_timeline .mx_RoomView_MessageList.mx_RoomView_MessageList {
  padding-top: 74px;
}
/* «К непрочитанным» — под шапкой, тем же стеклом, что «вниз». */
.mx_RoomView_body .mx_TopUnreadMessagesBar {
  top: 72px;
  right: 16px;
  width: 44px;
}
.mx_RoomView_body .mx_TopUnreadMessagesBar::after {
  display: none;
}
.mx_TopUnreadMessagesBar .mx_TopUnreadMessagesBar_scrollUp,
.mx_TopUnreadMessagesBar .mx_TopUnreadMessagesBar_markAsRead {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--lobby-glass-line);
  background: var(--lobby-glass);
  -webkit-backdrop-filter: var(--lobby-glass-blur);
  backdrop-filter: var(--lobby-glass-blur);
  box-shadow: var(--lobby-shadow);
  color: var(--lobby-ink-2);
}
.mx_TopUnreadMessagesBar .mx_TopUnreadMessagesBar_scrollUp {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.mx_TopUnreadMessagesBar .mx_TopUnreadMessagesBar_scrollUp svg {
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--lobby-ink-2);
}
.mx_TopUnreadMessagesBar .mx_TopUnreadMessagesBar_markAsRead {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 6px auto 0;
}
.mx_TopUnreadMessagesBar .mx_TopUnreadMessagesBar_markAsRead svg {
  width: 14px;
  height: 14px;
  padding: 0;
  color: var(--lobby-ink-2);
}


/* ==== v2 · Фокус контейнеров и строка загрузки */

/* Комната (.mx_RoomView, tabIndex=-1) и другие контейнеры получают фокус
   программно — после клика по пустому месту, перетаскивания файла,
   Escape. Браузер рисует им синее кольцо фокуса вокруг всего чата.
   Кольцо нужно только интерактивным элементам, у контейнеров с
   tabindex="-1" его убираем (с клавиатуры до них не дойти). */
@layer compound-tokens {
  [tabindex="-1"]:focus,
  [tabindex="-1"]:focus-visible,
  .mx_RoomView:focus,
  .mx_RoomView:focus-visible,
  .mx_RoomView_body:focus,
  .mx_RoomView_messagePanel:focus,
  .mx_RightPanel:focus,
  .mx_MatrixChat:focus {
    outline: none !important;
  }
}

/* Отправка файла: Element красит имя, значок и крестик старым сине-серым
   $muted-fg-color (#61708b), полоска — акцентом Compound. Строка — тихая
   стеклянная капсула над строкой ввода, полоска графитом. */
.mx_RoomView_body .mx_UploadBar {
  margin: 0 10px 8px;
  padding: 8px 14px 9px;
  border-radius: 16px;
  background: var(--lobby-glass);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  column-gap: 8px;
  row-gap: 7px;
}
.mx_UploadBar > svg,
.mx_UploadBar .mx_UploadBar_cancel {
  color: var(--lobby-muted) !important;
}
.mx_UploadBar .mx_UploadBar_filename {
  color: var(--lobby-ink-2) !important;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx_UploadBar progress.mx_ProgressBar {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--lobby-line);
}
.mx_UploadBar progress.mx_ProgressBar::-webkit-progress-bar {
  border-radius: 2px;
  background: var(--lobby-line);
}
.mx_UploadBar progress.mx_ProgressBar::-webkit-progress-value {
  border-radius: 2px;
  background: var(--lobby-ink);
}
.mx_UploadBar progress.mx_ProgressBar::-moz-progress-bar {
  border-radius: 2px;
  background: var(--lobby-ink);
}


/* ==== v2 · Строка ввода */

/* П. 6.7 и макет (.comp / .rb / .field / .send / .jump): строка ввода
   плавает над обоями в 10 px от краёв, один ряд с зазором 8 —
   круглая стеклянная скрепка 48 · капсула от 48 (скругление 24, поля
   18 / 8, смайлик 36 внутри справа) · круглая кнопка 48: пустое поле —
   микрофон (ядро форка) на акценте, есть текст — стрелка вверх на сигнале.
   Капсула — .mx_MessageComposer_wrapper, скрепка и кнопка справа вынесены
   из неё абсолютно (ломкий блок / ниже). Лента уходит под строку ввода:
   отрицательный отступ у колонки ленты на высоту строки (48 + 10), место
   под последним сообщением — padding-bottom у списка (90, как .tl).
   Старая зелёная --inside-send убрана. */
:root {
  --lobby-ico-clip: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E");
  --lobby-ico-smile: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E");
  --lobby-ico-camera: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='3'/%3E%3Cpath d='M15.5 10.5 21 7.5v9l-5.5-3'/%3E%3C/svg%3E");
  --lobby-ico-mic: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v1a7 7 0 0 0 14 0v-1M12 18v4'/%3E%3C/svg%3E");
  --lobby-ico-send: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  --lobby-ico-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.mx_MessageComposer {
  background: transparent;
  border: none;
}
.mx_RoomView_body > .mx_MessageComposer {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px 10px;
}
/* Лента под строкой ввода (только когда строка ввода есть). */
.mx_RoomView_body > .mx_RoomView_timeline:has(~ .mx_MessageComposer) {
  margin-bottom: -58px;
}
.mx_RoomView_body > .mx_RoomView_timeline:has(~ .mx_MessageComposer) .mx_RoomView_MessageList.mx_RoomView_MessageList {
  padding-bottom: 90px;
}
.mx_MessageComposer_e2eIcon,
.mx_MessageComposer_e2eIconWrapper {
  display: none;
}
/* Капсула. */
.mx_MessageComposer_wrapper.mx_MessageComposer_wrapper {
  position: relative;
  box-sizing: border-box;
  margin: 0 56px;
  min-height: 48px;
  padding: 0 8px 0 18px;
  border: 1px solid var(--lobby-glass-line);
  border-radius: 24px;
  background: var(--lobby-glass);
  -webkit-backdrop-filter: var(--lobby-glass-blur);
  backdrop-filter: var(--lobby-glass-blur);
  box-shadow: var(--lobby-shadow);
}
.mx_MessageComposer_wrapper .mx_MessageComposer_row {
  align-items: flex-end;
}
.mx_MessageComposer_wrapper .mx_BasicMessageComposer {
  min-height: 46px;
}
.mx_MessageComposer_wrapper .mx_BasicMessageComposer_input {
  margin-block: 12px;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
}
.mx_MessageComposer_wrapper .mx_BasicMessageComposer_input.mx_BasicMessageComposer_inputEmpty > :first-child::before {
  color: var(--lobby-muted);
}
.mx_MessageComposer_wrapper .mx_MessageComposer_actions {
  align-self: flex-end;
  gap: 0;
  margin: 0 0 5px 8px;
}
/* Смайлик — 36, иконка 20, крайний справа; «⋯» (стикер, опрос) — рядом. */
.mx_MessageComposer_actions .mx_EmojiButton,
.mx_MessageComposer_actions .mx_MessageComposer_buttonMenu {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lobby-muted);
}
.mx_MessageComposer_actions .mx_EmojiButton {
  order: 2;
}
.mx_MessageComposer_actions .mx_MessageComposer_buttonMenu {
  order: 1;
}
.mx_MessageComposer_actions .mx_EmojiButton svg,
.mx_MessageComposer_actions .mx_MessageComposer_buttonMenu svg {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--lobby-ico-smile) center / 20px 20px no-repeat;
  mask: var(--lobby-ico-smile) center / 20px 20px no-repeat;
}
.mx_MessageComposer_actions .mx_MessageComposer_buttonMenu svg {
  -webkit-mask-image: var(--lobby-ico-more);
  mask-image: var(--lobby-ico-more);
}
.mx_MessageComposer_actions .mx_EmojiButton svg > *,
.mx_MessageComposer_actions .mx_MessageComposer_buttonMenu svg > * {
  display: none;
}
/* Кружок наведения Element (::after миксина composerButton) — во всю кнопку. */
.mx_MessageComposer_actions .mx_EmojiButton::after,
.mx_MessageComposer_actions .mx_MessageComposer_buttonMenu::after {
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  background: var(--lobby-hover);
}
/* Справа — круг 48: «Отправить» на сигнале, пустое поле — микрофон на акценте. */
.mx_MessageComposer_sendMessage {
  position: absolute;
  inset-inline-end: -57px;
  bottom: -1px;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lobby-signal);
  color: var(--lobby-signal-ink);
}
.mx_MessageComposer_sendMessage:hover {
  background: var(--lobby-signal-hover);
}
.mx_MessageComposer_sendMessage svg {
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
  background: currentColor;
  -webkit-mask: var(--lobby-ico-send) center / 22px 22px no-repeat;
  mask: var(--lobby-ico-send) center / 22px 22px no-repeat;
}
.mx_MessageComposer_sendMessage svg > * {
  display: none;
}
.mx_MessageComposer_sendMessage.mx_MessageComposer_voiceMessage {
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}
.mx_MessageComposer_sendMessage.mx_MessageComposer_voiceMessage:hover {
  background: var(--lobby-accent-hover);
}
.mx_MessageComposer_voiceMessage svg {
  width: 22px;
  height: 22px;
  color: inherit;
  -webkit-mask-image: var(--lobby-ico-mic);
  mask-image: var(--lobby-ico-mic);
}
/* Режим «кружка» (сборка -23): камера линией, как микрофон, вместо
   заливного значка видеозвонка Element. Форк снимает маску с svg через
   !important, поэтому значок рисуем на обёртке, а svg прячем. */
.mx_MessageComposer_voiceMessage .mx_InsideRecordButton_camera {
  inset: 50% auto auto 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: currentColor;
  -webkit-mask: var(--lobby-ico-camera) center / 22px 22px no-repeat;
  mask: var(--lobby-ico-camera) center / 22px 22px no-repeat;
}
.mx_MessageComposer_voiceMessage .mx_InsideRecordButton_camera svg {
  visibility: hidden;
}
/* Идёт запись голосового (форк -16: mx_MessageComposer--recording).
   Поле ввода в это время выключено — прячем его, и вся капсула отдаётся
   записи: корзина · стоп · время и волна приглушённым на всю ширину;
   справа — красная «Отправить». Иначе волна шириной 267 вылезала из узкой
   капсулы обсуждения под кнопку. */
.mx_MessageComposer--recording .mx_SendMessageComposer,
.mx_MessageComposer--recording .mx_MessageComposer_e2eIconWrapper {
  display: none;
}
.mx_MessageComposer--recording .mx_MessageComposer_actions {
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  padding-inline-start: 8px;
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_recording {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_recording::before {
  position: static;
  flex: none;
  margin: 0;
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_recording .mx_Clock {
  flex: none;
  width: auto;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--lobby-ink-2);
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_recording {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 40px;
  margin: 0;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--lobby-muted);
  font-variant-numeric: tabular-nums;
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_recording .mx_Waveform {
  min-width: 0;
  overflow: hidden;
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_delete,
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_stop {
  flex: none;
  color: var(--lobby-muted);
}
.mx_MessageComposer--recording .mx_VoiceRecordComposerTile_stop {
  background: transparent;
  border-color: var(--lobby-line-2);
}

/* Правка своего сообщения в поле ввода (ядро форка). */
.mx_EditPreview .mx_EditPreview_icon {
  color: var(--lobby-ink);
}
/* «Вниз к новым» — круглое стекло 44 над правой кнопкой: 16 от правого края
   ленты, 14 над строкой ввода (bottom 72 = 58 под лентой + 14), счётчик —
   над кругом и не сдвигает его. */
.mx_JumpToBottomButton.mx_JumpToBottomButton {
  right: 16px;
  bottom: 72px;
  width: 44px;
  height: 44px;
}
.mx_RoomView_body > .mx_RoomView_timeline:not(:has(~ .mx_MessageComposer)) .mx_JumpToBottomButton {
  bottom: 14px;
}
.mx_JumpToBottomButton .mx_JumpToBottomButton_scrollDown {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lobby-glass-line);
  border-radius: 50%;
  background: var(--lobby-glass);
  -webkit-backdrop-filter: var(--lobby-glass-blur);
  backdrop-filter: var(--lobby-glass-blur);
  box-shadow: var(--lobby-shadow);
  color: var(--lobby-ink-2);
}
.mx_JumpToBottomButton .mx_JumpToBottomButton_scrollDown svg {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--lobby-ink-2);
  background: currentColor;
  -webkit-mask: var(--lobby-ico-down) center / 20px 20px no-repeat;
  mask: var(--lobby-ico-down) center / 20px 20px no-repeat;
}
.mx_JumpToBottomButton .mx_JumpToBottomButton_scrollDown svg > * {
  display: none;
}
.mx_JumpToBottomButton .mx_JumpToBottomButton_badge,
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  background: var(--lobby-signal);
  color: var(--lobby-signal-ink);
}


/* ==== v2 · Правая панель */

/* П. 6.8: «О чате» и карточка собеседника — профиль как в Telegram.
   Карточка панели (фон, скругление, тень поверх чата при окне уже 1400) —
   и ширина — в «Каркасе окна»: 320, как .side макета (в п. 6.8 ТЗ — 330,
   при расхождении прав макет; у обсуждения 360); здесь всё, что внутри. Аватар 88 по центру, имя 18/600, под ним адрес / статус; ряд из
   четырёх плиток (вторичная заливка, скругление 12, значок над подписью
   11.5); остальные пункты — группами со скруглением 14 на вторичной
   заливке, строками 46 с разделителями. Плитки «Позвонить / Без звука /
   Поиск / Ещё» и табы «Медиа / Файлы / Ссылки» — компонент форка
   (InsideRoomSummary, с -16): плитки сразу под профилем, табы — в конце
   карточки, под группами, как .mtabs / .thumbs макета. Блок «Лид в Insis» —
   этап 2. */
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView),
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header {
  background: transparent;
}
/* Шапка: поиск по чату капсулой 36 на вторичной заливке и круглый крестик
   36 — как .sh макета (отступ 12 12 0, без линии снизу). */
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header {
  height: auto;
  min-height: 48px;
  padding: 12px 12px 0;
  gap: 8px;
  border-block-end: none;
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header .mx_RoomSummaryCard_search {
  height: 36px;
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title_heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--lobby-ink);
  padding-inline-start: 6px;
}

/* --- Профиль --- */
.mx_RightPanel .mx_RoomSummaryCard_container {
  margin: 0;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.mx_RightPanel .mx_RoomSummaryCard_container > .mx_BaseAvatar,
.mx_RightPanel .mx_UserInfo_avatar .mx_BaseAvatar {
  --cpd-avatar-size: 88px !important;
  width: 88px;
  height: 88px;
  font-size: 30px;
}
.mx_RightPanel .mx_RoomSummaryCard_container > .mx_BaseAvatar {
  margin-bottom: 6px;
}
.mx_RightPanel .mx_RoomSummaryCard_roomName,
.mx_RightPanel .mx_UserInfo_profile_name,
.mx_RightPanel .mx_UserInfo_profile h1 {
  margin: 0;
  font-size: 18px;
  line-height: 23px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--lobby-ink);
}
.mx_RightPanel .mx_RoomSummaryCard_alias,
.mx_RightPanel .mx_UserInfo_profile_mxid,
.mx_RightPanel .mx_UserInfo_profileStatus {
  font-size: 13.5px;
  line-height: 17px;
  font-weight: 400;
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_RoomSummaryCard_alias:empty {
  display: none;
}
/* Метки «Не зашифровано» и т. п. — нейтральные капсулы, без синего. */
.mx_RightPanel .mx_RoomSummaryCard_badges {
  margin: 6px 0 0;
  gap: 6px;
}

/* Описание чата — группа «подпись над значением». */
.mx_RightPanel .mx_RoomSummaryCard_topic {
  align-self: stretch;
  margin: 12px -4px 0;
  padding: 10px 14px;
  gap: 1px;
  border-radius: 14px;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
  text-align: start;
}
.mx_RightPanel .mx_RoomSummaryCard_topic::before {
  content: "Описание";
  font-size: 12px;
  line-height: 15px;
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_RoomSummaryCard_topic p {
  font-size: 14px;
  line-height: 1.38;
  color: var(--lobby-ink);
}
.mx_RightPanel .mx_RoomSummaryCard_topic a {
  color: var(--lobby-ink);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}
.mx_RightPanel .mx_RoomSummaryCard_topic_edit {
  margin-top: 4px;
}
.mx_RightPanel .mx_RoomSummaryCard_topic_edit p {
  font-size: 13px;
}

/* --- Плитки (.acts макета) --- */
/* Ряд под профилем: «Позвонить» (нет в группах и где звонки выключены),
   «Без звука», «Поиск», «Ещё» — колонки делят ширину поровну, сколько бы
   плиток ни было. Вторичная заливка, скругление 12, значок 22 над
   подписью 11.5 / 500. */
.mx_RightPanel .mx_RoomSummaryCard_inside_tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 0 12px 14px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 9px 0 7px;
  border: none;
  border-radius: 12px;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
  font: inherit;
  cursor: pointer;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile:hover {
  background: var(--lobby-hover);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile:focus-visible {
  outline: 2px solid var(--lobby-ink-2);
  outline-offset: -2px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile:disabled {
  cursor: default;
  opacity: 0.45;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile:disabled:hover {
  background: var(--lobby-fill);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: inherit;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tileLabel {
  max-width: calc(100% - 8px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  line-height: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
}
/* Чат заглушён: плитка «Со звуком» нажата — заливка на тон плотнее
   (без красного: это не сигнал). */
.mx_RightPanel .mx_RoomSummaryCard_inside_tile:is(.mx_RoomSummaryCard_inside_tile_muted, [aria-pressed="true"]) {
  background: var(--lobby-line-2);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tile[aria-expanded="true"] {
  background: var(--lobby-hover);
}

/* --- Группы --- */
/* Пункты Element — группы со скруглением 14 на вторичной заливке, как .grp
   макета; разделитель Element между ними — зазор 12. Порядок групп —
   Element: «Избранное, Пригласить» → «Участники, Обсуждения, Закреплённые,
   Файлы…» → «Ссылка, Опросы, Экспорт, Настройки» → «Пожаловаться, Покинуть». */
.mx_RightPanel .mx_RoomSummaryCard .mx_AutoHideScrollbar > [role="separator"] {
  display: none;
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] {
  display: flex;
  flex-direction: column;
  padding: 0 12px 14px;
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role="separator"] {
  flex: none;
  height: 12px;
  margin: 0 !important;
  border: none;
  background: none;
}

/* Строки групп: 46, значок 20 вторичным, подпись 14.5; группа — вторичная
   заливка со скруглением 14, внутри разделители. */
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"],
.mx_RightPanel .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"],
.mx_RightPanel .mx_UserInfo_container [role^="menuitem"] {
  grid-template: "icon label ." auto / auto auto minmax(8px, 1fr);
  align-items: center;
  min-inline-size: 0;
  min-height: 46px;
  padding: 0 14px;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
}
/* «Избранное» — со своим тумблером справа. */
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role="menuitemcheckbox"] {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role="menuitemcheckbox"] > span {
  justify-self: start;
  text-align: start;
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"] + [role^="menuitem"],
.mx_RightPanel .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"] + [role^="menuitem"],
.mx_RightPanel .mx_UserInfo_container [role^="menuitem"] + [role^="menuitem"] {
  box-shadow: inset 0 1px 0 var(--lobby-line-2);
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"]:hover,
.mx_RightPanel .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"]:hover,
.mx_RightPanel .mx_UserInfo_container [role^="menuitem"]:hover {
  background: var(--lobby-hover);
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"]:first-child,
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role="separator"] + [role^="menuitem"] {
  border-start-start-radius: 14px;
  border-start-end-radius: 14px;
}
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"]:has(+ [role="separator"]),
.mx_RightPanel .mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"]:last-child {
  border-end-start-radius: 14px;
  border-end-end-radius: 14px;
}
.mx_RightPanel .mx_RoomSummaryCard_bottomOptions,
.mx_RightPanel .mx_UserInfo_container:has([role^="menuitem"]) {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
.mx_RightPanel .mx_UserInfo_container:has([role^="menuitem"]) {
  margin: 0 12px 12px;
  padding: 0;
  background: var(--lobby-fill);
}
.mx_RightPanel :is(.mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"], .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"], .mx_UserInfo_container [role^="menuitem"]) > svg:first-child {
  width: 20px;
  height: 20px;
  color: var(--lobby-ink-2);
}
.mx_RightPanel :is(.mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"], .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"], .mx_UserInfo_container [role^="menuitem"]) > span:first-of-type {
  font-size: 14.5px;
  line-height: 18px;
  font-weight: 400;
  color: inherit;
}
.mx_RightPanel :is(.mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"], .mx_UserInfo_container [role^="menuitem"]) > span:not(:first-of-type) {
  font-size: 13.5px;
  color: var(--lobby-muted);
}
/* Опасные пункты («Покинуть», «Пожаловаться») — сигналом (п. 3, место 4). */
.mx_RightPanel :is(.mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"], .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"], .mx_UserInfo_container [role^="menuitem"])[data-kind="critical"],
.mx_RightPanel :is(.mx_RoomSummaryCard [role="menubar"] > [role^="menuitem"], .mx_RoomSummaryCard_bottomOptions > [role^="menuitem"], .mx_UserInfo_container [role^="menuitem"])[data-kind="critical"] > svg:first-child {
  color: var(--lobby-signal);
}

/* --- Медиа / Файлы / Ссылки (.mtabs / .thumbs макета) --- */
/* Табы: равные кнопки 13 / 500 приглушённым, активный — на вторичной
   заливке цветом текста. Сетка медиа — 3 колонки, зазор 3, скругление 6;
   файлы и ссылки — группой со скруглением 14, строки «значок · название
   над подписью». */
.mx_RightPanel .mx_RoomSummaryCard_inside_media {
  padding: 0 0 16px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tabs {
  display: flex;
  gap: 4px;
  padding: 2px 12px 10px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tab {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--lobby-muted);
  font: inherit;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  cursor: pointer;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tab:hover {
  color: var(--lobby-ink-2);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tab:is(.mx_RoomSummaryCard_inside_tab_active, [aria-selected="true"]) {
  background: var(--lobby-fill);
  color: var(--lobby-ink);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_tab:focus-visible {
  outline: 2px solid var(--lobby-ink-2);
  outline-offset: -2px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_panel {
  padding: 0 12px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_panel .mx_Spinner {
  padding: 12px 0;
}
.mx_RightPanel :is(.mx_RoomSummaryCard_inside_grid, .mx_RoomSummaryCard_inside_list) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_gridItem {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  background: var(--lobby-fill);
  cursor: pointer;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_gridItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_gridItem:hover img {
  filter: brightness(0.92);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_gridItem:focus-visible {
  outline: 2px solid var(--lobby-ink-2);
  outline-offset: -2px;
}
/* Видео — белый треугольник в тёмном круге 28 по центру. */
.mx_RightPanel .mx_RoomSummaryCard_inside_videoIcon {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: auto;
  padding: 7px 6px 7px 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_list {
  border-radius: 14px;
  overflow: hidden;
  background: var(--lobby-fill);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_item {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--lobby-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_list > li + li .mx_RoomSummaryCard_inside_item {
  box-shadow: inset 0 1px 0 var(--lobby-line-2);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_item:hover {
  background: var(--lobby-hover);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_item:focus-visible {
  outline: 2px solid var(--lobby-ink-2);
  outline-offset: -2px;
}
/* Файл — круг 40 акцентом, как кружок файла в чужом пузыре; ссылка —
   квадрат 40 со скруглением 10 на тон плотнее заливки. */
.mx_RightPanel .mx_RoomSummaryCard_inside_itemIcon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_link .mx_RoomSummaryCard_inside_itemIcon {
  border-radius: 10px;
  background: var(--lobby-line-2);
  color: var(--lobby-ink-2);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_itemIcon svg {
  width: 20px;
  height: 20px;
  color: inherit;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_itemText {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mx_RightPanel :is(.mx_RoomSummaryCard_inside_itemTitle, .mx_RoomSummaryCard_inside_itemUrl, .mx_RoomSummaryCard_inside_itemMeta) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mx_RightPanel .mx_RoomSummaryCard_inside_itemTitle {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--lobby-ink);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_itemUrl {
  font-size: 12.5px;
  line-height: 16px;
  color: var(--lobby-ink-2);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_itemMeta {
  font-size: 12.5px;
  line-height: 16px;
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_empty {
  padding: 20px 12px 8px;
  text-align: center;
  font-size: 13.5px;
  line-height: 18px;
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_RoomSummaryCard_inside_sentinel {
  height: 1px;
}


/* ==== v2 · Настройки */

/* П. 6.9, экран «Настройки» макета: окно встаёт на место списка и
   переписки (рейл виден). Слева карточка 320 — заголовок «Настройки»,
   профиль (ядро форка, аватар 60) и разделы группами со скруглением 14 на
   вторичной заливке: строки 46, значок белым в цветном квадрате 30 (тона
   аватаров, не красный), шеврон, выбранный раздел — цвет выбора. Справа —
   фон окна: круглая «назад» 44 и заголовок 17/600 по центру колонки 640,
   заголовки групп капсом 12 над карточками, карточки 14 со строками от 50,
   пояснения 12.5 под карточками. На узком экране — окно Element. */
@media (min-width: 900px) {
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog_background {
    opacity: 0 !important;
  }
  .mx_Dialog_border:has(.mx_UserSettingsDialog),
  .mx_Dialog_wrapper > .mx_Dialog:has(.mx_UserSettingsDialog) {
    position: fixed;
    inset: var(--lobby-pad) var(--lobby-pad) var(--lobby-pad)
      calc(var(--lobby-pad) + var(--lobby-rail-w) + var(--lobby-gap));
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--lobby-radius-card);
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mx_Dialog:has(.mx_UserSettingsDialog) {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .mx_UserSettingsDialog.mx_Dialog_fixedWidth {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    /* Шеврон строки и стрелка «назад» — маски, цвет задаёт фон. */
    --lobby-set-chev: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --lobby-set-back: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E");
  }
  .mx_UserSettingsDialog .mx_SettingsDialog_content {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
  }
  .mx_UserSettingsDialog .mx_TabbedView {
    position: absolute;
    inset: 0;
    padding: 0;
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    gap: var(--lobby-gap);
    /* Зазор между карточками — фон окна, а не чат под ним. */
    background: var(--lobby-window);
  }

  /* --- Левая карточка --- */
  .mx_UserSettingsDialog .mx_TabbedView_tabList {
    flex: 0 0 var(--lobby-list-w);
    position: static !important;
    width: var(--lobby-list-w) !important;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    background: var(--lobby-panel);
    border-radius: var(--lobby-radius-card);
    padding: 0 6px 6px;
    overflow-y: auto;
  }
  /* Заголовок колонки — как «Все чаты»: 16/600 по центру, .lh макета. */
  .mx_UserSettingsDialog .mx_TabbedView_tabList::before {
    content: "Настройки";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 12px 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lobby-ink);
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabList .mx_TabbedView_tabLabels {
    position: static !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: none !important;
    padding: 0;
    margin: 0;
  }
  .mx_UserSettingsDialog .mx_UserSettingsDialog_profile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px 14px;
    margin: 0;
    border-radius: 12px;
    text-align: start;
  }
  .mx_UserSettingsDialog .mx_UserSettingsDialog_profile:hover {
    background: var(--lobby-hover);
  }
  /* Element сам ставит сюда фокус при открытии — тонкая рамка, не синяя. */
  .mx_UserSettingsDialog .mx_UserSettingsDialog_profile:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px var(--lobby-line-2);
  }
  .mx_UserSettingsDialog .mx_UserSettingsDialog_profile .mx_BaseAvatar {
    --cpd-avatar-size: 60px !important;
    width: 60px;
    height: 60px;
    font-size: 21px;
    flex: 0 0 auto;
  }
  .mx_UserSettingsDialog_profile_text {
    min-width: 0;
  }
  .mx_UserSettingsDialog_profile_name {
    font-size: 16px;
    line-height: 20.5px;
    font-weight: 600;
    color: var(--lobby-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mx_UserSettingsDialog_profile_id {
    margin-top: 0;
    font-size: 13px;
    line-height: 16.5px;
    color: var(--lobby-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Строка раздела: 46, отступ 12, значок 30, подпись 14.5, шеврон 20.
     Группы — по порядку Element (клавиатурная навигация не ломается):
     «Аккаунт, Устройства» · «Внешний вид … Боковая панель» ·
     «Безопасность, Шифрование» · «Лаборатория, Помощь». Начало группы —
     пункт из списка ниже; концы считаются соседством, так что пропавший
     раздел (голос, Mjolnir) группы не рвёт. */
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel {
    position: relative;
    width: auto !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    margin: 0 8px;
    padding: 0 12px;
    border-radius: 0;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--lobby-ink);
    background: var(--lobby-fill);
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel:is(:first-child, [aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"], [aria-controls="mx_tabpanel_USER_SECURITY_TAB"], [aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"] + *) {
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel:is(:last-child, :has(+ :is([aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"], [aria-controls="mx_tabpanel_USER_SECURITY_TAB"])), [aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"]) {
    border-end-start-radius: 14px;
    border-end-end-radius: 14px;
    margin-bottom: 12px;
  }
  /* Разделитель внутри группы — от подписи, как .si + .si .sl. */
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel_text {
    display: flex !important;
    align-items: center;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel + .mx_TabbedView_tabLabel:not(:is([aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"], [aria-controls="mx_tabpanel_USER_SECURITY_TAB"], [aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"] + *)) .mx_TabbedView_tabLabel_text {
    box-shadow: inset 0 1px 0 var(--lobby-line-2);
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel_text::after {
    content: "";
    flex: 0 0 20px;
    height: 20px;
    margin-inline-start: auto;
    background-color: var(--lobby-faint);
    -webkit-mask: var(--lobby-set-chev) center / contain no-repeat;
    mask: var(--lobby-set-chev) center / contain no-repeat;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel:hover {
    background: var(--lobby-hover);
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel.mx_TabbedView_tabLabel_active {
    background: var(--lobby-sel);
    color: var(--lobby-sel-ink);
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
    box-shadow: none !important;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text::after {
    background-color: var(--lobby-sel-ink);
    opacity: 0.7;
  }
  /* Точка «нужно внимание» (шифрование) — сигнал, перед шевроном. */
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel.mx_SettingsDialog_tabLabelsAlert::after {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    clip-path: none;
    background-color: var(--lobby-signal);
  }
  /* Значок раздела — линейный значок макета (штрих 1.8, 17) белым в
     квадрате 30 со скруглением 8, тона аватаров (.si .sq макета).
     Квадрат — ::before строки, значок — маска на самом <svg> Element
     (его залитые контуры скрыты). Вкладки узнаём по aria-controls
     (id панели mx_tabpanel_USER_*_TAB — стабильные ключи Element, не
     подписи); незнакомая вкладка — квадрат первого тона с её
     собственным значком Element. */
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel::before {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-start: 12px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lobby-set-sq, var(--lobby-av-1));
    pointer-events: none;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel > svg {
    position: relative;             /* над квадратом ::before */
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0 6.5px;                /* 6.5 + 17 + 6.5 = квадрат 30; до подписи — gap 12 */
    padding: 0;
    color: #ffffff;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel:is([aria-controls="mx_tabpanel_USER_ACCOUNT_TAB"], [aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"], [aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"], [aria-controls="mx_tabpanel_USER_NOTIFICATIONS_TAB"], [aria-controls="mx_tabpanel_USER_PREFERENCES_TAB"], [aria-controls="mx_tabpanel_USER_KEYBOARD_TAB"], [aria-controls="mx_tabpanel_USER_SIDEBAR_TAB"], [aria-controls="mx_tabpanel_USER_VOICE_TAB"], [aria-controls="mx_tabpanel_USER_SECURITY_TAB"], [aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"], [aria-controls="mx_tabpanel_USER_LABS_TAB"], [aria-controls="mx_tabpanel_USER_MJOLNIR_TAB"], [aria-controls="mx_tabpanel_USER_HELP_TAB"]) > svg {
    background-color: #ffffff;
    -webkit-mask: var(--lobby-set-ico) center / 17px 17px no-repeat;
    mask: var(--lobby-set-ico) center / 17px 17px no-repeat;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabLabel:is([aria-controls="mx_tabpanel_USER_ACCOUNT_TAB"], [aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"], [aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"], [aria-controls="mx_tabpanel_USER_NOTIFICATIONS_TAB"], [aria-controls="mx_tabpanel_USER_PREFERENCES_TAB"], [aria-controls="mx_tabpanel_USER_KEYBOARD_TAB"], [aria-controls="mx_tabpanel_USER_SIDEBAR_TAB"], [aria-controls="mx_tabpanel_USER_VOICE_TAB"], [aria-controls="mx_tabpanel_USER_SECURITY_TAB"], [aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"], [aria-controls="mx_tabpanel_USER_LABS_TAB"], [aria-controls="mx_tabpanel_USER_MJOLNIR_TAB"], [aria-controls="mx_tabpanel_USER_HELP_TAB"]) > svg > * {
    display: none;
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_ACCOUNT_TAB"] {
    --lobby-set-sq: var(--lobby-av-2);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4.2 4-6.5 8-6.5s7.2 2.3 8 6.5'/%3E%3C/svg%3E"); /* user */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"] {
    --lobby-set-sq: var(--lobby-av-4);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='14' height='11' rx='2'/%3E%3Crect x='17' y='8' width='5' height='12' rx='1.5'/%3E%3Cpath d='M6 19h7'/%3E%3C/svg%3E"); /* devices */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"] {
    --lobby-set-sq: var(--lobby-av-7);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.4 2.6a2 2 0 0 1 2.9 2.9L11 15.8 8.2 13zM7 14a3 3 0 0 0-3 3c0 1.5-1 2.5-2 3 1 1 3 1.5 5 1.5a4 4 0 0 0 4-4z'/%3E%3C/svg%3E"); /* brush */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_NOTIFICATIONS_TAB"] {
    --lobby-set-sq: var(--lobby-av-8);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); /* bell */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_PREFERENCES_TAB"] {
    --lobby-set-sq: var(--lobby-av-5);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-2.7-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3.6 15H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.1-2.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9.7 4.4V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.7H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E"); /* gear */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_KEYBOARD_TAB"] {
    --lobby-set-sq: var(--lobby-av-3);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M7 15h10'/%3E%3C/svg%3E"); /* kbd */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_SIDEBAR_TAB"] {
    --lobby-set-sq: var(--lobby-av-2);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E"); /* panel */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_VOICE_TAB"] {
    --lobby-set-sq: var(--lobby-av-4);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v1a7 7 0 0 0 14 0v-1M12 18v4'/%3E%3C/svg%3E"); /* mic */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_SECURITY_TAB"] {
    --lobby-set-sq: var(--lobby-av-1);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); /* lock */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"] {
    --lobby-set-sq: var(--lobby-av-9);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3L21 2M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E"); /* key */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_LABS_TAB"] {
    --lobby-set-sq: var(--lobby-av-10);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 18.5A1.6 1.6 0 0 0 6 21h12a1.6 1.6 0 0 0 1.5-2.5L14 9V3'/%3E%3C/svg%3E"); /* lab */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_MJOLNIR_TAB"] {
    --lobby-set-sq: var(--lobby-av-8);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .7 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E"); /* users */
  }
  .mx_UserSettingsDialog [aria-controls="mx_tabpanel_USER_HELP_TAB"] {
    --lobby-set-sq: var(--lobby-av-6);
    --lobby-set-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); /* help */
  }

  /* --- Правая часть: фон окна, колонка 640 --- */
  .mx_UserSettingsDialog .mx_TabbedView_tabPanel {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    position: static !important;
    height: 100%;
    background: var(--lobby-window);
    border-radius: var(--lobby-radius-card);
    padding-top: 74px;              /* 16 + «назад» 44 + 14, как .setpane */
    box-sizing: border-box;
  }
  .mx_UserSettingsDialog .mx_TabbedView_tabPanelContent {
    width: 100%;                    /* без этого колонка выходила 626, не 640 */
    max-width: calc(640px + 48px);
    margin: 0 auto;
    padding: 0 24px 24px;
    box-sizing: border-box;
  }
  .mx_UserSettingsDialog > .mx_Dialog_header {
    position: absolute;
    top: 16px;
    left: calc(var(--lobby-list-w) + var(--lobby-gap));
    right: 0;
    height: 44px;
    margin: 0;
    padding: 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
  }
  .mx_UserSettingsDialog .mx_UserSettingsDialog_title_strong {
    display: none;
  }
  .mx_UserSettingsDialog .mx_Dialog_header .mx_Dialog_title.mx_UserSettingsDialog_title {
    margin: 0;
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    text-align: center;
    color: var(--lobby-ink);
  }
  /* «Назад» — круглая 44 на цвете панели слева от заголовка (в Telegram
     настройки закрываются так же). Значок Element заменён стрелкой. */
  .mx_UserSettingsDialog .mx_Dialog_cancelButton {
    position: absolute;
    top: 16px;
    right: auto;
    left: calc(var(--lobby-list-w) + var(--lobby-gap)
      + max(24px, (100% - var(--lobby-list-w) - var(--lobby-gap) - 640px) / 2));
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--lobby-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .mx_UserSettingsDialog .mx_Dialog_cancelButton > svg {
    display: none;
  }
  .mx_UserSettingsDialog .mx_Dialog_cancelButton::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--lobby-ink-2);
    -webkit-mask: var(--lobby-set-back) center / contain no-repeat;
    mask: var(--lobby-set-back) center / contain no-repeat;
  }
  .mx_UserSettingsDialog .mx_Dialog_cancelButton:hover {
    background-color: var(--lobby-hover);
  }

  /* Разделы и группы: заголовок капсом 12 над карточкой, пояснение 12.5
     под ней; разделители Element не нужны — группы разделяет фон. */
  .mx_UserSettingsDialog .mx_SettingsTab,
  .mx_UserSettingsDialog .mx_SettingsTab_sections,
  .mx_UserSettingsDialog .mx_SettingsSection,
  .mx_UserSettingsDialog .mx_SettingsSection_subSections {
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .mx_UserSettingsDialog .mx_SettingsSection + .mx_SettingsSection {
    margin-top: 16px;
  }
  .mx_UserSettingsDialog .mx_SettingsSection > h2,
  .mx_UserSettingsDialog .mx_SettingsSection_header h2,
  .mx_UserSettingsDialog .mx_SettingsSection > .mx_Heading_h3,
  .mx_UserSettingsDialog .mx_SettingsSubsectionHeading_heading {
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lobby-muted);
    margin: 0;
  }
  .mx_UserSettingsDialog .mx_SettingsSection > h2,
  .mx_UserSettingsDialog .mx_SettingsSection_header,
  .mx_UserSettingsDialog .mx_SettingsSection > .mx_Heading_h3 {
    margin: 16px 16px 6px;
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .mx_UserSettingsDialog .mx_SettingsSubsectionHeading {
    order: 0;
    margin: 16px 16px 6px;
    min-height: 0;
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection_description,
  .mx_UserSettingsDialog .mx_SettingsSubsection > .mx_SettingsSubsection_text {
    order: 2;
    margin: 6px 16px 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--lobby-muted);
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection_content {
    order: 1;
    margin: 0;
    padding: 0 16px;
    gap: 0;
    justify-items: stretch;
    background: var(--lobby-panel);
    border-radius: 14px;
    box-sizing: border-box;
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection_content:empty {
    display: none;
  }
  /* Строки карточки — от 50, разделитель между ними. */
  .mx_UserSettingsDialog .mx_SettingsSubsection_content > * {
    min-height: 50px;
    margin: 0;
    padding-block: 12px;            /* тумблер 26 + 2 × 12 = 50, как .opt (было 52) */
    box-sizing: border-box;
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection_content > * + * {
    border-top: 1px solid var(--lobby-line);
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection [role="separator"] {
    display: none;
  }
  .mx_UserSettingsDialog .mx_SettingsSubsection_content > .mx_SettingsFlag {
    align-items: center;
  }
  .mx_UserSettingsDialog .mx_SettingsFlag_label {
    padding-top: 0;
    font-size: 14.5px;
    color: var(--lobby-ink);
  }
  .mx_UserSettingsDialog .mx_SettingsFlag_microcopy,
  .mx_UserSettingsDialog .mx_SettingsTab_microcopy {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--lobby-muted);
  }
  /* Ссылки и кнопки-ссылки — цветом текста, не синие. */
  .mx_UserSettingsDialog .mx_TabbedView_tabPanel a:not([role="button"]),
  .mx_UserSettingsDialog .mx_TabbedView_tabPanel .mx_AccessibleButton_kind_link,
  .mx_UserSettingsDialog .mx_TabbedView_tabPanel .mx_AccessibleButton_kind_link_inline {
    color: var(--lobby-ink);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 2px;
  }

  /* Заголовок 17/600 и зазор плиток 12. Element задаёт их с !important в
     слое @layer app-web, а важное из слоя сильнее важного без слоя —
     поэтому перебиваем из первого слоя порядка Element (compound-tokens):
     у !important более ранний слой побеждает. */
  @layer compound-tokens {
    .mx_UserSettingsDialog .mx_UserSettingsDialog_title {
      font: 600 17px / 22px var(--lobby-font) !important;
    }
    .mx_UserSettingsDialog .mx_ThemeChoicePanel_ThemeSelectors {
      gap: 12px !important;
    }
  }

  /* «Уведомления»: таблицы правил и форма — тоже карточками. */
  .mx_UserSettingsDialog .mx_UserNotifSettings_grid,
  .mx_UserSettingsDialog .mx_SettingsSection_subSections > form {
    box-sizing: border-box;
    width: 100%;
    margin-top: 16px;
    padding: 6px 16px 10px;
    border-radius: 14px;
    background: var(--lobby-panel);
  }
  .mx_UserSettingsDialog .mx_SettingsSection_subSections > form {
    padding-block: 0;
    gap: 0 !important;
  }
  .mx_UserSettingsDialog .mx_SettingsSection_subSections > form > * {
    min-height: 50px;
    padding-block: 12px;
    box-sizing: border-box;
  }
  .mx_UserSettingsDialog .mx_SettingsSection_subSections > form > * + * {
    border-top: 1px solid var(--lobby-line);
  }
  .mx_UserSettingsDialog .mx_TagComposer {
    margin-top: 12px;
  }
  .mx_UserSettingsDialog .mx_UserNotifSettings_clearNotifsButton {
    margin-top: 16px;
    justify-self: start;
    border-radius: 999px;
  }

  /* Тема: плитки-превью 3 в ряд (.themes макета): рамка 2 цветом линии,
     выбранная — сигналом (п. 3, место 5). Плитка рисует свою тему: Element
     вешает на неё класс cpd-theme-*, токены внутри — её. Обоев на выбор в
     Element нет — плиток обоев тоже (только «Узор Inside»). */
  .mx_UserSettingsDialog form.mx_ThemeChoicePanel_ThemeSelectors.mx_ThemeChoicePanel_ThemeSelectors {
    --lobby-tile-ink: var(--lobby-ink);
    --lobby-tile-line: var(--lobby-line-2);
    --lobby-tile-on: var(--lobby-signal);
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 0 16px;
  }
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector {
    position: relative;
    container-type: inline-size;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
  }
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector::before {
    content: "";
    width: 100%;
    aspect-ratio: 16 / 10;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid var(--lobby-tile-line);
    background:
      linear-gradient(90deg, var(--lobby-rail) 0 22%, var(--lobby-wall) 22% 100%);
  }
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector:has(input:checked)::before {
    border-color: var(--lobby-tile-on);
  }
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector:has(input:focus-visible)::before {
    outline: 2px solid var(--lobby-tile-on);
    outline-offset: 2px;
  }
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector_disabled::before {
    opacity: 0.55;
  }
  /* Пузыри превью: чужой и свой (.bb макета), от ширины плитки. */
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector::after {
    content: "";
    position: absolute;
    top: calc(62.5cqw * 0.28);
    left: 30%;
    width: 38%;
    height: 9px;
    border-radius: 5px;
    background: var(--lobby-b-in);
    box-shadow: 28cqw calc(62.5cqw * 0.24) 0 0 var(--lobby-b-out);
    pointer-events: none;
  }
  .mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector_Label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--lobby-tile-ink) !important;
    cursor: pointer;
  }
}


/* ==== v2 · Меню, диалоги, тосты */

/* П. 6.10. Меню — панель со скруглением 12 и тенью 0 8 30 / .14, пункты
   40 со значком 18, опасные — сигналом; быстрые реакции над меню —
   капсулой (ядро форка). Окна — сплошная панель со скруглением 18,
   заголовок 17/600, кнопки-капсулы: primary — акцент, вторичная —
   вторичная заливка, опасная — сигнал. Тосты — карточка 14, значок-
   предупреждение сигналом, кнопки как в окнах, ссылки цветом текста. */

/* --- Меню --- */
.mx_ContextualMenu,
[role="menu"] {
  background: var(--lobby-panel);
  color: var(--lobby-ink);
  border-radius: 12px;
  box-shadow: var(--lobby-menu-shadow);
}
.mx_ContextualMenu:has(.mx_MessageContextMenu) {
  border: none;
  /* Не обрезаем: над меню висит полоса быстрых реакций (ядро форка). */
  overflow: visible;
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList {
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList + .mx_IconizedContextMenu_optionList,
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList.mx_IconizedContextMenu_optionList_notFirst:not(:first-child) {
  border-top: 1px solid var(--lobby-line);
}
.mx_IconizedContextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > .mx_IconizedContextMenu_item {
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 16px 0 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--lobby-ink);
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_item:is(:hover, :focus-visible) {
  background-color: var(--lobby-hover);
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_item svg {
  width: 18px;
  height: 18px;
  color: var(--lobby-ink-2);
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_item svg + .mx_IconizedContextMenu_label {
  padding-inline-start: 12px;
}
/* Опасные пункты — сигналом (п. 3, место 4). */
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_item,
.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red,
.mx_IconizedContextMenu .mx_IconizedContextMenu_itemDestructive {
  color: var(--lobby-signal) !important;
}
.mx_IconizedContextMenu :is(.mx_IconizedContextMenu_optionList_red, .mx_IconizedContextMenu_option_red, .mx_IconizedContextMenu_itemDestructive) svg {
  color: var(--lobby-signal);
}
/* Отмеченный пункт — не синим, а цветом текста. */
.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_IconizedContextMenu_item,
.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_item,
.mx_IconizedContextMenu .mx_IconizedContextMenu_active svg {
  color: var(--lobby-ink) !important;
}
/* Быстрые реакции над меню — капсула на цвете панели с тенью меню. */
.mx_QuickReactionBar > div {
  background-color: var(--lobby-panel);
  border: none;
  box-shadow: var(--lobby-menu-shadow);
}
.mx_QuickReactionBar .mx_QuickReactionBar_emoji.mx_QuickReactionBar_emoji_selected {
  background-color: var(--lobby-fill);
}
.mx_QuickReactionBar .mx_QuickReactionBar_more {
  background-color: var(--lobby-fill);
  color: var(--lobby-ink-2);
}
/* «Ответить в обсуждении» — первым и жирнее: главное, чем мы отличаемся
   от мессенджера. Пункты — по aria-label (интерфейс русский; прежняя
   подпись — «Комментировать»). */
.mx_MessageContextMenu .mx_IconizedContextMenu_item:is([aria-label="Ответить в обсуждении"], [aria-label="Комментировать"]) {
  order: -1;
  font-weight: 600;
}
/* «Исходный код» — инструмент разработчика. */
.mx_MessageContextMenu .mx_IconizedContextMenu_item[aria-label="Исходный код"] {
  display: none;
}

/* --- Окна --- */
/* Кольцо фокуса — цветом текста, не синим системным. */
.mx_Dialog :focus-visible {
  outline: 2px solid var(--lobby-ink);
  outline-offset: 2px;
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) {
  border-radius: var(--lobby-radius-dialog);
  background: var(--lobby-dialog-bg);
  color: var(--lobby-ink);
  box-shadow: var(--lobby-dialog-shadow);
}
.mx_Dialog_border:not(:has(.mx_UserSettingsDialog)) {
  border-radius: calc(var(--lobby-radius-dialog) + 4px);
}
/* Короткие окна — канон Telegram: всё по центру, без крестика, две кнопки
   поровну. */
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) {
  max-width: 420px;
  text-align: center;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_header {
  justify-content: center;
  margin-bottom: 10px;
  /* Место под крестик (его здесь нет) сдвигало заголовок влево. */
  padding: 0;
}
/* Окно — не шире 400 и без пустых полей Element (32/40 → 24/24/20):
   короткий вопрос Telegram. */
.mx_Dialog:has(> [role="dialog"]:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog)) {
  width: min(400px, calc(100vw - 32px));
  padding: 24px 24px 20px;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog).mx_Dialog_fixedWidth {
  width: auto;
  max-width: none;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_content {
  font-size: 15px;
  line-height: 1.45;
  color: var(--lobby-muted);
  /* У Element 24 сверху и 68 снизу; до кнопок — только их 20. */
  margin: 0;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_content > p:first-child {
  margin-top: 0;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_content > p:last-child {
  margin-bottom: 0;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_cancelButton {
  display: none;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_buttons {
  margin-top: 20px;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_buttons_row {
  flex-wrap: nowrap;
}
:is(.mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog) .mx_Dialog_buttons_row > * {
  flex: 1;
  min-width: 0;
}
/* Заголовок остальных окон — 17/600 (у Element 24), п. 6.10. */
.mx_Dialog:not(:has(.mx_UserSettingsDialog, .mx_UploadConfirmDialog, .mx_QuestionDialog, .mx_TextInputDialog, .mx_ErrorDialog, .mx_InfoDialog, .mx_LogoutDialog)) .mx_Dialog_header .mx_Dialog_title.mx_Heading_h3 {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lobby-ink);
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Dialog_cancelButton {
  border-radius: 50%;
  background-color: var(--lobby-fill);
  color: var(--lobby-muted);
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Dialog_cancelButton:hover {
  background-color: var(--lobby-line-2);
  color: var(--lobby-ink);
}
/* Ссылки — цветом текста с подчёркиванием, не синие. */
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) a:not(.mx_AccessibleButton):not([role="button"]) {
  color: var(--lobby-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}
/* Поля ввода — скругление 12, фокус — графитом. */
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Field,
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Dropdown_input {
  border-radius: var(--lobby-radius-input);
  border-color: var(--lobby-input-border);
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Field:focus-within,
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Dropdown_input:focus {
  border-color: var(--lobby-ink);
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Field:focus-within label {
  color: var(--lobby-ink);
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_Field :is(input, textarea, select) {
  border-radius: var(--lobby-radius-input);
}

/* Кнопки внизу любого окна и AccessibleButton внутри — капсулы. */
.mx_Dialog_buttons_row {
  display: flex;
  gap: 12px;
}
.mx_Dialog_buttons_row > button,
.mx_Dialog_buttons_row > .mx_AccessibleButton {
  min-height: 46px;
  border-radius: 999px !important;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  margin: 0 !important;
}
.mx_Dialog_buttons_row > button:not(.mx_Dialog_primary) {
  background: var(--lobby-fill);
  color: var(--lobby-ink);
  border: none;
  box-shadow: none;
}
.mx_Dialog_buttons_row > .mx_Dialog_primary,
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_AccessibleButton_kind_primary {
  background-color: var(--lobby-accent);
  border-color: var(--lobby-accent);
  color: var(--lobby-accent-ink);
  border-radius: 999px;
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_AccessibleButton_kind_primary:not(.mx_AccessibleButton_disabled):hover {
  background-color: var(--lobby-accent-hover);
  border-color: var(--lobby-accent-hover);
}
/* Опасные действия — сигнал (п. 3, место 4). */
.mx_Dialog_buttons_row > .mx_Dialog_primary.danger,
.mx_Dialog_confirmredact .mx_Dialog_primary,
.mx_LogoutDialog .mx_Dialog_primary,
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_AccessibleButton_kind_danger {
  background-color: var(--lobby-signal);
  border-color: var(--lobby-signal);
  color: var(--lobby-signal-ink);
  border-radius: 999px;
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_AccessibleButton_kind_primary_outline {
  border-color: var(--lobby-input-border);
  color: var(--lobby-ink);
  border-radius: 999px;
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) .mx_AccessibleButton_hasKind.mx_AccessibleButton_disabled {
  opacity: 0.35;
}
/* Удаление сообщения: причину Telegram не спрашивает. Прячем и обёртку
   поля, и отступ под ним — текст по центру, до кнопок 20. */
.mx_Dialog_confirmredact .mx_TextInputDialog_input,
.mx_Dialog_confirmredact .mx_Field,
.mx_Dialog_confirmredact .mx_TextInputDialog_label + div {
  display: none;
}
.mx_Dialog_confirmredact .mx_TextInputDialog_label {
  padding: 0;
  text-align: center;
}

/* --- «Отправить файл»: карточка «1 медиа» Telegram --- */
.mx_Dialog:has(.mx_UploadConfirmDialog) {
  width: min(440px, 92vw);
  padding: 0;
}
.mx_UploadConfirmDialog {
  padding: 12px 14px 14px;
  position: relative;
  box-sizing: border-box;
}
.mx_UploadConfirmDialog .mx_Dialog_header {
  justify-content: center;
  min-height: 40px;
  margin-bottom: 8px;
}
.mx_UploadConfirmDialog .mx_Dialog_title {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}
.mx_UploadConfirmDialog .mx_Dialog_cancelButton {
  position: absolute;
  top: 12px;
  inset-inline-start: 14px;
  inset-inline-end: auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_previewOuter,
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_previewInner {
  max-height: none;
  padding: 0;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_previewInner,
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_previewInner > * {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
/* «Без сжатия» слева и круглая «Отправить» справа — одной строкой:
   окно — сетка, содержимое (#mx_Dialog_content) раскрыто в неё. */
.mx_UploadConfirmDialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.mx_UploadConfirmDialog > *,
.mx_UploadConfirmDialog > #mx_Dialog_content > * {
  grid-column: 1 / -1;
}
.mx_UploadConfirmDialog > #mx_Dialog_content {
  display: contents;
}
.mx_UploadConfirmDialog > #mx_Dialog_content > form:has(.mx_UploadConfirmDialog_inside_original) {
  grid-column: 1;
  margin-top: 12px;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_original {
  margin: 0;
}
.mx_UploadConfirmDialog > .mx_Dialog_buttons {
  grid-column: 2;
  margin-top: 12px;
}
.mx_UploadConfirmDialog > .mx_Dialog_buttons .mx_Dialog_buttons_row {
  justify-content: flex-end;
  align-items: center;
}
/* «Загрузить» — круглая со стрелкой; подпись остаётся для скринридера.
   Только основная кнопка окна (у вопроса «Отменить подпись?» свои). */
.mx_UploadConfirmDialog > .mx_Dialog_buttons .mx_Dialog_primary.mx_Dialog_primary {
  width: 46px;
  height: 46px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  position: relative;
  background: var(--lobby-signal);
  border: none;
}
.mx_UploadConfirmDialog > .mx_Dialog_buttons .mx_Dialog_primary::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  background-color: var(--lobby-signal-ink);
  -webkit-mask: var(--lobby-ic-send) center / contain no-repeat;
  mask: var(--lobby-ic-send) center / contain no-repeat;
}
/* Картинка / видео без плитки файла (форк -16): превью со скруглением 12
   на вторичной заливке во всю ширину окна. Строку «имя · размер» под
   картинкой и видео не показываем — как в Telegram; у первой страницы PDF
   (mx_UploadConfirmDialog_inside_document) она остаётся: там имя важно. */
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_media:not(.mx_UploadConfirmDialog_inside_document) .mx_UploadConfirmDialog_inside_fileMeta {
  display: none;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_media {
  align-items: stretch;
  gap: 8px;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_mediaFrame {
  border-radius: 12px;
  background: var(--lobby-fill);
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_mediaFrame :is(img, video) {
  max-height: min(60vh, 460px);
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_fileMeta {
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 18px;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_fileName {
  min-width: 0;
  color: var(--lobby-ink);
  font-weight: 600;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_fileSize {
  color: var(--lobby-muted);
  font-size: 13px;
  font-weight: 400;
}
/* Подпись — капсула на вторичной заливке, как поле поиска; без чёрного
   кольца фокуса Element: при фокусе — тонкая линия цвета рамок. */
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_caption.mx_UploadConfirmDialog_inside_caption {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 12px 16px;
  border: none;
  border-radius: 22px;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
  font-size: 15px;
  line-height: 20px;
  resize: none;
  outline: none;
  box-shadow: none;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_caption.mx_UploadConfirmDialog_inside_caption:hover {
  border: none;
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_caption.mx_UploadConfirmDialog_inside_caption:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--lobby-line-2);
}
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_inside_caption::placeholder {
  color: var(--lobby-muted);
}

/* --- «Начать чат», «Пригласить», «Переслать», «Поделиться», настройки комнаты --- */
.mx_InviteDialog_helpText {
  color: var(--lobby-muted);
  line-height: 1.45;
}
.mx_InviteDialog_addressBar {
  gap: 10px;
  align-items: center;
}
.mx_InviteDialog_editor.mx_InviteDialog_editor {
  border-radius: var(--lobby-radius-input);
  background: var(--lobby-input-bg);
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
}
.mx_InviteDialog_editor.mx_InviteDialog_editor:focus-within {
  box-shadow: inset 0 0 0 1px var(--lobby-ink);
}
/* Одна рамка, как у полей других окон: без контура Compound у капсулы
   (PillInput: outline 1px) и без кольца фокуса окна у самого input. */
.mx_InviteDialog_editor.mx_InviteDialog_editor,
.mx_InviteDialog_editor.mx_InviteDialog_editor:has(input:focus) {
  outline: none;
}
.mx_InviteDialog_editor.mx_InviteDialog_editor input:is(:focus, :focus-visible) {
  outline: none;
}
/* Закрытый корпоративный сервер: приглашать по ссылке некого — без
   «Или отправьте ссылку на приглашение» и оговорки о скрытых предложениях. */
.mx_InviteDialog_footer,
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
  display: none;
}
.mx_InviteDialog_goButton.mx_InviteDialog_goButton {
  min-height: 44px;
  min-width: 120px;
  margin: 0;
  font-weight: 600;
}
.mx_InviteDialog_footer {
  border-top-color: var(--lobby-line);
}
.mx_InviteDialog_footer h3 {
  color: var(--lobby-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.mx_Dialog .mx_CopyableText_border {
  border: none;
  border-radius: var(--lobby-radius-input);
  background: var(--lobby-input-bg);
}
.mx_Dialog a.mx_InviteDialog_footer_link {
  text-decoration: none;
}
.mx_CreateRoomDialog .mx_CreateRoomDialog_details_summary {
  color: var(--lobby-ink);
  font-weight: 500;
}
.mx_ForwardDialog .mx_ForwardDialog_preview {
  border-bottom-color: var(--lobby-line);
}
.mx_ForwardList .mx_SearchBox {
  border: none;
  border-radius: var(--lobby-radius-input);
  background: var(--lobby-input-bg);
  box-sizing: border-box;
  min-height: 44px;
}
.mx_ForwardList .mx_SearchBox:focus-within {
  box-shadow: inset 0 0 0 1px var(--lobby-ink);
}
.mx_ForwardList .mx_ForwardList_entry {
  border-radius: 12px;
}
.mx_ForwardList .mx_ForwardList_entry:hover,
.mx_ForwardList .mx_ForwardList_entry.mx_ForwardList_entry_active {
  background: var(--lobby-hover);
}
.mx_ForwardList .mx_ForwardList_entry_detail {
  color: var(--lobby-muted);
}
.mx_ForwardList .mx_ForwardList_sendButton {
  font-weight: 600;
}
/* «Отправлено» и «Ошибка» Element помечает disabled — это итог, не
   недоступная кнопка: без приглушения. */
.mx_Dialog .mx_ForwardList .mx_ForwardList_sendButton.mx_AccessibleButton_disabled:is(.mx_ForwardList_sent, .mx_ForwardList_sendFailed) {
  opacity: 1;
}
.mx_ForwardList .mx_ForwardList_sendButton.mx_ForwardList_sent {
  background: var(--lobby-accent);
  border-color: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}
/* У Element цвет галочки — селектор 0,6,1; перебиваем 0,7,1. */
.mx_ForwardDialog .mx_ForwardList .mx_ForwardList_resultsList .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sent.mx_AccessibleButton_disabled > svg {
  color: var(--lobby-accent-ink);
}
.mx_ForwardList .mx_ForwardList_sendButton.mx_ForwardList_sendFailed {
  border-color: var(--lobby-signal);
  color: var(--lobby-signal);
}
.mx_ShareDialog .mx_VerificationQRCode {
  border-radius: 16px;
}
:is(.mx_RoomSettingsDialog, .mx_SpaceSettingsDialog) .mx_TabbedView_tabLabel {
  border-radius: 12px;
}
:is(.mx_RoomSettingsDialog, .mx_SpaceSettingsDialog) .mx_TabbedView_tabLabel:hover {
  background-color: var(--lobby-hover);
}
:is(.mx_RoomSettingsDialog, .mx_SpaceSettingsDialog) .mx_TabbedView_tabLabel.mx_TabbedView_tabLabel_active {
  background-color: var(--lobby-sel);
  color: var(--lobby-sel-ink);
}
:is(.mx_RoomSettingsDialog, .mx_SpaceSettingsDialog) .mx_SettingsSection > .mx_Heading_h3,
:is(.mx_RoomSettingsDialog, .mx_SpaceSettingsDialog) .mx_SettingsFieldset_legend {
  font-size: 17px;
  font-weight: 600;
}

/* --- Тосты --- */
/* Настоящие сообщения о состоянии — не прячем. Стоят в низу карточки
   списка над нижней панелью, баннером, как «Never miss a message» в
   Telegram. */
.mx_ToastContainer.mx_ToastContainer {
  position: fixed;
  top: auto;
  bottom: calc(var(--lobby-pad) + 56px + 8px);
  left: calc(var(--lobby-pad) + var(--lobby-rail-w) + var(--lobby-gap) + 8px);
  width: calc(var(--lobby-list-w) - 16px);
  z-index: 20;
}
.mx_ToastContainer .mx_Toast_toast {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--lobby-line);
  background: var(--lobby-panel);
  color: var(--lobby-ink);
  box-shadow: var(--lobby-menu-shadow);
}
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon > svg {
  width: 20px;
  height: 20px;
}
.mx_ToastContainer .mx_Toast_title h2 {
  font-size: 14.5px;
  line-height: 19px;
  font-weight: 600;
  color: var(--lobby-ink);
}
.mx_ToastContainer .mx_Toast_body {
  font-size: 13px;
  line-height: 1.4;
  color: var(--lobby-muted);
}
/* «Узнать больше» и прочие ссылки — цветом текста с подчёркиванием. */
.mx_ToastContainer .mx_Toast_body :is(a, .mx_AccessibleButton_kind_link, .mx_AccessibleButton_kind_link_inline) {
  color: var(--lobby-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}
.mx_ToastContainer .mx_Toast_buttons {
  gap: 8px;
}
.mx_ToastContainer .mx_Toast_buttons :is(button, .mx_AccessibleButton) {
  border-radius: 999px;
  font-weight: 600;
}


/* --- Поиск (Spotlight, ⌘K) --- */
/* Как поиск Telegram macOS: карточка 640 на цвете панели, поле — капсула 44
   с лупой на вторичной заливке, без рамки и кольца; заголовки разделов —
   12/600 капсом, как группы настроек; строки 44 со скруглением 12,
   наведение — заливкой наведения, выбранная с клавиатуры — заливкой выбора,
   как в списке чатов. Подсказка «Используйте ↓ ↑» — тихий подвал внутри
   карточки, а не плашка над окном. */
.mx_SpotlightDialog_wrapper .mx_Dialog {
  display: flex;
  flex-direction: column;
  height: min(560px, 72vh) !important;
  border-radius: var(--lobby-radius-dialog) !important;
  background: var(--lobby-dialog-bg);
  box-shadow: var(--lobby-dialog-shadow);
  overflow: hidden;
}
.mx_SpotlightDialog_wrapper .mx_SpotlightDialog {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: min(640px, calc(100vw - 32px));
  max-width: none;
}
.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt {
  order: 2;
  position: static;
  transform: none;
  flex: none;
  padding: 9px 16px 10px;
  border-top: 1px solid var(--lobby-line);
  border-radius: 0;
  background: transparent;
  color: var(--lobby-faint);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt kbd {
  min-width: 18px;
  padding: 1px 4px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--lobby-fill);
  box-shadow: inset 0 0 0 1px var(--lobby-line-2);
  color: var(--lobby-muted);
  text-align: center;
}

/* Поле: капсула 44, лупа слева, фокус — лёгкая обводка, не чёрная рамка. */
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  box-sizing: border-box;
  margin: 14px 14px 4px;
  padding: 0 14px 0 12px;
  border: none;
  border-radius: 22px;
  background: var(--lobby-fill);
  transition: box-shadow 0.15s ease;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--lobby-muted);
  -webkit-mask: var(--lobby-ico-search) center / 20px 20px no-repeat;
  mask: var(--lobby-ico-search) center / 20px 20px no-repeat;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within {
  box-shadow: inset 0 0 0 1px var(--lobby-line-2);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--lobby-ink);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > input::placeholder {
  color: var(--lobby-muted);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > input:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_Spinner {
  margin-left: 4px;
}
/* Фильтр («Пользователи», «Публичные комнаты») — капсула 28 цветом выбора. */
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter {
  flex: none;
  height: 28px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 6px 0 30px;
  border-radius: 999px;
  background: var(--lobby-sel);
  color: var(--lobby-sel-ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter > svg {
  left: 9px;
  width: 16px;
  height: 16px;
  color: currentColor;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 3px;
  margin-left: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lobby-sel-ink) 22%, transparent);
  color: var(--lobby-sel-ink);
  line-height: 0;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close svg {
  width: 12px;
  height: 12px;
  color: currentColor;
}

/* Содержимое и заголовки разделов. */
.mx_SpotlightDialog #mx_SpotlightDialog_content {
  padding: 10px 10px 12px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > .mx_SpotlightDialog_sectionHeader > h4 {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lobby-muted);
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > .mx_SpotlightDialog_sectionHeader {
  margin-bottom: 6px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > .mx_SpotlightDialog_sectionHeader > h4 {
  margin: 0;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section {
  margin-top: 16px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
  color: var(--lobby-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Недавние: круглые аватары 48 с подписью 12 под ними. */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed > div {
  gap: 4px;
  padding: 0 2px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
  display: inline-block;
  width: 76px;
  min-width: 76px;
  height: auto;
  padding: 8px 4px 7px;
  margin: 0;
  border-radius: 12px;
  color: var(--lobby-ink);
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option + .mx_SpotlightDialog_option {
  margin-left: 0;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_DecoratedRoomAvatar {
  display: block;
  margin: 0 auto 5px;
  width: 48px;
  height: 48px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_BaseAvatar {
  --cpd-avatar-size: 48px !important;
  width: 48px;
  height: 48px;
  font-size: 20px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_BaseAvatar img {
  width: 48px;
  height: 48px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover {
  background: var(--lobby-hover);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within + #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"] {
  background: var(--lobby-fill);
}

/* Строки результатов и «Искать в…»: 44, скругление 12. */
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_results, .mx_SpotlightDialog_recentSearches, .mx_SpotlightDialog_otherSearches, .mx_SpotlightDialog_hiddenResults) .mx_SpotlightDialog_option {
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 10px 6px 12px;
  border-radius: 12px;
  color: var(--lobby-ink);
  font-size: 15px;
  line-height: 20px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_results, .mx_SpotlightDialog_recentSearches, .mx_SpotlightDialog_otherSearches, .mx_SpotlightDialog_hiddenResults) .mx_SpotlightDialog_option:hover {
  background: var(--lobby-hover);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within + #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_results, .mx_SpotlightDialog_recentSearches, .mx_SpotlightDialog_otherSearches, .mx_SpotlightDialog_hiddenResults) .mx_SpotlightDialog_option[aria-selected="true"] {
  background: var(--lobby-sel);
  color: var(--lobby-sel-ink);
}
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_results, .mx_SpotlightDialog_recentSearches, .mx_SpotlightDialog_hiddenResults) .mx_SpotlightDialog_option > :is(.mx_DecoratedRoomAvatar, .mx_BaseAvatar, .mx_SpotlightDialog_metaspaceResult) {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_results, .mx_SpotlightDialog_recentSearches, .mx_SpotlightDialog_hiddenResults) .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_results, .mx_SpotlightDialog_recentSearches, .mx_SpotlightDialog_hiddenResults) .mx_SpotlightDialog_option > .mx_BaseAvatar {
  --cpd-avatar-size: 32px !important;
  width: 32px;
  height: 32px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option .mx_BaseAvatar img {
  width: 100%;
  height: 100%;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_publicRoomDetails :is(.mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog_result_publicRoomDescription) {
  color: var(--lobby-muted);
  font-size: 13px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomName {
  color: inherit;
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within + #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] :is(.mx_SpotlightDialog_result_details, .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog_result_publicRoomDescription) {
  color: color-mix(in srgb, var(--lobby-sel-ink) 70%, transparent);
}
/* «Искать в…»: значок 20 цветом подписи. */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option {
  padding-left: 46px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > svg {
  left: 16px;
  width: 20px;
  height: 20px;
  color: var(--lobby-muted);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within + #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] > svg {
  color: currentColor;
}
/* Справа: ↵, «Настройки комнаты», уведомления. */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option--endAdornment {
  align-items: center !important;
  gap: 6px;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt {
  margin: 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--lobby-fill);
  color: var(--lobby-muted);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within + #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
  background: color-mix(in srgb, var(--lobby-sel-ink) 16%, transparent);
  color: var(--lobby-sel-ink);
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option :is(.mx_SpotlightDialog_option--menu, .mx_SpotlightDialog_option--notifications) {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option :is(.mx_SpotlightDialog_option--menu, .mx_SpotlightDialog_option--notifications) svg {
  color: var(--lobby-muted);
}
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within + #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] :is(.mx_SpotlightDialog_option--menu, .mx_SpotlightDialog_option--notifications) svg {
  color: color-mix(in srgb, var(--lobby-sel-ink) 75%, transparent);
}
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option :is(.mx_SpotlightDialog_option--menu, .mx_SpotlightDialog_option--notifications):is(:hover, :focus-visible) svg {
  color: currentColor;
}
/* «Ничего не найдено» — не действие: тихой строкой, без выбора. */
.mx_SpotlightDialog #mx_SpotlightDialog_content #mx_SpotlightDialog_button_noResults.mx_SpotlightDialog_option {
  background: transparent;
  color: var(--lobby-muted);
  cursor: default;
}
/* Подсказка «Если вы не видите того, кто вам нужен…». */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults > .mx_SpotlightDialog_otherSearches_messageSearchText {
  padding: 0 12px 4px;
  color: var(--lobby-muted);
  font-size: 13px;
  line-height: 18px;
}
/* «Пригласить по ссылке», «Создать комнату» под результатами. */
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_inviteLink, .mx_SpotlightDialog_createRoom) .mx_AccessibleButton {
  border: none;
  border-radius: 999px;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
  font-size: 14px;
  font-weight: 500;
}
.mx_SpotlightDialog #mx_SpotlightDialog_content :is(.mx_SpotlightDialog_inviteLink, .mx_SpotlightDialog_createRoom) .mx_AccessibleButton svg {
  color: var(--lobby-muted);
}
/* Точка «в сети» — нашим зелёным. */
.mx_SpotlightDialog .mx_DecoratedRoomAvatar_icon_online::before {
  background-color: var(--lobby-online);
}

/* ==== v2 · Резиновая вёрстка и телефон */

/* docs/design/lobby/MOBILE.md. Ширины — как у Telegram Web K
   ($small-screen 600, $floating-left-sidebar 925; те же числа в коде
   клиента, utils/InsideLayout.ts):
     до 600   — одна колонка: список ИЛИ чат, чат въезжает справа;
     601–925  — список и чат, без рейла: папки — табами над списком;
     от 926   — как было (рейл · список · чат), ничего не меняется.
   Движение — как у Telegram: колонки .2s ease-in-out (--tabs-transition),
   правая панель .3s cubic-bezier(.4,0,.2,1) (--transition-standard-in),
   меню .2s cubic-bezier(.4,0,.2,1), пиктограмма кнопки «написать» .4s. */
:root {
  --lobby-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --lobby-column-transition: 0.2s ease-in-out;
  --lobby-ico-back: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
}

/* --- Вёрстка без рейла (до 925): меню, табы папок, кнопка «написать» --- */
/* Их рисует код клиента (сборка с InsideFolderTabs / InsideMainMenu /
   InsideComposeFab) только в узком окне; стили — здесь. */
.mx_RoomListPanel_inside_topBar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 4px 6px;
}
.mx_RoomListPanel .mx_RoomListPanel_inside_topBar [class*="_view_"]:has([class*="_search_"]) {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.mx_RoomListPanel_inside_topBar [class*="_search_"][class*="_button_"] {
  height: 40px;
  min-height: 40px;
  border-radius: 20px;
}
.mx_InsideMainMenu_button.mx_InsideMainMenu_button {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lobby-muted);
}
.mx_InsideMainMenu_button.mx_InsideMainMenu_button:hover,
.mx_InsideMainMenu_button[aria-expanded="true"] {
  background: var(--lobby-hover);
  color: var(--lobby-ink);
}
.mx_InsideMainMenu_button svg {
  width: 24px;
  height: 24px;
}

/* Табы папок — капсулы, как #folders-tabs Telegram: 14/500, выбранная —
   заливкой выбора; счётчик непрочитанных ЧАТОВ — красный (сигнал, п. 3
   ТЗ), у заглушённых — серый. Ряд листается вбок без полосы прокрутки. */
.mx_InsideFolderTabs {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 4px 12px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mx_InsideFolderTabs::-webkit-scrollbar {
  display: none;
}
.mx_InsideFolderTabs_tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 0;
  padding: 0 14px;
  border: none;
  border-radius: 17px;
  background: transparent;
  color: var(--lobby-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.mx_InsideFolderTabs_tab:hover {
  background: var(--lobby-hover);
  color: var(--lobby-ink);
}
.mx_InsideFolderTabs_tab.mx_InsideFolderTabs_tab_selected {
  background: var(--lobby-sel);
  color: var(--lobby-sel-ink);
}
.mx_InsideFolderTabs_tab:focus-visible {
  outline: 2px solid var(--lobby-ink);
  outline-offset: -2px;
}
.mx_InsideFolderTabs_count {
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--lobby-signal);
  color: var(--lobby-signal-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.mx_InsideFolderTabs_count.mx_InsideFolderTabs_count_muted {
  background: var(--lobby-mute-badge);
  color: #ffffff;
}

/* Кнопка «написать» — круг 56 на акценте в правом нижнем углу списка
   (btn-corner Telegram: 54, отступ 14–20). Карандаш при открытом меню
   сменяется крестиком (grow-icon .4s: 0.5 → 1.1 → 1). */
.mx_RoomListPanel:has(> .mx_InsideComposeFab) {
  position: relative;
}
.mx_InsideComposeFab.mx_InsideComposeFab {
  position: absolute;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s var(--lobby-ease-standard);
}
.mx_InsideComposeFab.mx_InsideComposeFab:hover {
  background: var(--lobby-accent-hover);
}
.mx_InsideComposeFab > svg {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  transition: transform 0.2s var(--lobby-ease-standard), opacity 0.2s var(--lobby-ease-standard);
}
.mx_InsideComposeFab .mx_InsideComposeFab_close {
  opacity: 0;
  transform: scale(0.5);
}
.mx_InsideComposeFab[aria-expanded="true"] .mx_InsideComposeFab_pencil {
  opacity: 0;
  transform: scale(0.5);
}
.mx_InsideComposeFab[aria-expanded="true"] .mx_InsideComposeFab_close {
  opacity: 1;
  transform: none;
  animation: lobby-grow-icon 0.4s ease-in-out;
}
@keyframes lobby-grow-icon {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* Список не прячется под кнопкой. */
.mx_RoomListPanel:has(> .mx_InsideComposeFab) .mx_RoomListView,
.mx_RoomListPanel:has(> .mx_InsideComposeFab) [class*="_roomList_"] {
  scroll-padding-bottom: 88px;
}

/* Меню ☰ и «написать»: появляются из угла кнопки (scale .8 → 1 и
   прозрачность, .2s), пункты 44 — под палец. */
.mx_ContextualMenu:is(.mx_InsideMainMenu_menu, .mx_InsideComposeFab_menu) {
  min-width: 220px;
  animation: lobby-menu-in 0.2s var(--lobby-ease-standard);
}
.mx_ContextualMenu.mx_InsideMainMenu_menu {
  transform-origin: left top;
}
.mx_ContextualMenu.mx_InsideComposeFab_menu {
  transform-origin: right bottom;
}
@keyframes lobby-menu-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
:is(.mx_InsideMainMenu_menu, .mx_InsideComposeFab_menu) .mx_IconizedContextMenu_item {
  min-height: 44px;
}
.mx_InsideMainMenu_menu .mx_InsideMainMenu_profile .mx_IconizedContextMenu_label {
  font-size: 15px;
  font-weight: 600;
  color: var(--lobby-ink);
}
.mx_InsideMainMenu_menu .mx_InsideMainMenu_profile .mx_BaseAvatar {
  flex: none;
  margin-inline-end: 2px;
}

@media (max-width: 925px) {
  /* Рейла нет: его папки — табы над списком, профиль и настройки — в ☰. */
  .mx_MatrixChat .mx_SpacePanel {
    display: none !important;
  }
  /* Список — 40 % окна, 260–320; чат забирает остальное. */
  #left-panel:not([data-inside-resized]) {
    flex: 0 0 clamp(260px, 40%, var(--lobby-list-w)) !important;
  }
  #left-panel {
    min-width: 260px !important;
  }
  .mx_ToastContainer.mx_ToastContainer {
    left: calc(var(--lobby-pad) + 8px);
  }
}

/* --- Телефон (до 600): одна колонка --- */
@media (max-width: 600px) {
  .mx_MatrixChat_wrapper,
  #matrixchat {
    height: var(--lobby-vvh, 100dvh);
  }
  /* clip, а не hidden: фокус в строке ввода въезжающего чата иначе
     прокручивает контейнер вбок, и чат съезжает влево. */
  .mx_MatrixChat > div {
    position: relative;
    padding: 0;
    gap: 0;
    overflow: clip;
  }
  .mx_MatrixChat .mx_Separator {
    display: none !important;
  }
  #left-panel,
  #left-panel:not([data-inside-resized]) {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .mx_LeftPanel,
  .mx_RoomView,
  .mx_RoomView_body,
  .mx_HomePage.mx_HomePage {
    border-radius: 0;
  }
  .mx_LeftPanel {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Чат — слой поверх списка во всю ширину. Нет комнаты (стартовый экран)
     или идёт «назад» — слой уехал вправо; список при открытом чате
     уезжает на четверть влево и гаснет (как .main-column Telegram). */
  .mx_MatrixChat > div > [data-panel]:not(#left-panel) {
    position: absolute !important;
    inset: 0;
    z-index: 3;
    width: 100% !important;
    flex: none !important;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition:
      transform var(--lobby-column-transition),
      opacity var(--lobby-column-transition),
      visibility 0s;
  }
  .mx_MatrixChat > div > [data-panel]:not(#left-panel):not(:has(.mx_RoomView_wrapper > :not(.mx_HomePage))),
  .mx_MatrixChat > div > [data-panel]:not(#left-panel):has(.mx_RoomView_wrapper--inside-leaving) {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--lobby-column-transition),
      opacity var(--lobby-column-transition),
      visibility 0s linear 0.2s;
  }
  #left-panel {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition:
      transform var(--lobby-column-transition),
      opacity var(--lobby-column-transition),
      visibility 0s;
  }
  .mx_MatrixChat > div:has(> [data-panel] .mx_RoomView_wrapper:not(.mx_RoomView_wrapper--inside-leaving) > :not(.mx_HomePage)) > #left-panel {
    transform: translate3d(-25%, 0, 0);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--lobby-column-transition),
      opacity var(--lobby-column-transition),
      visibility 0s linear 0.2s;
  }
  .mx_RoomView_wrapper > .mx_HomePage {
    display: none;
  }

  /* Шапка чата — капсула во всю ширину с полями 8: ← со счётчиком
     непрочитанных чатов, аватар, имя и статус; справа только «Ещё»
     (и «Обсуждения» в группах). Поиск — в карточке чата. */
  .mx_RoomView_body > .mx_RoomHeader.mx_RoomHeader {
    margin: calc(8px + env(safe-area-inset-top, 0px)) 8px -60px;
    padding-inline-start: 2px;
  }
  .mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:not(.mx_RoomHeader_inside_more):not(:is([aria-label="Обсуждения"], [aria-label="Threads"])) {
    display: none !important;
  }
  .mx_RoomView_body > .mx_RoomHeader.mx_RoomHeader {
    --lobby-hb-n: 1;
  }
  .mx_RoomView_body > .mx_RoomHeader.mx_RoomHeader:has(> [class*="_icon-button_"]:is([aria-label="Обсуждения"], [aria-label="Threads"])) {
    --lobby-hb-n: 2;
  }
  .mx_RoomView_body > .mx_RoomHeader.mx_RoomHeader > div:has(> .mx_FacePile) {
    left: 94px;
    max-width: calc(100% - 94px - var(--lobby-hb-w) - 23px);
  }
  .mx_RoomView_body > .mx_RoomHeader .mx_RoomHeader_inside_online {
    display: none;
  }
  .mx_RoomHeader_inside_back.mx_RoomHeader_inside_back {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    margin-inline-end: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--lobby-ink);
  }
  .mx_RoomHeader_inside_back.mx_RoomHeader_inside_back:hover {
    background: var(--lobby-hover);
  }
  .mx_RoomHeader_inside_back > svg {
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--lobby-ico-back) center / 24px 24px no-repeat;
    mask: var(--lobby-ico-back) center / 24px 24px no-repeat;
  }
  .mx_RoomHeader_inside_back > svg > * {
    display: none;
  }
  .mx_RoomHeader_inside_backBadge {
    position: absolute;
    top: -3px;
    right: -6px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--lobby-panel);
    border-radius: 9px;
    background: var(--lobby-signal);
    color: var(--lobby-signal-ink);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
  }
  .mx_RoomView_body > .mx_RoomHeader .mx_RoomHeader_heading {
    font-size: 16px;
  }

  /* Строка ввода: поля 8 и над «домашней полоской» iPhone. */
  .mx_RoomView_body > .mx_MessageComposer {
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mx_MessageComposer_wrapper.mx_MessageComposer_wrapper {
    margin: 0 52px;
    padding-inline-start: 14px;
  }
  .mx_RoomView_body > .mx_RoomView_timeline:has(~ .mx_MessageComposer) {
    margin-bottom: -56px;
  }

  /* Пузыри — до 85 % ширины, поля уже. Медиа — не шире пузыря. */
  .mx_EventTile.mx_EventTile {
    --event-tile-bubble-line-max-width: 85%;
    --event-tile-bubble-margin-inline-start: 38px;
    --event-tile-bubble-margin-inline-end: 8px;
  }
  .mx_EventTile .mx_MImageBody,
  .mx_EventTile .mx_MVideoBody,
  .mx_EventTile .mx_MImageBody img,
  .mx_EventTile .mx_MVideoBody video {
    max-width: 100% !important;
  }
  .mx_RoomListItemView .mx_BaseAvatar {
    --cpd-avatar-size: 48px !important;
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
  .mx_RoomListItemView .mx_RoomAvatarView {
    width: 48px;
    height: 48px;
  }

  /* Правая панель (о чате, обсуждение, участник) — слой во весь экран,
     въезжает справа .3s; × в шапке карточки становится ← слева. */
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper.mx_RightPanel_ResizeWrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    z-index: 1001;
    animation: lobby-layer-in 0.3s var(--lobby-ease-standard);
  }
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper.mx_RightPanel_ResizeWrapper:has(.mx_ThreadView) {
    min-width: 0 !important;
  }
  .mx_MainSplit .mx_RightPanel {
    border-radius: 0;
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper [class*="_handle"],
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper > div:last-child:empty {
    display: none;
  }
  .mx_RightPanel .mx_BaseCard_header:not(:has([data-testid="base-card-back-button"])) > [class*="_icon-button_"]:last-child {
    order: -1;
  }
  .mx_RightPanel .mx_BaseCard_header:not(:has([data-testid="base-card-back-button"])) > [class*="_icon-button_"]:last-child svg {
    background: currentColor;
    -webkit-mask: var(--lobby-ico-back) center / 22px 22px no-repeat;
    mask: var(--lobby-ico-back) center / 22px 22px no-repeat;
  }
  .mx_RightPanel .mx_BaseCard_header:not(:has([data-testid="base-card-back-button"])) > [class*="_icon-button_"]:last-child svg > * {
    display: none;
  }
  .mx_MainSplit:has(> .mx_RightPanel_ResizeWrapper) .mx_RoomView_body :is(.mx_JumpToBottomButton.mx_JumpToBottomButton, .mx_TopUnreadMessagesBar) {
    right: 16px !important;
  }

  /* Поиск ⌘K — во весь экран, как поиск Telegram на телефоне. Классы
     удвоены: CSS темы Element грузится после скина. */
  .mx_SpotlightDialog_wrapper.mx_SpotlightDialog_wrapper .mx_Dialog_border {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .mx_SpotlightDialog_wrapper.mx_SpotlightDialog_wrapper .mx_Dialog {
    box-sizing: border-box;
    width: 100vw !important;
    /* height у Element — 60 % !important в слое @layer app-web, а такой
       !important сильнее любого из скина; min-height его перекрывает. */
    min-height: var(--lobby-vvh, 100dvh);
    max-height: none !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .mx_SpotlightDialog_wrapper.mx_SpotlightDialog_wrapper .mx_SpotlightDialog {
    width: 100%;
  }
  .mx_SpotlightDialog_wrapper.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt {
    display: none;
  }
  .mx_RoomListPanel [class*="_search_"] kbd {
    display: none;
  }

  /* Окна — карточкой по ширине экрана с полями 12, не выше видимой
     области; меню не вылезают за край. */
  .mx_Dialog_wrapper.mx_Dialog_wrapper:not(.mx_SpotlightDialog_wrapper) .mx_Dialog {
    box-sizing: border-box;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(var(--lobby-vvh, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .mx_Dialog_wrapper.mx_Dialog_wrapper:not(.mx_SpotlightDialog_wrapper) .mx_Dialog .mx_Dialog_fixedWidth {
    width: auto;
    max-width: 100%;
  }
  .mx_ContextualMenu {
    max-width: calc(100vw - 16px);
    max-height: calc(var(--lobby-vvh, 100dvh) - 16px);
    overflow-y: auto;
  }
  .mx_ToastContainer.mx_ToastContainer {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none;
  }
  .mx_ToastContainer.mx_ToastContainer .mx_Toast_toast {
    width: auto;
    max-width: none;
  }
}

/* Касание: долгое нажатие на сообщение или чат открывает их меню (на iOS —
   код клиента, utils/InsideLongPress.ts), а не выноску Safari «Скопировать /
   Поделиться» поверх него. */
@media (hover: none) and (pointer: coarse) {
  .mx_EventTile,
  .mx_RoomListItemView {
    -webkit-touch-callout: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #left-panel,
  .mx_MatrixChat > div > [data-panel],
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper,
  .mx_ContextualMenu:is(.mx_InsideMainMenu_menu, .mx_InsideComposeFab_menu),
  .mx_InsideComposeFab > svg,
  .mx_InsideFolderTabs_tab {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes lobby-layer-in {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: none; }
}


/* ==========================================================================
   ЛОМКИЕ СЕЛЕКТОРЫ — проверять при обновлении Element.

   Всё ниже держится на хешированных классах CSS-модулей Element/Compound
   ([class*="_roomName_"], [class*="_layoutBubble_"] …): хеш меняется с
   каждой сборкой, имя — обычно нет, но может. После обновления первым делом
   смотреть скриншоты разделов отсюда. Подразделы — по тем же владельцам,
   что и разделы выше.
   ========================================================================== */


/* ==== v2 · ломкие селекторы · Список чатов */

/* Шапка списка: заголовок по центру, «…» слева, карандаш справа — обе
   кнопки круглые 36 (размер и отступ приходят инлайном). Высота — 54
   (.lh макета: 12 + 36 + 6): у самого <header> Element высота 60 и поля
   0 16 0 12 — шапка и поиск под ней уходили на 6 ниже, кнопки — на 12
   внутрь. */
.mx_RoomListPanel > header {
  height: auto;
  min-height: 0;
  padding: 0;
}
.mx_RoomListPanel > header [class*="_container_"] {
  justify-content: center;
  position: relative;
  padding: 12px 12px 6px;
  min-height: 36px;
}
.mx_RoomListPanel > header h1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--lobby-ink);
}
.mx_RoomListPanel > header [class*="_container_"] > div:last-child {
  position: absolute;
  inset-inline: 12px;
  justify-content: space-between;
  pointer-events: none;
}
.mx_RoomListPanel > header [class*="_container_"] > div:last-child > button {
  pointer-events: auto;
  --cpd-icon-button-size: 36px !important;
  padding: 7px !important;
  border-radius: 50%;
  color: var(--lobby-ink-2);
}
.mx_RoomListPanel > header [class*="_container_"] > div:last-child > button:hover {
  background: var(--lobby-hover);
}
.mx_RoomListPanel > header [class*="_container_"] > div:last-child > button svg {
  visibility: hidden;
}
.mx_RoomListPanel > header [class*="_container_"] > div:last-child > button [class*="_indicator-icon_"] {
  background-color: currentColor;
  -webkit-mask: var(--lobby-ic-more) center / 22px 22px no-repeat;
  mask: var(--lobby-ic-more) center / 22px 22px no-repeat;
}
.mx_RoomListPanel > header [class*="_container_"] > div:last-child > button:last-child [class*="_indicator-icon_"] {
  -webkit-mask-image: var(--lobby-ic-edit);
  mask-image: var(--lobby-ic-edit);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

/* Поиск — капсула 36: лупа слева, «Поиск», справа ⌘K; без «Обзора комнат». */
/* У ряда поиска Element min-height 64 — капсула 36 стояла по центру на 8
   ниже, чем в .search макета (4 сверху, 8 снизу). */
.mx_RoomListPanel [class*="_view_"]:has([class*="_search_"]) {
  padding: 4px 12px 8px;
  height: auto;
  min-height: 0;
  border-bottom: none; /* в макете строки идут сразу под поиском, без линии */
}
.mx_RoomListPanel [class*="_view_"]:has([class*="_search_"]) > button:not([class*="_search_"]) {
  display: none;
}
.mx_RoomListPanel [class*="_search_"][class*="_button_"] {
  width: 100%;
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 14px;
  border: none;
  border-radius: 18px;
  background: var(--lobby-fill);
  color: var(--lobby-muted);
  font-size: 14px;
  font-weight: 400;
}
.mx_RoomListPanel [class*="_search_"][class*="_button_"]:hover {
  background: var(--lobby-hover);
}
.mx_RoomListPanel [class*="_search_"][class*="_button_"] > svg {
  width: 17px;
  height: 17px;
  color: var(--lobby-muted);
}
.mx_RoomListPanel [class*="_search_container_"] {
  flex: 1;
  justify-content: space-between;
  align-items: center;
}
.mx_RoomListPanel [class*="_search_text_"] {
  color: var(--lobby-muted);
}
.mx_RoomListPanel [class*="_search_"] kbd {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--lobby-faint);
  background: none;
  border: none;
  padding: 0;
}

/* Колонка текста — на всю ширину, время прижато вправо и у строк без превью. */
.mx_RoomListItemView [class*="_text_"] {
  flex: 1 1 auto;
  min-width: 0;
}
.mx_RoomListItemView [class*="_meta_"] {
  margin-inline-start: auto;
}

/* Чипы-фильтры Element спрятаны: папки — в рейле, как в Telegram. */
.mx_RoomListPanel [class*="_roomListPrimaryFilters_"] {
  display: none;
}

/* Строка (.row макета): поля 8 со всех сторон, аватар 54, зазор 10 —
   70 при одной строке превью, 85 при двух (имя 19 + 2 + превью 2 × 19 +
   9 + разделитель). Строки вплотную, без собственных полей Element (4 / 0):
   заливка выбора — во всю строку. Список виртуальный (react-virtuoso),
   высоту строк он меряет сам. Индикатор выбора Element (полоска слева) при
   залитой строке лишний. */
.mx_RoomListItemView.mx_RoomListItemView {
  padding: 0;
}
.mx_RoomListItemView [class*="_container_"] {
  box-sizing: border-box;
  /* Строка всегда одной высоты (85, как .row макета с превью в две строки):
     и с одной строкой превью, и с двумя. Иначе выбранные плашки разной
     высоты и аватар то по центру, то у верха (замечание владельца). */
  height: 85px;
  min-height: 85px;
  margin-inline: 0;
  padding: 8px;
  gap: 10px;
  background: transparent;
}
.mx_RoomListItemView [class*="_container_"]::before {
  display: none;
}
/* Аватар — по вертикали по центру строки фиксированной высоты: поля
   сверху и снизу всегда равные (15,5). */
.mx_RoomListItemView [class*="_container_"] > :first-child {
  align-self: center;
}
/* Текст — от верха строки, превью до двух строк. */
.mx_RoomListItemView [class*="_content_"] > [class*="_text_"] {
  align-self: flex-start;
}
/* Разделитель — от колонки текста до правого края, 8 над низом строки
   (.tx макета: поле 9 и линия); у выбранной и под курсором его нет. */
.mx_RoomListItemView [class*="_content_"] {
  align-self: stretch;
  box-sizing: border-box;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--lobby-line);
}
.mx_RoomListItemView [class*="_text_"] > [class*="_topRow_"] {
  margin-bottom: 2px;
}
.mx_RoomListItemView [class*="_roomName_"] {
  line-height: 21px;
}
.mx_RoomListItemView [class*="_timestamp_"] {
  line-height: normal;
}
.mx_RoomListItemView:is(:hover, [aria-selected="true"], .mx_RoomListItemView_selected) [class*="_content_"] {
  border-bottom-color: transparent;
}
.mx_RoomListItemView [class*="_roomName_"] {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--lobby-ink);
}
.mx_RoomListItemView [class*="_timestamp_"] {
  font-size: 13px;
  font-weight: 400;
  color: var(--lobby-muted);
}
.mx_RoomListItemView [class*="_text_"],
.mx_RoomListItemView [class*="_preview_"] {
  font-size: 15px;
  line-height: 20px;
  color: var(--lobby-muted);
}
/* Имя автора в группе — жирнее и цветом основного текста, в той же строке,
   что и текст: «Павел Сидоров: Собрал подборку…», до двух строк. */
.mx_RoomListItemView [class*="_text_"]:has([class*="_previewSender_"]) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mx_RoomListItemView [class*="_text_"]:has([class*="_previewSender_"]) > :is([class*="_previewSender_"], [class*="_preview_"]) {
  display: inline;
  white-space: normal;
}
.mx_RoomListItemView [class*="_previewSender_"] {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lobby-ink);
}
.mx_RoomListItemView [class*="_previewSender_"]::after {
  content: ": ";
}
/* Выбранный чат: всё белым, превью чуть тише; бейдж остаётся красным. */
.mx_RoomListItemView:is([aria-selected="true"], .mx_RoomListItemView_selected) :is([class*="_roomName_"], [class*="_previewSender_"], [class*="_preview_"], [class*="_timestamp_"]) {
  color: var(--lobby-sel-ink);
}
.mx_RoomListItemView:is([aria-selected="true"], .mx_RoomListItemView_selected) [class*="_preview_"] {
  opacity: 0.82;
}
.mx_RoomListItemView:is([aria-selected="true"], .mx_RoomListItemView_selected) :is([class*="_statusIcon_"], [class*="_mutedIcon_"], [class*="_statusRead_"]) {
  stroke: var(--lobby-sel-ink);
  color: var(--lobby-sel-ink);
}
.mx_RoomListItemView [class*="_statusRead_"] {
  stroke: var(--lobby-muted);
}
.mx_RoomListItemView [class*="_mutedIcon_"] {
  color: var(--lobby-faint);
  width: 15px;
  height: 15px;
}
/* Непрочитанные — красная капсула 22 (п. 3, место 1); заглушённый — серая. */
.mx_RoomListItemView [class*="_unread-counter_"] {
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--lobby-signal);
  color: var(--lobby-signal-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 22px;
}
.mx_RoomListItemView:has([class*="_mutedIcon_"]) [class*="_unread-counter_"],
.mx_RoomListItemView .mx_RoomListItemView_inside_muted [class*="_unread-counter_"],
.mx_RoomListItemView [class*="_unread-counter_"][data-muted="true"] {
  background: var(--lobby-mute-badge);
  color: #fff;
}
/* Колокольчик «без звука» в колонке счётчика (Element рисует его там
   у заглушённых чатов) дублирует значок у имени — убираем. */
.mx_RoomListItemView:has([class*="_mutedIcon_"]) [data-testid="notification-decoration"] > svg:last-child {
  display: none;
}
.mx_RoomListItemView:has([class*="_mutedIcon_"]) [class*="_notificationDecoration_"]:has(> [data-testid="notification-decoration"] > svg:only-child):not(:has(.mx_RoomListItemView_inside_pin)) {
  display: none !important;
}
/* Избранный чат без непрочитанных — булавка 17 приглушённым на месте
   счётчика (форк -16), как в Telegram. */
.mx_RoomListItemView svg.mx_RoomListItemView_inside_pin {
  flex: none;
  width: 17px;
  height: 17px;
  fill: var(--lobby-faint);
  color: var(--lobby-faint);
}
.mx_RoomListItemView:is([aria-selected="true"], .mx_RoomListItemView_selected) svg.mx_RoomListItemView_inside_pin {
  fill: var(--lobby-sel-ink);
  opacity: 0.7;
}
/* Наведение — только подсветка строки: Element прятал время и счётчик и
   показывал «⋯» и колокольчик, текст «прыгал». Всё это есть в меню по
   правой кнопке (ядро форка). */
.mx_RoomListItemView [class*="_hoverMenu_"] {
  display: none !important;
}
/* Бейдж — справа у строк превью (.r2 макета), по их центру: колонка от
   верха превью (имя 19 + 2) до низа текста (поле 9 + линия). Колонка
   поверх, а не в потоке: строка имени с временем идёт во всю ширину, как
   .r1 макета (время у правого края), превью уступает бейджу 22 + 8. */
.mx_RoomListItemView [class*="_content_"] {
  position: relative;
}
.mx_RoomListItemView [class*="_notificationDecoration_"] {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  inset-inline-end: 0;
  top: 21px;
  bottom: 10px;
}
.mx_RoomListItemView [class*="_content_"]:has(> [class*="_notificationDecoration_"]:not(:empty)) > [class*="_text_"] {
  padding-inline-end: 30px;
}
.mx_RoomListItemView [class*="_content_"]:has(> [class*="_notificationDecoration_"]:not(:empty)) > [class*="_text_"] > [class*="_topRow_"] {
  margin-inline-end: -30px;
}
.mx_RoomListItemView [class*="_notificationDecoration_"]:empty {
  display: none !important;
}

/* Метка «Клиент» (п. 6.2). Признака «клиент» у комнаты в DOM нет; есть
   выбранная папка «Клиенты» на рейле (класс форка) и точка присутствия,
   которую Element рисует только у личных чатов. Значит: в папке «Клиенты»
   у личных чатов. */
.mx_MatrixChat:has(.mx_SpaceButton_insideFolder_inside_clients.mx_SpaceButton_active)
  .mx_RoomListItemView:has(.mx_RoomAvatarView_PresenceDecoration) [class*="_topRow_"] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mx_MatrixChat:has(.mx_SpaceButton_insideFolder_inside_clients.mx_SpaceButton_active)
  .mx_RoomListItemView:has(.mx_RoomAvatarView_PresenceDecoration) [class*="_roomName_"] {
  min-width: 0;
  flex: 0 1 auto;
}
.mx_MatrixChat:has(.mx_SpaceButton_insideFolder_inside_clients.mx_SpaceButton_active)
  .mx_RoomListItemView:has(.mx_RoomAvatarView_PresenceDecoration) [class*="_topRow_"]::after {
  content: "Клиент" / "клиент";
  order: 1;
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--lobby-line-2);
  border-radius: 5px;
  background: var(--lobby-fill);
  color: var(--lobby-ink-2);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mx_MatrixChat:has(.mx_SpaceButton_insideFolder_inside_clients.mx_SpaceButton_active)
  .mx_RoomListItemView:has(.mx_RoomAvatarView_PresenceDecoration) [class*="_meta_"] {
  order: 2;
  margin-inline-start: auto;
}
.mx_MatrixChat:has(.mx_SpaceButton_insideFolder_inside_clients.mx_SpaceButton_active)
  .mx_RoomListItemView:is([aria-selected="true"], .mx_RoomListItemView_selected):has(.mx_RoomAvatarView_PresenceDecoration) [class*="_topRow_"]::after {
  background: transparent;
  color: var(--lobby-sel-ink);
  border-color: color-mix(in srgb, var(--lobby-sel-ink) 35%, transparent);
}

/* Меню по правой кнопке на строке чата — карточка. */
[role="menu"][class*="_menu_"] {
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--lobby-menu-shadow);
}
[role="menu"][class*="_menu_"] [role^="menuitem"] {
  border-radius: 8px;
}


/* ==== v2 · ломкие селекторы · Аватары */

.mx_BaseAvatar[class*="_avatar-imageless_"] {
  color: #ffffff;
  font-weight: 600;
}
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="1"] { background: var(--lobby-av-1); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="2"] { background: var(--lobby-av-2); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="3"] { background: var(--lobby-av-3); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="4"] { background: var(--lobby-av-4); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="5"] { background: var(--lobby-av-5); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="6"] { background: var(--lobby-av-6); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="7"] { background: var(--lobby-av-7); }
.mx_BaseAvatar[class*="_avatar-imageless_"][data-color="8"] { background: var(--lobby-av-8); }


/* ==== v2 · ломкие селекторы · Лента и пузыри */

/* Плитка сообщения (не служебная строка) ужимается по содержимому, как
   .m макета: max-width — min(520px, 72 %) колонки, в группах — .gm макета
   (min(560px, 80 %) минус аватар 34 и зазор 8). Пузыри серии — через 3,
   после последнего — ещё 8. Свои — справа. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateBubbleContainer_"], [class*="_stateAlignedBetweenBubbles_"], [class*="_stateLeftAlignedBubble_"]) {
  width: fit-content;
  min-width: 0;
  max-width: var(--lobby-bubble-max, min(520px, 72%));
  margin: 3px 0 0;
  padding: 0;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateLastInSection_"]:not([class*="_stateInfo_"], [class*="_stateBubbleContainer_"], [class*="_stateAlignedBetweenBubbles_"], [class*="_stateLeftAlignedBubble_"]) {
  margin-bottom: 8px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"]:not([class*="_stateInfo_"], [class*="_stateBubbleContainer_"], [class*="_stateAlignedBetweenBubbles_"], [class*="_stateLeftAlignedBubble_"]) {
  margin-inline-start: auto;
}
/* Группа — в ленте есть имена авторов. Чужие пузыри сдвинуты на аватар
   34 + 8, аватар — у нижнего края пузыря (.gm: align-items flex-end).
   В личных чатах Element имён не ставит — аватар собеседника прячем. */
.mx_RoomView_MessageList:has(> .mx_EventTile:not([class*="_stateOwnEvent_"]) [data-testid="event-tile-slot-sender"])
  > .mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateOwnEvent_"], [class*="_stateInfo_"], [class*="_stateBubbleContainer_"], [class*="_stateAlignedBetweenBubbles_"], [class*="_stateLeftAlignedBubble_"]) {
  margin-inline-start: 42px;
  max-width: var(--lobby-bubble-max-group, calc(min(560px, 80%) - 42px));
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) [data-testid="event-tile-slot-avatar"] {
  inset-block: auto 0;
  inset-inline-start: -42px;
  border: 0;
  line-height: 0;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) [data-testid="event-tile-slot-avatar"] > * {
  --cpd-avatar-size: 34px !important;
  box-shadow: none !important;
  font-size: 12.5px;
  font-weight: 600;
}
/* Фото внутри аватара: Element оставляет у <img> свою высоту 30 —
   при круге 34 картинка выходит приплюснутой. Тянем на весь круг. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"] [data-testid="event-tile-slot-avatar"] .mx_BaseAvatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.mx_RoomView_MessageList:not(:has(> .mx_EventTile:not([class*="_stateOwnEvent_"]) [data-testid="event-tile-slot-sender"]))
  > .mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) [data-testid="event-tile-slot-avatar"],
.mx_EventTile[class*="_stateOwnEvent_"] [data-testid="event-tile-slot-avatar"] {
  display: none;
}

/* Панель действий при наведении (реакция, ответ, обсуждение, «…») — как в
   Telegram, её нет: всё есть в меню по правой кнопке (и долгому нажатию).
   С клавиатуры (Tab) кнопки по-прежнему доступны и видны, пока в фокусе;
   :has() на каждой строке ленты тормозил пересчёт стилей. */
.mx_EventTile .mx_MessageActionBar:not(:focus-within) {
  opacity: 0;
  pointer-events: none;
}

/* Пузырь .m: 7 / 11 / 7 / 12, скругление 17, у последнего в серии угол
   со стороны отправителя — 5 (хвостик Telegram). Текст 16 / 1.375 — как
   у Telegram Web (14.5 читался тоньше и бледнее при том же сглаживании). */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) > .mx_EventTile_line {
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: var(--lobby-radius-bubble);
  font-size: 16px;
  line-height: 1.375;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateNoBubble_"]) > .mx_EventTile_line:not([class*="_lineMedia_"]) {
  padding: 7px 11px 7px 12px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) > .mx_EventTile_line .mx_EventTile_body {
  font-size: inherit;
  line-height: inherit;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateLastInSection_"]:not([class*="_stateOwnEvent_"], [class*="_stateInfo_"]) > .mx_EventTile_line {
  border-end-start-radius: 5px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateLastInSection_"][class*="_stateOwnEvent_"]:not([class*="_stateInfo_"]) > .mx_EventTile_line {
  border-end-end-radius: 5px;
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) > .mx_EventTile_line {
  box-shadow: var(--lobby-shadow);
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateOwnEvent_"]) .mx_EventTile_line {
  color: var(--lobby-b-in-ink);
}

/* Имя автора — внутри пузыря над текстом (.sender макета): 13 / 600,
   цветом аватара, отступ 1. Слот имени и пузырь — один пузырь: у имени
   верхние скругления, у пузыря под ним — нет. Тень — на всю плитку. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateOwnEvent_"]) > [data-testid="event-tile-slot-sender"] {
  display: block;
  position: static;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  padding: 7px 11px 0 12px;
  border-radius: var(--lobby-radius-bubble) var(--lobby-radius-bubble) 0 0;
  background: var(--event-tile-bubble-other-background);
  font-size: 13px;
  line-height: 1.38;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) > [data-testid="event-tile-slot-sender"] .mx_DisambiguatedProfile {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_DisambiguatedProfile_displayName {
  font-size: 13px;
  font-weight: 600;
  line-height: inherit; /* у Element 13px — строка имени держалась только на родителе */
}
/* Mxid рядом с совпадающим именем — мелко и приглушённо. */
.mx_EventTile[class*="_layoutBubble_"] .mx_DisambiguatedProfile_mxid {
  font-size: 12px;
  color: var(--lobby-muted);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]):not([class*="_stateOwnEvent_"]):has(> [data-testid="event-tile-slot-sender"], > [class*="_senderDetails_"] [data-testid="event-tile-slot-sender"]) > .mx_EventTile_line {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateNoBubble_"]):not([class*="_stateOwnEvent_"]):has(> [data-testid="event-tile-slot-sender"], > [class*="_senderDetails_"] [data-testid="event-tile-slot-sender"]) > .mx_EventTile_line:not([class*="_lineMedia_"]) {
  padding-top: 1px;
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]):is(:not([class*="_stateOwnEvent_"]):has(> [data-testid="event-tile-slot-sender"], > [class*="_senderDetails_"] [data-testid="event-tile-slot-sender"]), :has(> [data-testid="event-tile-slot-threadInfo"] .mx_ThreadSummary)) {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
.cpd-theme-dark .mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) {
  filter: none;
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]):is(:not([class*="_stateOwnEvent_"]):has(> [data-testid="event-tile-slot-sender"], > [class*="_senderDetails_"] [data-testid="event-tile-slot-sender"]), :has(> [data-testid="event-tile-slot-threadInfo"] .mx_ThreadSummary)) > .mx_EventTile_line {
  box-shadow: none;
}

/* Время и галочки — внутри пузыря справа внизу, 11.5, обтекаются текстом
   как float .meta макета (margin 6 0 -4 10): в конце текста — невидимый
   float того же размера, само время стоит поверх него абсолютно. */
.mx_EventTile[class*="_layoutBubble_"] .mx_MessageTimestamp {
  color: var(--lobby-b-in-meta);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_MessageTimestamp {
  color: var(--lobby-b-out-meta);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateNoBubble_"]) > .mx_EventTile_line:not([class*="_lineMedia_"]) .mx_MessageTimestamp {
  inset-block-end: 2px;
  inset-inline-end: 11px;
  max-width: none;
  padding: 0;
  line-height: 15.87px;
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateNoBubble_"]) > .mx_EventTile_line:not([class*="_lineMedia_"]) [data-testid="event-tile-slot-body"] .mx_EventTile_body::after,
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"], [class*="_stateNoBubble_"]) > .mx_EventTile_line:not([class*="_lineMedia_"]) [data-testid="event-tile-slot-body"] > :not(.mx_MTextBody):last-child::after {
  content: "";
  float: right;
  width: var(--lobby-meta-w, 34px);
  height: 15.87px;
  margin: 6px 0 -4px 10px;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] {
  --lobby-meta-w: 53px;
}

/* Свой пузырь — графит: внутри него Compound-цвета светлые, иначе цитата,
   «N ответов», превью ответа, значки читались бы серым по графиту. */
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"]:not([class*="_stateInfo_"]) {
  --cpd-color-text-primary: var(--lobby-b-out-ink);
  --cpd-color-text-secondary: var(--lobby-b-out-2);
  --cpd-color-text-action-accent: var(--lobby-b-out-ink);
  --cpd-color-text-link-external: var(--lobby-b-out-ink);
  --cpd-color-icon-primary: var(--lobby-b-out-ink);
  --cpd-color-icon-secondary: var(--lobby-b-out-2);
  --cpd-color-icon-tertiary: var(--lobby-b-out-meta);
  --cpd-color-bg-subtle-secondary: var(--lobby-b-out-fill);
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_EventTile_line {
  color: var(--lobby-b-out-ink);
}
/* Ссылки в тексте — цветом текста с подчёркиванием 45 %. */
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}
/* Пузыри без фона (картинки, системные) тень не носят. */
.mx_EventTile[class*="_stateNoBubble_"] .mx_EventTile_line,
.mx_EventTile[class*="_stateInfo_"] .mx_EventTile_line,
.mx_EventTile[class*="_stateBubbleContainer_"] .mx_EventTile_line {
  box-shadow: none;
}
/* Разделитель дат — линейки CSS-модулей. */
.mx_TimelineSeparator [class*="_separator_"] {
  display: none;
}

/* Служебная строка (смена аватара, приглашение) — капсула .svc по центру:
   13, 5 × 12, скругление 14, без аватарки и времени. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] {
  justify-content: center;
  width: fit-content;
  max-width: min(520px, 100%);
  margin: 8px auto;
  padding: 5px 12px;
  border-radius: var(--lobby-pill-radius);
  background: var(--lobby-pill);
  color: var(--lobby-pill-ink);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mx_GenericEventListSummary .mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] {
  margin: 3px auto;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] > .mx_EventTile_line {
  width: auto;
  min-width: 0;
  padding: 0;
  color: inherit; /* иначе цвет текста пузыря: тёмный текст на тёмной капсуле */
  font-size: 13px;
  line-height: normal;
  text-align: center;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] .mx_TextualEvent {
  color: inherit;
  font: inherit;
  opacity: 1;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] > [data-testid="event-tile-slot-avatar"],
.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] [data-testid="event-tile-slot-timestamp"] {
  display: none;
}

.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateInfo_"] [class*="_textualEvent_"] {
  color: inherit;
}

/* Ответ / цитата — .q макета: полоса 3 px сигнального цвета, фон
   #F6F6F5 (в своём — белый 10 %), скругление 6, 4 × 8; имя 13 / 600,
   текст 13.5 в одну строку с многоточием, приглушённый. */
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain.mx_ReplyChain {
  margin: 1px 0 5px;
  padding: 4px 8px;
  border: none;
  border-inline-start: 3px solid var(--lobby-signal);
  border-radius: 6px;
  background: var(--lobby-quote-bg-in);
  color: inherit;
  font-size: 13.5px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_ReplyChain.mx_ReplyChain {
  background: var(--lobby-quote-bg-out);
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile"] {
  padding: 0;
  font-size: 13.5px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile"] > a {
  display: block;
  color: inherit;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile-sender"] {
  display: block;
  height: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile-sender"] > :not([class*="_avatar_"]) {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile-sender"] [class*="_avatar_"],
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain .mx_DisambiguatedProfile_mxid {
  display: none;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain .mx_DisambiguatedProfile_displayName {
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile-body"] {
  display: block;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  opacity: 0.75;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile-body"] :is(.mx_MTextBody, .mx_EventTile_body) {
  display: inline;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 13.5px;
  line-height: 1.38;
}

/* Ответ на картинку — миниатюра 40, не вся картинка. */
.mx_EventTile[class*="_layoutBubble_"] .mx_ReplyChain [data-testid="reply-tile-body"] img {
  max-height: 40px;
  width: auto;
}

/* Реакции и время в одной строке, как .reac + .meta макета: невидимый
   float под время — не за текстом, а справа от строки реакций. */
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line:has(> [class*="_slotFooter_"]) [data-testid="event-tile-slot-body"] .mx_EventTile_body::after {
  content: none;
}

/* Файл — внутри пузыря, как .file макета: круг 44 с иконкой документа
   (в чужом — акцентом, в своём — белый 14 %), имя 14 / 600, под ним размер
   12.5 приглушённо; время — под плиткой справа. Своя рамка и заливка
   плитки Element не нужны. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) {
  padding: 7px 11px 7px 12px;
  background: var(--event-tile-bubble-other-background);
  box-shadow: var(--lobby-shadow);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) {
  background: var(--event-tile-bubble-self-background);
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateOwnEvent_"]):has(> [data-testid="event-tile-slot-sender"]) > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) {
  padding-top: 1px;
  box-shadow: none;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_container_"] {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_tile_"] {
  width: auto;
  min-width: 0;
  padding: 3px 2px 2px;
  border: none;
  border-radius: 0;
  background: none;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_below_"] {
  gap: 11px;
  margin: 0;
  padding: 0;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_leftGroup_"] {
  gap: 11px;
  align-items: center;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_leftGroup_"] > [class*="_icon_"] {
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_leftGroup_"] > [class*="_icon_"] {
  background: var(--lobby-b-out-fill);
  color: var(--lobby-b-out-ink);
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_leftGroup_"] > [class*="_icon_"] svg {
  width: 20px;
  height: 20px;
  color: inherit !important; /* у svg цвет в атрибуте style */
  fill: currentColor;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_textContent_"] [class*="_header_"] {
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_textContent_"] p {
  margin: 0;
  color: inherit;
  opacity: 0.65;
  font-size: 12.5px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) [class*="_buttonGroup_"] button {
  color: inherit;
  opacity: 0.65;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) .mx_EventTile_content::after {
  content: "";
  display: block;
  height: 13.87px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has([class*="_leftGroup_"]) .mx_MessageTimestamp {
  inset-block-end: 2px;
  inset-inline-end: 11px;
  max-width: none;
  padding: 0;
  line-height: 15.87px;
}

/* Документ (форк -17, .mx_MFileBody_inside_doc) — строка медиа без
   своего фона: даём ей пузырь. Поля 6 / 12 / 6 / 6 — миниатюра 68 стоит
   в 6 от края, её скругление 11 = 17 − 6. Время — в правом нижнем углу
   под кнопкой «Скачать» (кнопка по центру высоты, они не сходятся);
   справа под ним резервируем полосу, чтобы имя не залезало под время. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has(.mx_MFileBody_inside_doc) {
  padding: 6px 12px 6px 6px;
  background: var(--event-tile-bubble-other-background);
  color: var(--lobby-b-in-ink);
  box-shadow: var(--lobby-shadow);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > .mx_EventTile_line[class*="_lineMedia_"]:has(.mx_MFileBody_inside_doc) {
  background: var(--event-tile-bubble-self-background);
  color: var(--lobby-b-out-ink);
}
.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateOwnEvent_"]):has(> [data-testid="event-tile-slot-sender"]) > .mx_EventTile_line[class*="_lineMedia_"]:has(.mx_MFileBody_inside_doc) {
  padding-top: 2px;
  box-shadow: none;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_MFileBody_inside_meta {
  color: var(--lobby-b-out-meta);
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_MFileBody_inside_download {
  background: var(--lobby-b-out-fill);
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_MFileBody_inside_thumb:not(.mx_MFileBody_inside_thumb_picture) {
  background: var(--lobby-b-out-fill);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line[class*="_lineMedia_"]:has(.mx_MFileBody_inside_doc) .mx_MessageTimestamp {
  inset-block-end: 4px;
  inset-inline-end: 12px;
  max-width: none;
  padding: 0;
  background: none;
  color: var(--lobby-b-in-meta);
  line-height: 15.87px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > .mx_EventTile_line[class*="_lineMedia_"]:has(.mx_MFileBody_inside_doc) .mx_MessageTimestamp {
  color: var(--lobby-b-out-meta);
}

/* Просмотрщик PDF (форк -17 включил его по умолчанию) — карточка правой
   панели, открывается из плитки документа. Страницы рисует pdf.js в
   песочнице-iframe с непрозрачным origin: снаружи достаётся только рамка.
   Поле вокруг листов — серое окно (--lobby-window), чтобы белые страницы
   читались листами; панель инструментов — белая с линией разделителя;
   поле номера страницы — капсула ввода Lobby, фокус — чернилами, не синим. */
.mx_RightPanel [class*="_viewer_"]:has(.mx_PdfViewer_iframe) {
  background: var(--lobby-window);
}
.mx_RightPanel [class*="_viewer_"]:has(.mx_PdfViewer_iframe) > [class*="_toolbar_"] {
  background: var(--lobby-panel);
  border-bottom: 1px solid var(--lobby-line);
  color: var(--lobby-ink);
}
.mx_RightPanel [class*="_viewer_"]:has(.mx_PdfViewer_iframe) [class*="_pageInput_"] {
  border: 1px solid var(--lobby-input-border);
  background: var(--lobby-input-bg);
  color: var(--lobby-ink);
  font-variant-numeric: tabular-nums;
}
.mx_RightPanel [class*="_viewer_"]:has(.mx_PdfViewer_iframe) [class*="_pageInput_"]:is(:focus, :focus-visible) {
  border-color: var(--lobby-ink);
  outline: none;
  box-shadow: none;
}
.mx_RightPanel [class*="_viewer_"]:has(.mx_PdfViewer_iframe) :is([class*="_pageSeparator_"], [class*="_pageTotal_"]) {
  color: var(--lobby-muted);
  font-variant-numeric: tabular-nums;
}
.mx_RightPanel [class*="_viewer_"]:has(.mx_PdfViewer_iframe) [class*="_zoomLevel_"] {
  color: var(--lobby-ink);
  font-variant-numeric: tabular-nums;
}

/* Превью ссылки в текстовом пузыре — .lp макета (п. 6.5): та же полоса
   3 px сигнального цвета, что у цитаты, фон цитаты, скругление 6, 6 × 9.
   Сверху домен 12/600 красным (в графитовом пузыре и в тёмной теме —
   #FF8A7E), ниже заголовок 13.5/600 цветом текста, описание приглушённым
   в две строки, картинка — со скруглением 8. Отдельного узла домена
   (og:site_name) Element не рисует: домен из href заголовка кладёт в
   data-inside-host element/inside-receipts.js; без него строки домена нет.
   Значок-«скрепка» Element в цветном квадрате не нужен — макет без него. */
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"]:has([class*="_leftGroup_"]) {
  margin-top: 6px;
  padding: 6px 9px;
  border: none;
  border-inline-start: 3px solid var(--lobby-signal);
  border-radius: 6px;
  background: var(--lobby-quote-bg-in);
  font-size: 13.5px;
  line-height: 1.38;
  gap: 6px;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"]:has([class*="_leftGroup_"]) {
  background: var(--lobby-quote-bg-out);
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_below_"] {
  gap: 8px;
  margin: 0;
  padding: 0;
  align-items: flex-start;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_leftGroup_"] {
  gap: 0;
  min-width: 0;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_leftGroup_"] > [class*="_icon_"] {
  display: none;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_textContent_"] {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_header_"] {
  color: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_header_"] a {
  color: inherit;
  text-decoration: none;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_header_"] a:hover {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_header_"][data-inside-host]::before {
  content: attr(data-inside-host);
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--lobby-link-src);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_header_"][data-inside-host]::before {
  color: var(--lobby-link-src-out);
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_textContent_"] p {
  margin: 0;
  color: inherit;
  opacity: 0.7;
  font-size: 13.5px;
  line-height: 1.38;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_image_"] {
  border-radius: 8px;
  overflow: hidden;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_image_"] img {
  border-radius: 8px;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_buttonGroup_"] button {
  color: inherit;
  opacity: 0.55;
}
.mx_EventTile[class*="_layoutBubble_"] > .mx_EventTile_line:not([class*="_lineMedia_"]) [class*="_tile_"] [class*="_buttonGroup_"] button:hover {
  opacity: 0.85;
}

/* Галочки ✓ / ✓✓ в правом нижнем углу своего пузыря, сразу за временем
   (docs/UI-SKIN.md §4). Состояние — из того, что Element кладёт в плитку:
     часы — local echo: нет data-scroll-tokens, в слоте квитанции role=status;
     !    — в слоте квитанции [data-testid="notification-badge"];
     ✓    — своё с настоящим event_id (есть data-scroll-tokens);
     ✓✓   — в слоте квитанции .mx_ReadReceiptGroup[role=group] ИЛИ атрибут
            data-inside-read от inside-receipts.js.
   Текст для скринридера — альтернативный текст content ("\200B" / "…"):
   видимая часть — пробел нулевой ширины, а не "" (такой Chrome выкидывает
   из дерева доступности вместе с альтернативным текстом). */
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"]) .mx_MessageTimestamp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: none;
}
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"]) .mx_MessageTimestamp::after {
  flex: none;
  width: 16px;
  height: 11px;
  background-color: var(--lobby-b-out-meta);
  -webkit-mask: var(--inside-tick) center / contain no-repeat;
  mask: var(--inside-tick) center / contain no-repeat;
}
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"])[data-scroll-tokens]
  .mx_MessageTimestamp::after {
  --inside-tick: var(--inside-tick-sent);
  content: "\200B" / "отправлено";
}
/* ✓✓ — в своём пузыре белым. */
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"])[data-scroll-tokens]:is(
    [data-inside-read],
    :has([data-testid="event-tile-slot-receipt"] .mx_ReadReceiptGroup[role="group"])
  ) .mx_MessageTimestamp::after {
  --inside-tick: var(--inside-tick-read);
  content: "\200B" / "прочитано";
  background-color: var(--lobby-b-out-ink);
}
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"]):not([data-scroll-tokens]):has(
    [data-testid="event-tile-slot-receipt"] [role="status"]
  ):not(:has([data-testid="event-tile-slot-receipt"] [data-testid="notification-badge"])) .mx_MessageTimestamp::after {
  --inside-tick: var(--inside-tick-sending);
  content: "\200B" / "отправляется";
}
/* ! — не отправлено (опасность, п. 3). Правило часов выше исключает плитки
   с бейджем ошибки: при ошибке role=status тоже есть. */
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"]):has(
    [data-testid="event-tile-slot-receipt"] [data-testid="notification-badge"]
  ) .mx_MessageTimestamp::after {
  --inside-tick: var(--inside-tick-failed);
  content: "\200B" / "не отправлено";
  background-color: var(--lobby-signal);
}
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"] [class*="_lineImage_"] .mx_MessageTimestamp::after {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Реакции внутри пузыря (ядро форка), .reac макета: капсулы 2 × 8,
   скругление 12, 12.5; вторичная заливка в чужом, полупрозрачный белый в
   своём; своя реакция — акцентом. */
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line > [class*="_slotFooter_"] {
  margin: 0 calc(var(--lobby-meta-w, 34px) + 10px) 0 0;
}
.mx_EventTile [class*="_reactionsRowButton_"] {
  height: auto;
  min-height: 0;
  padding: 2px 8px;
  gap: 4px;
  border: none;
  border-radius: 12px;
  background: var(--lobby-quote-bg-in);
  box-shadow: none;
  font-size: 12.5px;
  line-height: 17.25px;
}
.mx_EventTile[class*="_stateOwnEvent_"] [class*="_reactionsRowButton_"] {
  background: var(--lobby-b-out-fill);
}
.mx_EventTile [class*="_reactionsRowButton_"]:hover {
  background: var(--lobby-line-2);
  border: none;
}
.mx_EventTile[class*="_stateOwnEvent_"] [class*="_reactionsRowButton_"]:hover {
  background: rgba(255, 255, 255, 0.22);
}
.mx_EventTile [class*="_reactionsRowButtonContent_"] {
  font-size: 12.5px;
  line-height: inherit;
}
.mx_EventTile [class*="_reactionsRowButtonCount_"] {
  font-size: 12.5px;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
}
.mx_EventTile [class*="_reactionsRowButton_"][class*="_reactionsRowButtonSelected_"] {
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}
.mx_EventTile[class*="_stateOwnEvent_"] [class*="_reactionsRowButton_"][class*="_reactionsRowButtonSelected_"] {
  background: var(--lobby-b-out-ink);
  color: var(--lobby-b-out);
}
.mx_EventTile [class*="_addReactionButton_"] {
  border: none;
  background: transparent;
}

/* Упоминание: вместо жёлтой заливки строки Element — тонкая черта у края
   пузыря (не красная: это не одно из шести мест сигнала). */
.mx_EventTile[class*="_stateHighlighted_"]::before {
  background-color: transparent !important;
}
.mx_EventTile[class*="_stateHighlighted_"] .mx_BaseAvatar {
  box-shadow: none !important;
}
.mx_EventTile[class*="_stateHighlighted_"] .mx_EventTile_line {
  box-shadow: inset 3px 0 0 var(--lobby-ink-2), var(--lobby-shadow);
}

/* Фото с подписью — одна плашка (бывш. §33): картинка во всю ширину сверху
   со скруглением пузыря, подпись ниже, время с галочками — справа в
   строке подписи. Фото без подписи — время белым на тёмной пилюле. */
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) {
  background: var(--event-tile-bubble-other-background);
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"]
  .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) {
  background: var(--event-tile-bubble-self-background);
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) .mx_ImageBody {
  margin: 0;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) .mx_ImageBody_container {
  border-radius: var(--lobby-radius-bubble) var(--lobby-radius-bubble) 0 0;
}
/* Ширина 0 + min-width 100 % — подпись не раздвигает пузырь. */
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"] > [data-testid="event-tile-slot-body"] .mx_EventTile_caption {
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
  padding: 6px 12px 7px;
  line-height: 20px;
}
/* Невидимый «хвост» текста под время: короткая подпись встаёт с временем
   в одну строку, длинная переносит время ниже. У своих шире — галочки. */
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"] > [data-testid="event-tile-slot-body"] .mx_EventTile_caption .mx_EventTile_body::after {
  content: "";
  display: inline-block;
  width: 40px;
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"]
  .mx_EventTile_line[class*="_lineImage_"] > [data-testid="event-tile-slot-body"] .mx_EventTile_caption .mx_EventTile_body::after {
  width: 58px;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) .mx_MessageTimestamp {
  inset-block-end: 7px;
  inset-inline-end: 10px;
  padding: 0;
  line-height: 20px;
  background: none;
  color: var(--lobby-b-in-meta);
}
.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) .mx_MessageTimestamp {
  color: var(--lobby-b-out-meta);
}
/* Под подписью галочки — как в обычном пузыре. Ошибку отправки не трогаем;
   исключение — в :where(), чтобы не поднять специфичность выше «прочитано». */
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:where(:not(:has([data-testid="event-tile-slot-receipt"] [data-testid="notification-badge"])))
  .mx_EventTile_line[class*="_lineImage_"]:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption) .mx_MessageTimestamp::after {
  background-color: var(--lobby-b-out-meta);
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:not(:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption)) {
  box-shadow: none;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:not(:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption)) .mx_ImageBody {
  margin: 0;
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:not(:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption)) .mx_ImageBody_container {
  border-radius: var(--lobby-radius-bubble);
}
.mx_EventTile[class*="_layoutBubble_"] .mx_EventTile_line[class*="_lineImage_"]:not(:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption)) .mx_MessageTimestamp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 20px;
}
.mx_RoomView_MessageList > .mx_EventTile[class*="_stateOwnEvent_"]:not([class*="_stateInfo_"])[data-scroll-tokens]:is(
    [data-inside-read],
    :has([data-testid="event-tile-slot-receipt"] .mx_ReadReceiptGroup[role="group"])
  ) .mx_EventTile_line[class*="_lineImage_"]:not(:has(> [data-testid="event-tile-slot-body"] .mx_EventTile_caption)) .mx_MessageTimestamp::after {
  background-color: #fff;
}
/* От последнего сообщения до строки ввода — 40, как в макете (поле 8 у
   последнего пузыря + 32), и когда последней стоит служебная капсула:
   у её плитки свои 5 снизу, у свёрнутой сводки — 8. За последней плиткой
   Element держит пустые <li> (маркер прочтения, «печатает»), поэтому не
   :last-child, а «нет плиток дальше». */
.mx_RoomView_body .mx_RoomView_MessageList > .mx_EventTile[class*="_stateInfo_"]:not(:has(~ :is(.mx_EventTile, .mx_GenericEventListSummary))) {
  margin-bottom: 3px;
}
.mx_RoomView_body .mx_RoomView_MessageList > .mx_GenericEventListSummary:not(:has(~ :is(.mx_EventTile, .mx_GenericEventListSummary))) {
  margin-bottom: 0;
}

/* ==== v2 · ломкие селекторы · Обсуждения */

/* Полоса «N ответов» — нижняя часть пузыря (.thr макета): во всю его
   ширину, над ней черта 1 px, нижние углы как у пузыря (5 — со стороны
   отправителя у последнего в серии). Пузырь над ней теряет нижние углы,
   а его нижний отступ — 8, как margin-top .thr. */
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:has(> [data-testid="event-tile-slot-threadInfo"] .mx_ThreadSummary) > .mx_EventTile_line {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateNoBubble_"]):has(> [data-testid="event-tile-slot-threadInfo"] .mx_ThreadSummary) > .mx_EventTile_line:not([class*="_lineMedia_"]) {
  padding-bottom: 8px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"] > [data-testid="event-tile-slot-threadInfo"]:has(.mx_ThreadSummary) {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--lobby-line);
  border-radius: 0 0 var(--lobby-radius-bubble) var(--lobby-radius-bubble);
  background: var(--event-tile-bubble-other-background);
  color: var(--lobby-b-in-ink);
  --lobby-thr-muted: var(--lobby-muted);
  --lobby-thr-faint: var(--lobby-faint);
  --lobby-thr-ring: var(--event-tile-bubble-other-background);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateOwnEvent_"] > [data-testid="event-tile-slot-threadInfo"]:has(.mx_ThreadSummary) {
  border-top-color: var(--lobby-b-out-line);
  background: var(--event-tile-bubble-self-background);
  color: var(--lobby-b-out-ink);
  --lobby-thr-muted: var(--lobby-b-out-meta);
  --lobby-thr-faint: var(--lobby-b-out-meta);
  --lobby-thr-ring: var(--event-tile-bubble-self-background);
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateLastInSection_"]:not([class*="_stateOwnEvent_"]) > [data-testid="event-tile-slot-threadInfo"]:has(.mx_ThreadSummary) {
  border-end-start-radius: 5px;
}
.mx_EventTile.mx_EventTile[class*="_layoutBubble_"][class*="_stateLastInSection_"][class*="_stateOwnEvent_"] > [data-testid="event-tile-slot-threadInfo"]:has(.mx_ThreadSummary) {
  border-end-end-radius: 5px;
}

/* Состав полосы. Иконка 17 цветом текста; точка «есть новые» — не на
   иконке, а отдельной красной точкой 8 перед шевроном. */
.mx_ThreadSummary [class*="_threadIcon_"] {
  --cpd-icon-button-size: 17px !important;
  position: static;
  flex: none;
  color: inherit;
}
/* Значок — линейный «обсуждение» макета (п. 8, линия 1.8), как в шапке,
   а не залитый Compound; вырез под точку Element (маска) не нужен. */
.mx_ThreadSummary [class*="_threadIcon_"] svg {
  display: block;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--lobby-ico-thread) center / 17px 17px no-repeat;
  mask: var(--lobby-ico-thread) center / 17px 17px no-repeat;
}
.mx_ThreadSummary [class*="_threadIcon_"] svg > * {
  display: none;
}
.mx_ThreadSummary [class*="_threadIcon_"][data-indicator]::before {
  inset-block-start: 50%;
  inset-inline-end: 36px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background-color: var(--lobby-signal);
}
.mx_ThreadSummary:has([data-indicator]) [class*="_content_"] {
  margin-inline-end: 16px;
}
.mx_ThreadSummary [class*="_repliesAmount_"] {
  flex: none;
  padding: 0;
  color: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: inherit;
}
.mx_ThreadSummary .mx_BaseAvatar {
  --cpd-avatar-size: 20px !important;
  flex: none;
  margin: 0;
  box-shadow: 0 0 0 2px var(--lobby-thr-ring, var(--lobby-b-in));
  font-size: 8.5px;
  font-weight: 600;
}
.mx_ThreadSummary [class*="_sender_"],
.mx_ThreadSummary [class*="_content_"] {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--lobby-thr-muted, var(--lobby-muted));
  font-size: 13.5px;
  font-weight: 400;
  line-height: inherit;
}
/* «Имя: ответ» — одной строкой через пробел, а не через зазор 8. */
.mx_ThreadSummary [class*="_sender_"] {
  flex: 0 1 auto;
  max-width: 45%;
  margin-inline-end: -4px;
}
.mx_ThreadSummary [class*="_sender_"]::after {
  content: ":";
}
.mx_ThreadSummary [class*="_content_"] {
  flex: 1 1 0;
  width: 0;
}
.mx_ThreadSummary [class*="_content_"] * {
  font: inherit;
  color: inherit;
}
.mx_ThreadSummary [class*="_chevron_"] {
  position: static;
  flex: none;
  width: 17px;
  height: 17px;
  margin-inline-start: auto;
  background: none;
  opacity: 1;
  transform: none;
  transition: none;
  color: var(--lobby-thr-faint, var(--lobby-faint));
}
.mx_ThreadSummary [class*="_chevron_"] svg {
  position: static;
  width: 17px;
  height: 17px;
  transform: none;
  color: inherit;
}

/* ==== v2 · ломкие селекторы · Обсуждения · панель */

/* Панель обсуждения (ThreadView, .tpanel макета). Плитки здесь — форма
   _shapeThread_: аватар и имя лежат в обёртке _senderDetails_. Имя — в
   пузыре, как в ленте; аватар 34 — у низа пузыря слева. */
.mx_ThreadView .mx_EventTile.mx_EventTile[class*="_shapeThread_"][class*="_layoutBubble_"]:not([class*="_stateInfo_"]) {
  display: block;
}
.mx_ThreadView .mx_EventTile[class*="_shapeThread_"]:not([class*="_stateInfo_"], [class*="_stateOwnEvent_"]) > [class*="_senderDetails_"] {
  display: block;
  padding: 7px 11px 0 12px;
  border-radius: var(--lobby-radius-bubble) var(--lobby-radius-bubble) 0 0;
  background: var(--event-tile-bubble-other-background);
  font-size: 13px;
  line-height: 1.38;
}
.mx_ThreadView .mx_EventTile[class*="_shapeThread_"]:not([class*="_stateInfo_"]) > [class*="_senderDetails_"] [data-testid="event-tile-slot-sender"] > * {
  display: block;
  position: static;
  inset: auto;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.38;
}
.mx_ThreadView .mx_EventTile[class*="_shapeThread_"]:not([class*="_stateInfo_"]) > .mx_EventTile_line::after {
  content: none;
}
/* Ответы в панели — 14 (.ttl .m макета). */
.mx_ThreadView .mx_EventTile.mx_EventTile[class*="_layoutBubble_"]:not([class*="_stateInfo_"]) > .mx_EventTile_line {
  font-size: 14px;
}

/* Под исходным сообщением — капсула «N ответов», как дата (.day макета).
   Число — счётчик CSS по плиткам после первой, слово — склонение через
   @counter-style (cyclic по остатку от 100). Капсула — ::after списка,
   а на место после исходного сообщения её ставит order. */
@counter-style lobby-replies-word {
  system: cyclic;
  symbols: "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов" "ответ" "ответа" "ответа" "ответа" "ответов" "ответов" "ответов" "ответов" "ответов" "ответов";
}
.mx_ThreadView .mx_RoomView_MessageList {
  display: flex;
  flex-direction: column;
  counter-reset: lobby-replies;
}
.mx_ThreadView .mx_RoomView_MessageList > .mx_EventTile ~ * {
  order: 2;
}
.mx_ThreadView .mx_RoomView_MessageList > .mx_EventTile ~ .mx_EventTile:not([class*="_stateInfo_"]) {
  counter-increment: lobby-replies;
}
.mx_ThreadView .mx_RoomView_MessageList:has(> .mx_EventTile ~ .mx_EventTile:not([class*="_stateInfo_"]))::after {
  content: counter(lobby-replies) " " counter(lobby-replies, lobby-replies-word);
  order: 1;
  align-self: center;
  margin: 10px 0;
  padding: 3px 10px;
  border-radius: var(--lobby-pill-radius);
  background: var(--lobby-pill);
  color: var(--lobby-pill-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Шапка панели (.tph макета): высота 57 с линией, поля 10 / 10 / 10 / 18,
   «Обсуждение» 15 / 600 слева, справа крестик 36. «Назад» (к списку
   обсуждений) и «⋯» (открыть в ленте, ссылка на обсуждение) — функции
   Element, их оставляем: такими же круглыми 36 без подложки; при «Назад»
   левое поле 10, как правое. Подзаголовка «Чат · N ответов» в DOM шапки
   нет (название комнаты и число ответов — только в соседних узлах). */
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header {
  box-sizing: border-box;
  height: 57px;
  min-height: 57px;
  padding: 10px 10px 10px 18px;
  gap: 4px;
}
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header:has(> [class*="_icon-button_"]:first-child) {
  padding-inline-start: 10px;
}
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header_title {
  gap: 4px;
  align-items: center;
}
.mx_ThreadView .mx_BaseCard_header .mx_BaseCard_header_title_heading {
  line-height: 19px;
  letter-spacing: 0;
}
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header > [class*="_icon-button_"],
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header .mx_BaseCard_header_title_button--option {
  --cpd-icon-button-size: 36px !important;
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--lobby-ink-2);
}
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header > [class*="_icon-button_"]:hover,
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header .mx_BaseCard_header_title_button--option:hover {
  background: var(--lobby-hover);
}
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header > [class*="_icon-button_"] > [class*="_indicator-icon_"] {
  width: 20px;
  height: 20px;
}
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header > [class*="_icon-button_"] svg,
.mx_RightPanel .mx_ThreadView .mx_BaseCard_header .mx_BaseCard_header_title_button--option svg {
  width: 20px;
  height: 20px;
  color: inherit;
}


/* ==== v2 · ломкие селекторы · Шапка чата */

/* Кнопки справа — IconButton Compound ([class*="_icon-button_"]): круг 40,
   иконка 20, цвет текста; открытая панель (svg.mx_RoomHeader_toggled) —
   залитая акцентом. В группах вместо карточки — «Обсуждения»: кнопку
   «О комнате» прячем (карточка открывается кликом по имени). */
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"] {
  --cpd-icon-button-size: 40px !important;
  flex: none;
  box-sizing: border-box;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lobby-ink);
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:hover {
  background: var(--lobby-hover);
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"] > [class*="_indicator-icon_"] {
  width: 20px !important;
  height: 20px !important;
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"] svg {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--lobby-ink);
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:has(svg.mx_RoomHeader_toggled) {
  background: var(--lobby-accent);
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:has(svg.mx_RoomHeader_toggled) svg {
  color: var(--lobby-accent-ink);
}
/* Иконки макета: «Обсуждения» и «О комнате» (= карточка, иконка панели). */
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:is([aria-label="Обсуждения"], [aria-label="Threads"]) svg,
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:is([aria-label="О комнате"], [aria-label="Room info"]) svg {
  background: currentColor;
  -webkit-mask: var(--lobby-ico-thread) center / 20px 20px no-repeat;
  mask: var(--lobby-ico-thread) center / 20px 20px no-repeat;
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:is([aria-label="О комнате"], [aria-label="Room info"]) svg {
  -webkit-mask-image: var(--lobby-ico-panel);
  mask-image: var(--lobby-ico-panel);
}
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"]:is([aria-label="Обсуждения"], [aria-label="Threads"], [aria-label="О комнате"], [aria-label="Room info"]) svg > * {
  display: none;
}
/* Точка «есть новое в обсуждениях» — сигнал (п. 3, непрочитанное). */
.mx_RoomView_body > .mx_RoomHeader > [class*="_icon-button_"] [class*="_indicator-icon_"]::before {
  background: var(--lobby-signal) !important;
}
/* Группа: «О комнате» прячем (карточка — кликом по имени). С форка -15
   перед счётчиком участников стоит «Ещё», поэтому ищем кнопку по подписи. */
.mx_RoomView_body > .mx_RoomHeader:has(> div > .mx_FacePile) > [class*="_icon-button_"]:is([aria-label="О комнате"], [aria-label="Room info"]) {
  display: none !important;
}
/* «Поиск» и «Ещё» (форк -15) — иконки макета, как у остальных кнопок. */
.mx_RoomView_body > .mx_RoomHeader > .mx_RoomHeader_inside_search svg,
.mx_RoomView_body > .mx_RoomHeader > .mx_RoomHeader_inside_more svg {
  background: currentColor;
  -webkit-mask: var(--lobby-ico-search) center / 20px 20px no-repeat;
  mask: var(--lobby-ico-search) center / 20px 20px no-repeat;
}
.mx_RoomView_body > .mx_RoomHeader > .mx_RoomHeader_inside_more svg {
  -webkit-mask-image: var(--lobby-ico-more);
  mask-image: var(--lobby-ico-more);
}
.mx_RoomView_body > .mx_RoomHeader > :is(.mx_RoomHeader_inside_search, .mx_RoomHeader_inside_more) svg > * {
  display: none;
}
.mx_RoomView_body > .mx_RoomHeader > .mx_RoomHeader_inside_more[aria-expanded="true"] {
  background: var(--lobby-hover);
}
/* Счётчик участников — строкой статуса под именем
   (9 поля + 38 аватар + 10 зазор = 57; 7 + 21 строка имени = 28). */
.mx_RoomView_body > .mx_RoomHeader > div:has(> .mx_FacePile) {
  position: absolute;
  left: 57px;
  top: 28px;
  max-width: calc(100% - 57px - var(--lobby-hb-w) - 23px);
  overflow: hidden;
  display: flex;
  align-items: baseline;
  min-width: 0;
}
.mx_RoomView_body > .mx_RoomHeader > div:has(> .mx_FacePile) > .mx_FacePile {
  flex: none;
}
/* Сколько кнопок в правой капсуле: по числу видимых IconButton. */
.mx_RoomView_body > .mx_RoomHeader:not(:has(> [class*="_icon-button_"] ~ [class*="_icon-button_"])) {
  --lobby-hb-n: 1;
}
.mx_RoomView_body > .mx_RoomHeader:has(> [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"]) {
  --lobby-hb-n: 3;
}
.mx_RoomView_body > .mx_RoomHeader:has(> [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"]) {
  --lobby-hb-n: 4;
}
.mx_RoomView_body > .mx_RoomHeader:has(> [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"]) {
  --lobby-hb-n: 5;
}
.mx_RoomView_body > .mx_RoomHeader:has(> div > .mx_FacePile):not(:has(> [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"])) {
  --lobby-hb-n: 1;
}
.mx_RoomView_body > .mx_RoomHeader:has(> div > .mx_FacePile):has(> [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"]) {
  --lobby-hb-n: 2;
}
.mx_RoomView_body > .mx_RoomHeader:has(> div > .mx_FacePile):has(> [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"] ~ [class*="_icon-button_"]) {
  --lobby-hb-n: 3;
}


/* ==== v2 · ломкие селекторы · Строка ввода */

/* Скрепка (IconButton Compound) — круглая стеклянная кнопка 48 слева от
   капсулы: 8 зазор + 48 + 1 рамка капсулы = 57. Иконка — скрепка макета. */
.mx_MessageComposer_actions > [class*="_icon-button_"] {
  --cpd-icon-button-size: 48px !important;
  position: absolute;
  inset-inline-start: -57px;
  bottom: -1px;
  box-sizing: border-box;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--lobby-ink-2);
  background: var(--lobby-glass);
  -webkit-backdrop-filter: var(--lobby-glass-blur);
  backdrop-filter: var(--lobby-glass-blur);
  box-shadow: var(--lobby-shadow);
}
/* Рамка стекла — только в чате: в панели обсуждения скрепка без подложки. */
.mx_RoomView_body .mx_MessageComposer_actions > [class*="_icon-button_"] {
  border: 1px solid var(--lobby-glass-line);
}
.mx_MessageComposer_actions > [class*="_icon-button_"] > [class*="_indicator-icon_"] {
  width: 22px !important;
  height: 22px !important;
}
.mx_MessageComposer_actions > [class*="_icon-button_"] svg {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--lobby-ink-2);
  background: currentColor;
  -webkit-mask: var(--lobby-ico-clip) center / 22px 22px no-repeat;
  mask: var(--lobby-ico-clip) center / 22px 22px no-repeat;
}
.mx_MessageComposer_actions > [class*="_icon-button_"] svg > * {
  display: none;
}


/* ==== v2 · ломкие селекторы · Правая панель */

/* Поиск по чату в шапке — капсула 36 на вторичной заливке, без рамки
   (.search макета); крестик — круглая 36. */
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header [class*="_search_"] {
  flex: none;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  gap: 8px !important;
  border: none;
  border-radius: 18px;
  background: var(--lobby-fill);
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header [class*="_search_"]:focus-within {
  box-shadow: inset 0 0 0 1px var(--lobby-ink);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header [class*="_search_"] > svg {
  width: 17px;
  height: 17px;
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header [class*="_search_"] input {
  font-size: 14px;
  color: var(--lobby-ink);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header [class*="_search_"] input::placeholder {
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header > [class*="_icon-button_"] {
  --cpd-icon-button-size: 36px !important;
  flex: 0 0 36px;
  border-radius: 50%;
  color: var(--lobby-ink-2);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header > [class*="_icon-button_"]:hover {
  background: var(--lobby-hover);
}
.mx_RightPanel .mx_BaseCard:not(.mx_ThreadView) .mx_BaseCard_header > [class*="_icon-button_"] svg {
  width: 20px;
  height: 20px;
}
/* Метки под именем — нейтральные капсулы (синий и зелёный Compound — нет). */
.mx_RightPanel .mx_RoomSummaryCard_badges [class*="_badge_"] {
  gap: 4px;
  padding: 3px 10px;
  border: none;
  border-radius: 999px;
  background: var(--lobby-fill);
  color: var(--lobby-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.mx_RightPanel .mx_RoomSummaryCard_badges [class*="_badge_"] > svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--lobby-muted);
}
.mx_RightPanel .mx_RoomSummaryCard_badges [class*="_badge_"][data-kind="red"],
.mx_RightPanel .mx_RoomSummaryCard_badges [class*="_badge_"][data-kind="red"] > svg {
  color: var(--lobby-signal);
}


/* ==== v2 · ломкие селекторы · Настройки */

/* Строка с тумблером или переключателем Compound — подпись слева,
   элемент справа, как .opt макета. */
.mx_UserSettingsDialog [class*="_inline-field_"]:not(.mx_ThemeChoicePanel_themeSelector) {
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}
.mx_UserSettingsDialog [class*="_inline-field_"]:not(.mx_ThemeChoicePanel_themeSelector) [class*="_inline-field-control_"] {
  block-size: auto;
  display: flex;
  align-items: center;
}
.mx_UserSettingsDialog [class*="_inline-field_"] [class*="_inline-field-body_"] > label {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--lobby-ink);
}
.mx_UserSettingsDialog [class*="_inline-field_"] [class*="_help-message_"],
.mx_UserSettingsDialog [class*="_field_"] [class*="_help-message_"] {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--lobby-muted);
}
/* Плитка темы: радиокнопка Element невидимо накрывает всю плитку —
   клик и клавиатура как прежде, кружок не рисуем. */
.mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector > [class*="_inline-field-control_"] {
  position: absolute;
  inset: 0;
  block-size: auto;
  z-index: 1;
}
.mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector > [class*="_inline-field-control_"] > [class*="_container_"] {
  inline-size: 100%;
  block-size: 100%;
}
.mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector > [class*="_inline-field-control_"] input {
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mx_UserSettingsDialog .mx_ThemeChoicePanel_themeSelector > [class*="_inline-field-control_"] [class*="_ui_"] {
  display: none;
}
/* «Макет сообщения» — тоже плитки выбора: рамка линии, выбранная —
   сигналом. */
.mx_UserSettingsDialog .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
  border: 2px solid var(--lobby-line-2);
  border-radius: 12px;
}
.mx_UserSettingsDialog .mxLayoutSwitcher_LayoutSelector_LayoutRadio:has(input:checked) {
  border-color: var(--lobby-signal);
}
.mx_UserSettingsDialog .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
  border-color: var(--lobby-line);
}

/* Тумблеры во всех окнах — 44×26 (.sw макета): выключенный — цвет линии,
   включённый — акцент; кружок 20 белый, во включённом в тёмной теме —
   #141414 (цвет текста на акценте). Compound и старый ToggleSwitch. */
.mx_Dialog [class*="_container_"]:has(> input[role="switch"]) {
  inline-size: 44px;
  block-size: 26px;
  flex: none;
}
.mx_Dialog input[role="switch"] + [class*="_ui_"] {
  padding: 3px;
  border: none;
  background: var(--lobby-line-2);
  box-shadow: none;
}
.mx_Dialog input[role="switch"] + [class*="_ui_"]::after {
  width: 20px;
  height: 20px;
  block-size: 20px;
  border: none;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.mx_Dialog input[role="switch"]:checked + [class*="_ui_"],
.mx_Dialog input[role="switch"]:checked:not([disabled]):hover + [class*="_ui_"] {
  background: var(--lobby-accent);
}
.mx_Dialog input[role="switch"]:checked + [class*="_ui_"]::after {
  transform: translateX(18px);
  background: var(--lobby-accent-ink);
}
.mx_Dialog input[role="switch"][disabled] + [class*="_ui_"] {
  opacity: 0.45;
}
.mx_Dialog .mx_ToggleSwitch {
  box-sizing: border-box;
  width: 44px;
  height: 26px;
  padding: 3px;
  border: none;
  border-radius: 13px;
  background-color: var(--lobby-line-2);
}
.mx_Dialog .mx_ToggleSwitch.mx_ToggleSwitch_enabled {
  border: none;
}
.mx_Dialog .mx_ToggleSwitch.mx_ToggleSwitch_on,
.mx_Dialog .mx_ToggleSwitch.mx_ToggleSwitch_enabled.mx_ToggleSwitch_on {
  background-color: var(--lobby-accent);
}
.mx_Dialog .mx_ToggleSwitch .mx_ToggleSwitch_ball,
.mx_Dialog .mx_ToggleSwitch.mx_ToggleSwitch_enabled > .mx_ToggleSwitch_ball {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.mx_Dialog .mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
  left: 18px;
  background-color: var(--lobby-accent-ink);
}
.mx_Dialog .mx_ToggleSwitch:not(.mx_ToggleSwitch_enabled) {
  opacity: 0.45;
}


/* ==== v2 · ломкие селекторы · Меню, диалоги, тосты */

/* Стеклянная подложка вокруг окон Element (отступ 12 с синеватым фоном) —
   у Telegram её нет. */
.mx_Dialog_border[class*="_glass_"] {
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mx_Dialog:not(:has(.mx_UserSettingsDialog)) input[type="checkbox"]:not([role="switch"]) + [class*="_ui_"] {
  border-radius: 6px;
}
/* Кнопки Compound в окнах и тостах — капсулы: вторичная — вторичная
   заливка без рамки, опасная — сигнал. */
:is(.mx_Dialog, .mx_Toast_toast) [class*="_button_"][data-kind="secondary"] {
  border-color: transparent;
  background: var(--lobby-fill);
  color: var(--lobby-ink);
}
:is(.mx_Dialog, .mx_Toast_toast) [class*="_button_"][data-kind="secondary"]:hover {
  background: var(--lobby-hover);
}
:is(.mx_Dialog, .mx_Toast_toast) [class*="_button_"][data-kind="primary"][class*="_destructive_"] {
  background: var(--lobby-signal);
  color: var(--lobby-signal-ink);
}
:is(.mx_Dialog, .mx_Toast_toast) [class*="_button_"][data-kind="tertiary"] {
  color: var(--lobby-ink);
}
/* Меню Compound (параметры чата, «ещё» в шапке, меню чата в списке) —
   пункты 44, значок 18. У Compound сетка в две строки («icon label .» /
   «empty1 label empty2»): значок и переключатель вставали в верхнюю
   половину, подпись — по центру обеих. Одна строка: значок, подпись,
   переключатель / шеврон — на одной оси, между значком и подписью 14. */
[role="menu"] [class*="_item_"][role^="menuitem"] {
  min-height: 44px;
  padding-block: 0;
}
[role="menu"] [class*="_item_"][role^="menuitem"]:not([class*="_no-icon_"], [class*="_no-label_"]) {
  grid-template: "icon label nav" auto / auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
}
[role="menu"] [class*="_item_"][role^="menuitem"]:not([class*="_no-icon_"], [class*="_no-label_"]) > :is(svg:first-child, [class*="_icon_"]) {
  grid-area: icon;
  margin: 0;
  align-self: center;
}
[role="menu"] [class*="_item_"][role^="menuitem"] > [class*="_label_"] {
  margin-inline-end: 0;
  align-self: center;
  justify-self: start;
  line-height: 20px;
}
[role="menu"] [class*="_item_"][role^="menuitem"]:not([class*="_no-icon_"], [class*="_no-label_"]) > :not(:first-child):not([class*="_label_"]) {
  grid-area: nav;
  align-self: center;
  justify-self: end;
  margin: 0;
}
[role="menu"] [class*="_item_"][role^="menuitem"] > svg:first-child {
  width: 18px;
  height: 18px;
}
[role="menu"] [class*="_item_"][data-kind="critical"],
[role="menu"] [class*="_item_"][data-kind="critical"] > * {
  color: var(--lobby-signal);
}
/* Превью в «Отправить файл» — картинка целиком, ширина строго по окну. */
.mx_UploadConfirmDialog .mx_UploadConfirmDialog_previewInner [class*="_tile_"] {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.mx_UploadConfirmDialog [class*="_tallBannerImage_"],
.mx_UploadConfirmDialog [class*="_image_"]:has(> img) {
  height: auto !important;
  max-height: 60vh;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lobby-fill);
}
.mx_UploadConfirmDialog [class*="_image_"] > img {
  width: 100%;
  height: auto !important;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}
.mx_UploadConfirmDialog [class*="_tile_"]:has([class*="_image_"] img) [class*="_below_"] {
  display: none;
}
/* Списки людей в «Начать чат» / «Пригласить» — как строки списка чатов. */
.mx_InviteDialog_section [class*="_richList_"] > [class*="_title_"] {
  color: var(--lobby-muted);
  font-size: 13px;
  font-weight: 600;
}
.mx_InviteDialog_section [class*="_richItem_"] {
  border-radius: 12px;
}
.mx_InviteDialog_section [class*="_richItem_"]:hover,
.mx_InviteDialog_section [class*="_richItem_"]:focus-visible {
  background: var(--lobby-hover);
}
.mx_InviteDialog_section [class*="_richItem_"][aria-selected="true"] {
  background: var(--lobby-fill);
}
.mx_InviteDialog_section [class*="_richItem_"] [class*="_title_"] {
  font-size: 15px;
  font-weight: 500;
  color: var(--lobby-ink);
}
.mx_InviteDialog_section [class*="_richItem_"] [class*="_description_"] {
  color: var(--lobby-muted);
}

/* ==== v2 · Вход (экраны Element без сессии)
   Сам вход — страница MAS (/auth/login, mas/templates + inside-auth.css), и
   Element уводит туда сразу (sso_redirect_options в config.json). Здесь —
   то, что Element рисует сам: «сессия истекла», ошибка сервера, ожидание.
   Вид тот же, что у MAS: фон окна с узором, карточка-диалог, знак Lobby
   сверху, без колонки с языком и без подвала Element. */
.mx_AuthPage {
  background: var(--lobby-wall) var(--lobby-wall-img) repeat !important; /* у Element — inline style с картинкой */
  background-size: 420px auto !important;
  justify-content: center;
}
.mx_AuthPage_modal,
.mx_AuthPage_modal.mx_AuthPage_modal_withBlur {
  margin: auto;
  border-radius: var(--lobby-radius-dialog);
  background: var(--lobby-dialog-bg);
  box-shadow: var(--lobby-dialog-shadow);
}
.mx_AuthPage_modalBlur {
  display: none;
}
.mx_AuthPage_modalContent {
  flex-direction: column;
  align-items: stretch;
  background: transparent !important;
}
.mx_AuthHeader {
  width: auto;
  padding: 36px 32px 0;
  align-items: center;
}
.mx_AuthHeaderLogo {
  flex: none;
  margin: 0;
  padding: 0;
}
.mx_AuthHeaderLogo img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.22);
}
.mx_AuthBody_language,
.mx_AuthFooter,
.mx_ServerPicker {
  display: none !important;
}
.mx_AuthBody {
  width: 400px;
  max-width: 100%;
  padding: 20px 32px 32px;
  border-radius: 0 0 var(--lobby-radius-dialog) var(--lobby-radius-dialog);
  background: transparent;
  color: var(--lobby-muted);
  font-family: var(--lobby-font, inherit);
  text-align: center;
}
.mx_AuthBody h1 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lobby-ink);
}
.mx_AuthBody .mx_Login_fullWidthButton,
.mx_AuthBody .mx_AccessibleButton_kind_primary {
  min-height: 48px;
  border-radius: var(--lobby-radius-input);
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 519px) {
  .mx_AuthPage {
    background: var(--lobby-panel) !important;
    justify-content: flex-start;
  }
  .mx_AuthPage_modal,
  .mx_AuthPage_modal.mx_AuthPage_modal_withBlur {
    margin: 0;
    width: 100%;
    min-height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }
  .mx_AuthHeader,
  .mx_AuthHeaderLogo {
    display: flex !important; /* у Element на телефоне шапка скрыта */
  }
  .mx_AuthHeader {
    padding-top: calc(48px + env(safe-area-inset-top));
  }
  .mx_AuthBody {
    width: 100%;
    padding: 20px 20px 24px;
  }
}