/* ═══════════════════════════════════════════════════════════════════════════
   Мессенджер-режим (html[data-layout="telegram"]) — дизайн «Rupor Messenger».
   Палитра, пузыри, шапка, поле ввода и списки — по макету (tokens/rupor-tokens.css).
   На телефонах (≤767px) дополнительно нижняя навигация (MobileTabBar.razor).
   Discord-вид (classic) не затрагивается: все селекторы под data-layout="telegram".
   Подключается ПОСЛЕ themes.css и layout-telegram.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Токены дизайна: тёмная (по умолчанию) и светлая (темы light / mist) ── */
:root[data-layout="telegram"] {
    --rm-bg: #0E1117;      --rm-surface: #161A22;  --rm-surface2: #1D222C;
    --rm-elev: #242A36;    --rm-divider: #252B37;
    --rm-text: #EEF1F6;    --rm-text2: #8C95A8;    --rm-text3: #5E6678;
    --rm-accent: #5B7CFF;  --rm-accent2: #8B5CF6;
    --rm-inbubble: #1E2430; --rm-online: #3DDC97;  --rm-danger: #FF5470;
    --rm-warn: #FFB547;    --rm-muted: #3A4150;    --rm-chatbg: #0B0E14;
    --rm-field: #1D222C;
    --rm-hover: rgba(255, 255, 255, .05);
    --rm-accent-soft: rgba(91, 124, 255, .15);
    --rm-glass: rgba(14, 17, 23, .94);
    --rm-grad: linear-gradient(135deg, #5B7CFF, #8B5CF6);
    --rm-shadow-float: 0 8px 24px rgba(0, 0, 0, .4);
}
:root[data-layout="telegram"][data-theme="light"],
:root[data-layout="telegram"][data-theme="mist"] {
    --rm-bg: #FFFFFF;      --rm-surface: #F4F6FA;  --rm-surface2: #ECEFF5;
    --rm-elev: #FFFFFF;    --rm-divider: #E6E9F0;
    --rm-text: #10131A;    --rm-text2: #6B7385;    --rm-text3: #A0A7B5;
    --rm-accent: #4A6CF7;  --rm-accent2: #8B5CF6;
    --rm-inbubble: #FFFFFF; --rm-online: #22C27A;  --rm-danger: #F0445F;
    --rm-warn: #F5A524;    --rm-muted: #C3C8D2;    --rm-chatbg: #E8EDF6;
    --rm-field: #F0F2F7;
    --rm-hover: rgba(16, 19, 26, .05);
    --rm-accent-soft: rgba(74, 108, 247, .12);
    --rm-glass: rgba(255, 255, 255, .94);
    --rm-shadow-float: 0 8px 24px rgba(16, 19, 26, .12);
}

/* ── Семантические переменные приложения (themes.css) → палитра дизайна ── */
:root[data-layout="telegram"],
:root[data-layout="telegram"][data-theme] {
    --th-bg-app: var(--rm-bg);
    --th-bg-rail: var(--rm-bg);
    --th-bg-panel: var(--rm-bg);
    --th-bg-panel-2: var(--rm-surface);
    --th-bg-input: var(--rm-field);
    --th-bg-input-2: var(--rm-surface2);
    --th-bg-modal: var(--rm-surface);
    --th-bg-chat-header: var(--rm-bg);
    --th-bg-hover: var(--rm-hover);
    --th-bg-active: var(--rm-accent-soft);
    --th-text: var(--rm-text);
    --th-text-strong: var(--rm-text);
    --th-text-muted: var(--rm-text);
    --th-text-dim: var(--rm-text2);
    --th-text-faded: var(--rm-text2);
    --th-text-time: var(--rm-text3);
    --th-border: var(--rm-divider);
    --th-border-soft: var(--rm-divider);
    --th-border-line: var(--rm-divider);
    --th-accent: var(--rm-accent);
    --th-accent-hov: var(--rm-accent2);
}

/* ── Пузыри сообщений ── */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] {
    --bubble-out-bg: #6C6EF8;           /* сплошной цвет для мест, где градиент недопустим */
    --bubble-in-bg: var(--rm-inbubble);
    --bubble-radius: 18px;
    --bubble-pad-v: 7px;
    --bubble-pad-h: 11px;
    --bubble-out-text: #FFFFFF;
    --bubble-in-text: var(--rm-text);
    --bubble-meta-color: var(--rm-text2);
}
html[data-layout="telegram"] .pm-msgs { background-color: var(--rm-chatbg); }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    font-size: 15.5px;
    line-height: 21px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .pm-msg-body {
    background: var(--rm-grad);
}
/* Хвостик — скруглением угла (r6), как в макете, без треугольников. */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body::before,
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body::after { display: none !important; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--other:not(.pm-msg-grouped) .pm-msg-body {
    border-radius: 18px 18px 18px 6px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine:not(.pm-msg-grouped) .pm-msg-body {
    border-radius: 18px 18px 6px 18px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .pm-msg-time { color: rgba(255, 255, 255, .7); }
/* В своих пузырях имя автора не нужно (как в макете) — зелёное на градиенте нечитаемо. */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .pm-msg-author { display: none; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .pm-msg-body a { color: #fff; text-decoration: underline; }

/* Разделитель дат — «чип» по центру */
html[data-layout="telegram"] .pm-date-sep-line { display: none; }
html[data-layout="telegram"] .pm-date-sep { justify-content: center; }
html[data-layout="telegram"] .pm-date-sep-label {
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}
html[data-layout="telegram"][data-theme="light"] .pm-date-sep-label,
html[data-layout="telegram"][data-theme="mist"] .pm-date-sep-label { background: rgba(0, 0, 0, .18); }

/* ── Шапка чата: «стекло» + тонкая линия ── */
html[data-layout="telegram"] .pm-chat-header {
    background: var(--rm-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rm-divider);
    box-shadow: none;
}
html[data-layout="telegram"] .pm-chat-header-name { font-size: 16px; font-weight: 600; color: var(--rm-text); }
html[data-layout="telegram"] .pm-chat-last-seen,
html[data-layout="telegram"] .pm-chat-typing { font-size: 13px; color: var(--rm-accent); }

/* ── Поле ввода (композер) ── */
html[data-layout="telegram"] .pm-input-wrap {
    background: var(--rm-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--rm-divider);
}
html[data-layout="telegram"] .pm-input-box {
    background: var(--rm-field);
    border: 1px solid var(--rm-divider);
    border-radius: 21px;
}
html[data-layout="telegram"] .pm-input { font-size: 16px; color: var(--rm-text); background: transparent; }
html[data-layout="telegram"] .pm-input::placeholder { color: var(--rm-text2); }
html[data-layout="telegram"] .pm-send-btn {
    background: var(--rm-grad);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(91, 124, 255, .4);
}

/* ── Кнопки настроек: основная — градиент макета ── */
html[data-layout="telegram"] .smod-btn--primary {
    background: var(--rm-grad);
    border: none;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(91, 124, 255, .3);
}
html[data-layout="telegram"] .smod-btn--primary:hover { filter: brightness(1.08); }

/* ── Контекстные меню / поповеры ── */
html[data-layout="telegram"] .pm-msg-ctx {
    background: var(--rm-elev);
    border-color: var(--rm-divider);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
html[data-layout="telegram"] .pm-msg-ctx-item { color: var(--rm-text); border-radius: 8px; font-size: 14px; }
html[data-layout="telegram"] .pm-msg-ctx-item:hover { background: var(--rm-accent-soft); color: var(--rm-text); }
html[data-layout="telegram"] .pm-msg-ctx-item--danger,
html[data-layout="telegram"] .pm-msg-ctx-item--danger:hover { color: var(--rm-danger); }
html[data-layout="telegram"] .pm-msg-ctx-sep { background: var(--rm-divider); }

/* ── Список чатов ── */
html[data-layout="telegram"] .pm-sidebar { background: var(--rm-bg); }
/* Подложка свайп-строк (layout-telegram.css) бралась из несуществующей --th-bg-secondary
   и давала серую полосу под списком — делаем её цветом фона списка. */
html[data-layout="telegram"] .pm-swipe-content { background: var(--rm-bg); }
html[data-layout="telegram"] .pm-sidebar-title { text-transform: none; letter-spacing: 0; }

/* Свайп-действия по макету «Свайп по чату»: полноразмерные цветные блоки 76px,
   иконка над подписью, без зазоров и скруглений. */
html[data-layout="telegram"] .pm-swipe-actions { padding: 0; gap: 0; align-items: stretch; }
html[data-layout="telegram"] .pm-swipe-act {
    width: 76px;
    flex: 0 0 76px;
    height: 100%;
    border-radius: 0;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    color: #fff;
}
html[data-layout="telegram"] .pm-swipe-act--read    { background: var(--rm-accent); }
html[data-layout="telegram"] .pm-swipe-act--pin     { background: #22C55E; }
html[data-layout="telegram"] .pm-swipe-act--mute    { background: var(--rm-warn); }
html[data-layout="telegram"] .pm-swipe-act--archive { background: #64748B; }
html[data-layout="telegram"] .pm-swipe-act--delete  { background: var(--rm-danger); }
html[data-layout="telegram"] .pm-swipe-act:active   { filter: brightness(.9); }
html[data-layout="telegram"] .pm-swipe-row--commit.pm-swipe-row--right .pm-swipe-act--read,
html[data-layout="telegram"] .pm-swipe-row--commit.pm-swipe-row--left  .pm-swipe-act--archive { transform: none; filter: brightness(1.15); }
html[data-layout="telegram"] .pm-sidebar-header { border-bottom: none; box-shadow: none; }
html[data-layout="telegram"] .pm-friend-item { border-radius: 12px; }
html[data-layout="telegram"] .pm-friend-item:hover { background: var(--rm-hover); }
html[data-layout="telegram"] .pm-friend-active,
html[data-layout="telegram"] .pm-friend-item.pm-friend-active { background: var(--rm-accent-soft); }
html[data-layout="telegram"] .pm-friend-name { color: var(--rm-text); font-weight: 600; }
html[data-layout="telegram"] .pm-friend-status,
html[data-layout="telegram"] .pm-tg-preview { color: var(--rm-text2); }
html[data-layout="telegram"] .pm-tg-time { color: var(--rm-text2); opacity: 1; }
html[data-layout="telegram"] .pm-tg-preview-you { color: var(--rm-text); }
html[data-layout="telegram"] .pm-unread-badge {
    background: var(--rm-accent);
    color: #fff;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
    text-align: center;
}
/* Аватары-инициалы — градиенты из макета вместо одного сиреневого цвета, по кругу. */
html[data-layout="telegram"] .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)) {
    background: linear-gradient(135deg, #5B7CFF, #8B5CF6) !important;
    color: #fff;
}
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n+2) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n+2) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #F472B6, #A855F7) !important; }
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n+3) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n+3) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #FFB547, #FF7A45) !important; }
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n+4) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n+4) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #38BDF8, #5B7CFF) !important; }
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n+5) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n+5) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #3DDC97, #14B8A6) !important; }
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n+6) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n+6) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #FF8A65, #FF5470) !important; }
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n+7) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n+7) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #A3E635, #22C55E) !important; }
html[data-layout="telegram"] .pm-swipe-row:nth-child(8n) .pm-friend-item .pm-avatar:not(.pm-avatar-gold):not(:has(img)),
html[data-layout="telegram"] .pm-friend-item:nth-child(8n) .pm-avatar:not(.pm-avatar-gold):not(:has(img)) { background: linear-gradient(135deg, #94A3B8, #64748B) !important; }
/* Точка присутствия: цвет — по статусу (раньше здесь стоял общий зелёный и
   «онлайн» горел у всех). Не в сети — точку не показываем, как в макете. */
html[data-layout="telegram"] .pm-online-dot { border: 2.5px solid var(--rm-bg); }
html[data-layout="telegram"] .pm-online-dot--on,
html[data-layout="telegram"] .pm-online-dot--online { background: var(--rm-online); }
html[data-layout="telegram"] .pm-online-dot--away { background: var(--rm-warn); }
html[data-layout="telegram"] .pm-online-dot--dnd { background: var(--rm-danger); }
html[data-layout="telegram"] .pm-online-dot--off { display: none; }

/* «В сети с телефона» — кружок с телефоном слева снизу у аватара (точка статуса — справа). */
.pm-device-badge {
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2b2d31;
    color: #23a55a;
    border: 2px solid #2b2d31;
    box-sizing: border-box;
}
html[data-layout="telegram"] .pm-device-badge {
    background: var(--rm-surface2);
    color: var(--rm-online);
    border-color: var(--rm-bg);
}
html[data-layout="telegram"] .pm-friends-section-label {
    color: var(--rm-text2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
html[data-layout="telegram"] .pm-local-search-bar,
html[data-layout="telegram"] .pm-local-search-input {
    background: var(--rm-field);
    border-radius: 12px;
    border-color: transparent;
    color: var(--rm-text);
}
html[data-layout="telegram"] .pm-local-search-input::placeholder { color: var(--rm-text2); }

/* Поиск — макет: поле 40px, r12, иконка 20 слева */
html[data-layout="telegram"] .pm-local-search-bar {
    margin: 4px 16px 10px;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid transparent;
    box-sizing: border-box;
}
html[data-layout="telegram"] .pm-local-search-bar:focus-within { border-color: var(--rm-accent); }
html[data-layout="telegram"] .pm-local-search-icon { width: 18px; height: 18px; color: var(--rm-text2); flex-shrink: 0; }
html[data-layout="telegram"] .pm-local-search-input { background: transparent; border: none; outline: none; height: 100%; padding: 0; font-size: 15px; flex: 1; min-width: 0; }

/* Папки-чипсы: h32, r16, активная — светлая «пилюля» */
.rm-chips {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.rm-chips::-webkit-scrollbar { display: none; }
.rm-chip {
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    border: none;
    background: var(--rm-surface2);
    color: var(--rm-text2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rm-chip:hover { color: var(--rm-text); }
.rm-chip--active, .rm-chip--active:hover { background: var(--rm-text); color: var(--rm-bg); }
.rm-chip-count {
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 9px; background: var(--rm-accent); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ── Навигация (MainLayout .rm-tabbar): телефон — панель снизу, ПК — колонка слева ── */
.rm-tabbar { display: none; }

/* Вкладки — общие для телефона и ПК */
.rm-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: none;
    background: none;
    color: var(--rm-text2);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rm-tab-ico {
    width: 56px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.rm-tab-label { font-size: 11px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.rm-tab:hover { color: var(--rm-text); }
.rm-tab:hover .rm-tab-ico { background: var(--rm-hover); }
.rm-tab--active,
.rm-tab--active:hover { color: var(--rm-accent); }
.rm-tab--active .rm-tab-ico,
.rm-tab--active:hover .rm-tab-ico { background: var(--rm-accent-soft); }
.rm-tab--active .rm-tab-label { font-weight: 600; }

@media (max-width: 767px) {
    .rm-tab { flex: 1 1 0; min-width: 0; justify-content: flex-start; padding: 7px 0 0; }
    html[data-layout="telegram"] .rm-tabbar.rm-tabbar--hidden-mobile { display: none; }
    html[data-layout="telegram"] .rm-tabbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        z-index: 1500;
        height: 64px;
        display: flex;
        align-items: stretch;
        padding: 0 4px;
        border-radius: 32px;
        background: color-mix(in srgb, var(--rm-surface2) 95%, transparent);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 1px solid var(--rm-divider);
        box-shadow: var(--rm-shadow-float);
        box-sizing: border-box;
    }
    /* Клавиатура открыта — панель не нужна (как в Telegram) */
    html[data-layout="telegram"] body.kb-open .rm-tabbar { display: none; }


    /* Контент не уходит под панель: запас снизу у прокручиваемых списков. */
    html[data-layout="telegram"]:has(.rm-tabbar:not(.rm-tabbar--hidden-mobile)) .pm-friends-list,
    html[data-layout="telegram"]:has(.rm-tabbar:not(.rm-tabbar--hidden-mobile)) .srv-channels,
    html[data-layout="telegram"]:has(.rm-tabbar:not(.rm-tabbar--hidden-mobile)) .mm-root {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
    /* Плашка активного звонка — над панелью, а не под ней. */
    html[data-layout="telegram"]:has(.rm-tabbar:not(.rm-tabbar--hidden-mobile)) .cw-bar {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Шапка списка: крупный заголовок, как в макете (Large Title 28). */
    html[data-layout="telegram"] .pm-sidebar-header { min-height: 52px; padding: 6px 12px; }
    html[data-layout="telegram"] .pm-sidebar-title { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--rm-text); }

    /* Строка чата: высота 76, аватар 56, имя 16, превью 15, время 13 */
    html[data-layout="telegram"] .pm-friend-item {
        min-height: 76px;
        padding: 10px 12px;
        gap: 12px;
        border-radius: 0;
        position: relative;
    }
    html[data-layout="telegram"] .pm-friend-item::after {
        content: '';
        position: absolute;
        left: 80px;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--rm-divider);
    }
    html[data-layout="telegram"] .pm-friend-item .pm-avatar { width: 56px; height: 56px; font-size: 21px; }
    html[data-layout="telegram"] .pm-friend-name { font-size: 16px; }
    html[data-layout="telegram"] .pm-friend-status,
    html[data-layout="telegram"] .pm-tg-preview { font-size: 15px; }
    html[data-layout="telegram"] .pm-tg-time { font-size: 13px; }
    html[data-layout="telegram"] .pm-friend-item .pm-online-dot { width: 15px; height: 15px; }
}

/* ── Звонок на весь экран (CallWidget .cw-bar--full) — макет «Аудиозвонок» ── */
.cw-full-top { display: none; }
html .cw-bar.cw-bar--full {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important; min-width: 0 !important;
    transform: none !important;
    z-index: 2100;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
    background: linear-gradient(180deg, #1E3A8A 0%, #0B0E14 100%) !important;
    color: #fff;
    box-shadow: none !important;
    overflow-y: auto;
}
.cw-bar--full .cw-grip { display: none; }
.cw-bar--full .cw-full-top {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 44px; flex-shrink: 0;
}
.cw-full-min {
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cw-full-sub { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .67); }
.cw-full-spacer { width: 40px; }
.cw-bar--full .cw-bar-row {
    flex: 1; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    gap: 24px;
}
.cw-bar--full .cw-bar-info {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-top: 9vh; cursor: default;
}
.cw-bar--full .cw-bar-avatar {
    width: 140px !important; height: 140px !important; font-size: 52px !important;
    border-radius: 50%; background: linear-gradient(135deg, #5B7CFF, #8B5CF6) !important; color: #fff;
    box-shadow: 0 0 0 16px rgba(255, 255, 255, .08), 0 0 0 32px rgba(255, 255, 255, .04);
}
.cw-bar--full .cw-bar-texts { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.cw-bar--full .cw-bar-name { font-size: 28px !important; font-weight: 700; color: #fff; text-align: center; max-width: 90vw; }
.cw-bar--full .cw-bar-time { font-size: 17px !important; font-weight: 500; color: rgba(255, 255, 255, .8); }
.cw-bar--full .cw-bar-btns {
    display: grid !important;
    grid-template-columns: repeat(3, 64px);
    justify-content: center;
    column-gap: 36px; row-gap: 34px;
    margin-bottom: 4px;
}
.cw-bar--full .cw-btn {
    width: 64px !important; height: 64px !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, .12) !important; color: #fff !important;
    position: relative; overflow: visible;
}
.cw-bar--full .cw-btn svg { width: 28px !important; height: 28px !important; }
.cw-bar--full .cw-btn--active { background: #fff !important; color: #0E1117 !important; }
.cw-bar--full .cw-btn[data-lbl]::after {
    content: attr(data-lbl);
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap;
}
.cw-bar--full .cw-btn--end {
    grid-column: 1 / -1; justify-self: center;
    width: 76px !important; height: 76px !important;
    background: #FF5470 !important; color: #fff !important;
    box-shadow: 0 6px 24px rgba(255, 84, 112, .4);
}
.cw-bar--full .cw-btn--end svg { width: 32px !important; height: 32px !important; }
.cw-bar--full .cw-bar-extra {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    background: rgba(255, 255, 255, .06); border-radius: 20px; padding: 10px; margin-top: 8px;
}
.cw-bar--full .cw-bar-extra .cw-btn { width: 48px !important; height: 48px !important; }
.cw-bar--full .cw-bar-extra .cw-btn[data-lbl]::after { display: none; }

/* ── Входящий / исходящий вызов на телефоне в мессенджер-виде — на весь экран ── */
@media (max-width: 767px) {
    html[data-layout="telegram"] .cw-overlay { background: none; backdrop-filter: none; }
    html[data-layout="telegram"] .cw-ov-card {
        position: fixed; inset: 0;
        width: auto; max-width: none; border-radius: 0; border: none;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        padding: calc(env(safe-area-inset-top, 0px) + 18vh) 24px calc(env(safe-area-inset-bottom, 0px) + 40px);
        background: linear-gradient(180deg, #3B2A6B 0%, #0B0E14 100%);
        color: #fff;
        box-shadow: none;
    }
    html[data-layout="telegram"] .cw-ov-avatar {
        width: 150px; height: 150px; font-size: 56px; border-radius: 50%;
        background: linear-gradient(135deg, #5B7CFF, #8B5CF6); color: #fff;
        box-shadow: 0 0 0 20px rgba(255, 255, 255, .14), 0 0 0 35px rgba(255, 255, 255, .08);
    }
    html[data-layout="telegram"] .cw-ov-name { margin-top: 56px; font-size: 30px; font-weight: 700; color: #fff; }
    html[data-layout="telegram"] .cw-ov-hint { margin-top: 8px; font-size: 16px; color: rgba(255, 255, 255, .67); }
    html[data-layout="telegram"] .cw-ov-actions { margin-top: auto; gap: 96px; }
    html[data-layout="telegram"] .cw-ov-btn { width: 76px; height: 76px; }
    html[data-layout="telegram"] .cw-ov-btn svg { width: 32px; height: 32px; }
    html[data-layout="telegram"] .cw-ov-decline { background: #FF5470; box-shadow: 0 6px 24px rgba(255, 84, 112, .4); }
    html[data-layout="telegram"] .cw-ov-accept  { background: #22C55E; box-shadow: 0 6px 24px rgba(34, 197, 94, .4); }
}

/* ═══ ПК (широкое окно): тот же мессенджер-вид, что на телефоне ═══
   Навигация — вертикальной колонкой слева (как сжатая нижняя панель), список чатов
   и строки — по макету мобильного, гамбургер не нужен (его заменяет вкладка «Серверы»). */
@media (min-width: 768px) {
    html[data-layout="telegram"] .rm-tabbar {
        order: -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 76px;
        width: 76px;
        gap: 6px;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 0 14px;
        background: var(--rm-bg);
        border-right: 1px solid var(--rm-divider);
        box-sizing: border-box;
        overflow-y: auto;
        z-index: 5;
    }
    html[data-layout="telegram"] .rm-tab { width: 100%; padding: 6px 0; }
    /* «Профиль» — внизу колонки, как аватар в рейле */
    html[data-layout="telegram"] .rm-tab:last-child { margin-top: auto; }
    html[data-layout="telegram"] .pm-tg-burger { display: none !important; }

    html[data-layout="telegram"] .pm-sidebar { border-right: 1px solid var(--rm-divider); }
    html[data-layout="telegram"] .pm-sidebar-header { min-height: 56px; padding: 8px 14px; }
    html[data-layout="telegram"] .pm-sidebar-title { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--rm-text); }

    /* Строка чата: высота 68, аватар 48 — те же пропорции, что в макете, чуть плотнее */
    html[data-layout="telegram"] .pm-friend-item {
        min-height: 68px;
        padding: 10px 12px;
        gap: 12px;
        margin: 0 6px;
        border-radius: 12px;
    }
    html[data-layout="telegram"] .pm-friend-item .pm-avatar { width: 48px; height: 48px; font-size: 18px; }
    html[data-layout="telegram"] .pm-friend-name { font-size: 15.5px; }
    html[data-layout="telegram"] .pm-friend-status,
    html[data-layout="telegram"] .pm-tg-preview { font-size: 14px; }
    html[data-layout="telegram"] .pm-tg-time { font-size: 12px; }
    html[data-layout="telegram"] .pm-friend-item .pm-online-dot { width: 13px; height: 13px; }

    /* Шапка и поле ввода — тех же размеров, что в макете */
    html[data-layout="telegram"] .pm-chat-header { min-height: 56px; }
    html[data-layout="telegram"] .pm-input-box { min-height: 42px; }
}

/* ═══ Шторка вложений (MobileAttachSheet) — макет «Медиа · вложения» ═══ */
.mas-backdrop { background: rgba(0, 0, 0, .55) !important; }
.mas-sheet {
    background: var(--rm-surface, #161A22) !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .5) !important;
}
.mas-handle { width: 40px !important; height: 5px !important; border-radius: 3px !important; background: var(--rm-text3, #5E6678) !important; margin: 0 auto 10px !important; }
.mas-title { font-size: 17px; font-weight: 600; color: var(--rm-text, #EEF1F6); padding: 2px 8px 14px; }
.mas-tabs { display: flex !important; justify-content: space-around; gap: 4px; flex-wrap: wrap; }
.mas-tab {
    background: none !important; border: none !important; padding: 4px 0 !important;
    display: flex !important; flex-direction: column; align-items: center; gap: 6px;
    min-width: 64px; cursor: pointer; color: var(--rm-text2, #8C95A8);
    -webkit-tap-highlight-color: transparent;
}
.mas-tab-icon {
    width: 52px !important; height: 52px !important; border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    color: #fff !important; transition: transform .12s ease;
}
.mas-tab:active .mas-tab-icon { transform: scale(.94); }
.mas-tab-label { font-size: 12px !important; font-weight: 500 !important; color: var(--rm-text2, #8C95A8); }
.mas-hint { font-size: 12px; line-height: 1.4; color: var(--rm-text3, #5E6678); text-align: center; padding: 14px 16px 0; }

/* ═══ Карточка геопозиции в ленте ═══ */
.pm-msg-geo {
    display: flex; align-items: stretch; gap: 0;
    width: min(280px, 100%); padding: 0; overflow: hidden;
    border: none; border-radius: 15px; cursor: pointer; text-align: left;
    background: rgba(0, 0, 0, .18); color: inherit; font: inherit;
}
.pm-msg-geo-map {
    flex: 0 0 84px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #3DDC97, #14B8A6); color: #fff;
}
.pm-msg-geo-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.pm-msg-geo-title { font-weight: 600; font-size: 15px; }
.pm-msg-geo-coords { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.pm-msg-geo-open { font-size: 13px; font-weight: 600; color: var(--rm-accent, #5B7CFF); margin-top: 4px; }
.pm-msg--mine .pm-msg-geo-open { color: #fff; text-decoration: underline; }
.pm-geo-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 3000;
    max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 14px;
    background: var(--rm-elev, #242A36); color: var(--rm-text, #EEF1F6);
    font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); text-align: center;
}

/* ═══ Список чатов: правки по макету после проверки на эмуляторе ═══ */
/* Гамбургер не нужен — «Серверы» есть в навигации (снизу на телефоне, слева на ПК). */
html[data-layout="telegram"] .pm-tg-burger { display: none !important; }
/* Список сплошной, без заголовков разделов (фильтруют папки-чипсы).
   Архив и запросы в друзья остаются. */
html[data-layout="telegram"] .pm-friends-section-label:not(.pm-archive-toggle) { display: none !important; }
/* Бейдж непрочитанных — под временем справа, время при непрочитанных — акцентное. */
html[data-layout="telegram"] .pm-friend-item { position: relative; }
html[data-layout="telegram"] .pm-friend-item .pm-unread-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    margin: 0;
}
html[data-layout="telegram"] .pm-friend-item:has(.pm-unread-badge) .pm-tg-preview { padding-right: 34px; }
html[data-layout="telegram"] .pm-friend-item:has(.pm-unread-badge) .pm-tg-time { color: var(--rm-accent); }
html[data-layout="telegram"] .pm-friend-info { min-width: 0; flex: 1; }

/* ═══ Переписка по макету «Личный чат» ═══ */
/* Узор ленты: контурные иконки, плитка 130px, едва заметно (тёмная / светлая). */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msgs {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22130%22%20height%3D%22130%22%20viewBox%3D%220%200%20130%20130%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.035%22%3E%3Cpath%20transform%3D%22translate%288%208%29%22%20d%3D%22M4%2018%205.5%2013.5A7%207%200%201%201%209%2017Z%22/%3E%3Cpath%20transform%3D%22translate%2872%2014%29%22%20d%3D%22M12%203l2.6%205.6%206.1.7-4.5%204.2%201.2%206L12%2016.6%206.6%2019.5l1.2-6L3.3%209.3l6.1-.7Z%22/%3E%3Cpath%20transform%3D%22translate%2836%2064%29%22%20d%3D%22M12%2020s-7-4.4-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.6-7%2010-7%2010Z%22/%3E%3Cpath%20transform%3D%22translate%28100%2070%29%22%20d%3D%22M6%2016V11a6%206%200%200%201%2012%200v5l1.5%202h-15ZM10%2020h4%22/%3E%3Cpath%20transform%3D%22translate%288%2096%29%22%20d%3D%22M12%203a3%203%200%200%201%203%203v5a3%203%200%200%201-6%200V6a3%203%200%200%201%203-3ZM6%2011a6%206%200%200%200%2012%200M12%2017v3%22/%3E%3Cpath%20transform%3D%22translate%2870%2096%29%22%20d%3D%22M9%2018V6l10-2v12M9%2018a2%202%200%201%201-4%200%202%202%200%200%201%204%200ZM19%2016a2%202%200%201%201-4%200%202%202%200%200%201%204%200Z%22/%3E%3C/svg%3E");
    background-size: 130px 130px;
}
html[data-layout="telegram"][data-theme="light"] .pm-chat[data-bubble="telegram"] .pm-msgs,
html[data-layout="telegram"][data-theme="mist"] .pm-chat[data-bubble="telegram"] .pm-msgs {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22130%22%20height%3D%22130%22%20viewBox%3D%220%200%20130%20130%22%20fill%3D%22none%22%20stroke%3D%22%2310131A%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.07%22%3E%3Cpath%20transform%3D%22translate%288%208%29%22%20d%3D%22M4%2018%205.5%2013.5A7%207%200%201%201%209%2017Z%22/%3E%3Cpath%20transform%3D%22translate%2872%2014%29%22%20d%3D%22M12%203l2.6%205.6%206.1.7-4.5%204.2%201.2%206L12%2016.6%206.6%2019.5l1.2-6L3.3%209.3l6.1-.7Z%22/%3E%3Cpath%20transform%3D%22translate%2836%2064%29%22%20d%3D%22M12%2020s-7-4.4-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.6-7%2010-7%2010Z%22/%3E%3Cpath%20transform%3D%22translate%28100%2070%29%22%20d%3D%22M6%2016V11a6%206%200%200%201%2012%200v5l1.5%202h-15ZM10%2020h4%22/%3E%3Cpath%20transform%3D%22translate%288%2096%29%22%20d%3D%22M12%203a3%203%200%200%201%203%203v5a3%203%200%200%201-6%200V6a3%203%200%200%201%203-3ZM6%2011a6%206%200%200%200%2012%200M12%2017v3%22/%3E%3Cpath%20transform%3D%22translate%2870%2096%29%22%20d%3D%22M9%2018V6l10-2v12M9%2018a2%202%200%201%201-4%200%202%202%200%200%201%204%200ZM19%2016a2%202%200%201%201-4%200%202%202%200%200%201%204%200Z%22/%3E%3C/svg%3E");
}

/* Пузыри: текст 17/23 на телефоне, до 76% ширины; время — внутри пузыря справа снизу.
   В личном чате имя автора не показываем (собеседник один — он в шапке). */
/* flex-wrap: короткий текст и время в одной строке, длинный — время справа под текстом */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 10px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body > * { flex: 1 1 100%; min-width: 0; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body > .pm-msg-text { flex: 0 1 auto; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"][data-chat-kind="pm"] .pm-msg-body > .pm-msg-meta {
    order: 99;
    flex: 0 0 auto;
    margin: 0 0 -3px auto;
    gap: 4px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"][data-chat-kind="pm"] .pm-msg-author,
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"][data-chat-kind="pm"] .pm-bot-badge { display: none; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-time { font-size: 12px; }
@media (max-width: 767px) {
    html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body {
        font-size: 17px;
        line-height: 23px;
        max-width: 76%;
    }
}

/* Поле ввода: [скрепка] [поле со стикером] [микрофон | отправить] — как в макете. */
html[data-layout="telegram"] .pm-input-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 6px 6px;
    gap: 2px;
    align-items: flex-end;
}
html[data-layout="telegram"] .pm-attach-btn,
html[data-layout="telegram"] .pm-mic-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--rm-text2);
    padding: 0;
    cursor: pointer;
}
html[data-layout="telegram"] .pm-attach-btn:hover,
html[data-layout="telegram"] .pm-mic-btn:hover { color: var(--rm-text); background: var(--rm-hover); }
html[data-layout="telegram"] .pm-input {
    flex: 1;
    min-height: 42px;
    max-height: 160px;
    box-sizing: border-box;
    padding: 10px 46px 10px 16px;
    border-radius: 21px;
    background: var(--rm-field) !important;
    font-size: 17px;
    line-height: 22px;
    color: var(--rm-text);
    caret-color: var(--rm-accent);
}
html[data-layout="telegram"] .pm-input-emoji-wrap {
    margin-left: -44px;
    position: relative;
    z-index: 1;
    align-self: flex-end;
}
html[data-layout="telegram"] .pm-input-emoji-btn {
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    color: var(--rm-text2);
    display: flex;
    align-items: center;
    justify-content: center;
}
html[data-layout="telegram"] .pm-input-emoji-btn:hover,
html[data-layout="telegram"] .pm-input-emoji-btn--active { color: var(--rm-accent); }
/* Пусто → микрофон; есть текст → круглая кнопка отправки */
html[data-layout="telegram"] .pm-input-box:has(.pm-send-btn.pm-send-disabled) .pm-send-wrap { display: none; }
html[data-layout="telegram"] .pm-input-box:has(.pm-send-btn:not(.pm-send-disabled)) .pm-mic-btn { display: none; }
html[data-layout="telegram"] .pm-send-wrap { align-self: flex-end; margin-left: 4px; }
html[data-layout="telegram"] .pm-send-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* «Информация о чате» / «Общие материалы»: сетка 3 колонки, зазор 2, квадраты */
html[data-layout="telegram"] .pm-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
}
html[data-layout="telegram"] .pm-info-image { border-radius: 0; min-width: 0; background: var(--rm-surface2); }
html[data-layout="telegram"] .pm-info-image img,
html[data-layout="telegram"] .pm-info-image video { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-layout="telegram"] .pm-info-panel { background: var(--rm-bg); border-bottom: 1px solid var(--rm-divider); }
html[data-layout="telegram"] .pm-info-panel-header { border-bottom: none; padding: 12px 16px 4px; }
html[data-layout="telegram"] .pm-info-panel-title { font-size: 17px; font-weight: 600; color: var(--rm-text); }
html[data-layout="telegram"] .pm-info-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
    padding: 0 8px;
    border-bottom: 1px solid var(--rm-divider);
}
html[data-layout="telegram"] .pm-info-tab {
    flex-shrink: 0;
    background: none;
    border-radius: 0;
    padding: 12px 12px 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rm-text2);
    border-bottom: 3px solid transparent;
}
html[data-layout="telegram"] .pm-info-tab--active {
    background: none;
    color: var(--rm-accent);
    border-bottom-color: var(--rm-accent);
}
html[data-layout="telegram"] .pm-info-body { padding: 2px 0 12px; }
@media (max-width: 767px) {
    /* На телефоне «Информация о чате» — отдельный экран поверх переписки. */
    html[data-layout="telegram"] .pm-info-panel {
        position: absolute;
        inset: 0;
        z-index: 30;
        max-height: none;
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* Меню «⋮» шапки — как контекстное меню макета */
html[data-layout="telegram"] .pm-hdr-more-menu {
    background: var(--rm-elev);
    border: 1px solid var(--rm-divider);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
    padding: 4px;
    min-width: 220px;
    z-index: 60;
}
html[data-layout="telegram"] .pm-hdr-more-backdrop { z-index: 59; }
html[data-layout="telegram"] .pm-hdr-more-item {
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 16px;
    color: var(--rm-text);
    border-radius: 10px;
}
html[data-layout="telegram"] .pm-hdr-more-item svg { width: 20px; height: 20px; color: var(--rm-text2); }
html[data-layout="telegram"] .pm-hdr-more-item:hover { background: var(--rm-accent-soft); }
/* backdrop-filter у шапки создаёт свой stacking context — без z-index меню «⋮»
   оказывалось под лентой сообщений. Поднимаем шапку над лентой. */
html[data-layout="telegram"] .pm-chat-header { position: relative; z-index: 25; }
html[data-layout="telegram"] .pm-hdr-more-item { white-space: nowrap; }

/* ═══ Вкладка «Серверы» (макет «Серверы · каналы»): колонка серверов 76 слева +
   панель каналов. На странице сервера рейл в мессенджер-виде не выезжает, а стоит. ═══ */
html[data-layout="telegram"]:has(.srv-root) .app-rail {
    position: relative;
    transform: none;
    box-shadow: none;
    flex: 0 0 76px;
    width: 76px;
    z-index: 2;
    background: var(--rm-bg);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
html[data-layout="telegram"]:has(.srv-root) .app-rail-backdrop--tg { display: none !important; }
html[data-layout="telegram"] .app-rail .app-rail-item {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--rm-surface2);
    color: var(--rm-text);
}
html[data-layout="telegram"] .app-rail .app-rail-item--active,
html[data-layout="telegram"] .app-rail .app-rail-item:hover { border-radius: 16px; background: var(--rm-accent); color: #fff; }
html[data-layout="telegram"] .app-rail .app-rail-item--add,
html[data-layout="telegram"] .app-rail .app-rail-item--discover { border-radius: 50%; color: var(--rm-online); }
html[data-layout="telegram"] .app-rail .app-rail-item--add:hover,
html[data-layout="telegram"] .app-rail .app-rail-item--discover:hover { background: var(--rm-online); color: #fff; }
html[data-layout="telegram"] .app-rail-mention-badge {
    background: var(--rm-danger);
    border: 3px solid var(--rm-bg);
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
@media (max-width: 767px) {
    /* На телефоне в колонке — только серверы, «+» и «Найти»: чаты, звонки, профиль —
       в нижней навигации; встречи, боты, доски, игры доступны с ПК. */
    html[data-layout="telegram"] .app-rail .app-rail-item[href="/meetings"],
    html[data-layout="telegram"] .app-rail .app-rail-pm-notif,
    html[data-layout="telegram"] .app-rail .app-rail-item--bots,
    html[data-layout="telegram"] .app-rail .app-rail-item--boards,
    html[data-layout="telegram"] .app-rail .app-rail-item--games,
    html[data-layout="telegram"] .app-rail .app-rail-bottom { display: none !important; }
    html[data-layout="telegram"]:has(.srv-root) .app-rail { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    /* Открыт канал — колонка уходит, переписка на весь экран (как раньше). */
    html[data-layout="telegram"]:has(.srv-root .pm-sidebar--hidden) .app-rail { display: none; }
    /* Панель каналов — с закруглённым верхним левым углом, как в макете. */
    html[data-layout="telegram"] .srv-root .pm-sidebar {
        background: var(--rm-surface);
        border-top-left-radius: 20px;
    }
}

/* Каналы сервера используют те же .pm-friend-item, что и чаты — возвращаем им
   размеры строки канала из макета: 38pt, r8, без разделителей и крупных аватаров. */
html[data-layout="telegram"] .srv-root .pm-friend-item {
    min-height: 38px !important;
    padding: 6px 10px !important;
    margin: 1px 8px;
    border-radius: 8px !important;
    gap: 10px;
}
html[data-layout="telegram"] .srv-root .pm-friend-item::after { display: none !important; }
html[data-layout="telegram"] .srv-root .pm-friend-item .pm-friend-name { font-size: 15.5px; font-weight: 500; color: var(--rm-text2); }
html[data-layout="telegram"] .srv-root .pm-friend-item.pm-friend-active { background: var(--rm-elev); }
html[data-layout="telegram"] .srv-root .pm-friend-item.pm-friend-active .pm-friend-name { color: var(--rm-text); font-weight: 600; }
html[data-layout="telegram"] .srv-root .pm-friend-item:hover { background: var(--rm-hover); }

/* ═══ Базовые компоненты дизайн-системы (макет «11 Дизайн-система») ═══ */
.rm-screen {
    height: 100%;
    overflow-y: auto;
    background: var(--rm-bg, #0E1117);
    color: var(--rm-text, #EEF1F6);
    padding: env(safe-area-inset-top, 0px) 0 calc(96px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.rm-screen-header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 6px 16px 4px; }
.rm-screen-title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.2px; }
.rm-icon-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--rm-text, #EEF1F6); cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.rm-icon-btn:hover { background: var(--rm-hover); }
.rm-icon-btn--accent { color: var(--rm-accent, #5B7CFF); }
.rm-seg {
    display: flex; margin: 8px 16px 12px; height: 36px; padding: 3px; box-sizing: border-box;
    border-radius: 18px; background: var(--rm-field, #1D222C);
}
.rm-seg-item {
    flex: 1; border: none; background: none; border-radius: 15px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--rm-text2, #8C95A8); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rm-seg-item--active { background: var(--rm-elev, #242A36); color: var(--rm-text, #EEF1F6); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.rm-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    border-radius: 50%; overflow: hidden; color: #fff; font-weight: 600;
    background: linear-gradient(135deg, #5B7CFF, #8B5CF6);
}
.rm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rm-avatar--48 { width: 48px; height: 48px; font-size: 18px; }
.rm-btn {
    height: 50px; padding: 0 20px; border: none; border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.rm-btn--primary { background: var(--rm-grad); color: #fff; box-shadow: 0 6px 18px rgba(91, 124, 255, .33); }
.rm-btn--secondary { background: var(--rm-surface2, #1D222C); color: var(--rm-text, #EEF1F6); }
.rm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 32px; text-align: center; }
.rm-empty-ico {
    width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--rm-accent-soft, rgba(91,124,255,.15)); color: var(--rm-accent, #5B7CFF); margin-bottom: 8px;
}
.rm-empty-title { font-size: 17px; font-weight: 600; }
.rm-empty-sub { font-size: 14px; line-height: 20px; color: var(--rm-text2, #8C95A8); max-width: 280px; }
.rm-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--rm-surface2) 25%, var(--rm-elev) 50%, var(--rm-surface2) 75%); background-size: 200% 100%; animation: rm-skel 1.2s ease-in-out infinite; }
.rm-skel--av { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.rm-skel--line { flex: 1; height: 14px; }
@keyframes rm-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rm-skel { animation: none; } }

/* ═══ Экран «Звонки» ═══ */
.rm-calls-link-card {
    display: flex; align-items: center; gap: 12px; margin: 0 16px 12px; padding: 12px 14px;
    border-radius: 16px; background: var(--rm-accent-soft); text-decoration: none; color: inherit;
}
.rm-calls-link-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--rm-grad); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rm-calls-link-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-calls-link-title { font-size: 15.5px; font-weight: 600; color: var(--rm-accent); }
.rm-calls-link-sub { font-size: 13px; color: var(--rm-text2); }
.rm-call-row {
    display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 8px 0 16px;
    position: relative; cursor: pointer;
}
.rm-call-row::after { content: ''; position: absolute; left: 76px; right: 0; bottom: 0; height: 1px; background: var(--rm-divider); }
.rm-call-row:active { background: var(--rm-hover); }
.rm-call-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-call-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-call-row--missed .rm-call-name { color: var(--rm-danger); }
.rm-call-sub { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--rm-text2); }
.rm-call-dir { color: var(--rm-online); display: inline-flex; }
.rm-call-row--missed .rm-call-dir { color: var(--rm-danger); }
.rm-call-time { font-size: 13px; color: var(--rm-text2); flex-shrink: 0; }
.rm-call-row--skeleton { cursor: default; }
/* В нативном приложении WebView уже сдвинут под статус-бар — второй отступ не нужен. */
html[data-native] .rm-screen { padding-top: 0; }

/* ═══ Экран «Профиль» (макет «Профиль · настройки») ═══ */
.rm-profile {
    position: fixed;
    inset: 0;
    z-index: 1400;
    overflow-y: auto;
    background: var(--rm-bg);
    color: var(--rm-text);
    padding: env(safe-area-inset-top, 0px) 0 calc(100px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
/* fixed-слой занимает и зону статус-бара — отступ сверху нужен и в нативном приложении */
@media (min-width: 768px) {
    /* ПК: справа от колонки навигации, контент — узкой колонкой по центру */
    .rm-profile { left: 76px; padding: 24px 24px 40px; }
    /* Всё содержимое — одной колонкой 560 по центру (у .rm-group свой margin, перебиваем). */
    .rm-profile > *,
    .rm-profile > .rm-group { max-width: 560px; margin-left: auto; margin-right: auto; }
    .rm-profile > .rm-group { margin-bottom: 16px; }
    .rm-profile-top { padding: 0 0 4px; }
}
.rm-profile-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.rm-profile-edit { border: none; background: none; color: var(--rm-accent); font: inherit; font-size: 16px; font-weight: 600; padding: 10px 12px; cursor: pointer; }
.rm-profile-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px 20px; }
.rm-avatar--100 { width: 100px; height: 100px; font-size: 36px; margin-bottom: 6px; }
.rm-profile-name { font-size: 24px; font-weight: 700; text-align: center; }
.rm-profile-sub { font-size: 14px; color: var(--rm-text2); }
.rm-profile-status { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.rm-profile-status-btn {
    height: 30px; padding: 0 12px; border-radius: 15px; border: none; cursor: pointer;
    background: var(--rm-surface2); color: var(--rm-text2); font: inherit; font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
}
.rm-profile-status-btn--on { background: var(--rm-accent-soft); color: var(--rm-text); }
.rm-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.rm-status-dot--online { background: var(--rm-online); }
.rm-status-dot--away { background: var(--rm-warn); }
.rm-status-dot--dnd { background: var(--rm-danger); }
.rm-group { margin: 0 16px 20px; border-radius: 16px; background: var(--rm-surface); overflow: hidden; }
.rm-row {
    width: 100%; min-height: 50px; display: flex; align-items: center; gap: 14px;
    padding: 0 14px; border: none; background: none; color: var(--rm-text);
    font: inherit; font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; position: relative;
}
.rm-row + .rm-row::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--rm-divider); }
.rm-row:active, .rm-row:hover { background: var(--rm-hover); }
.rm-row-ico { width: 32px; height: 32px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rm-row-label { flex: 1; min-width: 0; }
.rm-row-chev { color: var(--rm-text3); flex-shrink: 0; }
.rm-row--danger { color: var(--rm-danger); font-weight: 600; }

/* ═══ Экран «Контакты» ═══ */
.rm-contacts-actions { margin-top: 2px; }
.rm-letter { padding: 14px 16px 6px; font-size: 13px; font-weight: 700; color: var(--rm-accent); }
.rm-inline-toast { margin: -8px 16px 12px; padding: 10px 14px; border-radius: 12px; background: var(--rm-elev); color: var(--rm-text); font-size: 14px; }
@media (max-width: 767px) {
    html[data-layout="telegram"] .pm-sidebar:has(.rm-contacts-actions) .pm-friend-item { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
    html[data-layout="telegram"] .pm-sidebar:has(.rm-contacts-actions) .pm-friend-item .pm-avatar { width: 44px; height: 44px; font-size: 17px; }
    html[data-layout="telegram"] .pm-sidebar:has(.rm-contacts-actions) .pm-friend-item::after { left: 72px; }
}
html[data-layout="telegram"] .pm-friend-status--online { color: var(--rm-accent) !important; }
/* В «Контактах» время и счётчик непрочитанных не нужны — это список людей, не чатов. */
html[data-layout="telegram"] .pm-sidebar:has(.rm-contacts-actions) .pm-tg-time,
html[data-layout="telegram"] .pm-sidebar:has(.rm-contacts-actions) .pm-unread-badge { display: none !important; }
html[data-layout="telegram"] .rm-compose-btn { color: var(--rm-accent) !important; width: 44px; height: 44px; }
.rm-new-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600; }
.rm-new-sheet .rm-group { margin: 0 4px 8px; background: var(--rm-surface2); }
/* Пока открыта шторка («Новое», вложения) — навигация не мешает */
html[data-layout="telegram"]:has(.mas-sheet) .rm-tabbar { display: none !important; }
html[data-layout="telegram"] .rm-compose-btn,
html[data-layout="telegram"] .rm-compose-btn:hover { background: none !important; }
html[data-layout="telegram"] .pm-sidebar-header .pm-add-friend-btn { background: none; }

/* Шторки (вложения, «Новое») — выше нижней навигации, шторка выше своего затемнения. */
html[data-layout="telegram"] .mas-backdrop { z-index: 1590; }
html[data-layout="telegram"] .mas-sheet { z-index: 1600; }
@media (max-width: 767px) {
    /* translateX(0) у открытой переписки делал её «точкой отсчёта» для position:fixed —
       шторки и меню внутри чата обрезались по её краю. none выглядит так же, а fixed
       снова считается от экрана; анимация выезда сохраняется. */
    .pm-chat-wrap.pm-chat-wrap--active { transform: none; }
}

/* ═══ Пузыри: галочки, файлы, звонки — по макету (после проверки на эмуляторе) ═══ */
/* Галочка прочтения — в одной строке со временем, а не поверх текста. */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body > .pm-msg-tick-inline {
    position: static;
    order: 100;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 0 0 1px -6px;
    color: rgba(255, 255, 255, .7);
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body > .pm-msg-tick-inline--read { color: #fff; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-body:not(:has(> .pm-msg-meta)) > .pm-msg-tick-inline { margin-left: auto; }

/* Файл в пузыре: плитка 48 + имя/размер прямо на пузыре, без тёмной коробки. */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .msg-file-card {
    background: transparent;
    border: none;
    padding: 2px 0;
    gap: 12px;
    min-width: 220px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .msg-file-emoji {
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; background: var(--rm-accent-soft);
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .msg-file-emoji { background: rgba(255, 255, 255, .95); }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .msg-file-name { font-size: 16px; font-weight: 600; color: inherit; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .msg-file-size { font-size: 14px; color: inherit; opacity: .7; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .msg-file-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .14); color: inherit;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--other .msg-file-btn { background: var(--rm-surface2); }

/* Звонок в пузыре: иконка + текст цветом пузыря, без тёмной плашки (пропущенный — красная иконка). */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-call {
    background: transparent;
    border: none;
    padding: 2px 0;
    color: inherit;
    gap: 10px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-call-icon {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); color: inherit;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--other .pm-msg-call-icon { background: var(--rm-accent-soft); color: var(--rm-accent); }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-call--missed .pm-msg-call-icon { color: var(--rm-danger); }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-call-title { color: inherit; font-weight: 600; font-size: 15px; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg-call-dur { color: inherit; opacity: .7; }

/* Голосовое в пузыре (макет): круглая кнопка 44, полоса прогресса, время — без тёмной коробки. */
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .voice-player {
    background: transparent;
    border: none;
    padding: 2px 0;
    gap: 12px;
    min-width: 220px;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .voice-play-btn {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: none;
    background: var(--rm-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .voice-play-btn { background: #fff; color: var(--rm-accent); }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .voice-progress-wrap { height: 4px; border-radius: 2px; background: rgba(140, 149, 168, .35); flex: 1; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .voice-progress-wrap { background: rgba(255, 255, 255, .3); }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .voice-progress-fill { background: var(--rm-accent); border-radius: 2px; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .pm-msg--mine .voice-progress-fill { background: #fff; }
html[data-layout="telegram"] .pm-chat[data-bubble="telegram"] .voice-time { font-size: 12px; color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }

/* Баннер закреплённого под шапкой (макет): полоса 3px, заголовок 12/600 акцент, текст 15 */
.rm-pinned-banner {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 4px 0 14px; box-sizing: border-box;
    background: var(--rm-glass); border-bottom: 1px solid var(--rm-divider);
    cursor: pointer; position: relative; z-index: 24;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.rm-pinned-bar { width: 3px; height: 32px; border-radius: 2px; background: var(--rm-accent); flex-shrink: 0; }
.rm-pinned-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rm-pinned-title { font-size: 12px; font-weight: 600; color: var(--rm-accent); }
.rm-pinned-text { font-size: 15px; color: var(--rm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-pinned-list { color: var(--rm-text2); }
@media (max-width: 767px) {
    html[data-layout="telegram"] .pm-pin-header-btn { display: none !important; }
}

/* ═══ Долгое нажатие на сообщение (макет «Меню сообщения»): размытый фон, поднятый пузырь ═══ */
html[data-layout="telegram"] .pm-ctx-spot-dim {
    background: rgba(0, 0, 0, .55) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
/* Клон пузыря живёт вне .pm-chat — повторяем раскладку содержимого */
html[data-layout="telegram"] .pm-ctx-spot-bubble > * { flex: 1 1 100%; min-width: 0; }
html[data-layout="telegram"] .pm-ctx-spot-bubble > .pm-msg-text { flex: 0 1 auto; }
html[data-layout="telegram"] .pm-ctx-spot-bubble > .pm-msg-meta { order: 99; flex: 0 0 auto; margin: 0 0 -3px auto; display: flex; gap: 4px; align-items: center; }
html[data-layout="telegram"] .pm-ctx-spot-bubble[data-chat-kind="pm"] .pm-msg-author { display: none; }
html[data-layout="telegram"] .pm-ctx-spot-bubble .pm-msg-time { font-size: 12px; opacity: .75; }
html[data-layout="telegram"] .pm-ctx-spot-bubble > .pm-msg-tick-inline { position: static; order: 100; flex: 0 0 auto; align-self: flex-end; margin: 0 0 1px -6px; color: rgba(255, 255, 255, .8); }
html[data-layout="telegram"] .pm-ctx-spot-bubble--mine a { color: #fff; }
/* Меню действий: 230px, r16, пункты 44px, текст 16, иконки 20 */
html[data-layout="telegram"] .pm-msg-ctx--bubble,
html[data-layout="telegram"] .pm-msg-ctx { min-width: 230px; border-radius: 16px; padding: 4px; }
html[data-layout="telegram"] .pm-msg-ctx-item { min-height: 44px; padding: 0 14px; gap: 14px; font-size: 16px; }
html[data-layout="telegram"] .pm-msg-ctx-item svg { width: 20px; height: 20px; color: var(--rm-text2); flex-shrink: 0; }
html[data-layout="telegram"] .pm-msg-ctx-item--danger svg { color: var(--rm-danger); }
/* Пилюля реакций: r26, фон --rm-elev */
html[data-layout="telegram"] .pm-msg-ctx-reactions,
html[data-layout="telegram"] .pm-ctx-react-bar { background: var(--rm-elev) !important; border-radius: 26px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important; }

/* ═══ Меню чата по долгому нажатию (UserContextMenu) — стиль макета ═══ */
.ctx-ri, .ctx-item--tg { display: none; }
html[data-layout="telegram"] .ctx-emo { display: none; }
html[data-layout="telegram"] .ctx-ri { display: inline-block; color: var(--rm-text2); flex-shrink: 0; }
html[data-layout="telegram"] .ctx-item--tg { display: flex; }
html[data-layout="telegram"] .ctx-menu {
    background: var(--rm-elev);
    border: 1px solid var(--rm-divider);
    border-radius: 16px;
    padding: 4px;
    min-width: 240px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
html[data-layout="telegram"] .ctx-item {
    display: flex; align-items: center; gap: 14px;
    min-height: 44px; padding: 0 14px; border-radius: 10px;
    font-size: 16px; color: var(--rm-text);
}
html[data-layout="telegram"] .ctx-item:hover { background: var(--rm-accent-soft); color: var(--rm-text); }
html[data-layout="telegram"] .ctx-item--danger, html[data-layout="telegram"] .ctx-item--danger .ctx-ri { color: var(--rm-danger); }
html[data-layout="telegram"] .ctx-divider { background: var(--rm-divider); margin: 4px 10px; }
html[data-layout="telegram"] .ctx-backdrop {
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
html[data-layout=telegram] .ctx-backdrop { z-index: 1650; }
html[data-layout=telegram] .ctx-menu { z-index: 1700; }
html[data-layout="telegram"] .ctx-item { justify-content: flex-start; text-align: left; width: 100%; }
html[data-layout="telegram"] .ctx-menu { max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }

/* ═══ Панель каналов: шапка-баннер сервера (макет «Серверы · каналы») ═══ */
html[data-layout="telegram"] .srv-root .pm-sidebar > .srv-header {
    min-height: 110px;
    align-items: flex-end;
    padding: 12px 12px 14px 16px !important;
    border-bottom: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%),
        radial-gradient(120% 140% at 85% 0%, #8B5CF6 0%, transparent 60%),
        linear-gradient(135deg, #5B7CFF, #3B2A6B) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top-left-radius: 20px;
}
html[data-layout="telegram"] .srv-root .pm-sidebar > .srv-header .pm-chat-header-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
html[data-layout="telegram"] .srv-root .pm-sidebar > .srv-header .srv-hdr-btn { color: #fff; }
html[data-layout="telegram"] .srv-root .pm-friends-section-label,
html[data-layout="telegram"] .srv-root .srv-cat-label { color: var(--rm-text2); font-size: 12px; font-weight: 700; letter-spacing: .5px; }

/* Старт поиска: «Часто пишут» — горизонтальная лента аватаров */
.rm-search-section { padding: 4px 16px 8px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--rm-text2); }
.rm-frequent { display: flex; gap: 14px; padding: 0 16px 14px; overflow-x: auto; scrollbar-width: none; }
.rm-frequent::-webkit-scrollbar { display: none; }
.rm-frequent-item { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; color: var(--rm-text); cursor: pointer; padding: 0; }
.rm-frequent-av { width: 56px !important; height: 56px !important; font-size: 20px; border-radius: 50%; overflow: hidden; background: var(--rm-grad); color: #fff; display: flex; align-items: center; justify-content: center; }
.rm-frequent-av img { width: 100%; height: 100%; object-fit: cover; }
.rm-frequent-name { font-size: 12px; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rm-text2); }

/* ── Режим выбора чатов (Pm .pm-select-mode) — макет 1.5 ── */
html[data-layout="telegram"] .rm-sel-header { position: relative; justify-content: flex-start; }
.rm-sel-cancel {
    border: none; background: none; padding: 6px 4px; cursor: pointer;
    color: var(--rm-accent); font: inherit; font-size: 17px; font-weight: 400;
    position: relative; z-index: 1;
}
.rm-sel-title {
    position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
    font-size: 17px; font-weight: 600; color: var(--rm-text);
}
html[data-layout="telegram"] .pm-select-mode .pm-avatar-wrap { position: relative; }
html[data-layout="telegram"] .pm-select-mode .pm-online-dot,
html[data-layout="telegram"] .pm-select-mode .pm-device-badge,
html[data-layout="telegram"] .pm-select-mode .pm-pin-drag-handle { display: none; }
.rm-sel-mark {
    position: absolute; right: -3px; bottom: -3px;
    width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--rm-bg);
    background: var(--rm-bg);
    box-shadow: inset 0 0 0 2px var(--rm-muted);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.rm-sel-mark--on { background: var(--rm-accent); box-shadow: none; }
html[data-layout="telegram"] .pm-select-mode .pm-friend-item { cursor: pointer; }
html[data-layout="telegram"] .pm-select-mode .pm-friend-item--sel,
html[data-layout="telegram"] .pm-select-mode .pm-friend-item--sel:hover { background: var(--rm-accent-soft); }
html[data-layout="telegram"] .pm-select-mode .pm-friend-item--sel::after { left: 0; }
html[data-layout="telegram"] .pm-select-mode .pm-friend-item--unselectable { opacity: .45; cursor: default; }

.rm-sel-bar {
    flex-shrink: 0;
    display: flex;
    height: 56px;
    background: var(--rm-bg);
    border-top: 1px solid var(--rm-divider);
}
.rm-sel-act {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: none; cursor: pointer; padding: 0;
    color: var(--rm-accent); font: inherit; font-size: 11px; font-weight: 500; line-height: 14px;
    -webkit-tap-highlight-color: transparent;
}
.rm-sel-act span { white-space: nowrap; }
.rm-sel-act:hover:not(:disabled) { background: var(--rm-hover); }
.rm-sel-act--danger { color: var(--rm-danger); }
.rm-sel-act:disabled { opacity: .4; cursor: default; }

@media (max-width: 767px) {
    /* Панель действий заменяет таббар: на всю ширину снизу, с safe-area. */
    html[data-layout="telegram"]:has(.pm-select-mode) .rm-tabbar { display: none; }
    html[data-layout="telegram"] .rm-sel-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600;
        height: auto; min-height: 56px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    html[data-layout="telegram"] .rm-sel-act { min-height: 56px; }
    /* Выделение — полоса от края до края: убираем боковой отступ списка, переносим его в строку. */
    html[data-layout="telegram"] .pm-select-mode .pm-friends-list { padding-left: 0; padding-right: 0; }
    html[data-layout="telegram"] .pm-select-mode .pm-friend-item { padding-left: 20px; padding-right: 20px; }
    html[data-layout="telegram"] .pm-select-mode .pm-friend-item::after { left: 88px; }
    html[data-layout="telegram"] .pm-select-mode .pm-friend-item--sel::after { left: 0; }
}

/* ═══ Настройки (SettingsModal) в мессенджер-виде ═══
   Открываются поверх экрана «Профиль» (z 1400). На ПК — окно по центру, как в
   десктопных мессенджерах, а не Discord-полноэкранник; цвета — токены --rm-*. */
html[data-layout="telegram"] .smod-backdrop { z-index: 1449; background: rgba(0,0,0,.6); }
html[data-layout="telegram"] .smod-root { z-index: 1450; background: var(--rm-bg); color: var(--rm-text); }
html[data-layout="telegram"] .smod-sidebar { background: var(--rm-surface); }
html[data-layout="telegram"] .smod-content { background: var(--rm-bg); }
html[data-layout="telegram"] .smod-user-header,
html[data-layout="telegram"] .smod-nav-sep { border-color: var(--rm-divider); }
html[data-layout="telegram"] .smod-nav-sep { background: var(--rm-divider); }
html[data-layout="telegram"] .smod-user-name,
html[data-layout="telegram"] .smod-username-display,
html[data-layout="telegram"] .smod-section-title { color: var(--rm-text); }
html[data-layout="telegram"] .smod-user-av { background: var(--rm-grad); }
html[data-layout="telegram"] .smod-edit-link { color: var(--rm-accent); }
html[data-layout="telegram"] .smod-search,
html[data-layout="telegram"] .smod-input,
html[data-layout="telegram"] .smod-select { background: var(--rm-field); border-color: transparent; color: var(--rm-text); border-radius: 10px; }
html[data-layout="telegram"] .smod-search:focus,
html[data-layout="telegram"] .smod-input:focus,
html[data-layout="telegram"] .smod-select:focus { border-color: var(--rm-accent); }
html[data-layout="telegram"] .smod-nav-section-label,
html[data-layout="telegram"] .smod-label,
html[data-layout="telegram"] .smod-section-subtitle,
html[data-layout="telegram"] .smod-toggle-desc,
html[data-layout="telegram"] .smod-field-hint { color: var(--rm-text2); }
html[data-layout="telegram"] .smod-nav-item { color: var(--rm-text2); border-radius: 10px; padding: 9px 10px; }
html[data-layout="telegram"] .smod-nav-item:hover { background: var(--rm-hover); color: var(--rm-text); }
html[data-layout="telegram"] .smod-nav-item--active,
html[data-layout="telegram"] .smod-nav-item--active:hover { background: var(--rm-accent-soft); color: var(--rm-accent); }
html[data-layout="telegram"] .smod-nav-item--active .smod-nav-icon { opacity: 1; }
html[data-layout="telegram"] .smod-field-group { background: var(--rm-surface); border-radius: 16px; }
html[data-layout="telegram"] .smod-toggle-row { border-bottom-color: var(--rm-divider); }
html[data-layout="telegram"] .smod-toggle-label { color: var(--rm-text); }
html[data-layout="telegram"] .smod-sw-track { background: var(--rm-muted); }
html[data-layout="telegram"] .smod-sw input:checked + .smod-sw-track { background: var(--rm-accent); }
html[data-layout="telegram"] .smod-btn { border-radius: 10px; }
html[data-layout="telegram"] .smod-btn--primary { background: var(--rm-grad); }
html[data-layout="telegram"] .smod-btn:not(.smod-btn--primary):not(.smod-btn--danger) { background: var(--rm-surface2); color: var(--rm-text); }
html[data-layout="telegram"] .smod-btn:not(.smod-btn--primary):not(.smod-btn--danger):hover { background: var(--rm-elev); }
html[data-layout="telegram"] .smod-btn--danger { background: var(--rm-danger); }
html[data-layout="telegram"] .smod-version { color: var(--rm-text3); }

@media (min-width: 769px) {
    html[data-layout="telegram"] .smod-root {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(1080px, calc(100vw - 96px));
        height: min(880px, calc(100vh - 64px));
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--rm-divider);
        box-shadow: 0 24px 64px rgba(0,0,0,.5);
    }
    html[data-layout="telegram"] .smod-sidebar { width: 260px; padding: 18px 10px 12px; }
    html[data-layout="telegram"] .smod-content-inner { padding: 28px 32px 48px; }
}
html[data-layout="telegram"] .smod-close-btn { background: var(--rm-surface2); color: var(--rm-text2); z-index: 2; }
html[data-layout="telegram"] .smod-close-btn:hover { background: var(--rm-elev); color: var(--rm-text); }
html[data-layout="telegram"] .smod-spoiler { background: var(--rm-surface); border-radius: 16px; }
html[data-layout="telegram"] .smod-spoiler-header { color: var(--rm-text2); }
html[data-layout="telegram"] .smod-spoiler-header:hover { background: var(--rm-hover); }
@media (max-width: 768px) {
    /* Настройки на телефоне — полноэкранный экран: таббар не нужен (как открытая переписка). */
    html[data-layout="telegram"]:has(.smod-root) .rm-tabbar { display: none; }
}

/* ═══ Экран «Поиск» (GlobalSearch, макет «06 Поиск») ═══ */
.rm-gs {
    position: fixed; inset: 0; z-index: 1550;
    display: flex; flex-direction: column;
    background: var(--rm-bg); color: var(--rm-text);
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
}
/* fixed-слой занимает и зону статус-бара — отступ сверху нужен и в нативном приложении */
@media (min-width: 768px) {
    /* ПК: поиск открывается в колонке списка чатов, переписка справа остаётся видна. */
    html[data-layout="telegram"] .pm-sidebar { position: relative; }
    .rm-gs { position: absolute; z-index: 30; }
}
.rm-gs-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px; flex-shrink: 0; }
.rm-gs-field {
    flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px;
    padding: 0 10px; border-radius: 12px; background: var(--rm-field); color: var(--rm-text2);
    border: 1.5px solid transparent; box-sizing: border-box;
}
.rm-gs-field:focus-within { border-color: var(--rm-accent); }
.rm-gs-input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    color: var(--rm-text); font: inherit; font-size: 17px;
}
.rm-gs-input::-webkit-search-cancel-button { display: none; }
.rm-gs-clear {
    width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--rm-text2); color: var(--rm-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rm-gs-cancel { border: none; background: none; color: var(--rm-accent); font: inherit; font-size: 17px; cursor: pointer; padding: 6px 0; flex-shrink: 0; }

.rm-gs-tabs {
    display: flex; gap: 24px; padding: 0 16px; overflow-x: auto; flex-shrink: 0;
    border-bottom: 1px solid var(--rm-divider); scrollbar-width: none;
}
.rm-gs-tabs::-webkit-scrollbar { display: none; }
.rm-gs-tab {
    position: relative; border: none; background: none; cursor: pointer; padding: 10px 0 11px;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--rm-text2); white-space: nowrap;
}
.rm-gs-tab--active { color: var(--rm-accent); }
.rm-gs-tab--active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--rm-accent); }

.rm-gs-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.rm-gs-h { padding: 18px 16px 10px; font-size: 17px; font-weight: 600; }
.rm-gs-h--row { display: flex; align-items: center; justify-content: space-between; }
.rm-gs-link { border: none; background: none; color: var(--rm-accent); font: inherit; font-size: 15px; cursor: pointer; padding: 0; }
.rm-gs-link--sm { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.rm-gs-frequent { display: flex; gap: 14px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.rm-gs-frequent::-webkit-scrollbar { display: none; }
.rm-gs-freq { position: relative; flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; padding: 0; cursor: pointer; color: var(--rm-text2); }
.rm-gs-freq-av { width: 60px; height: 60px; font-size: 22px; }
.rm-gs-freq-dot { position: absolute; top: 44px; right: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--rm-online); border: 2.5px solid var(--rm-bg); box-sizing: border-box; }
.rm-gs-freq-name { font-size: 12px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rm-gs-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.rm-gs-filter {
    height: 36px; padding: 0 12px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--rm-surface2); color: var(--rm-text); font: inherit; font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.rm-gs-filter:hover { background: var(--rm-elev); }

.rm-gs-recent { display: flex; align-items: center; min-height: 50px; position: relative; }
.rm-gs-recent + .rm-gs-recent::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--rm-divider); }
.rm-gs-recent-main {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; align-self: stretch;
    padding: 0 0 0 20px; border: none; background: none; cursor: pointer; color: var(--rm-text2); font: inherit; text-align: left;
}
.rm-gs-recent-main span { color: var(--rm-text); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-gs-recent-x { border: none; background: none; color: var(--rm-text3); cursor: pointer; padding: 12px 16px; display: flex; }

.rm-gs-sec { padding: 16px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--rm-text2); }
.rm-gs-sec--row { display: flex; align-items: center; justify-content: space-between; }
.rm-gs-row {
    width: 100%; min-height: 68px; display: flex; align-items: center; gap: 12px;
    padding: 6px 16px 6px 12px; border: none; background: none; color: var(--rm-text);
    font: inherit; text-align: left; cursor: pointer; position: relative; box-sizing: border-box;
}
.rm-gs-row:hover { background: var(--rm-hover); }
.rm-gs-row::after { content: ''; position: absolute; left: 80px; right: 0; bottom: 0; height: 1px; background: var(--rm-divider); }
.rm-gs-row--msg { min-height: 72px; }
.rm-gs-row--msg::after { left: 74px; }
.rm-gs-row--skel { cursor: default; min-height: 60px; }
.rm-gs-row--skel::after, .rm-gs-row:last-child::after { display: none; }
.rm-gs-av56 { width: 56px; height: 56px; font-size: 20px; }
.rm-gs-av50 { width: 50px; height: 50px; font-size: 18px; }
.rm-gs-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-gs-texts--btn { border: none; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; align-self: stretch; justify-content: center; }
.rm-gs-top { display: flex; align-items: baseline; gap: 8px; }
.rm-gs-top .rm-gs-name { flex: 1; min-width: 0; }
.rm-gs-name { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.rm-gs-name--file { display: block; font-size: 16px; font-weight: 500; }
.rm-gs-type { color: var(--rm-text2); flex-shrink: 0; }
.rm-gs-time { font-size: 14px; color: var(--rm-text2); flex-shrink: 0; }
.rm-gs-sub { font-size: 15px; color: var(--rm-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-gs-row--file .rm-gs-sub { font-size: 13px; }
.rm-gs-you { color: var(--rm-text2); font-weight: 500; }
.rm-gs-mark { background: rgba(91,124,255,.2); color: var(--rm-text); border-radius: 4px; padding: 0 2px; }
html[data-theme="light"] .rm-gs-mark { background: rgba(74,108,247,.18); }

.rm-gs-row--file { min-height: 70px; padding-left: 16px; cursor: default; }
.rm-gs-row--file::after { left: 80px; }
.rm-gs-tile {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.rm-gs-act { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--rm-accent); border-radius: 50%; flex-shrink: 0; }
.rm-gs-act:hover { background: var(--rm-hover); }

.rm-gs-chips { display: flex; gap: 8px; padding: 12px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.rm-gs-chip {
    height: 34px; padding: 0 14px; border-radius: 17px; border: none; cursor: pointer; flex-shrink: 0;
    background: var(--rm-surface2); color: var(--rm-text); font: inherit; font-size: 14px; font-weight: 500;
}
.rm-gs-chip--on { background: var(--rm-accent-soft); color: var(--rm-accent); font-weight: 600; }
.rm-gs-month { padding: 14px 16px 8px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--rm-text2); }
.rm-gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
@media (min-width: 768px) { .rm-gs-grid { grid-template-columns: repeat(4, 1fr); } }
.rm-gs-cell { position: relative; aspect-ratio: 1; padding: 0; border: none; background: var(--rm-surface2); cursor: pointer; overflow: hidden; }
.rm-gs-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-gs-cell-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #1D2333, #2A3147); }
.rm-gs-cell-who {
    position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--rm-grad); color: #fff; font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.rm-gs-more { display: block; margin: 12px auto; border: none; background: var(--rm-surface2); color: var(--rm-accent); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 12px; cursor: pointer; }

.rm-gs-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 32px 24px; }
.rm-gs-empty-ico { width: 120px; height: 120px; border-radius: 50%; background: var(--rm-surface2); color: var(--rm-text3); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.rm-gs-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.rm-gs-empty-sub { font-size: 15px; line-height: 21px; color: var(--rm-text2); max-width: 280px; }
.rm-gs-empty-btn {
    margin-top: 24px; width: 250px; height: 46px; border-radius: 14px; border: none; cursor: pointer;
    background: var(--rm-surface2); color: var(--rm-text); font: inherit; font-size: 16px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
/* Поле в списке чатов — только кнопка-триггер поиска. */
html[data-layout="telegram"] .pm-local-search-input[readonly] { cursor: pointer; }
@media (max-width: 767px) {
    /* Поиск на весь экран — таббар прячем (поиск живёт внутри .pm-sidebar со своим z-слоем). */
    html[data-layout="telegram"]:has(.rm-gs) .rm-tabbar { display: none; }
}

/* ═══ Панель каналов сервера: иконки, категории, статистика, голос, карточка (макет 1.1) ═══ */
.srv-ic-tg { display: none; }
html[data-layout="telegram"] .srv-root .srv-ic-classic { display: none !important; }
html[data-layout="telegram"] .srv-root .srv-ic-tg { display: inline-flex; color: var(--rm-text2); flex-shrink: 0; }
html[data-layout="telegram"] .srv-root .pm-friend-active .srv-ic-tg { color: var(--rm-text); }
html[data-layout="telegram"] .srv-root .srv-ch-item { color: var(--rm-text2); font-size: 16px; }
html[data-layout="telegram"] .srv-root .srv-ch-item.pm-friend-active { color: var(--rm-text); font-weight: 600; }

/* Категории: «chevron 12 + UPPERCASE 12 SemiBold», без плашки, рамки и счётчика. */
html[data-layout="telegram"] .srv-root .srv-cat-header {
    background: none; border-left: none; margin: 12px 8px 2px; padding: 4px 8px; min-height: 28px; box-sizing: border-box;
    color: var(--rm-text2); font-size: 12px; font-weight: 600; letter-spacing: .5px;
}
html[data-layout="telegram"] .srv-root .srv-cat-header:hover { background: none; color: var(--rm-text); }
html[data-layout="telegram"] .srv-root .srv-cat-icon,
html[data-layout="telegram"] .srv-root .srv-cat-count { display: none; }
html[data-layout="telegram"] .srv-root .srv-cat-caret { font-size: 10px; color: var(--rm-text2); }
html[data-layout="telegram"] .srv-root .srv-ch-item--in-cat { margin-left: 8px; border-left: none; border-radius: 8px; }
html[data-layout="telegram"] .srv-root .srv-cat-empty { color: var(--rm-text3); border-left: none; padding-left: 18px; font-style: normal; }
html[data-layout="telegram"] .srv-root .srv-cat-action { color: var(--rm-text3); }
html[data-layout="telegram"] .srv-root .pm-section-label { color: var(--rm-text2) !important; font-size: 12px !important; letter-spacing: .5px; }
@media (max-width: 767px) {
    /* Админ-кнопки категорий на телефоне не помещаются — оставляем только «＋». */
    html[data-layout="telegram"] .srv-root .srv-cat-action:not(:first-of-type) { display: none; }
}

.srv-stats { display: flex; gap: 12px; padding: 8px 16px 0; font-size: 12px; color: var(--rm-text2); }
.srv-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.srv-stat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rm-text2); display: inline-block; }
.srv-stat-dot--on { background: var(--rm-online); }
.srv-search-row { display: flex; gap: 8px; padding: 12px 12px 4px; }
.srv-search {
    flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border-radius: 12px; background: var(--rm-field); color: var(--rm-text2); box-sizing: border-box;
}
.srv-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--rm-text); font: inherit; font-size: 15px; }
.srv-search input::-webkit-search-cancel-button { display: none; }
.srv-invite-btn {
    width: 40px; height: 36px; border-radius: 12px; border: none; background: var(--rm-field); color: var(--rm-text);
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.srv-invite-btn:hover { background: var(--rm-elev); }

/* Участники голосового канала */
.srv-vp { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 16px 0 40px; }
.srv-vp-av { width: 24px; height: 24px; font-size: 10px; }
.srv-vp-name { flex: 1; min-width: 0; font-size: 14px; color: var(--rm-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-vp-live { height: 16px; padding: 0 6px; border-radius: 4px; background: var(--rm-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; }
.srv-vp-muted { color: var(--rm-danger); flex-shrink: 0; }

/* Низ панели: плашка «Голос подключён» + карточка пользователя */
html[data-layout="telegram"] .srv-root .pm-sidebar { overflow-y: auto; }
.srv-bottom { position: sticky; bottom: 0; margin-top: auto; z-index: 3; background: var(--rm-surface); }
.srv-bottom-spacer { display: none; }
.rm-voicebar { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 12px 0 16px; border-top: 1px solid var(--rm-divider); background: var(--rm-surface2); }
.rm-voicebar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: none; background: none; padding: 8px 0; cursor: pointer; color: var(--rm-online); font: inherit; text-align: left; }
.rm-voicebar-texts { display: flex; flex-direction: column; min-width: 0; }
.rm-voicebar-title { font-size: 14px; font-weight: 600; color: var(--rm-online); }
.rm-voicebar-sub { font-size: 12px; color: var(--rm-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-voicebar-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: var(--rm-text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rm-voicebar-btn:hover { background: var(--rm-hover); }
.rm-voicebar-btn--on { color: var(--rm-online); }
.rm-voicebar-btn--end { color: var(--rm-danger); }
.rm-usercard { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 10px 0 14px; border-top: 1px solid var(--rm-divider); }
.rm-usercard-av { position: relative; flex-shrink: 0; }
.rm-usercard-av .rm-avatar { width: 40px; height: 40px; font-size: 15px; }
.rm-usercard-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--rm-surface); background: var(--rm-online); }
.rm-usercard-dot--away { background: var(--rm-warn); }
.rm-usercard-dot--dnd { background: var(--rm-danger); }
.rm-usercard-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-usercard-name { font-size: 15px; font-weight: 600; color: var(--rm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-usercard-sub { font-size: 12px; color: var(--rm-text2); }
.rm-usercard-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: var(--rm-text2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rm-usercard-btn:hover { background: var(--rm-hover); color: var(--rm-text); }
.rm-usercard-btn--off { color: var(--rm-danger); }
@media (max-width: 767px) {
    /* Таббар на телефоне виден — низ панели стоит над ним. */
    /* Над плавающим таббаром: отступ у самого блока (паддинг панели здесь перебит). */
    html[data-layout="telegram"] .srv-root .srv-bottom {
        position: fixed; left: 76px; right: 0; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); margin: 0;
    }
    html[data-layout="telegram"] .srv-root .srv-bottom-spacer { display: block; flex-shrink: 0; height: calc(var(--srv-bottom-h, 60px) + 96px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══ «Найти сообщество» (ServerDiscoveryModal в мессенджер-виде, макет 1.3) ═══ */
.rm-disc-backdrop { position: fixed; inset: 0; z-index: 1449; background: rgba(0,0,0,.6); }
.rm-disc {
    position: fixed; inset: 0; z-index: 1450; display: flex; flex-direction: column;
    background: var(--rm-bg); color: var(--rm-text);
    padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box;
}
@media (min-width: 768px) {
    .rm-disc {
        inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(560px, calc(100vw - 64px)); height: min(760px, calc(100vh - 64px));
        border-radius: 16px; border: 1px solid var(--rm-divider); box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden;
    }
}
.rm-disc-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0; }
.rm-disc-title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.rm-disc-search {
    display: flex; align-items: center; gap: 8px; height: 40px; margin: 12px 12px 4px; padding: 0 12px;
    border-radius: 12px; background: var(--rm-field); color: var(--rm-text2); box-sizing: border-box;
}
.rm-disc-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--rm-text); font: inherit; font-size: 15px; }
.rm-disc-search input::-webkit-search-cancel-button { display: none; }
.rm-disc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
.rm-disc-card {
    position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0; border: none; cursor: pointer;
    border-radius: 16px; background: var(--rm-surface2); color: var(--rm-text); font: inherit; text-align: left; overflow: hidden; flex-shrink: 0;
}
.rm-disc-card:hover { filter: brightness(1.06); }
.rm-disc-card:disabled { cursor: progress; }
.rm-disc-card--skel { cursor: default; min-height: 150px; }
.rm-disc-banner { display: block; height: 80px; opacity: .85; }
.rm-disc-ic {
    position: absolute; left: 15px; top: 58px; width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
    border: 3px solid var(--rm-surface2); color: #fff; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.rm-disc-ic img { width: 100%; height: 100%; object-fit: cover; }
.rm-disc-body { display: flex; flex-direction: column; gap: 3px; padding: 28px 14px 14px; }
.rm-disc-name { font-size: 16px; font-weight: 700; }
.rm-disc-desc { font-size: 13px; color: var(--rm-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-disc-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--rm-text2); }
.rm-disc-act { margin-left: auto; color: var(--rm-accent); font-size: 14px; font-weight: 600; }
.app-rail-discover-tg { display: none; }
html[data-layout="telegram"] .app-rail-discover-ic { display: none; }
html[data-layout="telegram"] .app-rail-discover-tg { display: inline-flex; }
html[data-layout="telegram"] .app-rail .app-rail-item--discover { background: rgba(61,220,151,.12); }

/* ═══ Голосовой канал (макет «Серверы · голосовой канал») ═══ */
html[data-layout="telegram"] .srv-root .pm-chat:has(.srv-vhdr) { background: #08090D; }
html[data-theme="light"][data-layout="telegram"] .srv-root .pm-chat:has(.srv-vhdr) { background: var(--rm-chatbg); }
.srv-vhdr { display: flex; align-items: center; gap: 6px; padding: 6px 8px !important; min-height: 56px; border-bottom: none !important; background: transparent !important; }
.srv-vhdr-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srv-vhdr-name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; color: var(--rm-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.srv-vhdr-name svg { color: var(--rm-text2); flex-shrink: 0; }
.srv-vhdr-sub { font-size: 12px; color: var(--rm-text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Лобби */
html[data-layout="telegram"] .srv-voice-lobby { color: var(--rm-text); gap: 10px; }
html[data-layout="telegram"] .srv-voice-lobby-icon {
    width: 88px; height: 88px; border-radius: 50%; background: var(--rm-accent-soft); color: var(--rm-accent);
    display: flex; align-items: center; justify-content: center; font-size: 0;
}
html[data-layout="telegram"] .srv-voice-lobby-name { font-size: 22px; }
html[data-layout="telegram"] .srv-voice-lobby-hint { color: var(--rm-text2); }
html[data-layout="telegram"] .srv-voice-lobby-av { background: var(--rm-grad); width: 48px; height: 48px; }
html[data-layout="telegram"] .srv-voice-lobby-user { font-size: 13px; color: var(--rm-text2); }
html[data-layout="telegram"] .srv-voice-join-row { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); margin-top: 16px; }
html[data-layout="telegram"] .srv-voice-join-btn,
html[data-layout="telegram"] .srv-voice-meeting-btn {
    height: 50px; border-radius: 14px; border: none; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%;
}
html[data-layout="telegram"] .srv-voice-join-btn { background: var(--rm-grad); color: #fff; box-shadow: 0 6px 18px rgba(91,124,255,.33); }
html[data-layout="telegram"] .srv-voice-meeting-btn { background: var(--rm-surface2); color: var(--rm-text); }

/* Активный звонок: плитки 2 колонки, панель управления r24 */
html[data-layout="telegram"] .srv-voice-active { justify-content: flex-start; align-items: stretch; gap: 12px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
html[data-layout="telegram"] .srv-voice-active-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; flex: 1; align-content: start; }
@media (min-width: 900px) { html[data-layout="telegram"] .srv-voice-active-grid { grid-template-columns: repeat(3, 1fr); } }
html[data-layout="telegram"] .srv-voice-tile {
    position: relative; height: 170px; min-width: 0; padding: 0; border-radius: 20px; justify-content: center;
    background: linear-gradient(160deg, #2A2140, #15131F); border: 3px solid transparent; box-sizing: border-box;
}
html[data-layout="telegram"] .srv-voice-tile:nth-child(4n+2) { background: linear-gradient(160deg, #1B3A31, #111A17); }
html[data-layout="telegram"] .srv-voice-tile:nth-child(4n+3) { background: linear-gradient(160deg, #22284A, #13151F); }
html[data-layout="telegram"] .srv-voice-tile:nth-child(4n+4) { background: linear-gradient(160deg, #2A2E38, #15171C); }
html[data-layout="telegram"] .srv-voice-tile--me { border-color: transparent; }
html[data-layout="telegram"] .srv-voice-tile-av { width: 72px; height: 72px; font-size: 28px; font-weight: 600; background: var(--rm-grad); }
html[data-layout="telegram"] .srv-voice-tile-name {
    position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); height: 24px; padding: 0 8px; box-sizing: border-box;
    border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 600; line-height: 24px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
html[data-layout="telegram"] .srv-vtile-muted { position: absolute; right: 12px; bottom: 12px; color: var(--rm-danger); }
html[data-layout="telegram"] .srv-vtile-live { position: absolute; left: 8px; top: 8px; }
html[data-layout="telegram"] .srv-voice-tile .srv-tile-vol-wrap { position: absolute; right: 8px; top: 8px; }
html[data-layout="telegram"] .srv-voice-controls {
    justify-content: space-around; align-items: center; height: 72px; padding: 0 12px; border-radius: 24px;
    background: var(--rm-surface); flex-shrink: 0;
}
html[data-layout="telegram"] .srv-vc-btn {
    width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--rm-surface2); color: var(--rm-text);
    display: flex; align-items: center; justify-content: center;
}
html[data-layout="telegram"] .srv-vc-btn svg { width: 24px; height: 24px; }
html[data-layout="telegram"] .srv-vc-btn:hover { background: var(--rm-elev); }
html[data-layout="telegram"] .srv-vc-btn--active { background: rgba(255,84,112,.22); color: var(--rm-danger); }
html[data-layout="telegram"] .srv-vc-btn--screen { background: var(--rm-accent-soft); color: var(--rm-accent); }
html[data-layout="telegram"] .srv-vc-btn--danger,
html[data-layout="telegram"] .srv-vc-btn--danger:hover { background: var(--rm-danger); color: #fff; }

/* Счётчик непрочитанных у «назад» в шапке чата (макет «Личный чат»). */
.pm-hdr-unread { display: none; }
html[data-layout="telegram"] .pm-hdr-unread {
    display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 28px; padding: 0 8px;
    margin-left: -4px; margin-right: 4px; border-radius: 12px; box-sizing: border-box; cursor: pointer;
    background: var(--rm-surface2); color: var(--rm-text2); font-size: 13px; font-weight: 600; flex-shrink: 0;
}
@media (min-width: 768px) { html[data-layout="telegram"] .pm-hdr-unread { display: none; } }
@media (max-width: 767px) {
    html[data-layout="telegram"]:has(.rm-disc) .rm-tabbar { display: none; }
}
@media (max-width: 767px) {
    /* Голосовой экран — полноэкранный, без нижней навигации (макет 1.2). */
    html[data-layout="telegram"]:has(.srv-vhdr) .rm-tabbar { display: none; }
}

/* Сервер в мессенджер-виде: профиль — в карточке пользователя панели, в рейле не дублируем. */
html[data-layout="telegram"]:has(.srv-root) .app-rail .app-rail-bottom { display: none !important; }
html[data-layout="telegram"] .srv-root .srv-side-actions { padding: 8px 12px 0; gap: 8px; }
html[data-layout="telegram"] .srv-root .srv-side-action-btn {
    flex: 1; height: 32px; border-radius: 10px; border: none; background: var(--rm-surface2);
    color: var(--rm-text2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
html[data-layout="telegram"] .srv-root .srv-side-action-btn:hover { background: var(--rm-elev); color: var(--rm-text); }
html[data-layout="telegram"] .srv-root .srv-add-ch-btn { color: var(--rm-text2); background: none; }
@media (min-width: 768px) {
    /* ПК: экраны-списки (Звонки) — колонкой 720 по центру, а не во всю ширину окна. */
    .rm-screen > *,
    .rm-screen > .rm-seg,
    .rm-screen > .rm-calls-link-card { max-width: 720px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
    .rm-screen { padding-top: 16px; }
}

/* ═══ Выбор сообщений в чате (макет «Выбор сообщений») ═══ */
.rm-msel-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1401; height: 56px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
    background: var(--rm-bg); border-bottom: 1px solid var(--rm-divider); box-sizing: border-box;
}
html[data-native] .rm-msel-head { top: 0; }
.rm-msel-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-size: 17px; font-weight: 600; color: var(--rm-text); }
.rm-msel-link { position: relative; z-index: 1; border: none; background: none; padding: 8px 0; color: var(--rm-accent); font: inherit; font-size: 17px; cursor: pointer; }
.rm-msel-link:disabled { opacity: .4; cursor: default; }
.rm-msel-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1400; display: flex;
    min-height: 55px; padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: content-box;
    background: var(--rm-glass, var(--rm-surface)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-top: 1px solid var(--rm-divider);
}
.rm-msel-act {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: none; background: none; cursor: pointer; padding: 6px 0; color: var(--rm-accent); font: inherit; font-size: 12px; font-weight: 500;
}
.rm-msel-act:hover:not(:disabled) { background: var(--rm-hover); }
.rm-msel-act--danger { color: var(--rm-danger); }
.rm-msel-act:disabled { opacity: .4; cursor: default; }
html[data-layout="telegram"] .pm-msg-check {
    width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid rgba(255,255,255,.7); background: transparent; color: #fff;
}
html[data-layout="telegram"] .pm-msg-check--on { background: var(--rm-accent); border-color: var(--rm-accent); }
html[data-layout="telegram"] .pm-msg--selected { background: var(--rm-accent-soft) !important; }
/* Панель выбора накрывает композер целиком; на телефоне — тот же нижний отступ, что у .pm-input-wrap. */
html[data-layout="telegram"] .rm-msel-bar { background: var(--rm-bg); padding-top: 6px; }
@media (max-width: 768px) {
    html[data-layout="telegram"] .rm-msel-bar { padding-bottom: max(var(--kb-offset, 0px), calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))); }
    html[data-native][data-platform="ios"] body:not(.kb-open) .rm-msel-bar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }
    html[data-native][data-platform="android"] body:not(.kb-open) .rm-msel-bar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 48px); }
}

/* Бейджи таббара (макет: красная пилюля у иконки вкладки) */
.rm-tab-ico { position: relative; }
.rm-tab-badge {
    position: absolute; top: -3px; left: calc(50% + 5px);
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
    background: var(--rm-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--rm-surface2);
}
@media (min-width: 768px) { .rm-tab-badge { box-shadow: 0 0 0 2px var(--rm-bg); } }
.rm-gs-chip { display: inline-flex; align-items: center; gap: 4px; }
.rm-gs-picker {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 16px 4px; padding: 10px;
    border-radius: 14px; background: var(--rm-surface); max-height: 220px; overflow-y: auto;
}
.rm-gs-pick {
    height: 32px; padding: 0 12px; border-radius: 16px; border: none; cursor: pointer;
    background: var(--rm-surface2); color: var(--rm-text); font: inherit; font-size: 14px;
}
.rm-gs-pick--on { background: var(--rm-accent); color: #fff; font-weight: 600; }

/* ═══ «Архив»: строка вверху списка и отдельный экран ═══ */
html[data-layout="telegram"] .pm-friend-item.rm-arch-row .pm-avatar.rm-arch-av:not(.x):not(.y):not(.z) { background: var(--rm-surface2) !important; background-image: none !important; color: var(--rm-text2); display: flex; align-items: center; justify-content: center; }
html[data-layout="telegram"] .rm-badge-muted { background: var(--rm-elev) !important; color: var(--rm-text) !important; }
html[data-theme="light"][data-layout="telegram"] .rm-badge-muted { background: #C3C8D2 !important; color: #fff !important; }
.rm-arch-head { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 8px; }
.rm-arch-title { font-size: 20px; font-weight: 700; color: var(--rm-text); }
.rm-arch-out {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: none; cursor: pointer; flex-shrink: 0;
    color: var(--rm-text3); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
}
.rm-arch-out:hover { background: var(--rm-hover); color: var(--rm-accent); }
/* На экране «Архив» заголовок «Архив» встаёт вместо шапки «Чаты». */
html[data-layout="telegram"] .pm-sidebar:has(.rm-arch-head) > .pm-sidebar-header { display: none; }
html[data-layout="telegram"] .pm-sidebar > .rm-arch-head { order: -1; }

/* ═══ Профиль собеседника (ContactProfileScreen, макет «Профиль собеседника») ═══ */
.rm-cp { position: fixed; inset: 0; z-index: 1460; overflow-y: auto; background: var(--rm-bg); color: var(--rm-text); }
@media (min-width: 768px) {
    .rm-cp { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 64px)); height: min(860px, calc(100vh - 48px));
             border-radius: 20px; border: 1px solid var(--rm-divider); box-shadow: 0 24px 64px rgba(0,0,0,.55); }
}
.rm-cp-hero { position: relative; height: 340px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rm-cp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-cp-hero-initials { font-size: 88px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.rm-cp-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.rm-cp-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 0; }
.rm-cp-topbtn { border: none; background: rgba(0,0,0,.25); color: #fff; cursor: pointer; height: 40px; min-width: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0 10px; font: inherit; }
.rm-cp-edit { font-size: 16px; font-weight: 600; padding: 0 14px; }
.rm-cp-names { position: absolute; left: 16px; right: 16px; bottom: 18px; color: #fff; }
.rm-cp-name { font-size: 26px; font-weight: 700; line-height: 32px; text-shadow: 0 1px 6px rgba(0,0,0,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cp-status { font-size: 15px; opacity: .8; }
.rm-cp-body { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.rm-cp-rename { display: flex; gap: 8px; }
.rm-cp-rename-input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--rm-accent); background: var(--rm-field); color: var(--rm-text); font: inherit; font-size: 16px; outline: none; }
.rm-cp-rename-ok { border: none; border-radius: 12px; padding: 0 16px; background: var(--rm-grad); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.rm-cp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rm-cp-tile {
    height: 62px; border-radius: 14px; border: none; background: var(--rm-surface); color: var(--rm-accent); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 500;
}
.rm-cp-tile:hover:not(:disabled) { background: var(--rm-surface2); }
.rm-cp-tile:disabled { opacity: .4; cursor: default; }
.rm-cp-card { border-radius: 16px; background: var(--rm-surface); overflow: hidden; }
.rm-cp-line { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: none; background: none; color: inherit; font: inherit; text-align: left; position: relative; box-sizing: border-box; }
button.rm-cp-line { cursor: pointer; }
button.rm-cp-line:hover { background: var(--rm-hover); }
.rm-cp-line + .rm-cp-line::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--rm-divider); }
.rm-cp-line-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-cp-line-val { font-size: 16px; color: var(--rm-accent); overflow: hidden; text-overflow: ellipsis; }
.rm-cp-line-val--text { color: var(--rm-text); white-space: pre-wrap; }
.rm-cp-line-cap { font-size: 13px; color: var(--rm-text2); }
.rm-cp-line-ico { color: var(--rm-accent); flex-shrink: 0; }
.rm-cp-tabs { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--rm-divider); scrollbar-width: none; margin: 4px -16px 0; padding: 0 16px; }
.rm-cp-tabs::-webkit-scrollbar { display: none; }
.rm-cp-tab { position: relative; border: none; background: none; cursor: pointer; padding: 10px 0 11px; font: inherit; font-size: 15px; font-weight: 600; color: var(--rm-text2); white-space: nowrap; }
.rm-cp-tab--on { color: var(--rm-accent); }
.rm-cp-tab--on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--rm-accent); }
.rm-cp-body .rm-gs-grid { margin: -6px -16px 0; }
.rm-cp-body .rm-gs-row { margin: 0 -16px; width: calc(100% + 32px); text-decoration: none; }
.rm-cp-empty { padding: 28px 0; text-align: center; font-size: 14px; color: var(--rm-text2); }

/* ═══ Пустой список чатов (макет «Чаты · Пусто») ═══ */
.rm-chats-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px 24px; }
.rm-chats-empty-art {
    position: relative; width: 160px; height: 160px; border-radius: 50%; margin-bottom: 28px;
    background: radial-gradient(circle, var(--rm-accent-soft) 0%, transparent 70%);
}
.rm-chats-empty-b1 {
    position: absolute; left: 30px; top: 44px; width: 80px; height: 56px; border-radius: 18px 18px 18px 6px;
    background: var(--rm-grad); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(91,124,255,.35);
}
.rm-chats-empty-b2 {
    position: absolute; right: 22px; bottom: 34px; width: 60px; height: 38px; border-radius: 16px 16px 6px 16px;
    background: var(--rm-elev); display: flex; align-items: center; justify-content: center; gap: 5px;
}
.rm-chats-empty-b2 i { width: 7px; height: 7px; border-radius: 50%; background: var(--rm-text2); }
.rm-chats-empty-title { font-size: 20px; font-weight: 700; color: var(--rm-text); margin-bottom: 8px; }
.rm-chats-empty-sub { font-size: 15px; line-height: 21px; color: var(--rm-text2); max-width: 260px; margin-bottom: 28px; }
.rm-chats-empty-btn { width: min(310px, 100%); margin-bottom: 12px; }
.rm-chats-empty-btn--ghost { background: transparent; border: 1px solid var(--rm-divider); color: var(--rm-accent); }

/* ═══ Код-пароль (AppLockOverlay, макет «Код-пароль») ═══ */
.rm-lock {
    position: fixed; inset: 0; z-index: 10000; outline: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    background: linear-gradient(180deg, #1E2350 0%, #0E1117 70%); color: #fff;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.rm-lock-app {
    width: 72px; height: 72px; border-radius: 20px; background: var(--rm-grad); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 32px rgba(91,124,255,.45); margin-bottom: 36px;
}
.rm-lock-title { font-size: 18px; font-weight: 600; margin-bottom: 22px; min-height: 22px; }
.rm-lock-dots { display: flex; gap: 14px; margin-bottom: 40px; min-height: 14px; }
.rm-lock-dots--shake { animation: rm-shake .38s ease; }
@keyframes rm-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.rm-lock-dot { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid #fff; }
.rm-lock-dot--on { background: #fff; }
.rm-lock-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 20px; }
.rm-lock-key {
    width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: rgba(255,255,255,.1); color: #fff; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.rm-lock-key:active, .rm-lock-key:hover { background: rgba(255,255,255,.2); }
.rm-lock-key--flat { background: none; }
.rm-lock-digit { font-size: 32px; font-weight: 400; line-height: 36px; }
.rm-lock-letters { font-size: 10px; letter-spacing: 1.5px; color: var(--rm-text2); min-height: 12px; }
.rm-lock-forgot { margin-top: 28px; border: none; background: none; color: var(--rm-accent); font: inherit; font-size: 15px; cursor: pointer; }

/* ═══ Долгое нажатие на чат (макет 1.3): превью и меню ═══ */
.rm-qm-backdrop { position: fixed; inset: 0; z-index: 1700; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rm-qm {
    position: fixed; z-index: 1701; left: 20px; right: 20px; top: calc(60px + env(safe-area-inset-top, 0px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 480px; margin: 0 auto;
}
.rm-qm-card {
    width: 100%; max-height: 380px; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    border-radius: 24px; background: var(--rm-chatbg, var(--rm-bg)); box-shadow: 0 12px 32px rgba(0,0,0,.5);
    animation: rm-qm-in .16s ease-out;
}
@keyframes rm-qm-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.rm-qm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--rm-bg); border-bottom: 1px solid var(--rm-divider); }
.rm-qm-av { width: 40px !important; height: 40px !important; font-size: 15px; }
.rm-qm-names { min-width: 0; }
.rm-qm-name { font-size: 17px; font-weight: 600; color: var(--rm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-qm-status { font-size: 13px; color: var(--rm-text2); }
.rm-qm-status--on { color: var(--rm-accent); }
.rm-qm-msgs { flex: 1; min-height: 120px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px 12px 12px; }
.rm-qm-empty { margin: auto; font-size: 14px; color: var(--rm-text2); }
.rm-qm-bubble {
    align-self: flex-start; max-width: 80%; padding: 7px 10px; border-radius: 16px 16px 16px 6px;
    background: var(--rm-inbubble, var(--rm-surface2)); color: var(--rm-text); font-size: 16px; line-height: 21px;
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 8px; word-break: break-word;
}
.rm-qm-bubble--mine { align-self: flex-end; background: var(--rm-grad); color: #fff; border-radius: 16px 16px 6px 16px; }
.rm-qm-text { white-space: pre-wrap; }
.rm-qm-time { margin-left: auto; font-size: 11px; opacity: .7; }
.rm-qm-menu { width: 240px; border-radius: 16px; overflow: hidden; background: var(--rm-elev); box-shadow: 0 12px 32px rgba(0,0,0,.5); animation: rm-qm-in .16s ease-out; }
.rm-qm-item {
    width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
    border: none; background: none; color: var(--rm-text); font: inherit; font-size: 16px; cursor: pointer;
}
.rm-qm-item:active, .rm-qm-item:hover { background: var(--rm-hover); }
.rm-qm-item--danger { color: var(--rm-danger); }

/* ═══ Просмотр фото (макет «Просмотр фото») ═══ */
.pm-img-viewer-overlay--tg { background: #000 !important; }
.pm-img-viewer-overlay--tg > .pm-img-viewer-save,
.pm-img-viewer-overlay--tg > .pm-img-viewer-open,
.pm-img-viewer-overlay--tg > .pm-img-viewer-close,
.pm-img-viewer-overlay--tg > .pm-img-viewer-counter { display: none !important; }
@media (max-width: 767px) { .pm-img-viewer-overlay--tg > .pm-img-viewer-nav { display: none !important; } }
.rm-pv-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 4px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 10px; background: linear-gradient(180deg, rgba(0,0,0,.65), transparent);
}
.rm-pv-titles { flex: 1; min-width: 0; text-align: center; }
.rm-pv-name { font-size: 17px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-pv-sub { font-size: 13px; color: var(--rm-text2); }
.rm-pv-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: none; color: #fff; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.rm-pv-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.rm-pv-btn:disabled { opacity: .35; cursor: default; }
.rm-pv-foot {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px;
    padding: 24px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
.rm-pv-thumbs { display: flex; justify-content: center; align-items: center; gap: 4px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.rm-pv-thumbs::-webkit-scrollbar { display: none; }
.rm-pv-thumb { width: 36px; height: 36px; padding: 0; border: none; border-radius: 8px; overflow: hidden; cursor: pointer; flex-shrink: 0; opacity: .7; background: #222; }
.rm-pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-pv-thumb--on { width: 52px; height: 52px; border-radius: 10px; opacity: 1; box-shadow: 0 0 0 2px #fff; transform: translateY(-4px); }
.rm-pv-caption { padding: 0 16px; font-size: 16px; line-height: 22px; color: #fff; max-height: 88px; overflow-y: auto; white-space: pre-wrap; }
.rm-pv-bar { display: flex; justify-content: space-around; padding: 0 12px; }

/* ═══ Видеоплеер (макет «Видео-плеер») ═══ */
.rvp { position: fixed; inset: 0; z-index: 2100; background: #000; display: flex; align-items: center; justify-content: center; }
.rvp > video { width: 100%; max-height: 100%; object-fit: contain; }
.rvp-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 10px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.rvp-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 68px; height: 68px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.rvp-ico-play, .rvp--paused .rvp-ico-pause { display: none; }
.rvp--paused .rvp-ico-play { display: inline-flex; }
.rvp-ico-pause { display: inline-flex; }
.rvp-ico-muted, .rvp--muted .rvp-ico-vol { display: none; }
.rvp--muted .rvp-ico-muted { display: inline-flex; }
.rvp-ico-vol { display: inline-flex; }
.rvp-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 20px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.rvp-times { display: flex; justify-content: space-between; font-size: 13px; color: #fff; margin-bottom: 8px; }
.rvp-track { position: relative; height: 16px; cursor: pointer; touch-action: none; }
.rvp-track::before { content: ''; position: absolute; left: 0; right: 0; top: 6.5px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); }
.rvp-buf, .rvp-prog { position: absolute; left: 0; top: 6.5px; height: 3px; border-radius: 2px; width: 0; }
.rvp-buf { background: rgba(255,255,255,.5); }
.rvp-prog { background: #fff; }
.rvp-knob { position: absolute; top: 1px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; }
.rvp-row { display: flex; justify-content: space-around; align-items: center; margin-top: 6px; }
.rvp-row button { height: 44px; min-width: 44px; border: none; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 16px; font-weight: 600; }
.rvp-head, .rvp-play, .rvp-bottom { transition: opacity .25s ease; }
.rvp--hidden .rvp-head, .rvp--hidden .rvp-play, .rvp--hidden .rvp-bottom { opacity: 0; pointer-events: none; }
/* Видео в ленте: без системных контролов — кнопка «смотреть» по центру. */
html[data-layout="telegram"] .msg-video-wrap { position: relative; }
.msg-video-open {
    position: absolute; left: 50%; top: calc(50% - 16px); transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* ═══ Конфиденциальность (макет «Конфиденциальность»): строки «значение ›» ═══ */
.rm-pv-sec { padding: 16px 4px 6px; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--rm-text2); }
.rm-pv-card { border-radius: 16px; background: var(--rm-surface); overflow: hidden; }
.rm-pv-row {
    width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px;
    border: none; background: none; color: var(--rm-text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; position: relative;
}
.rm-pv-row + .rm-pv-row::before, .rm-pv-opts + .rm-pv-row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--rm-divider); }
.rm-pv-row:hover { background: var(--rm-hover); }
.rm-pv-label { flex: 1; min-width: 0; }
.rm-pv-val { color: var(--rm-text2); font-size: 15px; white-space: nowrap; }
.rm-pv-chev { color: var(--rm-text3); flex-shrink: 0; }
.rm-pv-opts { background: var(--rm-surface2); }
.rm-pv-opt {
    width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 28px;
    border: none; background: none; color: var(--rm-text); font: inherit; font-size: 15px; cursor: pointer;
}
.rm-pv-opt:hover { background: var(--rm-hover); }
.rm-pv-check { color: var(--rm-accent); }
.rm-pv-saved { margin-top: 12px; text-align: center; font-size: 13px; color: var(--rm-online); }
.rm-pv-hint { padding: 8px 4px 0; font-size: 13px; line-height: 18px; color: var(--rm-text2); }

/* Папки чатов: «+» в чипсах и подменю «Добавить в папку» */
.rm-chip--add { padding: 0 10px !important; display: inline-flex; align-items: center; }
.rm-qm-sub { background: var(--rm-surface2); }
.rm-qm-subitem {
    width: 100%; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 28px;
    border: none; background: none; color: var(--rm-text); font: inherit; font-size: 15px; cursor: pointer;
}
.rm-qm-subitem svg { color: var(--rm-accent); }
.rm-qm-subitem--new { color: var(--rm-accent); }
.rm-qm-subitem:hover { background: var(--rm-hover); }
.rm-qm-menu { max-height: calc(100vh - 470px - env(safe-area-inset-top, 0px)); overflow-y: auto; }

/* ═══ «Отправить позже» ═══ */
.rm-sch-backdrop { position: fixed; inset: 0; z-index: 1800; background: rgba(0,0,0,.55); }
.rm-sch {
    position: fixed; z-index: 1801; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: min(420px, calc(100vw - 24px)); box-sizing: border-box; padding: 18px 16px 16px; border-radius: 20px;
    background: var(--rm-surface, #161A22); color: var(--rm-text, #EEF1F6); box-shadow: 0 16px 40px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: 12px;
}
.rm-sch-title { font-size: 17px; font-weight: 600; text-align: center; }
.rm-sch-text { font-size: 14px; color: var(--rm-text2, #8C95A8); background: var(--rm-surface2, #1D222C); border-radius: 12px; padding: 8px 12px; max-height: 64px; overflow: hidden; white-space: pre-wrap; }
.rm-sch-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-sch-chip { height: 34px; padding: 0 12px; border-radius: 17px; border: none; cursor: pointer; background: var(--rm-surface2, #1D222C); color: var(--rm-text, #EEF1F6); font: inherit; font-size: 14px; }
.rm-sch-chip--on { background: var(--rm-accent-soft, rgba(91,124,255,.15)); color: var(--rm-accent, #5B7CFF); font-weight: 600; }
.rm-sch-input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--rm-divider, #262C38); background: var(--rm-field, #1D222C); color: var(--rm-text, #EEF1F6); font: inherit; font-size: 16px; color-scheme: dark; }
.rm-sch-err { font-size: 13px; color: var(--rm-danger, #FF5470); text-align: center; }
.rm-sch-actions { display: flex; gap: 10px; }
.rm-sch-actions .rm-btn { flex: 1; height: 46px; }
.rm-sch-bar { margin: 0 8px 6px; border-radius: 14px; background: var(--rm-surface, #2b2d31); box-shadow: 0 6px 18px rgba(0,0,0,.35); overflow: hidden; }
.rm-sch-bar-head { width: 100%; height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; background: none; color: var(--rm-accent, #5B7CFF); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rm-sch-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-top: 1px solid var(--rm-divider, rgba(255,255,255,.06)); font-size: 14px; color: var(--rm-text, #dcddde); }
.rm-sch-item-time { color: var(--rm-text2, #949ba4); flex-shrink: 0; font-size: 13px; }
.rm-sch-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-sch-item-x { width: 30px; height: 30px; border-radius: 50%; border: none; background: none; color: var(--rm-text3, #72767d); cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .rvp-times, .rvp-track, .rvp-row { max-width: 720px; margin-left: auto; margin-right: auto; } }