/* ============================================
       CSS-ПЕРЕМЕННЫЕ: ТЁМНАЯ ТЕМА (по умолчанию)
       ============================================ */
    :root {
        /* ================================================
           NEO ATMOS: ГЛУБОКИЙ КОСМОС + НЕОН
           Палитра «колодец» сохранена: дно чата темнее панелей, а сами панели —
           полупрозрачное стекло над живым фоном (блок «РЕДИЗАЙН NEO ATMOS»
           в конце файла: пятна, сетка, blur). Акценты — фиолет, циан и розовый.
           ================================================ */
        --bg: #05050a;
        /* дно чата: #messages-wrap и #messages */
        --bg-shell: #05050a;
        /* фон body; .app прозрачный — сквозь него видно неоновый фон */
        --bg-secondary: #0c0c18;
        /* плотная подложка сайдбара, карточек и модалок (стекло — сверху) */
        --bg-tertiary: #10101f;
        /* шапка чата, футер, модалки, вкладки */
        --bg-input: rgba(255, 255, 255, 0.055);
        /* фон полей ввода — светлее футера */
        --bg-hover: rgba(255, 255, 255, 0.07);
        --bg-active: rgba(255, 255, 255, 0.11);
        --bg-message: #14142a;
        /* пузыри чужих сообщений — чуть светлее дна, чтобы «парить» */
        --text: #e8e8f6;
        --text-muted: #9c9cbe;
        --text-dim: #6c6c8e;
        --text-bright: #ffffff;
        --accent: #b026ff;
        --accent-rgb: 176, 38, 255;
        --accent-hover: #c74dff;
        /* Неоновые акценты редизайна: 1 — фиолет/магента, 2 — циан, 3 — нежный розовый */
        --accent-neon-1: #b026ff;
        --accent-neon-1-rgb: 176, 38, 255;
        --accent-neon-2: #00f0ff;
        --accent-neon-2-rgb: 0, 240, 255;
        --accent-neon-3: #ff2a85;
        --accent-neon-3-rgb: 255, 42, 133;
        --danger: #ff3b5c;
        --danger-rgb: 255, 59, 92;
        --success: #22e0a1;
        --warning: #ffc857;
        /* Цвета ролей в каналах: владелец — золотой, админ — красный */
        --role-owner: #ffc857;
        --role-owner-rgb: 255, 200, 87;
        --role-admin: #ff4d6d;
        --role-admin-rgb: 255, 77, 109;
        --border: transparent;
        /* убираем жёсткие рамки */
        --border-light: rgba(255, 255, 255, 0.10);
        /* Строгая шкала скруглений: круглым элементам (аватары, иконочные кнопки,
           бейджи) остаётся только --radius-pill. Всё остальное — крупные панели
           и модалки (16), карточки / пузыри / инпуты (10), мелкие элементы (8). */
        --radius-pill: 999px;
        --radius-xl: 16px;
        --radius: 10px;
        --radius-sm: 8px;
        --radius-tail: 4px;
        --shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
        --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.42);
        /* тень пузыря: на почти чёрном дне сообщение должно «парить» */
        --bubble-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
        --panel-divider: rgba(255, 255, 255, 0.07);
        /* волосяная линия, отрывающая панель от «дна» чата */
        /* Стекло: единый рецепт панелей (сайдбар, шапка, футер, участники, модалки) */
        --glass-bg: rgba(18, 18, 34, 0.55);
        --glass-bg-strong: rgba(8, 8, 18, 0.62);
        --glass-border: rgba(255, 255, 255, 0.10);
        --glass-blur: 12px;
        --glass-saturate: 150%;
        /* Свечения в цвет неона: кнопки и акцентные элементы */
        --glow-1: 0 0 20px rgba(176, 38, 255, 0.35);
        --glow-2: 0 0 20px rgba(0, 240, 255, 0.28);
        --glow-3: 0 0 20px rgba(255, 42, 133, 0.30);
        /* Единый шрифт интерфейса (подключён в index.html) */
        --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
        --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        /* Системные «безопасные зоны»: «чёлка», статус-бар, полоска жеста.
           В браузере и PWA значения приходят из env(), а нативный мобильный
           клиент Tauri обнуляет их (body.tauri-mobile) — там отступы от баров
           вычитает нативный слой ДО WebView (MainActivity: insets → padding),
           поэтому CSS-компенсация не нужна и дала бы двойной отступ. */
        --atm-safe-top: env(safe-area-inset-top, 0px);
        --atm-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ============================================
       СВЕТЛАЯ ТЕМА
       ============================================ */
    body.light-theme {
        /* Мягкий тёплый свет: фон — серо-бежевый (не чистый белый, чтобы
           не резало глаза), текст — тёмно-серый (не чёрный). Панели и пузыри
           получают аккуратную рамку и лёгкую тень, стекло — матовое. */
        --bg: #f0ede7;
        /* дно чата — тёплый светло-серый */
        --bg-shell: #e9e5df;
        /* рамка приложения вокруг панелей */
        --bg-secondary: #faf8f4;
        /* сайдбар, карточки, модалки */
        --bg-tertiary: #f4f1ec;
        /* шапка чата, футер, вкладки */
        --bg-input: #fdfbf7;
        /* поля ввода — почти белые, но теплее чистого #fff */
        --bg-hover: rgba(72, 64, 54, 0.06);
        --bg-active: rgba(72, 64, 54, 0.10);
        --bg-message: #fffdfa;
        /* чужие пузыри — светлее дна */
        --text: #3b3630;
        /* тёмно-серый вместо чёрного: контраст мягче */
        --text-muted: #6d665d;
        --text-dim: #948d83;
        --text-bright: #26221e;
        /* Акцент светлой темы спокойнее неона: #b026ff на белом «слепит» */
        --accent: #6f52d9;
        --accent-rgb: 111, 82, 217;
        --accent-hover: #5b3fc4;
        /* Неон в светлой теме приглушён: циан и розовый — пастель, не кислота */
        --accent-neon-1: #7c5ce6;
        --accent-neon-1-rgb: 124, 92, 230;
        --accent-neon-2: #2f9fbe;
        --accent-neon-2-rgb: 47, 159, 190;
        --accent-neon-3: #dd5c8e;
        --accent-neon-3-rgb: 221, 92, 142;
        --danger: #d43a55;
        --danger-rgb: 212, 58, 85;
        --success: #118a63;
        --warning: #b07d12;
        /* В светлой теме золото и красный темнее — иначе плохо читаются на белом */
        --role-owner: #99700f;
        --role-owner-rgb: 153, 112, 15;
        --role-admin: #c8383a;
        --role-admin-rgb: 200, 56, 58;
        --border: transparent;
        --border-light: rgba(72, 64, 54, 0.14);
        --shadow: 0 12px 32px rgba(74, 60, 44, 0.12);
        --shadow-sm: 0 4px 14px rgba(74, 60, 44, 0.09);
        --bubble-shadow: 0 2px 6px rgba(74, 60, 44, 0.09);
        --panel-divider: rgba(72, 64, 54, 0.10);
        /* Матовое стекло: плотный тёплый «молок» — фон не просвечивает пятнами */
        --glass-bg: rgba(252, 250, 246, 0.84);
        --glass-bg-strong: rgba(248, 245, 240, 0.92);
        --glass-border: rgba(72, 64, 54, 0.10);
        --glass-blur: 10px;
        --glass-saturate: 115%;
        /* Свечения в светлой теме выключены: остаётся мягкая тень */
        --glow-1: 0 4px 16px rgba(74, 60, 44, 0.14);
        --glow-2: 0 4px 16px rgba(74, 60, 44, 0.12);
        --glow-3: 0 4px 16px rgba(74, 60, 44, 0.12);
    }

    /* ============================================
       БАЗОВЫЕ СТИЛИ
       ============================================ */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        /* Inter — общий шрифт интерфейса (подключён в index.html, Google Fonts,
           веса 300–700). Стек лежит в --font-sans: без сети/шрифта остаётся
           системный фолбэк, вёрстка не едет. */
        font-family: var(--font-sans);
        background: var(--bg-shell);
        /* рамка приложения — темнее панелей, но светлее дна чата */
        color: var(--text);
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        transition: background var(--transition), color var(--transition);
        -webkit-font-smoothing: antialiased;
    }

    /* ============================================
       ЛЕЙАУТ
       ============================================ */
    .app {
        display: flex;
        height: 100vh;
        height: 100dvh;
        padding: 12px;
        /* Отступы от краев экрана */
        gap: 12px;
        /* Расстояние между панелями */
        /* Прозрачная рамка: в отступах между панелями видно живой неоновый фон
           body (см. «РЕДИЗАЙН NEO ATMOS» в конце файла). position/z-index
           поднимают контент над фиксированными слоями ::before/::after. */
        background: transparent;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
    }

    .sidebar {
        width: 280px;
        background: var(--bg-secondary);
        display: flex;
        flex-direction: column;
        position: relative;
        border-radius: var(--radius-xl);
        overflow: hidden;
        /* Чтобы внутренние элементы не вылезали за овал */
        box-shadow: var(--shadow);
        /* Красивая тень */
        z-index: 2;
    }

    .chat {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: transparent;
        /* Сам чат прозрачный, панели внутри — цветные */
        position: relative;
        gap: 12px;
        /* Расстояние между шапкой, сообщениями и полем ввода */
    }

    /* ============================================
       САЙДБАР
       ============================================ */
    .sidebar-header {
        /* Компактная бренд-зона: логотип больше не «парит» над списком */
        padding: 14px 16px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Волосяная линия отрывает бренд-зону от списка чатов */
        border-bottom: 1px solid var(--panel-divider);
    }

    .sidebar-header h2 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        will-change: transform;
    }

    .logo-icon {
        width: 22px;
        height: 22px;
        color: var(--accent);
        animation: logoGlow 3s infinite alternate;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    }

    .logo-text {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 1.2px;
        background: linear-gradient(135deg, var(--text-bright) 0%, var(--accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.2);
        transition: filter 0.3s ease;
    }

    /* Премиальный эффект при наведении курсора */
    #atmos-logo:hover .logo-icon {
        transform: rotate(-15deg) scale(1.1);
        animation: none; /* Останавливаем пульсацию на время ховера */
        filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 1));
    }

    #atmos-logo:hover .logo-text {
        filter: brightness(1.3);
    }

    @keyframes logoGlow {
        0% {
            filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.3));
            transform: scale(1);
        }
        100% {
            filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.8));
            transform: scale(1.05);
        }
    }

    /* ============================================
       ПЛОСКИЕ СТРОКИ «ГЛАВНАЯ» / «ИЗБРАННОЕ»
       ============================================ */
    /* Раскладку задаёт .channel-btn; здесь только внешние отступы.
       Плоский вид (прозрачный фон, ховер, иконка 18px) — в блоке
       «ДОПОЛНИТЕЛЬНЫЕ ФИНАЛЬНЫЕ СТИЛИ» ниже, где правила перебивают .channel-btn. */
    .general-chat-btn {
        margin: 0 12px 4px;
        width: calc(100% - 24px);
    }

    /* ============================================
       ТАБЫ САЙДБАРА (Беседы / Каналы)
       ============================================ */
    /* Плоский сегмент-контрол: подложка --bg-tertiary, радиус 8px (не пилюля),
       высота 36px; активный таб — только --bg-active, без свечения */
    .sidebar-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        background: var(--bg-tertiary);
        margin: 0 12px 8px;
        border-radius: var(--radius-sm);
        height: 36px;
        box-sizing: border-box;
    }

    .sidebar-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 100%;
        padding: 0 10px;
        /* Кнопка занимает всю высоту контейнера */
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        outline: none;
        /* УБИРАЕМ БЕЛУЮ РАМКУ ПРИ КЛИКЕ */
    }

    .sidebar-tab:hover {
        background: var(--bg-hover);
        color: var(--text);
    }

    .sidebar-tab.active {
        background: var(--bg-active);
        color: var(--text-bright);
        /* Без тени и свечения: активный таб отличается только фоном */
        box-shadow: none;
    }

    .sidebar-tab .icon {
        width: 16px;
        height: 16px;
        display: block;
    }

    .sidebar-tab-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: tabFadeIn 0.22s ease;
    }

    .sidebar-tab-content.hidden {
        display: none;
    }

    @keyframes tabFadeIn {
        from {
            opacity: 0;
            transform: translateY(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #user-list,
    #channel-list {
        flex: 1;
        overflow-y: auto;
        /* Боковые отступы списка убраны: строки шире, зона клика больше.
           Внутренние 8px у .user-item компенсируют это визуально. */
        padding: 0 4px;
    }

    #user-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 4px 4px;
    }

    .user-item {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Строка списка «Беседы»: 9px по вертикали — по друзьям и беседам
           легко попасть пальцем, а имя и превью не слипаются в одну кашу.
           Раньше было 6px и 28px аватар — строки выглядели слишком мелкими. */
        padding: 9px 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: var(--text-muted);
        font-size: 13.5px;
        transition: background var(--transition), color var(--transition);
        margin-bottom: 2px;
    }

    .user-item:hover {
        /* Только фон: строка не сдвигается, список не «дёргается» при переборе мышью */
        background: var(--bg-hover);
        color: var(--text);
        transform: none;
    }

    .user-item.me {
        color: var(--text);
        font-weight: 600;
    }

    .user-item.active {
        /* Только подложка: акцентную полоску слева получают исключительно
           закреплённые строки (.user-item.pinned), иначе каждый открытый чат
           выглядел бы как закреплённый. */
        background: rgba(var(--accent-rgb), 0.14);
        color: var(--text-bright);
    }

    .user-item.online {
        color: var(--text);
    }

    /* Закреплённая беседа: акцентная полоска слева + лёгкий фон.
       Такие строки сортируются первыми и не уезжают вниз при новых сообщениях. */
    .user-item.pinned {
        background: var(--bg-hover);
        box-shadow: inset 3px 0 0 var(--accent);
    }

    .user-item.pinned:hover {
        background: var(--bg-hover);
    }

    .user-item.pinned.active {
        /* Закреп + открыт: полоска уже есть, подложку усиливаем акцентом */
        background: rgba(var(--accent-rgb), 0.2);
    }

    .user-item .pin-icon {
        width: 14px;
        height: 14px;
        margin-right: 5px;
        flex-shrink: 0;
        color: var(--accent);
        vertical-align: -2px;
    }

    /* Двухстрочная строка беседы: имя + время, превью + бейдж */
    .user-item-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .user-item-top {
        display: flex;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
    }

    .user-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* Имя в строке — 13px: список остаётся компактным, но читаемым */
        font-size: 13px;
        font-weight: 600;
    }

    .user-item-time {
        flex-shrink: 0;
        margin-left: auto;
        font-size: 11px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .user-item-bottom {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .user-item-preview {
        flex: 1;
        min-width: 0;
        /* Превью последнего сообщения — 11.5px: строка остаётся двухстрочной,
           но текст не приходится разглядывать */
        font-size: 11.5px;
        line-height: 1.35;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-item-preview.typing {
        color: var(--accent);
        font-style: italic;
    }

    .user-item-bottom .unread-badge {
        margin-left: auto;
    }

    /* Аватарки в списках «Беседы» / «Каналы» — 32px (строка стала выше).
       app.js рисует аватар инлайново с тем же размером
       (avatarHtml(u, 32) / conversationAvatarHtml(conv, 32)); !important
       оставлен страховкой от инлайновых значений другого размера. */
    .user-item .avatar-wrap {
        width: 32px;
        height: 32px;
    }

    .user-item .avatar-wrap .avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* Иконка группы внутри круглого аватара беседы под размер 32px */
    .user-item .conv-avatar .icon {
        width: 16px !important;
        height: 16px !important;
    }

    .channel-btn {
        width: 100%;
        text-align: left;
        background: transparent;
        border: none;
        color: var(--text-muted);
        /* Как и строки бесед: компактнее и без «прыжка» при наведении */
        padding: 9px 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background var(--transition), color var(--transition);
        margin-bottom: 2px;
        overflow: hidden; /* Важно для обрезки */
    }

    .channel-name-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .channel-btn:hover {
        /* Фон вместо сдвига — как у строк бесед */
        background: var(--bg-hover);
        color: var(--text);
        transform: none;
    }

    .channel-btn.active {
        /* Как и у беседы: активный канал — только акцентная подложка,
           полоска слева зарезервирована за закреплёнными строками. */
        background: rgba(var(--accent-rgb), 0.14);
        color: var(--text-bright);
    }

    .channel-delete {
        background: transparent;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 14px;
        padding: 2px 6px;
        margin-left: auto;
        opacity: 0;
        border-radius: 50%;
        transition: opacity var(--transition), background var(--transition), color var(--transition);
    }

    .channel-btn:hover .channel-delete {
        opacity: 1;
    }

    .channel-delete:hover {
        color: var(--danger);
        background: rgba(var(--danger-rgb), 0.15);
    }

    /* ============================================
       КАТЕГОРИИ КАНАЛОВ (сворачивание, как в Discord)
       ============================================ */
    .channel-category-block {
        margin-bottom: 4px;
    }

    .channel-category {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 100%;
        margin: 8px 0 2px;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-dim);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        transition: color var(--transition), background var(--transition);
    }

    .channel-category:hover {
        color: var(--text-muted);
        background: var(--bg-hover);
    }

    /* Разделитель категорий: отступ плюс волосяная линия.
       Соседний селектор нужен, чтобы у первой категории линии не было. */
    .channel-category-block + .channel-category-block .channel-category {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--panel-divider);
    }

    /* Кружок-стрелка: единственная зона сворачивания категории.
       Клик по заголовку открывает текстовый канал, клик по кружку — сворачивает. */
    .arrow-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background var(--transition);
    }

    .arrow-circle .arrow {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        opacity: 0.8;
        transition: transform 0.2s ease;
    }

    .channel-category:hover .arrow-circle {
        background: var(--bg-active);
    }

    /* Свёрнутая категория — стрелка смотрит вправо */
    .channel-category.collapsed .arrow-circle .arrow {
        transform: rotate(-90deg);
    }

    .channel-category-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .channel-category .category-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        opacity: 0.75;
    }

    /* Индикатор «сколько человек в голосовых» в заголовке категории */
    .channel-category-voice {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--success);
    }

    .channel-category-voice .icon {
        width: 12px;
        height: 12px;
    }

    /* Бейдж непрочитанных в заголовке свёрнутой категории */
    .channel-category .unread-badge {
        margin-left: 0;
        animation: none;
    }

    /* Каналы категории: класс collapsed полностью прячет список */
    .channel-group-container.collapsed {
        display: none;
    }

    /* ============================================
       ПРАВАЯ ЧАСТЬ
       ============================================ */
    .chat header {
        /* Компактная шапка: меньше вертикали — больше места сообщениям */
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Панель светлее «дна» чата: шапка и область сообщений разной глубины */
        background: var(--bg-tertiary);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm), inset 0 -1px 0 var(--panel-divider);
        /* Легкая тень + волосяная линия по нижней кромке */
        position: relative;
        z-index: 10;
    }

    /* Имя чата (#chat-title) — 16px, жирное. Подзаголовок (.chat-subtitle) — 12px muted. */
    .chat header h1 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-bright);
    }

    /* Кнопки шапки: круглые, без фона, подсветка только по наведению */
    .chat header button {
        background: transparent;
        color: var(--text);
        border: none;
        /* 36×36 — аккуратные круглые кнопки, иконка строго по центру */
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        padding: 0;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        box-shadow: none;
        transition: background var(--transition), transform 0.15s;
    }

    .chat header button:hover {
        background: var(--bg-hover);
        transform: none;
        box-shadow: none;
    }

    /* Иконки звонка / видео / участников / поиска — один размер внутри кнопки */
    .chat header button .icon {
        width: 18px;
        height: 18px;
    }

    .header-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    #pinned-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        margin: 0 24px;
        background: var(--bg-secondary);
        border-radius: var(--radius);
        font-size: 13px;
        box-shadow: var(--shadow-sm);
        transition: background var(--transition), box-shadow var(--transition);
    }

    #pinned-bar.hidden {
        display: none;
    }

    .pinned-label {
        color: var(--text-muted);
    }

    .pinned-name {
        color: var(--accent);
        font-weight: 600;
    }

    .pinned-text {
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }

    #pinned-bar button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 16px;
        padding: 4px 8px;
        border-radius: 50%;
        transition: color var(--transition), background var(--transition);
    }

    #pinned-bar button:hover {
        color: var(--danger);
        background: rgba(var(--danger-rgb), 0.1);
    }

    #search-bar {
        display: flex;
        gap: 8px;
        padding: 12px 24px;
        background: var(--bg-tertiary);
        /* Панель поиска — из того же слоя, что шапка и футер */
        transition: background var(--transition);
        /* Панель не сжимается и не давит на #messages-wrap: тот забирает
           всё оставшееся место (flex: 1) и корректно уменьшается */
        flex: 0 0 auto;
        flex-shrink: 0;
        min-height: 0;
        box-sizing: border-box;
    }

    #search-bar.hidden {
        display: none;
    }

    #search-input {
        flex: 1;
        background: transparent; /* Убираем свой фон, чтобы сливался с панелью */
        border: none;
        color: var(--text);
        padding: 12px 20px;
        border-radius: 12px;
        font-size: 14px;
        outline: none;
        box-shadow: none; /* Убираем тень у самого инпута */
    }

    /* Убираем синюю обводку у инпута при фокусе */
    #search-input:focus {
        box-shadow: none;
    }

    #search-input::placeholder {
        color: var(--text-dim);
    }

    #search-bar button {
        background: var(--bg-secondary);
        color: var(--text);
        border: none;
        padding: 0 16px;
        border-radius: 12px;
        cursor: pointer;
        font-size: 14px;
        transition: background var(--transition);
    }

    #search-bar button:hover {
        background: var(--bg-hover);
    }

    #messages-wrap {
        flex: 1;
        position: relative;
        overflow: hidden;
        display: flex;
        padding: 0;
        /* Убрали жесткие отступы */
        background: var(--bg);
        /* Дно мессенджера: самый тёмный фон, панели парят над ним */
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        /* Без min-height: 0 flex-элемент не сжимается под открытый поиск */
        min-height: 0;
    }

    #messages {
        flex: 1;
        overflow-y: auto;
        padding: 20px 24px;
        background: var(--bg);
        /* тот же «тёмный колодец», что и у контейнера */
    }

    #scroll-down {
        position: absolute;
        right: 24px;
        bottom: 20px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        border: none;
        font-size: 20px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
        z-index: 10;
        transition: transform 0.2s, opacity 0.2s;
    }

    #scroll-down.visible {
        display: flex;
        animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #scroll-down:hover {
        background: var(--accent-hover);
        transform: scale(1.1);
    }

    /* ============================================
       СООБЩЕНИЯ
       ============================================ */
    /* ============================================
       СООБЩЕНИЯ (БАББЛЫ)
       ============================================ */
    .msg {
        margin-bottom: 16px;
        display: flex;
        width: 100%;
        justify-content: flex-start;
        /* По умолчанию слева */
    }

    /* Свои сообщения прижимаем вправо (фон только у пузыря, не у строки!) */
    .msg.mine {
        justify-content: flex-end;
        background: transparent;
        /* ⚠️ Убираем растянутый фон */
        box-shadow: none;
        /* Убираем тень у невидимой строки */
    }

    .msg-row {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        max-width: 75%;
        /* Ограничивает пузырь 75% ширины экрана */
        width: fit-content;
        /* Пузырь сжимается под текст */
    }

    /* Переворачиваем строку для своих: аватарка справа */
    .msg.mine .msg-row {
        flex-direction: row-reverse;
    }

    /* Сам пузырь с фоном */
    .msg-body {
        background: var(--bg-message);
        padding: 10px 14px;
        /* Чуть увеличили отступы внутри пузыря */
        border-radius: 10px;
        border-bottom-left-radius: var(--radius-tail);
        /* Хвостик слева */
        min-width: 0;
        display: flex;
        flex-direction: column;
        box-shadow: var(--bubble-shadow);
        /* Мягкая тень: 0 2px 8px rgba(0,0,0,0.2) из токена */
        position: relative;

        /* Добавляем эти строки, чтобы длинные слова не вылезали за края */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Свой пузырь: сплошной акцентный фон и белый текст (Telegram-style).
       Внутренние отступы — общие, из .msg-body, поэтому свои и чужие выглядят одинаково. */
    .msg.mine .msg-body {
        background: var(--accent);
        color: #fff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: var(--radius-tail);
        /* Хвостик справа */
    }

    /* Внутри своего пузыря весь текст белый — иначе серый не читается на акценте */
    .msg.mine .msg-body .text,
    .msg.mine .msg-body .edited-mark,
    .msg.mine .msg-body .reply-quote-name,
    .msg.mine .msg-body .reply-quote-text,
    .msg.mine .msg-body .forwarded-label,
    .msg.mine .msg-body .forwarded-label b {
        color: #fff !important;
    }

    /* Ник в своём пузыре приходит инлайновым цветом из nickColors — гасим его */
    .msg.mine .msg-body .head .name {
        color: #fff !important;
    }

    /* Время и служебные подписи — чуть приглушённые, но тоже белые */
    .msg.mine .msg-body .time,
    .msg.mine .msg-body .voice-time {
        color: rgba(255, 255, 255, 0.75);
    }

    /* Цитата ответа внутри акцентного пузыря: полоска не сливается с фоном */
    .msg.mine .msg-body .reply-quote {
        background: rgba(0, 0, 0, 0.15);
        border-left-color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Шапка сообщения (Имя + Время + Кнопки) */
    .msg .head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 4px;
    }

    /* Имя и время */
    .msg .name {
        font-weight: 700;
        color: var(--accent);
        font-size: 13px;
    }

    .msg .time {
        color: var(--text-dim);
        font-size: 11px;
    }

    /* В своих сообщениях прижимаем время вправо */
    .msg.mine .head {
        justify-content: flex-end;
    }

    /* Сам текст */
    .msg .text {
        color: var(--text);
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* ============================================
       MARKDOWN В СООБЩЕНИЯХ (parseMarkdown в app.js)
       Текст экранируется до разбора, поэтому внутри этих тегов только
       пользовательские символы: стили ничего не «лечат» и не влияют на XSS.
       ============================================ */

    /* Инлайн-код: `текст` */
    .msg .text code {
        background: var(--bg-tertiary);
        padding: 2px 4px;
        border-radius: 4px;
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 0.9em;
    }

    /* Блок кода: ```текст``` — длинная строка скроллится, пузырь не растягивает */
    .msg .text pre {
        margin: 6px 0;
        max-width: 100%;
        overflow-x: auto;
        white-space: pre;
    }

    .msg .text pre code {
        display: block;
        padding: 10px;
        overflow-x: auto;
        border-radius: 8px;
        background: var(--bg-tertiary);
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 0.9em;
        line-height: 1.45;
    }

    /* Спойлер: текст скрыт до клика, класс .revealed ставит inline-обработчик
       из parseMarkdown (background/color меняются плавно). */
    .msg .text .spoiler {
        background: var(--text-dim);
        color: transparent;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .msg .text .spoiler.revealed {
        background: transparent;
        color: inherit;
    }

    /* Свои пузыри: фон акцентный, а текст белый по !important-правилу .msg.mine.
       Коду возвращаем цвет темы — иначе на светлой теме белое на светлом
       (--bg-tertiary: #f3f5f8) не читается. */
    .msg.mine .text code,
    .msg.mine .text pre code {
        color: var(--text);
    }

    /* Внутри непрочитанного спойлера прячем и код: у него свой фон и цвет. */
    .msg .text .spoiler:not(.revealed) code {
        background: transparent;
        color: transparent;
    }

    .edited-mark {
        color: var(--text-dim);
        font-size: 11px;
        font-style: italic;
    }

    .avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        font-weight: 600;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s;
    }

    .msg:hover .avatar {
        transform: scale(1.05);
    }

    .unread-badge {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: var(--danger);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        /* Бейджи — единственное место, где остаётся пилюля */
        border-radius: var(--radius-pill);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        box-shadow: 0 0 0 2px var(--bg-secondary);
        animation: badgeBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), pulse 2.5s infinite 0.45s;
        line-height: 1;
        flex-shrink: 0;
    }

    @keyframes badgeBounce {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        60% {
            transform: scale(1.25);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* ============================================
       ФУТЕР
       ============================================ */
    footer {
        padding: 10px 16px;
        display: flex;
        gap: 10px;
        background: var(--bg-tertiary);
        border-radius: 16px;
        /* Широкий овал */
        box-shadow: var(--shadow-sm), inset 0 1px 0 var(--panel-divider);
        /* Волосяная линия сверху отрывает футер от «дна» чата */
        align-items: center;
    }

    #input {
        flex: 1;
        background: transparent;
        /* Прозрачный, чтобы сливался с футером */
        border: none;
        color: var(--text);
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 16px;
        outline: none;
        resize: none;
        font-family: inherit;
        max-height: 140px;
        line-height: 1.5;
    }

    #input:focus {
        background: var(--bg-input);
        /* Акцентное свечение: поле «просыпается» при вводе */
        box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35), 0 0 12px rgba(var(--accent-rgb), 0.18);
    }

    /* Подсветка при клике */
    #input::placeholder {
        color: var(--text-dim);
    }

    /* Кнопки футера (скрепка, смайлик, отправка) оформляет единая система:
       .btn-icon для иконок и .action-btn для умной кнопки записи/отправки. */

    #reply-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-secondary);
        padding: 10px 24px;
        margin: 0 24px;
        border-radius: var(--radius);
        gap: 10px;
        box-shadow: var(--shadow-sm);
        transition: background var(--transition);
    }

    #reply-bar.hidden {
        display: none;
    }

    .reply-bar-content {
        display: flex;
        gap: 8px;
        align-items: baseline;
        overflow: hidden;
        flex: 1;
    }

    .reply-bar-label {
        color: var(--text-muted);
        font-size: 13px;
    }

    .reply-bar-name {
        color: var(--accent);
        font-weight: 600;
        font-size: 13px;
    }

    .reply-bar-text {
        color: var(--text-muted);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #reply-bar button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 16px;
        padding: 4px 8px;
        border-radius: 50%;
        transition: color var(--transition), background var(--transition);
    }

    #reply-bar button:hover {
        color: var(--danger);
        background: rgba(var(--danger-rgb), 0.1);
    }

    /* ============================================
       ВСПЛЫВАЮЩИЕ МЕНЮ
       ============================================ */
    .reaction-picker {
        position: fixed;
        background: var(--bg-secondary);
        border: none;
        border-radius: var(--radius);
        padding: 8px;
        display: flex;
        gap: 4px;
        z-index: 1000;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .reaction-picker button {
        background: transparent;
        border: none;
        font-size: 22px;
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 50%;
        transition: background var(--transition), transform 0.15s;
    }

    .reaction-picker button:hover {
        background: var(--bg-hover);
        transform: scale(1.2);
    }

    .status-menu {
        position: absolute;
        background: var(--bg-secondary);
        border: none;
        border-radius: var(--radius);
        padding: 6px;
        z-index: 1000;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        min-width: 180px;
        animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .status-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: transparent;
        border: none;
        color: var(--text);
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 14px;
        text-align: left;
        transition: background var(--transition), transform 0.15s;
    }

    .status-menu button:hover {
        background: var(--bg-hover);
        transform: translateX(2px);
    }

    .status-menu button.active {
        background: var(--bg-active);
    }

    /* Автодополнение @ */
    .mention-suggest {
        position: fixed;
        background: var(--bg-secondary);
        border: none;
        border-radius: var(--radius);
        padding: 6px;
        z-index: 1000;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        max-height: 240px;
        overflow-y: auto;
        min-width: 200px;
        animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mention-suggest button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: transparent;
        border: none;
        color: var(--text);
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 14px;
        text-align: left;
        transition: background var(--transition), transform 0.15s;
    }

    .mention-suggest button:hover,
    .mention-suggest button.active {
        background: var(--bg-hover);
        transform: translateX(2px);
    }

    /* ============================================
       ЭКРАН ВХОДА: СПЛИТ-ЛЕЙАУТ
       Левая половина — бренд и возможности, правая — стеклянная карточка формы.
       ============================================ */
    /* Экран входа всегда тёмный (как в Discord/Notion), поэтому внутри него
       переопределяются текстовые и фоновые токены: иначе светлая тема покрасила
       бы текст в тёмный на тёмном стекле. Значения — из тёмной палитры. */
    #auth-screen {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        z-index: 2000;
        --text: #e8e8f6;
        --text-muted: #9c9cbe;
        --text-bright: #ffffff;
        --bg-tertiary: rgba(255, 255, 255, 0.05);
        --bg-secondary: rgba(18, 18, 34, 0.72);
        --bg-hover: rgba(255, 255, 255, 0.08);
        --bg-active: rgba(255, 255, 255, 0.12);
        --glass-bg: rgba(18, 18, 34, 0.55);
        --glass-border: rgba(255, 255, 255, 0.10);
        /* Тот же неоновый космос, что и за приложением: фиолетовое зарево слева,
           циановое справа и глубокая подложка #05050a. */
        background:
            radial-gradient(60% 60% at 15% 10%, rgba(176, 38, 255, 0.30), transparent 70%),
            radial-gradient(55% 55% at 85% 90%, rgba(0, 240, 255, 0.20), transparent 70%),
            linear-gradient(135deg, #07070f 0%, #0b0b1a 50%, #05050a 100%);
        background-size: 200% 200%;
        animation: authGradient 15s ease infinite;
    }

    /* Медленный «перелив» градиента: 200% × 200% и сдвиг позиции */
    @keyframes authGradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    #auth-screen.hidden {
        display: none;
    }

    .auth-split {
        display: flex;
        width: 100%;
        height: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px;
        gap: 40px;
        align-items: center;
        justify-content: center;
    }

    /* Левая половина: логотип, слоган и список возможностей */
    .auth-brand {
        flex: 1;
        max-width: 500px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        color: var(--text);
    }

    .auth-brand-logo {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .auth-brand-logo svg {
        width: 48px;
        height: 48px;
        padding: 10px;
        flex-shrink: 0;
        border-radius: 10px;
        color: #fff;
        background: linear-gradient(135deg, var(--accent), #8a5cf6);
        box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.45);
    }

    /* Градиентный текст с фолбэком: без поддержки background-clip останется
       сплошной светлый цвет */
    .auth-brand-logo span {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: 2px;
        line-height: 1;
        color: #f2f3f5;
        background: linear-gradient(135deg, #ffffff 0%, #b9c0f5 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .auth-brand-title {
        margin: 8px 0 0;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--text-bright);
    }

    .auth-brand-sub {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-muted);
    }

    .auth-features {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .auth-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--text);
    }

    .auth-features svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--accent);
    }

    /* Правая половина: стеклянная карточка формы */
    .auth-form-wrap {
        flex: 1;
        max-width: 420px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-box {
        width: 100%;
        max-width: 420px;
        padding: 32px;
        border-radius: 12px;
        background: rgba(43, 45, 49, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .auth-form-title {
        margin: 0 0 20px;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        color: var(--text-bright);
    }

    .auth-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 20px;
        padding: 4px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.25);
    }

    .auth-tabs button {
        flex: 1;
        background: transparent;
        color: var(--text-muted);
        border: none;
        padding: 10px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: background var(--transition), color var(--transition);
    }

    .auth-tabs button:hover {
        background: var(--bg-hover);
    }

    .auth-tabs button.active {
        background: var(--accent);
        color: #fff;
    }

    .auth-form input {
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: var(--text);
        padding: 14px 18px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        margin-bottom: 12px;
        outline: none;
        box-sizing: border-box;
        transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .auth-form input::placeholder {
        color: var(--text-muted);
    }

    .auth-form input:focus {
        border-color: rgba(var(--accent-rgb), 0.6);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
    }

    .auth-form button {
        width: 100%;
        background: var(--accent);
        color: #fff;
        border: none;
        padding: 14px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        margin-top: 4px;
        transition: background var(--transition), transform 0.15s, box-shadow var(--transition);
    }

    .auth-form button:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
    }

    .auth-form button:active {
        transform: scale(0.97);
    }

    .auth-form button:disabled {
        background: var(--bg-active);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .auth-error {
        background: var(--danger);
        color: #fff;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        margin-bottom: 12px;
        animation: shake 0.4s;
    }

    .auth-error.hidden {
        display: none;
    }

    /* Мобилка: остаётся только карточка формы, брендовая половина скрыта */
    @media (max-width: 900px) {
        .auth-split {
            flex-direction: column;
            padding: 20px;
            gap: 20px;
        }

        .auth-brand {
            display: none;
        }

        .auth-form-wrap {
            max-width: 100%;
        }

        .auth-box {
            padding: 24px;
        }
    }

    .app.hidden {
        display: none;
    }

    /* ============================================
       МОДАЛЬНЫЕ ОКНА
       ============================================ */
    .modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3000;
        animation: fadeIn 0.2s;
        backdrop-filter: blur(4px);
    }

    .modal.hidden {
        display: none;
    }

        /* Модалки, открываемые из настроек, должны быть поверх настроек */
    #profile-modal,
    #change-password-modal,
    #delete-account-modal {
        z-index: 3100;
    }

    .modal-box {
        background: var(--bg-secondary);
        padding: 32px 28px;
        border-radius: var(--radius-xl);
        width: 360px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition: background var(--transition);
    }

    .modal-box h2 {
        margin: 0 0 20px;
        color: var(--text-bright);
        font-size: 20px;
    }

    .modal-box input {
        width: 100%;
        background: var(--bg-tertiary);
        border: none;
        color: var(--text);
        padding: 14px 18px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        margin-bottom: 12px;
        outline: none;
        box-sizing: border-box;
        transition: background var(--transition), box-shadow var(--transition);
    }

    .modal-box input:focus {
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
    }

    .modal-actions {
        display: flex;
        gap: 10px;
        margin-top: 12px;
    }

    /* Внешний вид кнопок задаёт единая система .btn (см. конец файла):
       здесь остаётся только раскладка — кнопки делят строку поровну. */
    .modal-actions .btn {
        flex: 1;
    }

    /* ============================================
       АНИМАЦИИ
       ============================================ */
    @keyframes messageIn {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes popIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes shake {

        0%,
        100% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(-6px);
        }

        75% {
            transform: translateX(6px);
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.4;
        }
    }

    /* Скрываем стандартный скроллбар, но оставляем прокрутку */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--bg-active);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--bg-hover);
    }

    /* ============================================
       ИКОНКИ (SVG)
       ============================================ */
    .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        stroke-width: 2;
        fill: none;
        stroke: currentColor;
        transition: transform 0.2s;
    }

    button:hover .icon {
        transform: scale(1.1);
    }

    #typing-indicator {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: var(--text-muted);
        font-weight: normal;
        margin-left: 10px;
    }

    #typing-indicator.hidden {
        display: none;
    }

    /* ============================================
       ДРУЗЬЯ: ЗАЯВКИ И МЕТКИ
       ============================================ */
    .section-label {
        padding: 10px 12px 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-dim);
        letter-spacing: 0.8px;
    }

    .friend-request {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        background: rgba(var(--accent-rgb), 0.08);
        margin-bottom: 6px;
    }

    .friend-request-info {
        flex: 1;
        min-width: 0;
    }

    .friend-request-info .name {
        font-weight: 600;
        font-size: 13px;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .friend-request-info .meta {
        font-size: 11px;
        color: var(--text-muted);
    }

    .friend-request-actions {
        display: flex;
        gap: 4px;
    }

    .friend-request-actions button {
        background: var(--bg-tertiary);
        border: none;
        color: var(--text);
        padding: 4px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        transition: background var(--transition), color var(--transition);
    }

    .friend-request-actions button.accept {
        background: var(--success);
        color: #fff;
    }

    .friend-request-actions button.accept:hover {
        background: #1f8e4c;
    }

    .friend-request-actions button.decline:hover {
        background: var(--danger);
        color: #fff;
    }

    /* ============================================
       ВЛОЖЕНИЯ
       ============================================ */
    /* Кнопка-скрепка живёт в единой системе .btn-icon (см. конец файла):
       прежние правила с #attach-btn удалены, чтобы не спорить с ней. */

    #attach-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--bg-secondary);
        padding: 10px 24px;
        margin: 0 24px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        transition: background var(--transition);
    }

    #attach-bar.hidden {
        display: none;
    }

    #attach-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow: hidden;
    }

    .attach-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-tertiary);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 12px;
        color: var(--text);
        max-width: 260px;
    }

    .attach-chip .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attach-chip .size {
        color: var(--text-muted);
        font-size: 11px;
    }

    .attach-chip button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        font-size: 14px;
    }

    .attach-chip button:hover {
        color: var(--danger);
    }

    .attach-chip img {
        width: 24px;
        height: 24px;
        object-fit: cover;
        border-radius: 4px;
    }

    #attach-bar>button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 50%;
        font-size: 16px;
    }

    #attach-bar>button:hover {
        color: var(--danger);
        background: rgba(var(--danger-rgb), 0.1);
    }

    /* Вложения в сообщении */
    .msg-attachments {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 6px;
    }

    .msg-attachment-image {
        max-width: 100%;
        max-height: 320px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        object-fit: cover;
        display: block;
        transition: transform 0.15s, box-shadow var(--transition);
    }

    .msg-attachment-image:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    .msg-attachment-video {
        max-width: 100%;
        max-height: 320px;
        border-radius: var(--radius-sm);
        display: block;
    }

    .msg-attachment-file {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--bg-tertiary);
        border-radius: var(--radius-sm);
        color: var(--text);
        text-decoration: none;
        max-width: 100%;
        transition: background var(--transition);
    }

    .msg-attachment-file:hover {
        background: var(--bg-hover);
    }

    .msg-attachment-file .file-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .msg-attachment-file .file-name {
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .msg-attachment-file .file-size {
        font-size: 11px;
        color: var(--text-muted);
    }

    /* Сетка для нескольких картинок */
    .msg-image-grid {
        display: grid;
        gap: 4px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        max-width: 400px;
        width: 100%;
        margin-top: 4px;
    }

    .msg-image-item {
        position: relative;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background: var(--bg-tertiary);
        overflow: hidden;
    }

    .msg-image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.2s;
    }

    .msg-image-item:hover img {
        transform: scale(1.05);
    }

    /* Настройки сетки для разного количества */
    .msg-image-grid.count-2 {
        grid-template-columns: 1fr 1fr;
        aspect-ratio: 2 / 1; /* Прямоугольник 2:1 */
    }
    .msg-image-grid.count-3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        aspect-ratio: 4 / 3;
    }
    .msg-image-grid.count-3 .msg-image-item:first-child {
        grid-row: span 2;
    }
    .msg-image-grid.count-4 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        aspect-ratio: 1 / 1; /* Квадрат */
    }

    /* Плашка "+N" для скрытых файлов */
    .msg-image-more {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: background 0.2s;
    }

    .msg-image-item:hover .msg-image-more {
        background: rgba(0, 0, 0, 0.4);
    }

    /* Просмотр изображения на весь экран */
    /* ============================================
   ПРОСМОТР ИЗОБРАЖЕНИЯ (ЛАЙТБОКС)
   ============================================ */
    #image-lightbox {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5000;
        opacity: 0;
        transition: opacity 0.2s ease;
        cursor: zoom-out;
    }

    #image-lightbox.visible {
        opacity: 1;
    }

    #image-lightbox.hidden {
        display: none;
    }

    #image-lightbox img {
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        transform: scale(0.95);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        cursor: default;
    }

    /* Кнопки навигации в лайтбоксе */
    .lightbox-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, transform 0.2s;
        z-index: 5010;
        backdrop-filter: blur(4px);
    }

    .lightbox-nav-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-50%) scale(1.1);
    }

    .lightbox-nav-btn.hidden {
        display: none !important;
    }

    .lightbox-prev {
        left: 24px;
    }

    .lightbox-next {
        right: 24px;
    }

    .lightbox-nav-btn .icon {
        width: 24px;
        height: 24px;
    }

    @media (max-width: 768px) {
        .lightbox-nav-btn {
            display: none !important; /* На мобилках используем свайпы, стрелки не нужны */
        }
    }

    #image-lightbox.visible img {
        transform: scale(1);
    }

    .lightbox-close {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, transform 0.2s;
        z-index: 5010;
    }

    .lightbox-close:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
    }

    .lightbox-close .icon {
        width: 24px;
        height: 24px;
    }

    /* ============================================
       КНОПКА ⋯ У ДРУГА + МИНИ-МЕНЮ
       ============================================ */
    .friend-more-btn {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0 4px;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        opacity: 0;
        transition: opacity var(--transition), background var(--transition), color var(--transition);
        margin-left: 2px;
        flex-shrink: 0;
    }

    .user-item:hover .friend-more-btn,
    .user-item.active .friend-more-btn {
        opacity: 1;
    }

    .friend-more-btn:hover {
        background: var(--bg-active);
        color: var(--text-bright);
    }

    .friend-menu {
        position: fixed;
        background: var(--bg-secondary);
        border-radius: var(--radius);
        padding: 6px;
        z-index: 1000;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        min-width: 200px;
        animation: popIn 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .friend-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: transparent;
        border: none;
        color: var(--text);
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 13px;
        text-align: left;
        transition: background var(--transition);
    }

    .friend-menu button:hover {
        background: var(--bg-hover);
    }

    .friend-menu button.danger:hover {
        background: rgba(var(--danger-rgb), 0.15);
        color: var(--danger);
    }

    .friend-menu button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .friend-menu button:disabled:hover {
        background: transparent;
    }

    .friend-menu button {
        white-space: nowrap;
        /* чтобы "Удалить из друзей" не ломалось на две строки */
    }

    /* ============================================
       УЧАСТНИКИ КАНАЛА
       ============================================ */
    .member-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        background: transparent;
        margin-bottom: 2px;
        transition: background 0.2s;
    }

    .member-row:hover {
        background: var(--bg-hover);
    }

    .member-row .name {
        flex: 1;
        font-size: 13px;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .member-row .role {
        font-size: 11px;
        color: var(--accent);
        font-weight: 700;
        text-transform: uppercase;
    }

    .member-row button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 14px;
        transition: background var(--transition), color var(--transition);
    }

    .member-row button:hover {
        background: var(--bg-hover);
        color: var(--text);
    }

    .member-row button.add-btn:hover {
        color: var(--success);
    }

    .member-row button.remove-btn:hover {
        color: var(--danger);
    }

    /* ============================================
       НАСТРОЙКИ
       ============================================ */
    .settings-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 0 12px 12px;
    }

    .settings-section {
        margin-bottom: 16px;
    }

    .settings-section-title {
        padding: 8px 4px 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-dim);
        letter-spacing: 0.8px;
    }

    .settings-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        color: var(--text);
        transition: background var(--transition);
        margin-bottom: 2px;
    }

    .settings-row:hover {
        background: var(--bg-hover);
    }

    .settings-row.danger span {
        color: var(--danger);
    }

    .settings-row.danger .icon {
        color: var(--danger);
    }

    .settings-row .icon {
        color: var(--text-muted);
    }

    .settings-code {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.12);
        padding: 3px 8px;
        border-radius: 6px;
    }

    /* Логин в настройках профиля: нейтральный текст, не акцентная «плашка» */
    .settings-username {
        font-size: 13px;
        color: var(--text-muted);
    }

    .settings-bg-label {
        font-size: 12px;
        color: var(--text-muted);
    }
    /* Защита от длинных названий в заголовках модалок */
    #channel-members-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }

    /* ============================================
       TOAST
       ============================================ */
    .toast-notification {
        position: fixed;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: var(--bg-secondary);
        color: var(--text-bright);
        padding: 10px 16px;
        border-radius: var(--radius);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        font-size: 14px;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        z-index: 10000;
        pointer-events: none; /* По умолчанию клики сквозь тост */
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 90vw;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .toast-notification.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    /* Иконки статусов для тостов */
    .toast-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .toast-icon-success { color: var(--success); }
    .toast-icon-error { color: var(--danger); }
    .toast-icon-warning { color: var(--warning); }
    .toast-icon-info { color: var(--accent); }

    /* Если тост кликабельный (с иконкой сообщения) */
    .toast-notification.clickable {
        pointer-events: auto;
        cursor: pointer;
    }
    .toast-notification.clickable:hover {
        background: var(--bg-hover);
    }

    .toast-avatar-wrap {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
    }
    .toast-avatar-wrap .avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .toast-text-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    
    .toast-sender {
        color: var(--accent);
    }

    /* ============================================
       ФОН МЕССЕНДЖЕРА И СТЕКЛО
       ============================================ */
    .app {
        transition: background 0.3s ease;
    }

    /* Пресеты фона (применяются к .app). Остались прежними по смыслу, но
       полупрозрачными: сквозь них видно неоновые пятна живого фона, иначе
       пресет полностью перекрывал бы новый фон. */
    body.bg-preset-dark .app {
        background: linear-gradient(135deg, rgba(10, 10, 12, 0.85) 0%, rgba(20, 20, 26, 0.72) 100%) !important;
    }
    body.bg-preset-warm .app {
        background: linear-gradient(135deg, rgba(43, 33, 26, 0.82) 0%, rgba(28, 22, 26, 0.72) 100%) !important;
    }
    body.bg-preset-cool .app {
        background: linear-gradient(135deg, rgba(20, 28, 48, 0.82) 0%, rgba(14, 20, 38, 0.72) 100%) !important;
    }

    /* Эффект Стекла (Glassmorphism) для всех панелей — включается пресетом фона.
       Тот же рецепт, что и по умолчанию: переменные --glass-* из :root. */
    body.has-glass-bg .sidebar,
    body.has-glass-bg .chat header,
    body.has-glass-bg .chat footer,
    body.has-glass-bg #messages-wrap,
    body.has-glass-bg #pinned-bar,
    body.has-glass-bg #reply-bar,
    body.has-glass-bg #attach-bar,
    body.has-glass-bg #selection-bar,
    body.has-glass-bg .profile-card {
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        background: var(--glass-bg) !important;
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow);
    }

    body.light-theme.has-glass-bg .sidebar,
    body.light-theme.has-glass-bg .chat header,
    body.light-theme.has-glass-bg .chat footer,
    body.light-theme.has-glass-bg #messages-wrap,
    body.light-theme.has-glass-bg #pinned-bar,
    body.light-theme.has-glass-bg #reply-bar,
    body.light-theme.has-glass-bg #attach-bar,
    body.light-theme.has-glass-bg #selection-bar,
    body.light-theme.has-glass-bg .profile-card {
        background: var(--glass-bg) !important;
        border: 1px solid var(--glass-border);
    }

    /* Внутри окна сообщений стекло чуть темнее для контраста */
    body.has-glass-bg #messages-wrap {
        background: var(--glass-bg-strong) !important;
    }
    body.light-theme.has-glass-bg #messages-wrap {
        background: var(--glass-bg-strong) !important;
    }

    /* Пузыри сообщений остаются плотными */
    body.has-glass-bg #messages .msg:not(.mine) .msg-body {
        background: var(--bg-message) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    body.has-glass-bg #messages .msg.mine .msg-body {
        background: var(--accent) !important;
        color: #fff;
    }
    /* Текст в своих сообщениях делаем белым для контраста */
    body.has-glass-bg #messages .msg.mine .msg .text,
    body.has-glass-bg #messages .msg.mine .msg .time,
    body.has-glass-bg #messages .msg.mine .msg .edited-mark {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    /* ============================================
       НАСТРОЙКИ ФОНА (МОДАЛКА)
       ============================================ */
    .bg-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        background: var(--bg-tertiary);
        padding: 4px;
        border-radius: 8px;
    }
    .bg-tab {
        flex: 1;
        padding: 10px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s;
    }
    .bg-tab.active {
        background: var(--bg-active);
        color: var(--text-bright);
    }
    .bg-options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }
    .bg-option {
        padding: 12px;
        background: var(--bg-tertiary);
        border: 2px solid transparent;
        border-radius: 8px;
        color: var(--text);
        cursor: pointer;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .bg-option:hover {
        background: var(--bg-hover);
    }
    .bg-option.active {
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.1);
        color: var(--accent);
    }
    .bg-preview {
        width: 100%;
        height: 120px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        background-color: var(--bg-tertiary);
        margin-bottom: 16px;
        border: 1px solid var(--bg-active);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        font-size: 12px;
        overflow: hidden;
    }

    /* Скрываем неактивную вкладку в настройках фона */
    #bg-content-global.hidden,
    #bg-content-chat.hidden {
        display: none !important;
    }

    /* Модалка настроек */
    #settings-modal .modal-box {
        animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #settings-modal .settings-scroll {
        flex: 1;
        overflow-y: auto;
        padding-right: 4px;
        margin-right: -4px;
    }

    /* ============================================
       НАСТРОЙКИ: БОКОВЫЕ ВКЛАДКИ (Discord-style)
       ============================================ */
    #settings-modal .settings-box {
        width: 720px;
        max-width: 94vw;
        height: 560px;
        max-height: 85vh;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .settings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 20px 22px 14px;
        border-bottom: 1px solid var(--bg-active);
        flex-shrink: 0;
    }

    .settings-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-bright);
    }

    .settings-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition: background var(--transition), color var(--transition);
    }

    .settings-close-btn:hover {
        background: var(--bg-hover);
        color: var(--text-bright);
    }

    .settings-close-btn .icon {
        width: 18px;
        height: 18px;
    }

    .settings-layout {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    /* Левая колонка со вкладками */
    .settings-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 200px;
        flex-shrink: 0;
        padding: 14px 10px;
        border-right: 1px solid var(--bg-active);
        overflow-y: auto;
    }

    .settings-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-muted);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background var(--transition), color var(--transition);
    }

    .settings-nav-item .icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.85;
    }

    .settings-nav-item:hover {
        background: var(--bg-hover);
        color: var(--text);
    }

    .settings-nav-item.active {
        background: rgba(var(--accent-rgb), 0.15);
        color: var(--accent);
    }

    .settings-nav-item.active .icon {
        opacity: 1;
    }

    /* Правая колонка с контентом активной вкладки */
    #settings-modal .settings-content {
        flex: 1;
        min-width: 0;
        padding: 14px 18px 18px;
        overflow-y: auto;
    }

    .settings-tab.hidden {
        display: none;
    }

    /* Поля вкладки «Звук и Видео» */
    .settings-field {
        display: block;
        margin-bottom: 12px;
    }

    .settings-field-label {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }

    .settings-select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--bg-active);
        border-radius: var(--radius-sm);
        background: var(--bg-tertiary);
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        transition: border-color var(--transition), background var(--transition);
    }

    .settings-select:hover {
        border-color: var(--text-dim);
    }

    .settings-select:focus {
        border-color: var(--accent);
    }

    .settings-input {
        width: 120px;
        padding: 10px 12px;
        border: 1px solid var(--bg-active);
        border-radius: var(--radius-sm);
        background: var(--bg-tertiary);
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
        outline: none;
        transition: border-color var(--transition);
    }

    .settings-input:focus {
        border-color: var(--accent);
    }

    .settings-select:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .settings-secondary-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 4px;
        padding: 10px 14px;
        border: 1px solid rgba(var(--accent-rgb), 0.35);
        border-radius: var(--radius-sm);
        background: rgba(var(--accent-rgb), 0.1);
        color: var(--accent);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition), transform 0.15s;
    }

    .settings-secondary-btn:hover {
        background: rgba(var(--accent-rgb), 0.18);
        border-color: var(--accent);
    }

    .settings-secondary-btn:active {
        transform: scale(0.98);
    }

    .settings-hint {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-dim);
    }

    .settings-hint:empty {
        display: none;
    }

    @media (max-width: 768px) {
        #settings-modal .settings-box {
            width: 92vw !important;
            height: auto;
            max-height: 90dvh !important;
        }

        .settings-layout {
            flex-direction: column;
        }

        /* Вкладки на мобилке — сетка 3×2 (иконка + подпись, без
           горизонтального скролла). Правила лежат в конце файла,
           после системы .btn, иначе базовый padding .btn их перекрывает. */

        #settings-modal .settings-content {
            padding: 12px 14px 16px;
        }
    }

    /* ============================================
       АДМИН-ПАНЕЛЬ: ИНВАЙТ-КОДЫ
       Секция #admin-section всегда в разметке, но openSettings()
       показывает её только администратору.
       ============================================ */
    /* Секция админки — колонка: заголовок, кнопка, список и подсказка идут
       сверху вниз и не растягиваются на всю высоту панели. */
    #admin-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #admin-section .settings-section-title {
        color: var(--accent);
    }

    .admin-generate-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(var(--accent-rgb), 0.45);
        border-radius: var(--radius-sm);
        background: rgba(var(--accent-rgb), 0.12);
        color: var(--accent);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition), transform 0.15s;
    }

    .admin-generate-btn:hover {
        background: rgba(var(--accent-rgb), 0.2);
        border-color: var(--accent);
    }

    .admin-generate-btn:active {
        transform: scale(0.98);
    }

    .admin-generate-btn:disabled {
        opacity: 0.6;
        cursor: default;
        transform: none;
    }

    .admin-generate-btn .icon {
        flex-shrink: 0;
    }

    /* Ряд «Сгенерировать + лимит использований» */
    .admin-generate-row {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .admin-generate-row .admin-generate-btn {
        flex: 1;
        width: auto;
    }

    /* Числовой инпут лимита: целое 1..100, вводится вручную */
    #invite-max-uses {
        width: 70px;
        flex-shrink: 0;
        padding: 0 8px;
        border: 1px solid rgba(var(--accent-rgb), 0.45);
        border-radius: var(--radius-sm);
        background: var(--bg-tertiary);
        color: var(--text-bright);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        transition: border-color var(--transition);
        /* Лимит вводится вручную: нативные стрелки (spinners) только мешают */
        -moz-appearance: textfield;
        appearance: textfield;
    }

    /* Chrome / Edge / Safari: прячем внешние и внутренние стрелки number-инпута */
    #invite-max-uses::-webkit-outer-spin-button,
    #invite-max-uses::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #invite-max-uses:focus {
        outline: none;
        border-color: var(--accent);
    }

    /* Список всех выданных кодов: одна строка — одна карточка */
    .admin-invites-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        max-height: 340px;
        overflow-y: auto;
        padding-right: 2px;
    }

    /* Плейсхолдеры: «загружаем…» и «кодов нет» */
    .admin-invites-loading,
    .admin-invites-empty {
        padding: 14px 12px;
        border: 1px dashed rgba(var(--accent-rgb), 0.25);
        border-radius: var(--radius-sm);
        font-size: 12px;
        line-height: 1.4;
        color: var(--text-muted);
        text-align: center;
    }

    .admin-invite-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--bg-tertiary);
        border: 1px solid rgba(var(--accent-rgb), 0.18);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        transition: border-color var(--transition);
        animation: fadeIn 0.2s ease;
    }

    .admin-invite-item:hover {
        border-color: rgba(var(--accent-rgb), 0.42);
    }

    /* Код и подпись «Использовано: X из Y» — в колонку */
    .admin-invite-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .admin-invite-code {
        font-family: 'Courier New', monospace;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--accent);
        user-select: all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-invite-uses {
        font-size: 11px;
        color: var(--text-muted);
    }

    /* Лимит исчерпан: код больше не примет новых участников */
    .admin-invite-uses.exhausted {
        color: var(--danger);
    }

    .admin-invite-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    /* Кнопка-корзина в строке кода */
    .admin-delete-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: rgba(var(--danger-rgb), 0.14);
        color: var(--danger);
        cursor: pointer;
        transition: background var(--transition), transform 0.15s;
    }

    .admin-delete-btn:hover {
        background: rgba(var(--danger-rgb), 0.28);
        transform: scale(1.08);
    }

    .admin-delete-btn:active {
        transform: scale(0.94);
    }

    .admin-copy-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: rgba(var(--accent-rgb), 0.16);
        color: var(--accent);
        cursor: pointer;
        transition: background var(--transition), color var(--transition), transform 0.15s;
    }

    .admin-copy-btn:hover {
        background: rgba(var(--accent-rgb), 0.28);
        transform: scale(1.08);
    }

    .admin-copy-btn:active {
        transform: scale(0.94);
    }

    /* Подсветка после успешного копирования */
    .admin-copy-btn.copied {
        background: rgba(35, 165, 90, 0.2);
        color: var(--success);
    }

    /* Подсказка под списком кодов: жёсткий отступ сверху, чтобы она не прилипала
       к низу панели при коротком списке (никакого margin-top: auto). */
    .admin-hint {
        flex: 0 0 auto;
        margin-top: 12px;
        padding: 0 4px;
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-dim);
    }

    /* ============================================
       НОВАЯ КАРТОЧКА ПРОФИЛЯ (Овальная)
       ============================================ */
    .profile-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px 8px 16px;
        background: var(--bg-tertiary);
        margin: 8px 12px 12px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        transition: background var(--transition);
        min-height: 64px;
        box-sizing: border-box;
        gap: 8px;
        overflow: hidden;
    }

    .profile-main {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .profile-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--bg-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
        font-size: 16px;
        transition: transform 0.15s, box-shadow 0.15s;
    }

    .profile-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 0 0 2px var(--accent);
        /* Подсветка при наведении */
    }

    .profile-info {
        flex: 1;
        min-width: 0;
        /* ⚠️ САМОЕ ВАЖНОЕ: без этого текст не будет сжиматься, а вытолкнет кнопки */
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        /* Обрезаем всё, что вылезает за пределы блока */
        transition: opacity 0.2s;
    }

    .profile-info:hover .profile-name {
        color: var(--accent);
        /* Показываем, что на ник можно нажать */
    }

    /* Кнопка статуса (слева от шестеренки) */
    .profile-status-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 14px;
        padding: 6px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition), transform 0.15s;
        flex-shrink: 0;
    }

    .profile-status-btn:hover {
        background: var(--bg-hover);
        transform: scale(1.1);
    }

    /* ============================================
       СТИЛИ ДЛЯ ТЕКСТА В КАРТОЧКЕ (ВОССТАНОВЛЕНИЕ)
       ============================================ */
    .profile-name {
        font-weight: 600;
        font-size: 14px;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        /* Обрезает длинный ник троеточием */
        white-space: nowrap;
        /* Запрещает перенос на новую строку */
    }

    .profile-status {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Обрезает "Не беспокоить" в "Не беспо..." */
        white-space: nowrap;
        /* Запрещает перенос на новую строку */
    }

    /* Кнопка настроек (справа) с ореолом */
    .profile-icon-btn {
        background: var(--bg-secondary);
        /* Ореол/фон */
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition), color var(--transition), transform 0.2s;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        /* Тень для ореола */
    }

    .profile-icon-btn:hover {
        background: var(--accent);
        color: #fff;
        transform: rotate(45deg) scale(1.05);
        /* Классная анимация вращения */
    }

    .profile-icon-btn .icon {
        width: 18px;
        height: 18px;
    }

    /* ============================================
   КНОПКИ УЧАСТНИКОВ В ШАПКЕ: КАНАЛ / БЕСЕДА
   ============================================ */
    #channel-members-btn {
        transition: opacity 0.3s ease, transform 0.3s ease, max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease;
        max-width: 60px;
        opacity: 1;
        transform: scale(1);
        overflow: hidden;
        white-space: nowrap;
    }

    #channel-members-btn.hidden {
        display: flex !important;
        /* Плавное схлопывание: скрываем нулевой шириной и прозрачностью,
           а не display: none, чтобы работала анимация */
        max-width: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        transform: scale(0.5);
        pointer-events: none;
    }

    /* Глобального .hidden в проекте нет (каждый блок скрывает себя сам),
       поэтому кнопку беседы прячем явным правилом: без него иконка
       «Участники беседы» висит в шапке всегда и дублирует кнопку канала. */
    #conversation-members-btn.hidden {
        display: none !important;
    }

    /* ============================================
       WELCOME-ЭКРАН
       ============================================ */
    #messages.hidden {
        display: none;
    }

    .welcome-screen {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 24px;
        width: 100%;
    }

    .welcome-screen.hidden {
        display: none;
    }

    .welcome-inner {
        text-align: center;
        max-width: 480px;
        width: 100%;
    }

    .welcome-logo {
        font-size: 48px;
        margin-bottom: 16px;
        animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    /* SVG-логотип на welcome-экране */
    .welcome-logo-svg {
        width: 72px;
        height: 72px;
        color: var(--accent);
        stroke-width: 1.5;
    }

    /* Акцент на имени пользователя */
    .welcome-name {
        color: var(--accent);
    }

    /* Пустое состояние с кнопками */
    .welcome-empty-text {
        color: var(--text-muted);
        text-align: center;
        margin: 0 0 16px;
        font-size: 13px;
    }

    .welcome-empty-actions {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .welcome-title {
        color: var(--text-bright);
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 8px;
    }

    .welcome-sub {
        color: var(--text-muted);
        margin: 0 0 24px;
        font-size: 14px;
    }

    .welcome-recent {
        text-align: left;
        max-height: 360px;
        overflow-y: auto;
    }

    .welcome-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        background: var(--bg-secondary);
        margin-bottom: 6px;
        cursor: pointer;
        transition: background var(--transition), transform 0.15s;
    }

    .welcome-item:hover {
        background: var(--bg-hover);
        transform: translateX(2px);
    }

    .welcome-item-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
    }

    .welcome-item-info {
        flex: 1;
        min-width: 0;
    }

    .welcome-item-name {
        color: var(--text-bright);
        font-weight: 600;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .welcome-item-meta {
        color: var(--text-muted);
        font-size: 12px;
    }

    .welcome-empty {
        color: var(--text-muted);
        text-align: center;
        padding: 16px;
    }

    #dialog-notif-btn {
        transition: color var(--transition);
    }

    #dialog-notif-btn.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* ============================================
       ЖИВОЙ ЛОГОТИП
       ============================================ */
    #atmos-logo {
        /* inline-flex, а не inline-block: иконка 22px и текст 18px
           выравниваются по центру, а не по базовой линии */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        will-change: transform;
    }

    /* ============================================
       АНИМАЦИИ ДЛЯ КЛИКОВ ПО ЛОГОТИПУ
       ============================================ */
    @keyframes logo-spin {
        100% {
            transform: rotate(360deg) scale(1.1);
        }
    }

    @keyframes logo-bounce {

        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(0);
        }

        40% {
            transform: translateY(-15px);
        }

        60% {
            transform: translateY(-7px);
        }
    }

    @keyframes logo-flip {
        100% {
            transform: rotateY(360deg);
        }
    }

    @keyframes logo-pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.3);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes logo-shake {

        0%,
        100% {
            transform: translateX(0);
        }

        20%,
        60% {
            transform: translateX(-5px);
        }

        40%,
        80% {
            transform: translateX(5px);
        }
    }

    @keyframes logo-jelly {
        0% {
            transform: scale(1, 1);
        }

        30% {
            transform: scale(1.25, 0.75);
        }

        40% {
            transform: scale(0.75, 1.25);
        }

        50% {
            transform: scale(1.15, 0.85);
        }

        65% {
            transform: scale(0.95, 1.05);
        }

        75% {
            transform: scale(1.05, 0.95);
        }

        100% {
            transform: scale(1, 1);
        }
    }

    .anim-spin {
        animation: logo-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .anim-bounce {
        animation: logo-bounce 0.8s ease-in-out;
    }

    .anim-flip {
        animation: logo-flip 0.8s ease-in-out;
    }

    .anim-pulse {
        animation: logo-pulse 0.5s ease-in-out;
    }

    .anim-shake {
        animation: logo-shake 0.6s ease-in-out;
    }

    .anim-jelly {
        animation: logo-jelly 0.8s ease-in-out;
    }

    /* ============================================
       РЕАКЦИИ (КРАСИВЫЕ И ТЕМНЫЕ)
       ============================================ */
    .reactions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }

    .reaction {
        background: var(--bg-tertiary);
        border: 1px solid transparent;
        /* Прозрачная рамка для ровности */
        color: var(--text);
        padding: 4px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: background var(--transition), border-color var(--transition), transform 0.15s;
    }

    .reaction:hover {
        background: var(--bg-hover);
        transform: scale(1.05);
    }

    /* Подсветка, если реакция поставлена мной */
    .reaction.mine {
        background: rgba(var(--accent-rgb), 0.2);
        border-color: var(--accent);
        color: var(--text-bright);
    }

    .reaction.mine:hover {
        background: rgba(var(--accent-rgb), 0.35);
    }

    .reaction-count {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
    }

    /* ============================================
       АНИМАЦИЯ ВЫСТАВЛЕНИЯ РЕАКЦИИ
       ============================================ */
    @keyframes reactionPop {
        0% {
            transform: scale(1);
        }

        40% {
            transform: scale(1.4) rotate(10deg);
        }

        70% {
            transform: scale(0.9) rotate(-5deg);
        }

        100% {
            transform: scale(1) rotate(0);
        }
    }

    /* Класс, который мы будем вешать на новый смайлик */
    .reaction.animate-pop {
        animation: reactionPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ============================================
       ЗВОНКИ (ИНТЕРФЕЙС)
       ============================================ */
    .call-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.15s, background var(--transition);
    }

    .call-btn:hover {
        transform: scale(1.1);
    }

    .call-btn .icon {
        width: 24px;
        height: 24px;
    }

    .call-btn-mute {
        background: var(--bg-hover);
        color: var(--text);
    }

    .call-btn-mute.muted {
        background: var(--warning);
        color: #000;
    }

    .call-btn-decline {
        background: var(--danger);
        color: #fff;
    }

    .call-btn-accept {
        background: var(--success);
        color: #fff;
    }

    .call-btn:disabled {
        opacity: 0.5;
        cursor: wait;
        transform: none;
    }

    /* --- Видеозвонок 1-на-1: сцена, собеседник и локальное превью --- */
    #call-video-stage {
        display: none;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin: 0 auto 16px;
        border-radius: 10px;
        overflow: hidden;
        background: #000;
    }

    /* Сцена раскрывается, если видео есть у собеседника или у себя */
    #call-modal.has-video #call-video-stage,
    #call-modal.has-local-video #call-video-stage {
        display: block;
    }

    /* Когда идёт видео, аватар не нужен — освобождаем место под кадр */
    #call-modal.has-video #call-avatar,
    #call-modal.has-local-video #call-avatar {
        display: none;
    }

    #remote-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }

    #local-video {
        display: none;
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 84px;
        height: 84px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: #000;
        transform: scaleX(-1); /* зеркало, как в Zoom/Telegram */
    }

    #call-video-stage.with-local #local-video {
        display: block;
    }

    /* Пульсация аватарки при входящем звонке */
    #call-modal.call-ringing #call-avatar {
        animation: callPulse 1.5s infinite;
        border-radius: 50%;
    }

    @keyframes callPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(var(--accent-rgb), 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
        }
    }

        /* Пульсация аватарки при активном разговоре (зеленая) */
    #call-modal.in-call #call-avatar {
        animation: callActivePulse 2s infinite;
        border-radius: 50%;
    }

    @keyframes callActivePulse {
        0% {
            box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.5);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(35, 165, 90, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(35, 165, 90, 0);
        }
    }

    /* Кнопки звонка в шапке получают единый hover-эффект .btn-icon */

    /* ============================================
       КНОПКА ЗВОНКА В ШАПКЕ
       ============================================ */
    #call-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #call-btn.hidden {
        display: none !important;
    }

    /* Кнопка видеозвонка в шапке — рядом с обычным звонком */
    #video-call-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #video-call-btn.hidden {
        display: none !important;
    }

    /* ============================================
       ПОДКАНАЛЫ КАНАЛА-КАТЕГОРИИ (текстовые / голосовые)
       ============================================ */
    .channel-group {
        margin-bottom: 6px;
    }

    /* Подканалы внутри категории: полноценные кнопки — выше и с крупным шрифтом,
       чтобы по ним было легко попасть мышкой */
    .channel-group-container .channel-btn {
        width: 100%;
        /* Компактная строка вкладки «Каналы»: слева отступ под иконку категории */
        padding: 8px 10px 8px 20px;
        min-height: 36px;
        font-size: 13px;
        gap: 8px;
        margin-bottom: 2px;
        border-radius: var(--radius-sm);
    }

    .channel-group-container .channel-btn .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.7;
    }

    /* «# текстовые» ведёт себя как кнопка: клик открывает канал (как и заголовок). */
    .channel-btn.subchannel.text-subchannel {
        cursor: pointer;
    }

    /* Активный текстовый подканал */
    .channel-btn.subchannel.active {
        color: var(--text-bright);
        background: var(--bg-active);
        font-weight: 600;
    }

    .channel-btn.subchannel.active .icon {
        opacity: 1;
        color: var(--text-bright);
    }

    /* Активный голосовой подканал (ты сидишь в нём) */
    .channel-btn.subchannel.voice-subchannel.in-voice {
        color: var(--success);
        font-weight: 600;
        background: rgba(35, 165, 90, 0.12);
    }

    .channel-btn.subchannel.voice-subchannel.in-voice .icon {
        opacity: 1;
        color: var(--success);
    }

    /* Люди, сидящие в голосовом канале */
    .voice-user {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* В строке только аватар и имя — действия в контекстном меню */
        gap: 10px;
        font-size: 13px;
        color: var(--text-dim);
        margin-left: 24px;
        /* Больше отступ для участников */
        padding: 6px 10px;
        /* Чуть шире */
        border-radius: var(--radius-sm);
        transition: background 0.2s;
    }

    .voice-user:hover {
        background: var(--bg-hover);
    }

    .voice-user-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .voice-user .avatar {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

        /* Подсветка того, кто сейчас говорит (VAD) */
    .voice-user.speaking .avatar {
        box-shadow: 0 0 0 2px var(--success);
        border-radius: 50%;
        transition: box-shadow 0.1s ease;
    }
    .voice-user.speaking .name {
        color: var(--text-bright);
        font-weight: 600;
    }
    /* ============================================
       АНИМАЦИЯ ВХОДА В ГОЛОСОВОЙ КАНАЛ
       ============================================ */
    @keyframes slideInVoice {
        from {
            opacity: 0;
            transform: translateX(-20px) scale(0.9);
        }

        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    .voice-user-new {
        animation: slideInVoice 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ============================================
       СОСТОЯНИЕ УЧАСТНИКА ГОЛОСОВОГО КАНАЛА
       ============================================ */
    /* Кнопок-иконок в строке больше нет (мьют и громкость переехали в меню
       по ПКМ / долгому тапу), поэтому «замьючен для себя» показываем
       приглушением строки, а понижённую громкость — в title строки. */
    .voice-user.muted .voice-user-info {
        opacity: 0.55;
    }

    /* Замьюченный не подсвечивается как говорящий, даже если VAD сработал */
    .voice-user.muted .name {
        color: var(--text-muted);
    }

    /* ============================================
       КОНТЕКСТНОЕ МЕНЮ УЧАСТНИКА ГОЛОСОВОГО КАНАЛА
       ============================================ */
    .voice-user-menu {
        min-width: 200px;
    }

    .voice-user-menu-head {
        padding: 4px 12px 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--panel-divider);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .voice-user-menu-value {
        margin-left: auto;
        padding-left: 8px;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }

    /* ============================================
       ПОПАП ГРОМКОСТИ УЧАСТНИКА ГОЛОСОВОГО КАНАЛА
       ============================================ */
    .voice-volume-popup {
        position: fixed;
        z-index: 1200;
        width: 210px;
        padding: 10px 12px 10px;
        background: var(--bg-tertiary);
        border: 1px solid var(--bg-active);
        border-radius: var(--radius-sm);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        animation: voiceVolumePop 0.12s ease-out;
    }

    @keyframes voiceVolumePop {
        from {
            opacity: 0;
            transform: translateY(4px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .voice-volume-popup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }

    .voice-volume-popup-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .voice-volume-popup-value {
        font-size: 11px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }

    .voice-volume-range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 4px;
        margin: 4px 0 10px;
        border-radius: var(--radius-tail);
        background: var(--bg-active);
        accent-color: var(--accent);
        cursor: pointer;
    }

    .voice-volume-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
        border: none;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        cursor: pointer;
    }

    .voice-volume-range::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: none;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
    }

    .voice-volume-range:focus-visible {
        outline: 2px solid rgba(var(--accent-rgb), 0.5);
        outline-offset: 3px;
    }

    .voice-volume-popup-foot {
        display: flex;
        justify-content: flex-end;
    }

    .voice-volume-reset {
        padding: 4px 10px;
        background: transparent;
        border: 1px solid var(--bg-active);
        border-radius: var(--radius-sm);
        color: var(--text-dim);
        font-family: inherit;
        font-size: 11px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }

    .voice-volume-reset:hover {
        background: var(--bg-hover);
        color: var(--text-bright);
    }

    /* Стили для контекстного меню по ПКМ */
    .friend-menu {
        position: fixed;
        z-index: 1000;
    }

    /* ============================================
   ШАПКА ЧАТА: АВАТАР + СТАТУС
   ============================================ */
    .chat header {
        gap: 12px;
    }

    .chat-header-main {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1;
    }

    .chat-header-avatar {
        /* 36px — вровень с кнопками шапки, поэтому высота шапки не «прыгает» */
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--bg-hover);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .chat-header-avatar.hidden {
        display: none;
    }

    .chat-header-icon {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-muted);
    }

    .chat-header-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 2px;
    }

    .chat-header-info h1 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.2;
    }

    .chat-subtitle {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Вторая строка в шапке личного чата: «Был(а) в сети …» под кастомным
       статусом. Мелкая и приглушённая, чтобы не спорить с основной подписью. */
    .chat-last-seen {
        display: block;
        margin-top: 1px;
        font-size: 11px;
        line-height: 1.2;
        color: var(--text-dim);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-last-seen.hidden {
        display: none;
    }

    .chat-subtitle.online {
        color: var(--success);
    }

    #typing-indicator {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: normal;
    }

    /* ============================================
   ОНЛАЙН-ТОЧКА НА АВАТАРЕ
   ============================================ */
    .avatar-wrap {
        position: relative;
        flex-shrink: 0;
        line-height: 0;
        border-radius: 50%;
    }

    .avatar-wrap::after {
        content: '';
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--text-dim);
        border: 2px solid var(--bg-secondary);
        opacity: 0;
        transition: opacity 0.2s, background 0.2s;
        box-sizing: content-box;
    }

    .avatar-wrap.online::after {
        background: var(--success);
        opacity: 1;
    }

    /* ============================================
   ПУСТЫЕ СОСТОЯНИЯ
   ============================================ */
    .empty-state {
        padding: 32px 16px;
        text-align: center;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .empty-text {
        font-size: 13px;
        line-height: 1.5;
        max-width: 200px;
    }

    .empty-cta {
        margin-top: 8px;
        background: var(--accent);
        color: #fff;
        border: none;
        padding: 8px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), transform 0.15s;
        box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
    }

    .empty-cta:hover {
        background: var(--accent-hover);
        transform: scale(1.05);
    }

    /* ============================================
   РАЗНЫЕ АНИМАЦИИ ВХОДА ДЛЯ МОДАЛОК
   ============================================ */
    #call-modal .modal-box {
        animation: callFadeIn 0.35s ease;
    }

    #delete-msg-modal .modal-box {
        animation: slideUpModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #profile-modal .modal-box {
        animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes callFadeIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes slideUpModal {
        from {
            opacity: 0;
            transform: translateY(24px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ============================================
   СКРОЛЛБАР В СВЕТЛОЙ ТЕМЕ
   ============================================ */
    body.light-theme ::-webkit-scrollbar-thumb {
        background: #c7cad1;
    }

    body.light-theme ::-webkit-scrollbar-thumb:hover {
        background: #b3b6bd;
    }

    body.light-theme ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ============================================
   ПОИСК ПО ЧАТУ (КАК В ТЕЛЕГРАММЕ)
   ============================================ */
    #search-results-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: tabFadeIn 0.2s ease;
    }

    #search-results-panel.hidden {
        display: none;
    }

    .search-results-header {
        padding: 12px 16px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 8px;
    }

    #search-results-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 8px;
    }

    .search-result-item {
        display: flex;
        gap: 10px;
        padding: 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--transition);
        align-items: flex-start;
    }

    .search-result-item:hover {
        background: var(--bg-hover);
    }

    .search-res-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .search-res-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .search-res-name {
        font-weight: 600;
        font-size: 13px;
    }

    .search-res-time {
        font-size: 11px;
        color: var(--text-dim);
    }

    .search-res-text {
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Подсветка самого слова в результатах */
    .search-res-text mark {
        background: rgba(240, 178, 50, 0.3);
        color: var(--text-bright);
        border-radius: 3px;
        padding: 0 2px;
    }

    .search-empty {
        padding: 24px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
    }

    /* Подсветка сообщения, к которому перешли из поиска */
    /* Мягкая пульсация при переходе к сообщению (как в ТГ) */
    .msg.highlight .msg-body {
        animation: telegramHighlight 0.8s ease-in-out 2;
    }

    @keyframes telegramHighlight {

        0%,
        100% {
            box-shadow: var(--shadow-sm);
        }

        50% {
            /* Используем цвет фона элемента (чуть ярче) вместо кричащего желтого */
            box-shadow: 0 0 0 4px var(--bg-active), var(--shadow-sm);
        }
    }

    /* Анимация только для новых сообщений */
    .msg.new-message {
        animation: messageIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ============================================
   МОБИЛЬНАЯ АДАПТИВНОСТЬ
   ============================================ */
    /* Гамбургер нужен только на мобильных. Селектор с .chat обязателен:
       правило «.chat header button» специфичнее класса и задаёт display: inline-flex,
       из-за чего кнопка раньше оставалась видимой на десктопе. */
    .chat .mobile-menu-btn {
        display: none;
        background: transparent;
        border: none;
        color: var(--text-bright);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        backdrop-filter: blur(2px);
    }

    .sidebar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    @media (max-width: 768px) {
        .app {
            padding: 0;
            gap: 0;
            height: 100vh;
            height: 100dvh;
        }

        .chat .mobile-menu-btn {
            display: flex;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            height: 100dvh;
            z-index: 1000;
            transform: translateX(-100%);
            /* Скрыт за левым краем */
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            /* Плавный выезд */
            border-radius: 0 16px 16px 0;
            margin: 0;
        }

        .sidebar.open {
            transform: translateX(0);
            /* Выезжает при добавлении класса */
        }

        .chat {
            height: 100vh;
            height: 100dvh;
            gap: 0;
        }

        .chat header {
            border-radius: 0;
            padding: 10px 16px;
        }

        #messages-wrap {
            border-radius: 0;
            box-shadow: none;
        }

        footer {
            border-radius: 12px 12px 0 0;
            padding: 8px 12px;
            margin: 0;
        }

        #attach-bar,
        #reply-bar,
        #pinned-bar {
            margin: 0;
            border-radius: 0;
            padding: 10px 16px;
        }

        .msg-row {
            max-width: 90%;
        }

        .modal-box {
            width: 90% !important;
            max-width: 400px;
        }

        /* Улучшаем модалки на телефоне */
        .modal-box {
            width: 90vw !important;
            max-width: 400px;
            padding: 24px 20px;
        }

        #settings-modal .modal-box {
            width: 92vw !important;
            max-height: 90dvh !important;
            /* Учитываем высоту экрана телефона */
        }

        /* Настройки в профиле (чтобы не было скролла по горизонтали) */
        .settings-row {
            flex-wrap: wrap;
            /* Если текст длинный, кнопка перенесется вниз */
        }
    }

    /* ============================================
   ГЛОБАЛЬНЫЙ ФИКС СЕТКИ (ЖЕЛЕЗОБЕТОН)
   ============================================ */
    body,
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .app {
        display: flex !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        box-sizing: border-box !important;
    }

    .sidebar {
        width: 280px !important;
        flex-shrink: 0 !important;
    }

    .chat {
        flex: 1 !important;
        /* Вот это заставит чат растянуться на весь экран */
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    #messages-wrap {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    header {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ============================================
   РЕЖИМ ВЫДЕЛЕНИЯ СООБЩЕНИЙ
   ============================================ */
    .msg.selected {
        background: rgba(var(--accent-rgb), 0.15) !important;
        border-radius: 10px;
        box-shadow: inset 0 0 0 2px var(--accent);
    }

    #selection-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-secondary);
        padding: 10px 24px;
        margin: 0 24px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        z-index: 100;
        animation: slideUpModal 0.2s ease;
    }

    #selection-bar.hidden {
        display: none;
    }

    #selection-count {
        font-weight: 600;
        font-size: 14px;
        color: var(--text-bright);
        background: var(--accent);
        color: #fff;
        padding: 4px 10px;
        border-radius: 8px;
    }

    .selection-actions {
        display: flex;
        gap: 8px;
    }

    .selection-actions button {
        background: var(--bg-tertiary);
        color: var(--text);
        border: none;
        padding: 8px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition), transform 0.15s;
    }

    .selection-actions button:hover {
        background: var(--bg-hover);
        transform: scale(1.1);
    }

    .selection-actions button.danger:hover {
        background: rgba(var(--danger-rgb), 0.2);
        color: var(--danger);
    }

    /* ============================================
   ПЕРЕСЛАННЫЕ СООБЩЕНИЯ
   ============================================ */
    /* ============================================
   ПЕРЕСЛАННЫЕ СООБЩЕНИЯ
   ============================================ */
    /* ============================================
   ПЕРЕСЛАННЫЕ СООБЩЕНИЯ И ВЫРАВНИВАНИЕ
   ============================================ */
    .forwarded-label {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Для СВОИХ сообщений прижимаем плашку пересылки вправо */
    .msg.mine .forwarded-label {
        justify-content: flex-end;
    }

    .forwarded-label b {
        color: var(--accent);
        font-weight: 600;
        cursor: pointer;
    }

    .forwarded-label b:hover {
        text-decoration: underline;
    }

    /* Прижимаем шапку (имя и время) вправо для СВОИХ сообщений */
    .msg.mine .head {
        justify-content: flex-end;
    }

    /* САМОЕ ВАЖНОЕ: Ограничиваем ширину пузыря и заставляем длинный текст переноситься */
    .msg-body {
        max-width: 100%;
        /* Не дает пузырю вылезти за пределы .msg-row */
    }

    .msg .text {
        overflow-wrap: anywhere;
        /* Ломает длинные слова без пробелов */
        word-break: break-word;
    }

    /* ============================================
   ЗАПИСЬ ГОЛОСОВЫХ
   ============================================ */

    #recording-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: rgba(var(--danger-rgb), 0.1);
        color: var(--danger);
        padding: 10px 16px;
        margin: 0 24px;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 14px;
        animation: slideUpModal 0.2s ease;
    }

    #recording-bar .red-dot {
        width: 10px;
        height: 10px;
        background: var(--danger);
        border-radius: 50%;
        animation: pulse 1s infinite;
    }

    #recording-bar.hidden {
        display: none;
    }

    /* ============================================
   КАСТОМНЫЙ ПЛЕЕР ГОЛОСОВЫХ (Как в ТГ)
   ============================================ */
    .voice-player {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-tertiary);
        padding: 8px 14px;
        border-radius: var(--radius);
        min-width: 200px;
        max-width: 320px;
        margin-top: 6px;
        user-select: none;
    }

    .voice-play-btn {
        background: var(--accent);
        color: #fff;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: transform 0.15s, background var(--transition);
    }

    .voice-play-btn:hover {
        background: var(--accent-hover);
        transform: scale(1.05);
    }

    .voice-play-btn .icon {
        width: 18px;
        height: 18px;
        margin-left: 2px;
        /* Чуть сдвигаем треугольник Play для визуального центра */
    }

    .voice-track {
        flex: 1;
        height: 4px;
        background: var(--bg-hover);
        border-radius: 2px;
        cursor: pointer;
        position: relative;
    }

    .voice-progress {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: var(--accent);
        border-radius: 2px;
        width: 0%;
        pointer-events: none;
    }

    .voice-time {
        font-size: 12px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
        min-width: 35px;
        text-align: right;
    }

    /* ============================================
   МОБИЛЬНАЯ КНОПКА МЕНЮ (КРАСИВАЯ)
   ============================================ */
    @media (max-width: 768px) {
        .chat .mobile-menu-btn {
            /* Показываем только внутри медиа-запроса, без !important */
            display: flex;
            background: transparent;
            border: none;
            color: var(--text-bright);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            margin-right: 12px;
            transition: background 0.2s, transform 0.15s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .mobile-menu-btn:hover {
            background: var(--bg-hover);
            transform: scale(1.05);
        }

        .mobile-menu-btn:active {
            transform: scale(0.95);
        }

        /* Фиксируем размер иконки внутри кнопки */
        .mobile-menu-btn .icon {
            width: 22px !important;
            height: 22px !important;
            stroke: currentColor;
            display: block;
        }
    }

    /* ============================================
   ЧИНИМ ШАПКУ ЧАТА (ИНДИКАТОР ПЕЧАТИ)
   ============================================ */
    .chat-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .chat-title-row h1 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        /* Позволяем имени сжиматься ТОЛЬКО если нужно */
        max-width: 100%;
        /* Убрали жесткий лимит 60% */
    }

    #typing-indicator {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--text-muted);
        flex-shrink: 0;
        /* Индикатор не сжимается */
        white-space: nowrap;
    }

    /* Анимация ручки */
    .typing-pencil {
        width: 14px;
        height: 14px;
        color: var(--accent);
        animation: writePencil 0.6s ease-in-out infinite alternate;
    }

    @keyframes writePencil {
        0% {
            transform: translateX(0) rotate(0deg);
        }

        100% {
            transform: translateX(3px) rotate(-20deg);
        }
    }

    /* На всякий случай убираем старые стили точек, если они остались */


    /* Карандаш в списке друзей */
    .typing-pencil-sidebar {
        width: 16px;
        height: 16px;
        color: var(--accent);
        margin-left: auto;
        /* Прижимает к правому краю, как было с кнопкой */
        margin-right: 6px;
        animation: writePencil 0.6s ease-in-out infinite alternate;
    }

    /* Перебиваем маргин для кнопки, чтобы карандаш вставал на то же место */
    .friend-more-btn {
        margin-left: auto;
    }

    /* ============================================
   ФИНАЛЬНЫЙ ПОЛИШИНГ UI
   ============================================ */

    /* 1. Красивое свечение вокруг аватарки активного чата в списке друзей */
    .user-item.active .avatar-wrap {
        box-shadow: 0 0 0 2px var(--accent), 0 0 8px rgba(var(--accent-rgb), 0.4);
        border-radius: 50%;
        transition: box-shadow 0.3s ease;
    }

    /* 2. Плавное и "пружинистое" появление модальных окон */
    .modal-box {
        animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes modalSlideUp {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 3. Тонкий и аккуратный скроллбар для длинных списков (настройки, пересылка) */
    .settings-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .settings-scroll::-webkit-scrollbar-thumb {
        background: var(--bg-active);
        border-radius: 10px;
    }

    .settings-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--text-dim);
    }

    /* 4. Кнопки в шапке чата: плоские, круглые, подсветка по наведению */
    .chat header button {
        transition: background var(--transition);
    }

    .chat header button:hover {
        background: var(--bg-hover);
        transform: none;
        box-shadow: none;
    }

    /* 5. Легкая пульсация кнопки "Отправить", когда в поле есть текст */
    .action-btn:not(.is-empty) {
        animation: sendPulse 2s infinite;
    }

    @keyframes sendPulse {
        0% {
            box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
        }

        50% {
            box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.6);
        }

        100% {
            box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
        }
    }

    /* ============================================
   ИДЕАЛЬНЫЙ ФУТЕР (ПАНЕЛЬ ВВОДА)
   ============================================ */

    /* Убираем нахрен все фокусные рамки и дефолтные обводки */
    #input,
    #input:focus,
    #input:active {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        min-width: 0 !important;
        /* Чтобы поле не распирало футер */
        font-size: 16px !important;
        /* Фикс зума на iOS */
    }

    /* Делаем красивую подложку для футера */
    footer {
        background: var(--bg-tertiary);
        padding: 8px 12px !important;
        /* Чуть уменьшили отступы внутри */
        border-radius: var(--radius-xl) !important;
        gap: 8px !important;
        display: flex;
        align-items: center;
        box-shadow: var(--shadow-sm);
        transition: background 0.3s ease;
    }

    /* При фокусе на поле ввода — футер красиво подсвечивается */
    footer:focus-within {
        outline: 2px solid rgba(var(--accent-rgb), 0.3);
        outline-offset: -2px;
    }

    /* Делаем кнопку отправки ровной по футеру (размер как у .btn-icon) */
    .action-btn {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        margin: 0 !important; /* Убираем возможные лишние отступы */
    }

    /* Убираем артефакты при уменьшении окна */
    .chat {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .app {
        overflow: hidden !important;
    }

    /* ============================================
   КРАСИВЫЙ ЭКРАН ПРИВЕТСТВИЯ
   ============================================ */
    .welcome-recent {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        /* Убираем горизонтальный скролл! */
        padding-right: 4px;
    }

    .welcome-recent::-webkit-scrollbar {
        width: 6px;
    }

    .welcome-recent::-webkit-scrollbar-thumb {
        background: var(--bg-active);
        border-radius: 10px;
    }

    .welcome-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: 10px;
        /* Круглые углы */
        background: var(--bg-secondary);
        margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }

    .welcome-item:hover {
        background: var(--bg-hover);
        transform: translateX(4px);
        border-color: rgba(var(--accent-rgb), 0.3);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .welcome-item-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        /* Квадратные с округлением */
        background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
    }

    /* ============================================
   КРАСИВЫЕ ПУСТЫЕ СОСТОЯНИЯ
   ============================================ */
    .empty-icon-svg {
        width: 64px;
        height: 64px;
        color: var(--text-dim);
        opacity: 0.5;
        margin-bottom: 12px;
    }

    .empty-icon-svg svg {
        width: 100%;
        height: 100%;
    }

    /* ============================================
   РАЗДЕЛИТЕЛИ ДАТ
   ============================================ */
    .date-separator {
        text-align: center;
        margin: 20px 0 16px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .date-separator::before,
    .date-separator::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--bg-active);
        opacity: 0.5;
    }

    .date-separator::before {
        margin-right: 12px;
    }

    .date-separator::after {
        margin-left: 12px;
    }

    /* ============================================
   КОМПАКТНЫЙ РЕПЛАЙ
   ============================================ */
    .reply-quote {
        background: rgba(0, 0, 0, 0.2);
        /* Темнее, чем фон */
        border-left: 3px solid var(--accent) !important;
        /* Акцентная полоска */
        padding: 6px 10px !important;
        border-radius: 8px !important;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .reply-quote:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    .reply-quote-name {
        font-weight: 700;
        font-size: 12px;
        color: var(--accent) !important;
    }

    .reply-quote-text {
        font-size: 12px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ряд компактных кнопок-пилюль под списком: «Друг» / «Беседа» на вкладке
       «Беседы» и «Канал» / «Войти» на вкладке «Каналы». Одна строка высотой
       32px вместо двух широких плашек — сайдбар отдаёт место списку. */
    .sidebar-quick-actions {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
        padding: 4px 4px 8px;
    }

    .btn.sidebar-quick-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 32px;
        padding: 0 10px;
        gap: 6px;
        border-radius: var(--radius-sm);
        background: var(--bg-tertiary);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        box-shadow: none;
    }

    .btn.sidebar-quick-btn:hover {
        background: var(--bg-hover);
        color: var(--accent);
        /* Без сдвига: строка не должна «прыгать», как и строки списка */
        transform: none;
        box-shadow: none;
    }

    .btn.sidebar-quick-btn .icon {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        color: var(--text-muted);
        transition: color 0.2s;
    }

    .btn.sidebar-quick-btn:hover .icon {
        color: var(--accent);
    }

    .quick-btn-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ============================================
   СИСТЕМНЫЕ СООБЩЕНИЯ И ХОВЕР-ЭФФЕКТЫ
   ============================================ */
    .system-msg {
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
        margin: 16px auto;
        padding: 6px 16px;
        background: var(--bg-tertiary);
        border-radius: 10px;
        display: table;
        max-width: 80%;
        box-shadow: var(--shadow-sm);
    }

    /* Появление анимируем только у реально новых системных сообщений:
       история при открытии чата не должна «прыгать». */
    .system-msg.new-message {
        animation: messageIn 0.25s ease forwards;
    }

    /* Подсветка сообщения при наведении */
    .msg {
        padding: 4px 8px;
        border-radius: 8px;
        transition: background 0.15s ease;
    }

    .msg:hover {
        background: rgba(255, 255, 255, 0.02);
    }

    /* Обновляем кнопку "Вниз" */
    #scroll-down {
        width: 40px;
        height: 40px;
        bottom: 24px;
        right: 24px;
        background: var(--bg-secondary);
        color: var(--text);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        border: 1px solid var(--bg-hover);
        transition: all 0.2s ease;
    }

    #scroll-down:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        transform: translateY(-3px);
    }

    #scroll-down .icon {
        width: 24px;
        height: 24px;
    }

    /* ============================================
   КРАСИВОЕ КОНТЕКСТНОЕ МЕНЮ (ПКМ)
   ============================================ */
    .context-menu {
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 6px;
        min-width: 180px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        border: 1px solid var(--bg-hover);
    }

    .context-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        color: var(--text);
        transition: background 0.15s, color 0.15s;
    }

    .context-menu button:hover {
        background: var(--bg-hover);
    }

    .context-menu button.danger:hover {
        background: rgba(var(--danger-rgb), 0.15);
        color: var(--danger);
    }

    /* Иконки внутри меню */
    .context-menu .icon {
        width: 16px;
        height: 16px;
        opacity: 0.7;
        color: var(--text-muted);
        transition: color 0.15s;
    }

    .context-menu button:hover .icon {
        color: inherit;
    }

    /* ============================================
   КРАСИВАЯ ПАНЕЛЬ ВЫДЕЛЕНИЯ
   ============================================ */
    #selection-bar {
        background: var(--bg-secondary);
        padding: 8px 16px;
        margin: 0 24px;
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        border: 1px solid var(--accent);
    }

    #selection-count {
        font-size: 13px;
        font-weight: 600;
        background: var(--accent);
        color: #fff;
        padding: 4px 12px;
        border-radius: 8px;
    }

    .selection-actions button {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: transparent;
        color: var(--text-muted);
        transition: all 0.2s ease;
    }

    .selection-actions button:hover {
        background: var(--bg-hover);
        color: var(--text);
        transform: scale(1.1);
    }

    .selection-actions button.danger:hover {
        background: rgba(var(--danger-rgb), 0.15);
        color: var(--danger);
    }

    .selection-actions button .icon {
        width: 18px;
        height: 18px;
    }

    /* ============================================
   ПУСТОЙ ЧАТ
   ============================================ */
    /* Заглушка пустого чата — абсолютный слой внутри #messages-wrap
       (у него position: relative). Так она всегда стоит по центру видимой
       области сообщений, не участвует в прокрутке и не «уезжает» при
       открытии поиска, который сжимает область сообщений. */
    .empty-chat-state {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        color: var(--text-muted);
        text-align: center;
        padding: 20px;
        overflow-y: auto;
    }

    .empty-chat-state svg {
        width: 64px;
        height: 64px;
        opacity: 0.3;
        margin-bottom: 16px;
    }

    .empty-chat-state h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
    }

    .empty-chat-state p {
        margin: 0;
        font-size: 14px;
        max-width: 250px;
        line-height: 1.4;
    }

    /* Приветствие канала: текст владельца вместо стандартной заглушки.
       Переносы строк сохраняем, длинный текст прокручивается. */
    .empty-chat-state.has-welcome {
        overflow-y: auto;
    }

    .empty-chat-state .channel-welcome-text {
        max-width: 420px;
        white-space: pre-wrap;
        word-break: break-word;
        line-height: 1.5;
    }

    /* Анимация плавного исчезновения пустого чата */

    /* ============================================
   ГЛОБАЛЬНЫЙ СКРОЛЛБАР: ТОНКИЙ, ТЁМНЫЙ, НЕОНОВЫЙ
   ============================================ */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Ползунок — неоновая «нить»: фиолет сверху, циан снизу */
    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: linear-gradient(180deg,
                rgba(var(--accent-neon-1-rgb), 0.55) 0%,
                rgba(var(--accent-neon-2-rgb), 0.45) 100%);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
    }

    /* При наведении ползунок загорается */
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--accent-neon-1) 0%, var(--accent-neon-2) 100%);
        box-shadow: 0 0 10px rgba(var(--accent-neon-1-rgb), 0.65),
            0 0 18px rgba(var(--accent-neon-2-rgb), 0.35);
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    /* Firefox: стандартные свойства применяем только там, где нет
       ::-webkit-scrollbar — иначе Chrome проигнорировал бы неоновый ползунок. */
    @supports not selector(::-webkit-scrollbar) {
        html {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--accent-neon-1-rgb), 0.65) rgba(255, 255, 255, 0.04);
        }
    }

    /* ============================================
   ТАБЫ САЙДБАРА (ПЛОСКИЙ СЕГМЕНТ-КОНТРОЛ)
   ============================================ */
    .sidebar-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        background: var(--bg-tertiary);
        margin: 0 12px 8px;
        border-radius: var(--radius-sm);
        height: 36px;
        box-sizing: border-box;
    }

    .sidebar-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 100%;
        padding: 0 10px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        outline: none !important;
        /* Убиваем белую рамку */
    }

    .sidebar-tab:hover {
        background: var(--bg-hover);
        color: var(--text);
    }

    .sidebar-tab.active {
        background: var(--bg-active);
        color: var(--text-bright);
        /* Ровный фон без «свечения» */
        box-shadow: none;
    }

    .sidebar-tab .icon {
        width: 16px;
        height: 16px;
        display: block;
    }

    /* ============================================
   КАРТОЧКА ПРОФИЛЯ ВНИЗУ
   ============================================ */
    .profile-card {
        transition: all 0.2s ease;
        cursor: default;
    }

    .profile-card:hover {
        background: var(--bg-hover) !important;
    }

    /* Аватарка в профиле */
    .profile-avatar {
        box-shadow: 0 0 0 2px var(--bg-tertiary);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .profile-avatar:hover {
        transform: scale(1.1) rotate(-5deg);
        box-shadow: 0 0 0 2px var(--accent);
    }

    /* ============================================
   ПЛАШКА ПРИКРЕПЛЕННЫХ ФАЙЛОВ (ATTACH BAR)
   ============================================ */
    #attach-bar {
        background: var(--bg-secondary);
        padding: 12px 16px;
        margin: 0 24px 8px;
        border-radius: var(--radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1px solid var(--bg-hover);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Карточка отдельного файла */
    .attach-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-tertiary);
        padding: 6px 12px 6px 6px;
        border-radius: 8px;
        font-size: 13px;
        color: var(--text);
        max-width: 240px;
        border: 1px solid transparent;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .attach-chip:hover {
        border-color: var(--bg-active);
        background: var(--bg-hover);
    }

    /* Иконка или превью картинки */
    .attach-chip img {
        width: 32px;
        height: 32px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .attach-chip svg {
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.1);
        padding: 6px;
        border-radius: 8px;
        width: 20px;
        height: 20px;
    }

    /* Текст и размер файла */
    .attach-chip .name {
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }

    .attach-chip .size {
        font-size: 11px;
        color: var(--text-dim);
    }

    /* Кнопка удаления (крестик) */
    .attach-chip button {
        background: transparent;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 16px;
        padding: 2px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        margin-left: 4px;
    }

    .attach-chip button:hover {
        color: var(--danger);
        background: rgba(var(--danger-rgb), 0.15);
    }

    /* ============================================
   КРАСИВЫЕ ПЕРЕКЛЮЧАТЕЛИ (iOS STYLE)
   ============================================ */
    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        flex-shrink: 0;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--bg-active);
        transition: .3s;
        border-radius: 12px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: #fff;
        transition: .3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input:checked+.slider {
        background-color: var(--success);
    }

    input:checked+.slider:before {
        transform: translateX(20px);
    }

    /* Обновляем строки настроек, чтобы они выглядели аккуратнее */
    .settings-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--text);
        transition: background 0.2s;
        cursor: pointer;
        margin-bottom: 4px;
        background: var(--bg-tertiary);
    }

    .settings-row:hover {
        background: var(--bg-hover);
    }

    .settings-row .icon {
        color: var(--text-muted);
        width: 20px;
        height: 20px;
    }

    /* Красивое выделение для опасных кнопок (удалить/очистить) */
    .settings-row.danger {
        color: var(--danger);
    }

    .settings-row.danger .icon {
        color: var(--danger);
    }

    .settings-row.danger:hover {
        background: rgba(var(--danger-rgb), 0.1);
    }

    /* Строка Push в настройках: подпись длиннее остальных, из-за чего тумблер
       уезжал на новую строку (на мобилке .settings-row получает flex-wrap: wrap)
       и выглядел «висящим» отдельно от текста. Держим всё в один ряд. */
    #settings-row-push {
        flex-wrap: nowrap;
    }

    #settings-row-push .settings-row-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #settings-row-push .switch {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* ============================================
   ЭМОДЗИ-ПИКЕР
   ============================================ */
    /* Кнопка смайлика оформляется классом .btn-icon (единая система кнопок) */

    @media (hover: none) {
        /* На тач-устройствах hover не «залипает» на иконочных кнопках футера */
        footer .btn-icon:hover,
        footer .btn-icon:focus:not(:focus-visible) {
            background: transparent;
            color: var(--text-muted);
            transform: none;
        }

        /* Для кнопки отправки убираем только эффект увеличения при залипании, 
           но НЕ трогаем её фон */
        .action-btn:hover,
        .action-btn:focus:not(:focus-visible) {
            transform: none !important;
        }

        /* Жестко фиксируем цвета кнопки записи, чтобы никакие hover'ы их не перебивали */
        .action-btn.recording,
        .action-btn.recording:hover {
            background: var(--danger) !important;
            color: #fff !important;
        }
        
        .action-btn.locked,
        .action-btn.locked:hover {
            background: var(--success) !important;
            color: #fff !important;
        }

        /* Убираем залипшую подсветку и анимацию аватарок у сообщений на мобилке */
        .msg:hover {
            background: transparent !important;
        }
        .msg:hover .avatar {
            transform: none !important;
        }
        /* Отключаем сдвиг у элементов списка при тапе */
        .user-item:hover,
        .channel-btn:hover,
        .channel-category:hover,
        .welcome-item:hover {
            transform: none !important;
        }

        /* Кнопка отправки тоже сжимается при тапе */
        .action-btn:active {
            transform: scale(0.9) !important;
            transition: transform 0.08s ease !important;
        }

        /* Кнопки .btn и кнопки шапки сжимаются собственными правилами */
        .sidebar-tab:active {
            transform: scale(0.94) !important;
            transition: transform 0.08s ease !important;
        }

        /* Пружинистая анимация тапа (проигрывается после отпускания пальца) */
        .tapped {
            animation: tapBounce 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        @keyframes tapBounce {
            0%   { transform: scale(1); }
            45%  { transform: scale(0.88); }
            100% { transform: scale(1); }
        }

        /* Чуть мягче для крупных элементов (табы, карточки, друзья) */
        .sidebar-tab.tapped,
        .user-item.tapped,
        .channel-btn.tapped,
        .channel-category.tapped,
        .profile-avatar.tapped,
        .profile-info.tapped {
            animation: tapSoft 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        @keyframes tapSoft {
            0%   { transform: scale(1); }
            45%  { transform: scale(0.95); }
            100% { transform: scale(1); }
        }
    }

    .emoji-picker {
        position: fixed;
        z-index: 4000;
        background: var(--bg-secondary);
        border-radius: var(--radius);
        padding: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;
        max-height: 320px;
        max-width: 360px;
        overflow-y: auto;
        /* Базовая анимация убрана, теперь она запускается через класс .visible */
    }

    /* Пружинистое появление пикера */
    .emoji-picker.visible {
        animation: emojiPickerIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes emojiPickerIn {
        0% {
            opacity: 0;
            transform: scale(0.85) translateY(10px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .emoji-picker button {
        background: transparent;
        border: none;
        font-size: 22px;
        cursor: pointer;
        padding: 4px;
        border-radius: 6px;
        line-height: 1;
        transition: background 0.15s, transform 0.15s;
    }

    .emoji-picker button:hover {
        background: var(--bg-hover);
        transform: scale(1.2);
    }

    /* ============================================
   СВОРАЧИВАНИЕ ДЛИННЫХ СООБЩЕНИЙ
   ============================================ */
    .text.text-collapsible {
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .text.text-collapsible.collapsed {
        max-height: 7.5em; /* Примерно 5 строк при line-height: 1.5 */
        /* Плавное растворение текста внизу, чтобы не было резкого обреза */
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    }

    .show-more-btn {
        background: transparent;
        border: none;
        color: var(--accent);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 0 0;
        margin: 0;
        text-align: left;
        display: block;
        transition: color 0.15s;
    }

    .show-more-btn:hover {
        color: var(--accent-hover);
        text-decoration: underline;
    }

    /* ============================================
   МИНИ-ПРОФИЛЬ
   ============================================ */
    .mini-profile-box {
        text-align: center;
        width: 320px;
        padding: 28px 24px;
    }

    .mini-profile-avatar {
        width: 96px;
        height: 96px;
        margin: 0 auto 16px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
    }

    .mini-profile-avatar .avatar {
        width: 96px !important;
        height: 96px !important;
        font-size: 40px !important;
    }

    .mini-profile-name {
        margin: 0 0 6px;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-bright);
    }

    .mini-profile-status {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 20px;
    }

    /* Логин под именем в мини-профиле: логин остался единственным «техническим» именем */
    .mini-profile-login {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

    .mini-profile-status.online {
        color: var(--success);
    }

    /* «Был(а) в сети …» под статусом мини-профиля (только оффлайн).
       Отрицательный верхний отступ подтягивает строку к статусу,
       у которого собственный margin-bottom: 20px. */
    .mini-profile-last-seen {
        font-size: 12px;
        color: var(--text-dim);
        margin: -14px 0 18px;
    }

    #mini-profile-last-seen.hidden {
        display: none;
    }

    .mini-profile-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mini-profile-actions .btn {
        width: 100%;
    }

    /* ============================================
   КРАСИВАЯ МОДАЛКА ОЧИСТКИ ЧАТА
   ============================================ */
    .clear-chat-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Внешний вид кнопок («Очистить у себя/у всех», «Удалить у себя/у всех»,
       «Отмена») задаёт единая система .btn — здесь только ширина колонки. */
    .clear-chat-actions .btn {
        width: 100%;
    }

    /* ============================================
   ПРОГРЕСС-БАР ЗАГРУЗКИ ФАЙЛОВ
   ============================================ */
    .attach-chip {
        position: relative;
        overflow: hidden;
        /* Чтобы прогресс-бар не вылезал за края */
    }

    .attach-chip.uploading {
        opacity: 0.8;
    }

    .attach-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        background: var(--accent);
        width: 0%;
        transition: width 0.1s linear;
        border-radius: 0 0 8px 8px;
        /* Скругляем нижние углы как у чипа */
    }

    .attach-chip .status-text {
        font-size: 11px;
        color: var(--accent);
        font-weight: 600;
        margin-left: auto;
    }

    /* ============================================
   КРАСИВАЯ МОДАЛКА РЕДАКТИРОВАНИЯ ПРОФИЛЯ
   ============================================ */
    .profile-edit-box {
        width: 420px !important;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        padding: 24px !important;
    }

    /* Шапка модалки: заголовок и @логин под ним */
    .profile-modal-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .profile-modal-header h2 {
        margin: 0 0 4px;
    }

    /* Логин под заголовком «Мой профиль»: @username, изменить нельзя */
    .profile-login {
        font-size: 12px;
        color: var(--text-muted);
        letter-spacing: 0.2px;
    }

    /* Круглое превью аватара + аккуратная текстовая ссылка на загрузку */
    .profile-avatar-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-bottom: 20px;
    }

    .profile-avatar-preview {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--bg-tertiary);
        border: 3px solid var(--bg-tertiary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .profile-avatar-preview:hover {
        border-color: rgba(var(--accent-rgb), 0.5);
    }

    .profile-avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .profile-avatar-initial {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        user-select: none;
    }

    .profile-avatar-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--accent);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .profile-avatar-link .icon {
        width: 14px;
        height: 14px;
    }

    .profile-avatar-link:hover {
        background: rgba(var(--accent-rgb), 0.12);
        color: var(--accent-hover);
    }

    .profile-input-group {
        margin-bottom: 14px;
        text-align: left;
    }

    .profile-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 6px;
        margin-left: 4px;
    }

    .profile-label-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }

    .profile-label-row .profile-label {
        margin-bottom: 6px;
    }

    /* «По умолчанию» — сброс на цвет из хэша логина */
    .profile-color-auto {
        background: transparent;
        border: none;
        padding: 0 4px 6px;
        color: var(--text-dim);
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .profile-color-auto:hover {
        color: var(--text-bright);
    }

    .profile-color-auto.active {
        color: var(--accent);
    }

    .profile-input {
        width: 100%;
        background: var(--bg-tertiary) !important;
        border: 1px solid transparent !important;
        color: var(--text) !important;
        padding: 12px 14px !important;
        margin-bottom: 0 !important;
        border-radius: var(--radius-sm) !important;
        font-size: 14px !important;
        outline: none !important;
        box-sizing: border-box;
        transition: border-color 0.2s, background 0.2s;
    }

    .profile-input::placeholder {
        color: var(--text-dim);
    }

    .profile-input:focus {
        border-color: var(--accent) !important;
        background: var(--bg-secondary) !important;
    }

    /* Палитра цвета ника: 8 кружков вместо системного color-picker */
    .profile-color-palette {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 4px;
    }

    .color-swatch {
        --swatch: var(--accent);
        width: 30px;
        height: 30px;
        padding: 0;
        border: 2px solid transparent;
        border-radius: 50%;
        background: var(--swatch);
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
        transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .color-swatch:hover {
        transform: scale(1.15);
    }

    .color-swatch.active {
        transform: scale(1.1);
        border-color: var(--text-bright);
        box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--swatch), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    }

    /* Плашка с кодом друга */
    .profile-friend-code {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 4px 0 8px;
        padding: 12px 14px;
        background: var(--bg-tertiary);
        border: 1px solid rgba(var(--accent-rgb), 0.18);
        border-radius: var(--radius-sm);
    }

    .profile-friend-code-label {
        font-size: 12px;
        color: var(--text-muted);
    }

    .profile-friend-code-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .profile-friend-code-value {
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--accent);
    }

    .profile-copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .profile-copy-btn .icon {
        width: 16px;
        height: 16px;
    }

    .profile-copy-btn:hover {
        color: var(--text-bright);
        background: var(--bg-hover);
    }

    .profile-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 20px;
    }

    /* «Сохранить» / «Отмена» в профиле — кнопки единой системы .btn */
    .profile-actions .btn {
        width: 100%;
    }

    /* На телефоне модалка профиля не должна вылезать за края экрана */
    @media (max-width: 768px) {
        .profile-edit-box {
            width: 90vw !important;
            padding: 20px 16px !important;
        }
    }

    /* ============================================
   ШАПКА ЧАТА: НИК + СТАТУС + ПЕЧАТЬ
   ============================================ */
    .chat-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
    }

    .chat-title-row h1 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Заголовок чата меняется мгновенно: анимаций появления при переключении нет. */
    .chat-subtitle-row {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        margin-top: 2px;
    }

    .chat-subtitle {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
    }

    .chat-subtitle.online {
        color: var(--success);
    }

    #typing-indicator {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--text-muted);
        flex-shrink: 0;
        white-space: nowrap;
        font-style: italic;
    }

    #typing-indicator.hidden {
        display: none;
    }

    #typing-indicator .typing-text {
        color: var(--text-muted);
    }

    /* ============================================
   МОБИЛКА: ТАЧ-ЦЕЛИ И SAFE-AREA
   ============================================ */
    @media (max-width: 768px) {

        /* Кнопки футера 44×44 — минимум для тача */
        #attach-btn,
        #emoji-btn,
        .action-btn {
            width: 44px !important;
            height: 44px !important;
        }

        /* Отступ от «полоски» на iPhone и от навбара Android (в нативном
           клиенте переменная обнулена — insets уже вычтены из вьюпорта) */
        footer {
            padding-bottom: calc(8px + var(--atm-safe-bottom)) !important;
        }

        /* Статус-бар и «чёлка»: шапка чата уезжает вниз на высоту выреза.
           Иначе логотип и кнопки оказываются под часами и батареей. */
        .chat header {
            padding-top: calc(8px + var(--atm-safe-top)) !important;
        }

        /* Карточка профиля в сайдбаре тоже дышит */
        .profile-card {
            margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        }

        /* Чуть меньше отступов у сообщений — больше места на узком экране */
        #messages {
            padding: 14px 12px !important;
        }

        /* Кнопка «вниз» не наезжает на футер */
        #scroll-down {
            bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
            right: 16px !important;
        }

        /* Кнопки шапки компактные, но остаются квадратными 36×36 (.btn-icon) */
        .chat header button {
            padding: 0 !important;
            font-size: 12px !important;
        }

        /* Аватарка в шапке меньше — ник не режется */
        .chat-header-avatar {
            width: 34px !important;
            height: 34px !important;
        }

        /* Модалки не липнут к клавиатуре */
        .modal-box {
            max-height: calc(100dvh - 24px) !important;
            overflow-y: auto !important;
        }

        /* Эмодзи-пикер не вылезает за правый край */
        .emoji-picker {
            max-width: calc(100vw - 16px) !important;
            grid-template-columns: repeat(7, 1fr) !important;
        }
    }

    /* ============================================
   МОБИЛЬНЫЙ ФИКС ВВОДА И КНОПОК
   ============================================ */

    /* Убираем скроллбар и артефакты у поля ввода */
    #input {
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        /* Firefox */
        resize: none !important;
    }

    #input::-webkit-scrollbar {
        display: none !important;
        /* Chrome/Safari */
    }

    /* ============================================
   МОБИЛКА: ФИКС ПОЛЯ ВВОДА (ПЛЕЙСХОЛДЕР)
   ============================================ */
    @media (max-width: 768px) {
        #input {
            padding: 10px 8px !important;
            font-size: 15px !important;
            line-height: 1.3 !important;
            white-space: nowrap !important;
            overflow-x: auto !important;
        }

        /* Плейсхолдер не переносится и не раздувает поле */
        #input::placeholder {
            font-size: 13px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
    }

    /* ============================================
   МОБИЛКА: ПАНЕЛЬ РЕЗУЛЬТАТОВ ПОИСКА В ЧАТЕ
   ============================================ */
    @media (max-width: 768px) {
        #messages-wrap>#search-results-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--bg-secondary);
            margin: 0;
            padding: 0;
        }

        #messages-wrap>#search-results-panel .search-results-header {
            padding: 12px 16px;
            flex-shrink: 0;
        }

        #messages-wrap>#search-results-panel #search-results-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 8px 16px;
        }
    }

    /* ==========================================
   ATMOS — FIXED FLEXBOX CHAT LAYOUT
   Без fixed для футера и поиска
   ========================================== */

    /* 1. Глобальные размеры */

    html,
    body {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        overflow: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 2. Основной контейнер приложения */

    .app {
        display: flex;
        flex-direction: row;

        width: 100%;
        height: 100vh;
        height: 100dvh;

        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }

    /* 3. Боковая панель */

    .sidebar {
        flex: 0 0 280px;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    /* 4. Основной контейнер чата */

    .chat {
        display: flex;
        flex-direction: column;

        flex: 1 1 0;

        width: 0;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-height: none;

        overflow: hidden;
        gap: 12px;
    }

    /* Все прямые элементы чата
   не должны создавать горизонтальный overflow */

    .chat>* {
        min-width: 0;
        box-sizing: border-box;
    }

    /* 5. Шапка */

    .chat>header {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }

    /* 6. Закреплённые сообщения */

    #pinned-bar {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
    }

    /* 7. Панель поиска */

    #search-bar {
        display: flex !important;

        position: static !important;
        inset: auto !important;

        flex: 0 0 auto !important;
        flex-shrink: 0 !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 24px !important;

        align-items: center;
        gap: 8px;

        box-sizing: border-box;
        z-index: auto !important;
    }

    /* Скрытие поиска */

    #search-bar.hidden {
        display: none !important;
    }

    /* Поле поиска */

    #search-input {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: 100%;
    }

    /* 8. Панель выделения */

    #selection-bar {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* 9. Контейнер сообщений */

    #messages-wrap {
        display: flex;
        flex-direction: column;

        flex: 1 1 0;

        width: 100%;
        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }

    /* 10. Прокрутка только внутри сообщений */

    #messages {
        display: block;

        flex: 1 1 0;

        width: 100%;
        min-width: 0;
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;
    }

    /* 11. Панели ответа и вложений */

    #reply-bar,
    #attach-bar {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
    }

    /* 12. Футер */

    .chat-main>footer {
        margin-top: auto !important;
        display: flex !important;
        flex: 0 0 auto !important;

        width: 100%;
        min-width: 0;
        min-height: 60px;

        height: auto;

        position: relative !important;

        margin: 0 !important;
        padding: 8px 16px 8px 12px !important; /* Сделали отступ справа чуть больше */

        align-items: center;
        gap: 8px;

        /* Убираем overflow: hidden, чтобы кнопка не обрезалась, если экран очень узкий */
        overflow: visible !important; 

        background: var(--bg-tertiary);
        box-sizing: border-box;

        z-index: 1 !important;
    }

    /* Кнопки футера не сжимаются */

    .chat-main>footer>button {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* 13. Поле ввода */

    #input {
        background: var(--bg-input);
        border: 1px solid transparent;
        border-radius: 12px;
        min-height: 44px;
        padding: 10px 16px;
        flex: 1 1 0 !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto;
        min-height: 24px;

        box-sizing: border-box;

        overflow-x: hidden;
        overflow-y: auto;

        resize: none;
    }

    /* 14. Сообщения не расширяют чат */

    .msg {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .msg-row {
        min-width: 0;
        max-width: 75%;
    }

    .msg-body {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .msg .text {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* 15. Картинки и видео */

    .msg-attachment-image,
    .msg-attachment-video,
    .msg-attachments img,
    .msg-attachments video {
        display: block;

        max-width: 100%;
        height: auto;

        object-fit: contain;
    }

    .msg-attachments {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* 16. Внутренние Flex-элементы */

    .chat-header-main,
    .chat-header-info,
    .header-actions {
        min-width: 0;
    }

    #scroll-down {
        z-index: 2;
    }

    /* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ФИНАЛЬНЫЕ СТИЛИ
   ============================================ */

    /* Поиск в боковой панели: строгий прямоугольник 36px, радиус 8px.
       Фокус — тонкая акцентная рамка, без свечения и без смены фона. */
    .sidebar-search-wrap {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 8px 12px 10px !important;
    }

    #sidebar-search {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        margin: 0 !important;
        padding: 0 12px 0 34px !important;
        box-sizing: border-box !important;
        border: 1px solid transparent !important;
        border-radius: var(--radius-sm) !important;
        background-color: var(--bg-tertiary) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23949ba4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat !important;
        background-position: 12px center !important;
        box-shadow: none !important;
        color: var(--text) !important;
        font-size: 13px !important;
        outline: none !important;
    }

    #sidebar-search:focus {
        border-color: var(--accent) !important;
        background-color: var(--bg-tertiary) !important;
        box-shadow: none !important;
    }

    #sidebar-search::placeholder {
        color: var(--text-dim) !important;
        opacity: 1 !important;
    }

    /* «Главная» и «Избранное»: плоские строки без «пилюльной» подложки.
       Фон только при ховере — как у строк списка бесед/каналов. */
    .general-chat-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: calc(100% - 24px) !important;
        margin: 0 12px 2px !important;
        padding: 8px 12px !important;
        border-radius: var(--radius-sm) !important;
        background: transparent !important;
        color: var(--text-muted) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }

    .general-chat-btn:hover {
        background: var(--bg-hover) !important;
        color: var(--text) !important;
    }

    .general-chat-btn .icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--text-muted);
        transition: color 0.2s ease;
    }

    .general-chat-btn:hover .icon {
        color: var(--accent);
    }

    /* Открыт welcome-экран: app.js вешает #home-btn класс active.
       Подложка та же, что у активной строки списка (без полоски и тени). */
    .general-chat-btn.active {
        background: rgba(var(--accent-rgb), 0.14) !important;
        color: var(--text-bright) !important;
    }

    .general-chat-btn.active .icon {
        color: var(--accent);
    }

    /* Ограничение ширины сообщений и вложений */
    #messages-wrap {
        border-radius: 16px !important;
    }

    .msg {
        max-width: 100% !important;
    }

    .msg-body {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .msg-attachment-image {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Поиск в чате: единая панель, без "матрешки" */
    #search-bar {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        margin: 0 24px !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        transition: box-shadow 0.2s ease !important;
    }

    #search-bar:focus-within {
        box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3) !important;
    }

    #search-bar #search-input {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 10px 16px !important;
        border: none !important;
        border-radius: 10px !important;
        outline: none !important;
        background: transparent !important;   /* Сливаем с панелью */
        color: var(--text) !important;
        font-size: 14px !important;
        box-shadow: none !important;          /* Никаких теней */
    }

    #search-bar #search-input:focus {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    #search-bar button {
        padding: 10px 14px !important;
        border: none !important;
        border-radius: 10px !important;
        background: var(--bg-tertiary) !important;
        color: var(--text) !important;
        cursor: pointer !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }

    #search-bar button:hover {
        background: var(--danger) !important;
        color: #fff !important;
    }

    /* Плоские вкладки «Беседы / Каналы»: сегмент-контрол 36px,
       радиус 8px (не пилюля), фон --bg-tertiary */
    .sidebar-tabs {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 36px !important;
        margin: 0 12px 12px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-sm) !important;
        /* Для волосяной линии под табами */
        position: relative !important;
    }

    /* Тонкая линия с отступом отделяет заголовки «Беседы» / «Каналы» от списка */
    .sidebar-tabs::after {
        content: '';
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: -7px;
        height: 1px;
        background: var(--panel-divider);
        pointer-events: none;
    }

    .sidebar-tab {
        display: flex !important;
        flex: 1;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: var(--radius-sm) !important;
        transition: background 0.2s ease, color 0.2s ease !important;
    }

    .sidebar-tab.active {
        background: var(--bg-active) !important;
        box-shadow: none !important;
    }

    @media (max-width: 768px) {
        .sidebar-tab {
            padding: 0 8px !important;
            font-size: 12px !important;
        }
    }

    /* Отдельное оформление кнопки «Удалить из друзей» */
    .friend-menu button.danger:not(.remove-friend-btn) {
        background: transparent !important;
        border-top: none !important;
        border-radius: var(--radius-sm) !important;
    }

    .friend-menu .remove-friend-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 12px 0 2px !important;
        padding: 10px 16px !important;
        border: 1px solid rgba(var(--danger-rgb), 0.3) !important;
        border-radius: var(--radius-sm) !important;
        background: rgba(var(--danger-rgb), 0.1) !important;
        color: var(--danger) !important;
        transition: all 0.2s ease !important;
    }

    .friend-menu .remove-friend-btn .icon {
        color: var(--danger) !important;
    }

    .friend-menu button.danger.remove-friend-btn:hover {
        border-color: var(--danger) !important;
        background: rgba(var(--danger-rgb), 0.25) !important;
        color: #ff5c5f !important;
    }
        /* ============================================
       ГЛОБАЛЬНЫЙ ПОИСК: АВТОР + БЕЙДЖ ЧАТА
       ============================================ */
    .sidebar-msg-meta {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 3px !important;
        font-size: 11px !important;
        gap: 6px !important;
    }

    .sidebar-msg-author {
        color: var(--text-bright) !important;
        font-weight: 600 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .sidebar-msg-badge {
        color: var(--text-muted) !important;
        background: var(--bg-hover) !important;
        font-size: 10px !important;
        padding: 1px 6px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-weight: 500 !important;
    }

    .sidebar-msg-time {
        color: var(--text-dim) !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .sidebar-msg-empty {
        padding: 12px !important;
        color: var(--text-muted) !important;
        font-size: 12px !important;
        text-align: center !important;
    }
        /* ============================================
       БАЗОВЫЕ СТИЛИ РЕЗУЛЬТАТОВ ПОИСКА (ВОССТАНОВЛЕНИЕ)
       ============================================ */
    .sidebar-msg-results {
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid var(--bg-hover);
    }

    .sidebar-msg-header {
        padding: 8px 12px 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-dim);
        letter-spacing: 0.8px;
    }

    .sidebar-msg-item {
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--transition);
        margin-bottom: 2px;
    }

    .sidebar-msg-item:hover {
        background: var(--bg-hover);
    }

    .sidebar-msg-text {
        font-family: inherit;
        font-weight: normal;
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }

    .sidebar-msg-text mark {
        font-family: inherit;
        font-weight: normal;
        font-size: inherit;
        background: rgba(240, 178, 50, 0.35);
        color: var(--text-bright);
        border-radius: 3px;
        padding: 0 2px;
    }
        /* ============================================
       УБИРАЕМ КВАДРАТНУЮ ПОДСВЕТКУ ПРИ ТАПЕ
       ============================================ */
    button,
    a,
    input,
    textarea,
    select,
    .sidebar-tab,
    .user-item,
    .channel-btn,
    .channel-category,
    .msg,
    .msg .avatar,
    .profile-avatar,
    .profile-info,
    .header-actions button,
    [onclick] {
        -webkit-tap-highlight-color: transparent;
    }

    /* Модалки и всё внутри них — тоже без подсветки */
    .modal,
    .modal * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Кнопки и поля в модалке профиля: убираем outline после тапа,
       но оставляем при навигации с клавиатуры */
    .profile-edit-box button:focus:not(:focus-visible),
    .profile-edit-box input:focus:not(:focus-visible),
    .modal button:focus:not(:focus-visible),
    .modal input:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

    /* На тач-устройствах убираем outline после тапа,
       но оставляем его при навигации с клавиатуры (accessibility) */
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    [onclick]:focus:not(:focus-visible) {
        outline: none;
    }
        /* ============================================
       АНИМАЦИЯ СООБЩЕНИЙ
       Только для реально новых сообщений (класс .new-message ставит renderMessage);
       история при открытии чата рендерится без анимации, чтобы лента не «прыгала».
       ============================================ */
        /* ============================================
       СКЕЛЕТОНЫ ЗАГРУЗКИ (САЙДБАР)
       ============================================ */
    .skeleton-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 2px;
    }

    .skeleton-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(90deg, var(--bg-hover) 0%, var(--bg-active) 50%, var(--bg-hover) 100%);
        background-size: 200% 100%;
        animation: skeletonShimmer 1.2s ease-in-out infinite;
        flex-shrink: 0;
    }

    .skeleton-line {
        height: 10px;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--bg-hover) 0%, var(--bg-active) 50%, var(--bg-hover) 100%);
        background-size: 200% 100%;
        animation: skeletonShimmer 1.2s ease-in-out infinite;
        flex: 1;
    }

    @keyframes skeletonShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
        /* ============================================
       БЕЙДЖ «N НОВЫХ» НА КНОПКЕ «ВНИЗ»
       ============================================ */
    #scroll-down {
        position: absolute;
    }

    .scroll-down-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: var(--danger);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 2px var(--bg-secondary);
        line-height: 1;
        flex-shrink: 0;
        animation: badgeBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
    }

    .scroll-down-badge.hidden {
        display: none !important;
    }
        /* ============================================
       ИНДИКАТОР СОЕДИНЕНИЯ WEBSOCKET
       ============================================ */
    #connection-status {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background: rgba(var(--danger-rgb), 0.15);
        border: 1px solid rgba(var(--danger-rgb), 0.4);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--danger);
        margin-right: 8px;
        flex-shrink: 0;
        animation: fadeIn 0.2s ease;
    }

    #connection-status.hidden {
        display: none !important;
    }

    /* ============================================
       АНИМАЦИЯ ПОЯВЛЕНИЯ ФУТЕРА (ПОЛЯ ВВОДА)
       ============================================ */
    @keyframes footerSlideIn {
        0% {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    footer.footer-animate-in {
        animation: footerSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .connection-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--danger);
        animation: pulse 1.5s infinite;
    }

    /* На мобилке — только точка, без текста */
    @media (max-width: 768px) {
        #connection-status {
            padding: 4px;
            width: 24px;
            height: 24px;
            justify-content: center;
        }
        .connection-text {
            display: none;
        }
    }

    /* ============================================
       ВИДЕОСООБЩЕНИЯ (КРУЖОЧКИ)
       Окно записи описано ниже, в блоке «ОКНО ЗАПИСИ КРУЖКА»
       (.video-note-modal). Здесь — только кружок в сообщении.
       ============================================ */

    /* Кружок в самом сообщении.
       Без обводки (раньше был border: 2px solid accent) и с адаптивным
       размером: width: min(...) + aspect-ratio вместо жёстких 240px.
       На узком экране и в узком пузыре круг раньше не влезал целиком
       и обрезался по краям — выглядел «полукругом». */
    .msg-video-note {
        width: min(240px, 62vw);
        max-width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        background: #05070d;
        margin-top: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .msg-video-note video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }
    .msg-video-note .play-icon {
        position: absolute;
        width: 48px;
        height: 48px;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        backdrop-filter: blur(4px);
        transition: transform 0.2s, opacity 0.2s;
    }
    .msg-video-note.playing .play-icon {
        opacity: 0;
    }
    .msg-video-note:hover .play-icon {
        transform: scale(1.1);
    }

    /* Обрезанная плашка для длинных ссылок */
    .msg-link-truncated {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--accent);
        text-decoration: none;
        font-size: 13px;
        background: rgba(var(--accent-rgb), 0.1);
        padding: 6px 10px;
        border-radius: 8px;
        margin-bottom: 6px;
        max-width: 100%;
        box-sizing: border-box;
        transition: background 0.2s, color 0.2s;
    }

    .msg-link-truncated:hover {
        background: rgba(var(--accent-rgb), 0.2);
        color: var(--accent-hover);
        text-decoration: underline;
    }

    /* ============================================
       КАРТОЧКА ПРЕВЬЮ ССЫЛКИ (OPENGRAPH)
       ============================================ */
    .link-preview {
        display: flex;
        flex-direction: column;
        background: var(--bg-tertiary);
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin-top: 8px;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--bg-hover);
        width: 100%;
        max-width: 400px;
        transition: background 0.2s;
    }

    /* Прижимаем к левому краю для чужих сообщений */
    .msg:not(.mine) .link-preview {
        align-self: flex-start;
    }

    /* Прижимаем к правому краю для своих сообщений */
    .msg.mine .link-preview {
        align-self: flex-end;
    }

    .link-preview:hover {
        background: var(--bg-hover);
    }

    .link-preview-img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        display: block;
        background: var(--bg-active);
    }

    .link-preview-info {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .link-preview-title {
        font-weight: 600;
        font-size: 14px;
        color: var(--text-bright);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .link-preview-desc {
        font-size: 13px;
        color: var(--text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .link-preview-url {
        font-size: 11px;
        color: var(--accent);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        /* ============================================
       ПАНЕЛЬ ГОЛОСОВОГО КАНАЛА (В САЙДБАРЕ)
       ============================================ */
    #voice-control-panel {
        background: var(--bg-tertiary);
        border: 1px solid transparent; /* Прозрачная рамка вместо синей */
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin: 0 12px 8px;
        
        /* Настройки для плавной анимации выезжания */
        max-height: 60px;
        opacity: 1;
        transform: translateY(0);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease;
        overflow: hidden;
        cursor: pointer; /* Чтобы было понятно, что элемент интерактивный */
    }

    /* Подсветка при наведении */
    #voice-control-panel:hover {
        background: var(--bg-hover);
        border-color: var(--bg-active); /* Мягкая серая обводка */
    }

    #voice-control-panel.hidden {
        display: flex !important; /* Перебиваем глобальный display: none, чтобы анимация работала */
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        border-width: 0;
        transform: translateY(15px); /* Панель уезжает чуть вниз */
        pointer-events: none;
    }

    .voice-panel-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--success);
        flex-shrink: 0;
    }

    /* Индикатор передачи: точка горит зелёным, пока микрофон шлёт звук */
    .voice-tx-indicator {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--bg-active);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        user-select: none;
        white-space: nowrap;
    }

    .voice-tx-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-dim);
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .voice-tx-indicator.tx-on {
        color: var(--success);
    }

    .voice-tx-indicator.tx-on .voice-tx-dot {
        background: var(--success);
        box-shadow: 0 0 6px rgba(46, 204, 113, 0.9);
    }

    .voice-panel-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .voice-panel-actions button {
        background: var(--bg-tertiary);
        border: none;
        color: var(--text);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, transform 0.15s;
    }

    .voice-panel-actions button:hover {
        background: var(--bg-hover);
        transform: scale(1.05);
    }

    .voice-panel-actions button.muted {
        background: var(--danger);
        color: #fff;
    }

    .voice-panel-actions button.leave-btn:hover {
        background: var(--danger);
        color: #fff;
    }

    /* Идёт своя трансляция экрана — кнопка светится акцентом */
    .voice-panel-actions button.active,
    .voice-panel-actions button.active:hover {
        background: var(--accent);
        color: #fff;
    }

    @media (max-width: 768px) {
        #voice-control-panel {
            bottom: calc(80px + env(safe-area-inset-bottom, 0px));
            right: 16px;
            left: 16px;
            justify-content: space-between;
        }
    }

        /* ============================================
       ТРАНСЛЯЦИИ ЭКРАНА (ЗАКРЕПЛЕНЫ НАД ЧАТОМ)
       ============================================ */
    /* Панель лежит прямо в .chat и сжимает #messages-wrap (flex: 1),
       поэтому чат остаётся прокручиваемым под видео. */
    #screen-share-container {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        height: 40vh;
        min-height: 250px;
        background: #000;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    /* Глобального .hidden в проекте нет — правило своё */
    #screen-share-container.hidden {
        display: none !important;
    }

    /* Тулбар как в Discord: полупрозрачная полоса с вкладками «кто показывает» */
    .screen-share-toolbar {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        background: rgba(16, 17, 22, 0.92);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .screen-share-tabs {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .screen-share-tabs::-webkit-scrollbar {
        display: none;
    }

    .screen-share-tab {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-shrink: 0;
        padding: 5px 12px 5px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .screen-share-tab:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .screen-share-tab.active {
        background: rgba(var(--accent-rgb), 0.18);
        border-color: rgba(var(--accent-rgb), 0.55);
        color: #fff;
    }

    /* Красная точка «в эфире» у каждой вкладки */
    .screen-share-tab-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ff4d4f;
        box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.22);
        animation: screenSharePulse 1.6s ease-in-out infinite;
        flex-shrink: 0;
    }

    .screen-share-tab .avatar {
        flex-shrink: 0;
        font-size: 10px;
    }

    .screen-share-tab-name {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Кнопка «Скрыть»: прячет панель только у этого зрителя */
    #screen-share-hide-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 6px 12px;
        border: none;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    #screen-share-hide-btn .icon {
        width: 14px;
        height: 14px;
    }

    #screen-share-hide-btn:hover {
        background: var(--danger);
        color: #fff;
    }

    /* Кнопка «Развернуть» — второй элемент управления рядом со «Скрыть».
       В фуллскрине превращается в «Свернуть» (иконка и подпись меняет JS). */
    #screen-share-fullscreen-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 6px 12px;
        border: none;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    #screen-share-fullscreen-btn .icon {
        width: 14px;
        height: 14px;
    }

    #screen-share-fullscreen-btn:hover,
    #screen-share-fullscreen-btn.active {
        background: rgba(var(--accent-rgb), 0.85);
        color: #fff;
    }

    /* Сцена: кадр целиком (object-fit: contain) на тёмном фоне */
    .screen-share-video-wrap {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.16), transparent 70%),
            #000;
    }

    #screen-share-main-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }

    /* Пока видеотрек не пришёл — подпись вместо чёрного кадра */
    .screen-share-status {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        background: rgba(0, 0, 0, 0.55);
        color: rgba(255, 255, 255, 0.75);
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        pointer-events: none;
    }

    #screen-share-status.hidden {
        display: none !important;
    }

    /* Кнопка «Показать трансляцию» в панели канала (после «Скрыть») */
    #voice-watch-stream-btn {
        color: var(--accent);
    }

    #voice-watch-stream-btn.hidden {
        display: none !important;
    }

    /* ============================================
       ТРАНСЛЯЦИЯ НА ВЕСЬ ЭКРАН
       ============================================ */
    /* Нативный Fullscreen API (Chrome / Edge / Firefox / Safari 16.4+),
       -webkit-* — старый Safari, .fullscreen-active — CSS-фолбэк,
       когда API недоступен (например, Chrome на iPhone) */
    #screen-share-container:fullscreen,
    #screen-share-container:-webkit-full-screen,
    #screen-share-container.fullscreen-active {
        position: fixed;
        inset: 0;
        z-index: 9999;
        width: 100vw;
        height: 100vh;
        min-height: 0;
        border-radius: 0;
        background: #000;
        box-shadow: none;
    }

    /* Тулбар всплывает поверх видео: в покое почти прозрачный,
       при наведении (или фокусе с клавиатуры) — полностью видимый */
    #screen-share-container:fullscreen .screen-share-toolbar,
    #screen-share-container:-webkit-full-screen .screen-share-toolbar,
    #screen-share-container.fullscreen-active .screen-share-toolbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        border-bottom: none;
        background: rgba(16, 17, 22, 0.7);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        opacity: 0.12;
        transition: opacity 0.25s ease;
    }

    #screen-share-container:fullscreen .screen-share-toolbar:hover,
    #screen-share-container:fullscreen .screen-share-toolbar:focus-within,
    #screen-share-container:-webkit-full-screen .screen-share-toolbar:hover,
    #screen-share-container:-webkit-full-screen .screen-share-toolbar:focus-within,
    #screen-share-container.fullscreen-active .screen-share-toolbar:hover,
    #screen-share-container.fullscreen-active .screen-share-toolbar:focus-within {
        opacity: 1;
    }

    /* Сцена занимает весь экран; кадр вписан целиком, без обрезки */
    #screen-share-container:fullscreen .screen-share-video-wrap,
    #screen-share-container:-webkit-full-screen .screen-share-video-wrap,
    #screen-share-container.fullscreen-active .screen-share-video-wrap {
        position: absolute;
        inset: 0;
        flex: none;
    }

    #screen-share-container:fullscreen #screen-share-main-video,
    #screen-share-container:-webkit-full-screen #screen-share-main-video,
    #screen-share-container.fullscreen-active #screen-share-main-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    @keyframes screenSharePulse {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.45;
            transform: scale(0.85);
        }
    }

    @media (max-width: 768px) {
        #screen-share-container {
            height: 32vh;
            min-height: 180px;
        }

        .screen-share-tab-name {
            max-width: 96px;
        }

        /* На телефоне у «Скрыть» остаётся только крестик */
        #screen-share-hide-btn {
            padding: 6px 8px;
        }

        #screen-share-hide-btn span {
            display: none;
        }

        /* У «Развернуть» на телефоне тоже только иконка */
        #screen-share-fullscreen-btn {
            padding: 6px 8px;
        }

        #screen-share-fullscreen-btn span {
            display: none;
        }
    }
        /* Скрытие футера на главной странице (перебиваем display: flex !important) */
    .chat-main > footer.hidden {
        display: none !important;
    }
        /* ============================================
       ОПТИМИСТИЧНАЯ ОТПРАВКА (PENDING STATE)
       ============================================ */
    .msg.pending {
        opacity: 0.6;
        pointer-events: none; /* Запрещаем клики по еще неотправленному */
    }
    
    /* Убираем анимацию появления для оптимистичных сообщений, 
       чтобы не было двойного "прыжка" при замене на реальное */
    .msg.pending {
        animation: none !important;
    }
        /* ============================================
       ПЛАВНЫЙ ПЕРЕХОД МЕЖДУ ТЕМАМИ (VIEW TRANSITION)
       ============================================ */
    /* Пока идёт startViewTransition — собственные transition'ы
       выключены, кросс-фейд делает сам браузер. Это убирает мерцание. */
    .theme-switching,
    .theme-switching *,
    .theme-switching *::before,
    .theme-switching *::after {
        transition: none !important;
    }
        /* ============================================
       ТАЧ-ЗОНА АВАТАРОВ ДЛЯ МИНИ-ПРОФИЛЯ (МОБИЛКА)
       ============================================ */
    @media (max-width: 768px) {
        /* Список друзей: аватар 28px → зона ~42×42 */
        .avatar-wrap::before {
            content: '';
            position: absolute;
            inset: -7px;
            border-radius: 50%;
        }

        /* Сообщения: аватар 36px → зона 44×44 */
        .msg .avatar-wrap::before {
            inset: -4px;
        }
    }
    /* ============================================
       УМНАЯ КНОПКА (Микрофон/Видео/Отправить)
       ============================================ */
    .action-btn {
        background: var(--accent);
        color: white;
        border: none;
        width: 46px;
        height: 46px;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s, transform 0.2s, width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
        touch-action: none;
    }

    .action-btn:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
    }

    .action-btn:active {
        transform: scale(0.97);
    }

    .action-btn .icon-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.3);
        pointer-events: none;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
    }

    /* Есть текст или вложения → показываем «самолётик» */
    .action-btn:not(.is-empty) .icon-wrap.icon-send {
        opacity: 1;
        transform: scale(1);
    }

    /* Поле пустое + режим видео → показываем «кружок видео» */
    .action-btn.is-empty.video-mode .icon-wrap.icon-video {
        opacity: 1;
        transform: scale(1);
    }

    /* Поле пустое + режим микрофона → показываем микрофон */
    .action-btn.is-empty:not(.video-mode) .icon-wrap.icon-mic {
        opacity: 1;
        transform: scale(1);
    }

    /* Состояние записи */
    .action-btn.recording {
        background: var(--danger) !important;
        color: #fff !important;
        box-shadow: 0 0 0 4px rgba(var(--danger-rgb), 0.3) !important;
        transform: scale(1.1);
    }

    /* Индикатор "Потяни вверх для фиксации" */
    .lock-indicator {
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%) scale(0.5);
        background: var(--bg-secondary);
        color: var(--text-bright);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease;
        box-shadow: var(--shadow);
    }

    .action-btn.recording.show-lock .lock-indicator,
    .action-btn.recording.locked .lock-indicator {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }

    .action-btn.recording.locked {
        background: var(--success) !important;
        box-shadow: 0 0 0 4px rgba(35, 165, 90, 0.3) !important;
    }
        /* ============================================
       ИНТЕРАКТИВНЫЙ ОВЕРЛЕЙ ЗАПИСИ (TELEGRAM STYLE)
       ============================================ */
    .recording-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        pointer-events: none; 
        z-index: 5000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* На всякий случай скрываем сам оверлей голосовых */
    .recording-overlay.hidden {
        display: none !important;
    }

    /* ============================================
       КРУЖОК: ПОЛНОЭКРАННОЕ ОКНО ЗАПИСИ
       Запись идёт не «поверх чата», а в отдельном окне с размытым
       фоном: круг по центру, после остановки в этом же окне
       открывается предпросмотр. Стадии задаются атрибутом
       data-stage у #video-note-modal: starting → recording → preview.
       ============================================ */
    .video-note-modal {
        position: fixed;
        inset: 0;
        z-index: 5200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        animation: fadeIn 0.18s ease;
        overscroll-behavior: contain;
    }

    .video-note-modal.hidden {
        display: none !important;
    }

    /* Пока окно открыто, страница под ним не прокручивается */
    body.video-note-open {
        overflow: hidden;
    }

    /* Размытый фон: чат под окном остаётся угадываемым силуэтом */
    .video-note-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(6, 8, 14, 0.72);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        backdrop-filter: blur(22px) saturate(140%);
    }

    .video-note-shell {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        width: min(348px, 100%);
        padding: 4px;
    }

    /* Крестик в правом верхнем углу окна */
    .video-note-close {
        position: absolute;
        top: -6px;
        right: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .video-note-close:hover {
        background: rgba(255, 255, 255, 0.16);
        transform: scale(1.06);
    }

    .video-note-close .icon {
        width: 18px;
        height: 18px;
    }

    /* Сцена: круг + прогресс-кольцо снаружи */
    .video-note-stage {
        position: relative;
        width: min(300px, 72vw);
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: videoNoteIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .video-note-circle {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        background: #05070d;
        /* Без обводки: круг отделяется от фона мягкой тенью,
           чтобы видео не выглядело «в рамке» */
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .video-note-circle video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Фронтальная камера зеркалится, тыловая — нет (класс ставит JS) */
    .video-note-circle.mirrored video {
        transform: scaleX(-1);
    }

    /* Слой статуса: спиннер, пока включается камера */
    .video-note-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0 24px;
        text-align: center;
        color: rgba(255, 255, 255, 0.85);
        font-size: 12.5px;
        background: rgba(4, 6, 12, 0.72);
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .video-note-modal[data-stage="recording"] .video-note-overlay,
    .video-note-modal[data-stage="preview"] .video-note-overlay {
        opacity: 0;
        visibility: hidden;
    }

    .video-note-spinner {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-top-color: #fff;
        animation: historyLoaderSpin 0.8s linear infinite;
    }

    /* Таймер записи — внизу круга, чтобы не закрывать лицо */
    .video-note-timer {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 12.5px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .video-note-modal[data-stage="recording"] .video-note-timer,
    .video-note-modal[data-stage="preview"] .video-note-timer {
        opacity: 1;
    }

    /* Красная точка «идёт запись» */
    .video-note-rec {
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--danger);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .video-note-modal[data-stage="recording"] .video-note-rec {
        opacity: 1;
        animation: videoNoteRecPulse 1.6s ease-out infinite;
    }

    /* Кольцо прогресса: снаружи круга (inset -14px), поэтому
       не выглядит обводкой видео. Радиус 116 при viewBox 240 → C ≈ 729 */
    .video-note-ring {
        position: absolute;
        inset: -14px;
        width: calc(100% + 28px);
        height: calc(100% + 28px);
        transform: rotate(-90deg);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    /* В предпросмотре кольцо не нужно: это индикатор идущей записи,
       а длительность уже показывает таймер */
    .video-note-modal[data-stage="recording"] .video-note-ring {
        opacity: 1;
    }

    .video-note-ring-bg {
        fill: none;
        stroke: rgba(255, 255, 255, 0.12);
        stroke-width: 3;
    }

    .video-note-ring-bar {
        fill: none;
        stroke: var(--danger);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 729;
        stroke-dashoffset: 729;
        transition: stroke-dashoffset 0.2s linear;
    }

    /* Замок фиксации: справа от круга (внутри сцены, чтобы не уезжать
       к краю окна на широком экране), заполняется свайпом вверх */
    .video-note-lock {
        position: absolute;
        left: 100%;
        margin-left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 84px;
        border-radius: 21px;
        background: rgba(255, 255, 255, 0.08);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.55);
        opacity: 0;
        transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
        pointer-events: none;
    }

    .video-note-modal[data-stage="recording"] .video-note-lock {
        opacity: 1;
    }

    /* Заполнение снизу вверх: высоту задаёт JS через --vn-lock */
    .video-note-lock-fill {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--vn-lock, 0%);
        background: rgba(255, 255, 255, 0.18);
        transition: height 0.12s linear, background 0.2s ease;
    }

    .video-note-lock .icon {
        position: relative;
        width: 18px;
        height: 18px;
    }

    .video-note-lock .vn-lock-closed {
        display: none;
    }

    /* Свайп дошёл до порога — замок «щёлкнул» на закрытый */
    .video-note-lock.is-ready .vn-lock-open {
        display: none;
    }

    .video-note-lock.is-ready .vn-lock-closed {
        display: block;
    }

    /* Фиксация: зелёная подсветка вместо прыжка размера */
    .video-note-lock.locked {
        background: rgba(35, 165, 90, 0.35);
        color: #fff;
        box-shadow: 0 0 18px rgba(35, 165, 90, 0.45);
    }

    .video-note-lock.locked .video-note-lock-fill {
        background: rgba(35, 165, 90, 0.55);
    }

    /* Подсказка под кругом */
    .video-note-hint {
        color: rgba(255, 255, 255, 0.7);
        font-size: 12.5px;
        text-align: center;
        min-height: 18px;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .video-note-modal[data-stage="preview"] .video-note-hint,
    .video-note-modal[data-stage="starting"] .video-note-hint {
        display: none;
    }

    /* Нижние кнопки записи: переворот камеры + стоп */
    .video-note-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
    }

    .video-note-modal[data-stage="preview"] .video-note-controls,
    .video-note-modal[data-stage="starting"] .video-note-controls {
        display: none;
    }

    .video-note-ctrl {
        width: 52px;
        height: 52px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .video-note-ctrl .icon {
        width: 22px;
        height: 22px;
    }

    .video-note-ctrl:hover {
        background: rgba(255, 255, 255, 0.18);
        transform: scale(1.05);
    }

    .video-note-ctrl:active {
        transform: scale(0.94);
    }

    .video-note-ctrl:disabled {
        opacity: 0.4;
        cursor: default;
        transform: none;
    }

    /* Главная кнопка — стоп: крупнее и в акцентном цвете палитры */
    .video-note-stop {
        width: 64px;
        height: 64px;
        background: var(--accent);
    }

    .video-note-stop:hover {
        background: var(--accent-hover);
        box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    }

    .video-note-stop-square {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: #fff;
    }

    /* Предпросмотр: обычные кнопки системы .btn, снизу под кругом */
    .video-note-preview-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        animation: videoNoteIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .video-note-preview-actions.hidden {
        display: none !important;
    }

    .video-note-preview-actions .btn {
        min-width: 132px;
        padding: 11px 18px;
        font-size: 13.5px;
    }

    @keyframes videoNoteIn {
        from {
            opacity: 0;
            transform: scale(0.92);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes videoNoteRecPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.55);
        }
        70% {
            box-shadow: 0 0 0 8px rgba(var(--danger-rgb), 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
        }
    }

    /* Телефон: круг компактнее, кнопки предпросмотра делят ширину */
    @media (max-width: 480px) {
        .video-note-modal {
            padding: 16px 12px;
        }

        .video-note-shell {
            gap: 14px;
        }

        .video-note-stage {
            width: min(272px, 70vw);
        }

        .video-note-lock {
            width: 34px;
            height: 68px;
            border-radius: 17px;
            margin-left: 2px;
        }

        .video-note-preview-actions .btn {
            min-width: 0;
            flex: 1;
            padding: 11px 12px;
        }
    }

    /* Овал фиксации (Замок) — ЖЕСТКО НАД КНОПКОЙ */
    .lock-oval {
        position: absolute;
        bottom: 90px; /* Высота футера */
        right: 24px;  /* Прямо над кнопкой action-btn */
        background: var(--bg-secondary);
        width: 44px;
        height: 86px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        opacity: 0;
        transform: translateY(14px) scale(0.94);
        /* Плавное появление без «пружины»: переход только по нужным
           свойствам, иначе овал дёргается при каждом сдвиге пальца */
        transition:
            opacity 0.22s ease,
            transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.22s ease,
            box-shadow 0.26s ease;
    }

    .lock-oval.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .lock-oval.locked {
        background: var(--success);
        transform: translateY(0) scale(1.03);
        box-shadow: 0 0 16px rgba(35, 165, 90, 0.5);
    }

    .lock-oval .icon {
        width: 20px;
        height: 20px;
        color: var(--text-muted);
    }

    .lock-oval.locked .icon {
        color: #fff;
    }

    /* Подсказка */
    .recording-hint {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%) translateY(15px); /* Чуть ниже */
        font-size: 13px;
        color: #fff; /* Сделал текст белым для контраста */
        font-weight: 500;
        opacity: 0;
        transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        background: rgba(0,0,0,0.8); /* Сделал фон темнее */
        padding: 8px 16px;
        border-radius: 10px;
        backdrop-filter: blur(8px);
        white-space: nowrap;
        pointer-events: none;
    }
    
    .recording-hint.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* Всплывает наверх */
    }

    /* Перебиваем старые стили кнопки, делаем её красной при записи */
    .action-btn.recording {
        background: var(--danger) !important;
        color: #fff !important;
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(var(--danger-rgb), 0.3) !important;
    }

    /* Когда запись зафиксирована — кнопка становится кнопкой "Отправить" */
    .action-btn.locked {
        background: var(--accent) !important;
        box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.3) !important;
    }
        /* ============================================
       НОВАЯ МОДАЛКА УЧАСТНИКОВ
       ============================================ */
    .invite-code-box {
        background: var(--bg-tertiary);
        border: 1px dashed var(--border-light);
        border-radius: var(--radius);
        padding: 16px;
        text-align: center;
        margin-bottom: 20px;
    }

    .invite-code-box code {
        font-family: 'Courier New', monospace;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 3px;
        color: var(--accent);
    }

    .invite-code-box button:hover {
        color: var(--text-bright) !important;
    }

    /* Бейджи ролей: владелец — золотой, админ — красный */
    .member-row .role-badge {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .member-row .role-badge.role-owner {
        color: var(--role-owner);
        background: rgba(var(--role-owner-rgb), 0.15);
    }

    .member-row .role-badge.role-admin {
        color: var(--role-admin);
        background: rgba(var(--role-admin-rgb), 0.15);
    }

    /* Кнопка «Назначить админом» / «Снять админа» (видит только владелец) */
    .member-row .role-toggle-btn {
        font-size: 11px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.12);
        transition: background 0.2s, color 0.2s;
    }

    .member-row .role-toggle-btn:hover {
        background: var(--accent);
        color: #fff;
    }

    .member-row .role-toggle-btn.demote {
        color: var(--role-admin);
        background: rgba(var(--role-admin-rgb), 0.12);
    }

    .member-row .role-toggle-btn.demote:hover {
        background: var(--role-admin);
        color: #fff;
    }

    /* Ник автора в канале по его роли (класс вешает msgHtml в app.js) */
    .msg .head .name.role-owner {
        color: var(--role-owner);
    }

    .msg .head .name.role-admin {
        color: var(--role-admin);
    }

    /* Круглая кнопка добавления "+" */
    .member-row .add-btn-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(var(--accent-rgb), 0.15);
        color: var(--accent);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .member-row .add-btn-circle:hover {
        background: var(--accent);
        color: #fff;
        transform: scale(1.1);
    }

    /* Кнопка удаления (крестик) */
    .member-row .remove-btn {
        color: var(--text-muted);
        background: transparent;
        border: none;
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .member-row .remove-btn:hover {
        color: var(--danger);
        background: rgba(var(--danger-rgb), 0.15);
    }

    /* ============================================
       КНОПКА «ПОКИНУТЬ КАНАЛ» (модалка участников)
       Стильная danger-кнопка вместо дефолтной браузерной.
       ============================================ */
    #leave-channel-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        border: 1px solid rgba(var(--danger-rgb), 0.3);
        border-radius: var(--radius-sm);
        background: rgba(var(--danger-rgb), 0.08);
        color: var(--danger);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition), color var(--transition);
    }

    #leave-channel-btn:hover {
        background: rgba(var(--danger-rgb), 0.18);
        border-color: var(--danger);
        color: #ff5c5f;
    }

    #leave-channel-btn:active {
        transform: scale(0.99);
    }

    #leave-channel-btn .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* ============================================
       БЕСЕДЫ (групповые чаты)
       Строки в сайдбаре — те же .user-item, отличается
       только аватар-группа (.conv-avatar).
       ============================================ */
    .conv-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--accent), #7a5cf0);
        color: #fff;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .conv-avatar .icon {
        color: #fff;
    }

    /* ============================================
       КАСТОМНЫЙ ЧЕКБОКС
       Разметка: label.custom-checkbox > input[type=checkbox]
       + span.custom-checkbox__box (с SVG #icon-check) + подпись.
       Нативный input скрыт визуально, но остаётся доступным
       с клавиатуры и работает как обычный :checked.
       ============================================ */
    .custom-checkbox {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    /* Перебиваем .modal-box input (0,1,1): иначе чекбокс растянется.
       specificity .custom-checkbox input[type="checkbox"] — 0,2,1 */
    .custom-checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    .custom-checkbox__box {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1.5px solid var(--text-dim);
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s;
    }

    .custom-checkbox__box .icon {
        width: 12px;
        height: 12px;
        color: #fff;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.15s, transform 0.15s;
    }

    .custom-checkbox:hover .custom-checkbox__box {
        border-color: var(--accent);
    }

    .custom-checkbox input[type="checkbox"]:checked + .custom-checkbox__box {
        background: var(--accent);
        border-color: var(--accent);
    }

    .custom-checkbox input[type="checkbox"]:checked + .custom-checkbox__box .icon {
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox input[type="checkbox"]:focus-visible + .custom-checkbox__box {
        box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
    }

    .custom-checkbox__label {
        flex: 1;
        min-width: 0;
    }

    /* Модалка «Создать беседу»: список друзей с чекбоксами */
    .friend-pick-list {
        max-height: 240px;
        overflow-y: auto;
        margin-bottom: 12px;
        padding: 0;
    }

    .friend-pick-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--transition);
    }

    .friend-pick-row:hover {
        background: var(--bg-hover);
    }

    .friend-pick-name {
        flex: 1;
        font-size: 13px;
        color: var(--text-bright);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Подсказки внутри модалок беседы */
    .conv-empty-hint {
        font-size: 13px;
        color: var(--text-muted);
        padding: 8px 4px;
    }

    .conv-empty-hint.error {
        color: var(--danger);
    }

    /* Блоки модалки участников, которые видит только владелец.
       Глобального .hidden в проекте нет — правило своё у каждого блока. */
    #conversation-add-block.hidden,
    #conversation-owner-block.hidden {
        display: none !important;
    }

    /* Управление беседой: переименование и аватар */
    .conv-rename-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .conv-rename-row input {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }

    .conv-rename-row .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .conv-avatar-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    .conv-avatar-row > span:first-child {
        display: flex;
        flex-shrink: 0;
    }

    .conv-avatar-row .btn {
        flex-shrink: 0;
    }

    .conv-avatar-row .btn .icon {
        width: 16px;
        height: 16px;
    }

    .conv-avatar-row .conv-empty-hint {
        flex: 1;
        min-width: 0;
        padding: 0;
        font-size: 12px;
    }

    /* Метка «это ты» в списке участников */
    .member-you {
        margin-left: 6px;
        font-size: 11px;
        font-weight: 500;
        color: var(--text-dim);
    }

    /* Роль «Участник» — нейтральный бейдж (владелец / админ — золотой / красный) */
    .member-row .role-badge.role-member {
        color: var(--text-muted);
        background: var(--bg-tertiary);
    }

    /* Подвал модалки участников беседы */
    .conversation-modal-footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
    }

    #leave-conversation-btn,
    #delete-conversation-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        border: 1px solid rgba(var(--danger-rgb), 0.3);
        border-radius: var(--radius-sm);
        background: rgba(var(--danger-rgb), 0.08);
        color: var(--danger);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition), color var(--transition);
    }

    #leave-conversation-btn:hover,
    #delete-conversation-btn:hover {
        background: rgba(var(--danger-rgb), 0.18);
        border-color: var(--danger);
        color: #ff5c5f;
    }

    #leave-conversation-btn:active,
    #delete-conversation-btn:active {
        transform: scale(0.99);
    }

    #leave-conversation-btn .icon,
    #delete-conversation-btn .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* ============================================
       БАННЕР УСТАНОВКИ PWA
       Ненавязчивая плашка над полем ввода: показывается только
       в браузере (не в standalone), исчезает после установки
       или закрытия крестиком.
       ============================================ */
    #pwa-install-banner {
        position: fixed;
        left: 50%;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        z-index: 2500;
        display: flex;
        align-items: center;
        gap: 12px;
        width: min(440px, calc(100vw - 32px));
        padding: 12px 14px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
        transform: translateX(-50%);
        animation: pwaBannerIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #pwa-install-banner.hidden {
        display: none !important;
    }

    @keyframes pwaBannerIn {
        from {
            opacity: 0;
            transform: translate(-50%, 16px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translate(-50%, 0) scale(1);
        }
    }

    .pwa-banner-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--accent), #7a5cf0);
        color: #fff;
    }

    .pwa-banner-icon .icon {
        width: 20px;
        height: 20px;
        color: #fff;
    }

    .pwa-banner-content {
        flex: 1;
        min-width: 0;
    }

    .pwa-banner-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-bright);
    }

    .pwa-banner-text {
        margin-top: 3px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--text-muted);
    }

    .pwa-banner-btn {
        flex-shrink: 0;
        padding: 8px 14px;
        border: none;
        border-radius: var(--radius-sm);
        background: var(--accent);
        color: #fff;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--transition), transform 0.15s;
    }

    .pwa-banner-btn:hover {
        background: var(--accent-hover);
    }

    .pwa-banner-btn:active {
        transform: scale(0.96);
    }

    .pwa-banner-close {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition), color var(--transition);
    }

    .pwa-banner-close:hover {
        background: var(--bg-hover);
        color: var(--text-bright);
    }

    .pwa-banner-close .icon {
        width: 16px;
        height: 16px;
    }

    /* На мобилке плашка уже и без подписи — не закрывает чат */
    @media (max-width: 768px) {
        #pwa-install-banner {
            bottom: calc(84px + env(safe-area-inset-bottom, 0px));
            width: calc(100vw - 24px);
            gap: 10px;
            padding: 10px 12px;
        }

        .pwa-banner-text {
            display: none;
        }

        .pwa-banner-btn {
            padding: 7px 12px;
            font-size: 12px;
        }
    }

    /* ============================================
       МОБИЛКА: КОМПАКТНЫЕ СТРОКИ, ШАПКА, ПУЗЫРИ
       Второй этап редизайна: проверяем, что компактные
       размеры не ломают узкий экран (max-width: 768px).
       ============================================ */
    @media (max-width: 768px) {

        /* Шапка: минимум отступов; кнопки и аватар уже 34px (см. блок тач-целей) */
        .chat header {
            padding: 8px 12px;
            gap: 8px;
        }

        .chat header h1 {
            font-size: 15px;
        }

        /* Строки сайдбара на телефоне: те же 10px по вертикали, что и на
           десктопе (палец должен попадать по друзьям и беседам), у
           подканалов каналов — 8px + min-height 40px */
        .user-item {
            padding: 10px 10px;
        }

        .channel-btn {
            padding: 9px 10px;
        }

        /* Подканалы «Каналы» на телефоне чуть выше — палец должен попадать */
        .channel-group-container .channel-btn {
            min-height: 40px;
            padding: 9px 10px 9px 18px;
        }

        /* Линия под табами ближе к ним: на телефоне экономим вертикаль */
        .sidebar-tabs {
            margin-bottom: 12px !important;
            /* padding 2px вместо 4px: сам таб становится 32px — по нему
               легко попасть пальцем, высота контрола остаётся 36px */
            padding: 2px !important;
        }

        .sidebar-tabs::after {
            bottom: -6px;
        }

        /* Верх сайдбара на телефоне: те же строгие формы, отступы плотнее */
        .sidebar-header {
            padding: 12px 12px 8px;
        }

        .sidebar-search-wrap {
            padding: 6px 12px 8px !important;
        }

        /* Пузыри: меньше боковых отступов, скругления и тень прежние */
        .msg-body {
            padding: 9px 12px;
            border-radius: 10px;
            border-bottom-left-radius: var(--radius-tail);
        }

        .msg.mine .msg-body {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: var(--radius-tail);
        }
    }

    /* ============================================
       ЕДИНАЯ СИСТЕМА КНОПОК
       ============================================ */
    /* Все кнопки интерфейса собираются из базового класса .btn и одного
       модификатора: .btn-primary / .btn-secondary / .btn-ghost / .btn-danger /
       .btn-icon. Блок стоит последним в файле и перекрывает legacy-правила
       (.chat header button, .voice-panel-actions button) порядком и
       специфичностью — без !important. */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 14px;
        /* Стеклянная база: полупрозрачный фон, волосяная светлая рамка, blur */
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.045);
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 10px rgba(0, 0, 0, 0.25);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        white-space: nowrap;
        /* Плавно всё: фон, рамка, тень, подъём */
        transition: all 0.3s ease;
    }

    .btn:focus-visible {
        outline: 2px solid var(--accent-neon-2);
        outline-offset: 2px;
    }

    /* Общий ховер: лёгкий подъём и неоновая тень. Модификаторы ниже
       перекрывают тень/фон своим цветом (порядок правил в файле). */
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 8px 22px rgba(0, 0, 0, 0.35),
            0 0 18px rgba(var(--accent-neon-1-rgb), 0.22);
    }

    /* Основное действие: градиент от фиолета к синему + неоновая тень */
    .btn-primary {
        background: linear-gradient(135deg, var(--accent-neon-1) 0%, #6c3bff 55%, #2b6bff 100%);
        border-color: rgba(255, 255, 255, 0.18);
        color: #fff;
        box-shadow: 0 6px 20px rgba(var(--accent-neon-1-rgb), 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #c74dff 0%, #7c4bff 55%, #3f8bff 100%);
        /* Тень ярче и шире: кнопка «светится», а не просто светлеет */
        box-shadow: 0 10px 30px rgba(var(--accent-neon-1-rgb), 0.50),
            0 0 24px rgba(var(--accent-neon-2-rgb), 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.32);
        transform: translateY(-2px);
    }

    /* Второстепенное действие: стекло с циановой подсветкой при наведении */
    .btn-secondary {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--glass-border);
        color: var(--text);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(var(--accent-neon-2-rgb), 0.35);
        color: var(--text-bright);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 8px 22px rgba(0, 0, 0, 0.35),
            0 0 18px rgba(var(--accent-neon-2-rgb), 0.18);
        transform: translateY(-2px);
    }

    /* Тихая кнопка: строки настроек, «Отмена». Прозрачная, без blur —
       в списках десятки таких кнопок, размытие там ни к чему. */
    .btn-ghost {
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--glass-border);
        color: var(--text);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
        transform: translateY(-2px);
    }

    /* Опасное действие: розово-красный неон */
    .btn-danger {
        background: linear-gradient(135deg, var(--accent-neon-3) 0%, var(--danger) 100%);
        border-color: rgba(255, 255, 255, 0.16);
        color: #fff;
        box-shadow: 0 6px 20px rgba(var(--accent-neon-3-rgb), 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .btn-danger:hover {
        background: linear-gradient(135deg, #ff4d9c 0%, #ff4d6d 100%);
        box-shadow: 0 10px 28px rgba(var(--accent-neon-3-rgb), 0.50),
            0 0 22px rgba(var(--danger-rgb), 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
        transform: translateY(-2px);
    }

    /* Квадратная кнопка-иконка: шапка чата, футер, голосовая панель */
    .btn-icon {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 8px;
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .btn-icon .icon {
        width: 18px;
        height: 18px;
    }

    .btn-icon:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: var(--glass-border);
        color: var(--text-bright);
        transform: scale(1.05);
        box-shadow: 0 0 16px rgba(var(--accent-neon-1-rgb), 0.25);
    }

    /* Нажатие и недоступное состояние идут после hover, чтобы перекрывать его */
    .btn:active {
        transform: scale(0.97);
    }

    .btn:disabled,
    .btn:disabled:hover {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* --- Поправки под legacy-контейнеры (их правила специфичнее класса) --- */
    /* Шапка: .chat header button задаёт 36×36 круг — приводим к .btn-icon */
    .chat header .btn-icon {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 8px;
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
        box-shadow: none;
    }

    .chat header .btn-icon:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: var(--glass-border);
        color: var(--text-bright);
        transform: scale(1.05);
        box-shadow: 0 0 16px rgba(var(--accent-neon-1-rgb), 0.25);
    }

    .chat header .btn-icon:active {
        transform: scale(0.97);
    }

    /* Голосовая панель: было 36×36 кругом на фоне --bg-tertiary */
    .voice-panel-actions .btn-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
    }

    .voice-panel-actions .btn-icon:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: var(--glass-border);
        color: var(--text-bright);
        transform: scale(1.05);
        box-shadow: 0 0 14px rgba(var(--accent-neon-1-rgb), 0.22);
    }

    .voice-panel-actions .btn-icon:active {
        transform: scale(0.97);
    }

    .voice-panel-actions .btn-icon.muted,
    .voice-panel-actions .btn-icon.btn-danger,
    .voice-panel-actions .btn-icon.active {
        background: var(--danger);
        color: #fff;
    }

    .voice-panel-actions .btn-icon.active {
        background: var(--accent);
    }

    /* Навигация в настройках: .btn-ghost, но текст по левому краю */
    .settings-nav-item.btn {
        justify-content: flex-start;
        text-align: left;
    }

    .settings-nav-item.btn.active:hover {
        background: rgba(var(--accent-rgb), 0.15);
        color: var(--accent);
    }

    /* Мобильные тач-цели: иконки в футере остаются 44×44 из блока выше */
    @media (max-width: 768px) {
        .btn-icon {
            width: 40px;
            height: 40px;
        }

        .chat header .btn-icon {
            width: 36px;
            height: 36px;
        }
    }

    /* ============================================
       ПРАВАЯ ПАНЕЛЬ УЧАСТНИКОВ (Discord-style)
       На десктопе — колонка справа от сообщений, внутри .chat-body.
       На мобилке (блок ниже) — фиксированный drawer с затемнением.
       ============================================ */
    /* «Сообщения + панель»: внутри .chat появляется горизонтальный ряд */
    .chat-body {
        display: flex;
        flex-direction: row;
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
        gap: 12px;
        overflow: hidden;
    }

    /* Левая часть чата: сообщения, плашки ответа/вложений и футер.
       Когда открыта правая панель, сжимается ВЕСЬ этот столбец целиком
       (flex: 1 + min-width: 0), как в Discord, а не только #messages-wrap. */
    .chat-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        gap: 12px;
    }

    /* Дети .chat-main раньше были прямыми детьми .chat — сохраняем им
       те же гарантии против горизонтального overflow */
    .chat-main>* {
        min-width: 0;
        box-sizing: border-box;
    }

    #members-panel {
        display: flex;
        flex-direction: column;
        flex: 0 0 240px;
        width: 240px;
        min-width: 0;
        background: var(--bg-tertiary);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    /* Глобального .hidden в проекте нет — у панели своё правило */
    #members-panel.hidden {
        display: none !important;
    }

    .members-panel-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 10px 10px 14px;
        border-bottom: 1px solid var(--panel-divider);
    }

    .members-panel-header h3 {
        margin: 0;
        min-width: 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .members-panel-header .btn-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        color: var(--text-muted);
    }

    .members-panel-header .btn-icon:hover {
        background: var(--bg-hover);
        color: var(--text);
    }

    /* Список участников — единственная прокручиваемая часть панели */
    .members-panel-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Группы «В сети» / «Не в сети» — как в Discord */
    .member-group-header {
        flex: 0 0 auto;
        padding: 16px 10px 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member-item {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background 0.15s;
    }

    .member-item:hover {
        background: var(--bg-hover);
    }

    /* Оффлайн-участники приглушены — как в Discord */
    .member-item.offline {
        opacity: 0.4;
    }

    .member-avatar-wrap {
        position: relative;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
    }

    .member-status-dot {
        position: absolute;
        right: -2px;
        bottom: -2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--bg-tertiary);
        box-sizing: border-box;
    }

    .member-status-dot.online {
        background: var(--success);
    }

    .member-status-dot.offline {
        background: var(--text-dim);
    }

    .member-info {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin-left: 10px;
    }

    .member-name {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member-name-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .member-name .member-you {
        flex-shrink: 0;
        margin-left: 6px;
        font-size: 10px;
        font-weight: 600;
        color: var(--text-dim);
    }

    .member-status-text {
        min-width: 0;
        font-size: 12px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .members-panel-role {
        flex-shrink: 0;
        padding: 2px 6px;
        border-radius: var(--radius-pill);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }

    .members-panel-role.role-owner {
        color: #ffd479;
        background: rgba(255, 196, 0, 0.14);
    }

    .members-panel-role.role-admin {
        color: #ff8a8a;
        background: rgba(var(--danger-rgb), 0.14);
    }

    .members-panel-empty {
        padding: 12px;
        font-size: 12px;
        line-height: 1.4;
        color: var(--text-muted);
    }

    .members-panel-empty.error {
        color: var(--danger);
    }

    .members-panel-footer {
        flex: 0 0 auto;
        padding: 10px 12px;
        border-top: 1px solid var(--panel-divider);
    }

    .members-panel-footer .btn {
        width: 100%;
        padding: 7px 10px;
        font-size: 12px;
    }

    /* Кнопка «Участники» в шапке подсвечена, пока панель открыта */
    #channel-members-btn.active,
    #conversation-members-btn.active {
        background: rgba(var(--accent-rgb), 0.16);
        color: var(--accent);
    }

    /* На узких десктопах панель уже, чтобы чат не сжимался в точку */
    @media (max-width: 1100px) and (min-width: 769px) {
        #members-panel {
            flex-basis: 200px;
            width: 200px;
        }
    }

    /* Затемнение под drawer: на десктопе не нужно */
    .members-panel-backdrop {
        display: none;
    }

    /* ============================================
       МОБИЛКА: ВЫДВИЖНАЯ ПАНЕЛЬ УЧАСТНИКОВ + СЕТКА ВКЛАДОК НАСТРОЕК
       ============================================ */
    @media (max-width: 768px) {
        /* На телефоне панель выдвижная — зазор в ряду не нужен */
        .chat-body {
            gap: 0;
        }

        /* Как и .chat, на мобилке столбец чата живёт без зазоров:
           футер прижат к сообщениям, как раньше */
        .chat-main {
            gap: 0;
        }

        /* Предки панели: .app → .chat → .chat-body. Если у любого из них
           появится transform / filter / backdrop-filter / will-change /
           contain / perspective, он станет СОДЕРЖАЩИМ БЛОКОМ для
           position: fixed — и панель будет позиционироваться относительно
           чата, а не окна (отсюда «полосы» шапки сверху). На мобилке эти
           свойства предкам не нужны — глушим их, чтобы fixed всегда считался
           от вьюпорта. Проверено: сейчас таких свойств у них нет, блок
           работает как страховка на будущее (и против инлайновых стилей). */
        .app,
        .chat,
        .chat-body {
            transform: none !important;
            filter: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            will-change: auto !important;
            contain: none !important;
            perspective: none !important;
        }

        /* Полноэкранный drawer — «единое целое» с экраном, как .sidebar.open.
           1) position/размеры — с !important: никакое чужое правило не сдвинет
              панель обратно в колонку .chat-body;
           2) top/right/bottom/left В ДОПОЛНЕНИЕ к inset: 0 — движки без
              поддержки inset (Safari < 14.1, старые WebView) иначе оставили бы
              fixed-панель на статической позиции, т.е. под шапкой чата;
           3) height: 100dvh — высота динамического вьюпорта, поэтому полос
              сверху и снизу не остаётся (шапка и футер чата закрыты);
           4) никаких скруглений, теней и отступов — рамка совпадает с экраном. */
        #members-panel {
            position: fixed !important;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            inset: 0;
            width: 100vw;
            max-width: none;
            max-height: none;
            min-width: 0;
            min-height: 0;
            height: 100vh;
            height: 100dvh;
            margin: 0 !important;
            flex: 0 0 auto;
            /* Заголовок, список и футер — по центру по горизонтали */
            align-items: center;
            box-sizing: border-box;
            z-index: 1110;
            background: var(--bg-secondary);
            border-radius: 0 !important;
            box-shadow: none !important;
            overflow: hidden;
            /* «Чёлка» и полоска жеста остаются свободными (фон панели
               при этом всё равно закрашивает их — padding внутри) */
            padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
                env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
            /* Закрытая панель ждёт за правым краем и не ловит клики */
            transform: translateX(100%);
            visibility: hidden;
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
        }

        /* .hidden на мобилке не убирает панель из DOM (она fixed и не влияет
           на раскладку) — иначе не было бы анимации выезда. Здесь же явно
           продублировано закрытое состояние. */
        #members-panel.hidden {
            display: flex !important;
            transform: translateX(100%);
            visibility: hidden;
        }

        /* Открытая панель полностью закрывает экран (включая шапку и футер
           чата). Правило стоит ПОСЛЕ .hidden: специфичность одинаковая
           (id + класс), поэтому .open выигрывает и снимает закрытое состояние. */
        #members-panel.open {
            display: flex !important;
            transform: translateX(0);
            visibility: visible;
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
        }

        /* Внутри полноэкранной панели контент не растягивается на всю ширину
           планшета: колонка по центру (max-width 560px) */
        #members-panel .members-panel-header,
        #members-panel .members-panel-list,
        #members-panel .members-panel-footer {
            width: 100%;
            max-width: 560px;
        }

        #members-panel .members-panel-header {
            padding: 14px 16px 12px;
        }

        #members-panel .members-panel-header h3 {
            font-size: 15px;
        }

        /* Крестик — полноценная тач-цель */
        #members-panel .members-panel-header .btn-icon {
            width: 36px;
            height: 36px;
        }

        /* Список — единственная прокручиваемая часть панели */
        #members-panel .members-panel-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding: 10px 16px;
            gap: 4px;
        }

        #members-panel .member-item {
            padding: 8px 10px;
        }

        #members-panel .member-name {
            font-size: 15px;
        }

        #members-panel .member-status-text {
            font-size: 13px;
        }

        #members-panel .members-panel-footer {
            padding: 12px 16px;
        }

        #members-panel .members-panel-footer .btn {
            min-height: 44px;
            font-size: 14px;
        }

        /* Затемнение: тоже на весь экран, живёт под панелью (1100 < 1110).
           top/right/bottom/left дублируют inset для движков без его поддержки. */
        .members-panel-backdrop {
            display: block;
            position: fixed !important;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            inset: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            margin: 0 !important;
            border-radius: 0 !important;
            z-index: 1100;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s;
        }

        .members-panel-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        /* Вкладки настроек: сетка 3×2 (иконка сверху, подпись снизу).
           Все 5 вкладок видны сразу, горизонтального скролла нет. */
        .settings-nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            width: 100%;
            flex-shrink: 0;
            padding: 10px;
            border-right: none;
            border-bottom: 1px solid var(--bg-active);
            overflow: visible;
        }

        /* Селектор с .btn перекрывает базовый padding/font-size системы .btn */
        .settings-nav-item,
        .settings-nav-item.btn {
            width: 100%;
            min-width: 0;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            padding: 8px 4px;
            font-size: 11px;
            line-height: 1.15;
            text-align: center;
            white-space: normal;
        }

        .settings-nav-item .icon {
            width: 20px;
            height: 20px;
        }

        /* Админ-вкладка включается инлайновым display: flex из openSettings */
        #settings-nav-admin {
            flex-direction: column;
        }
    }


/* ============================================
   ИНДИКАТОР ПОДГРУЗКИ ИСТОРИИ (keyset-пагинация)
   Оверлей внутри #messages-wrap (она уже position: relative): не участвует
   в прокрутке ленты и не сдвигает сообщения, когда пользователь долистал
   до самого верха и клиент запрашивает предыдущую страницу.
   ============================================ */
#history-loader {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}

#history-loader.hidden {
    display: none;
}

/* Спиннер: только у «подгрузки», без лишних картинок */
#history-loader::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: historyLoaderSpin 0.7s linear infinite;
}

@keyframes historyLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ДЕСКТОП-КЛИЕНТ (TAURI): КАСТОМНАЯ ШАПКА ОКНА
   Разметка шапки есть в index.html всегда, но видна только внутри Tauri:
   app.js вешает на <body> класс .tauri-app, когда доступен window.__TAURI__.
   В обычном браузере полосы нет — там своя рамка окна.
   Окно создаётся с "decorations": false (src-tauri/tauri.conf.json),
   поэтому перетаскивание (data-tauri-drag-region) и кнопки управления —
   наша зона ответственности.
   ============================================ */
.window-titlebar {
    display: none;
}

/* Высота полосы: от неё считаются отступы контента и экрана входа */
body.tauri-app {
    --titlebar-h: 34px;
}

body.tauri-app .window-titlebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--titlebar-h);
    z-index: 9500;
    /* Выше модалок (3000-3100) и панелей (1110), но ниже тостов (10000)
       и полноэкранной трансляции (9999): кнопки окна доступны всегда. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px 0 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-active);
    box-sizing: border-box;
    /* Иначе на полосе выделяется текст при перетаскивании окна */
    user-select: none;
    -webkit-user-select: none;
}

/* Бренд в шапке: маленькая иконка и разреженное имя */
.window-titlebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.window-titlebar-logo {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent);
}

/* ===== Кнопки управления окном =====
   Маленькие кружки: в покое прозрачные, при наведении — свой цвет
   (жёлтый — свернуть, зелёный — развернуть, красный — закрыть). */
.window-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.window-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.window-btn .icon {
    width: 14px;
    height: 14px;
    margin: 0;
    stroke-width: 2.25;
}

.window-btn:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
}

.window-btn:active {
    transform: scale(0.92);
}

.window-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.window-btn-min:hover {
    background: rgba(250, 166, 26, 0.18);
    color: #faa61a;
}

.window-btn-max:hover {
    background: rgba(59, 165, 92, 0.18);
    color: #3ba55c;
}

.window-btn-close:hover {
    background: rgba(237, 66, 69, 0.22);
    color: #ed4245;
}

/* Контент под шапкой: .app остаётся высотой в 100vh (панели по-прежнему
   касаются нижнего края окна), просто опускается верхний отступ. */
body.tauri-app .app {
    padding-top: calc(12px + var(--titlebar-h));
}

/* Экран входа растянут inset: 0 — опускаем верх, чтобы логотип и стеклянная
   карточка не заезжали под полосу */
body.tauri-app #auth-screen {
    top: var(--titlebar-h);
}

/* Плашка установки PWA в десктоп-клиенте не нужна: приложение уже установлено */
body.tauri-app #pwa-install-banner {
    display: none !important;
}

/* Подсказки кнопок окна: текст из data-tooltip показываем своей плашкой
   (у кнопок шапки нет места под браузерный title). */
.window-btn[data-tooltip] {
    position: relative;
}

.window-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.88);
    color: #f2f3f5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.window-btn[data-tooltip]:hover::after,
.window-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ============================================
   МОБИЛЬНЫЙ КЛИЕНТ TAURI (ANDROID / iOS)
   ============================================
   app.js вешает .tauri-mobile по user agent, когда приложение запущено
   в нативной оболочке на телефоне. Отличия от десктопного клиента:

   1. Десктопная шапка окна (.window-titlebar с кнопками свернуть/закрыть)
      не нужна: сверху статус-бар ОС, снизу навбар. На Android content
      выглядел так, будто шапка уехала под часы и батарею.
   2. Отступы от системных баров вычитает нативный слой до WebView
      (MainActivity: WindowInsets → padding контейнера), поэтому вьюпорт
      уже меньше экрана — обнуляем --titlebar-h и safe-area переменные,
      иначе получится двойной отступ.
   3. .app на мобилке должен остаться без рамки (padding: 0 из медиазапроса),
      а правило body.tauri-app .app ниже по файлу добавляло 12px + titlebar. */
body.tauri-mobile {
    --titlebar-h: 0px;
    --atm-safe-top: 0px;
    --atm-safe-bottom: 0px;
}

body.tauri-mobile .window-titlebar {
    display: none !important;
}

@media (max-width: 768px) {
    body.tauri-mobile .app {
        padding: 0;
    }
}

/* ============================================
   OTA-ОБНОВЛЕНИЕ ПРИЛОЖЕНИЯ
   Модалка #ota-modal рисуется по манифесту
   https://atmoslinked.space/updates/latest.json (см. app.js).
   ============================================ */
#ota-modal {
    /* поверх настроек (3000), профиля и подтверждений (3100) */
    z-index: 3200;
}

.ota-box {
    width: 420px;
    max-width: calc(100vw - 32px);
}

.ota-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.ota-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--accent);
}

.ota-icon .icon {
    width: 22px;
    height: 22px;
}

.ota-head-text h2 {
    margin: 0 0 4px;
    font-size: 19px;
}

.ota-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

.ota-version {
    font-weight: 700;
    color: var(--accent);
}

.ota-notes {
    margin: 0 0 12px;
    max-height: 180px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.ota-size {
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-dim);
}

.ota-hint {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    color: var(--text-dim);
}

/* Глобального .hidden в проекте нет — каждый блок скрывает себя сам. */
#ota-notes.hidden,
#ota-size.hidden,
#ota-progress.hidden,
#ota-error.hidden,
#ota-permission-btn.hidden {
    display: none;
}

.ota-progress {
    margin: 4px 0 14px;
}

.ota-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.ota-progress-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.2s ease;
}

/* Размер файла неизвестен: полоска «бежит» по треку. */
.ota-progress-bar-indeterminate {
    width: 100% !important;
    animation: otaIndeterminate 1.1s ease-in-out infinite;
}

@keyframes otaIndeterminate {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.ota-progress-text {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.ota-error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(237, 66, 69, 0.35);
    border-radius: var(--radius-sm);
    background: rgba(237, 66, 69, 0.12);
    color: #ed4245;
    font-size: 13px;
    line-height: 1.45;
}

.ota-permission-btn {
    width: 100%;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .ota-box {
        padding: 24px 20px;
    }

    .ota-head-text h2 {
        font-size: 18px;
    }
}

/* ============================================================
   РЕДИЗАЙН «NEO ATMOS»: ЖИВОЙ ФОН, СТЕКЛО, НЕОН
   ------------------------------------------------------------
   Фундамент нового стиля. Блок стоит последним в файле, поэтому
   перекрывает прежние фоны панелей без !important.
   Логика (app.js) не тронута: все классы и id прежние.
   1) живой фон — два фиксированных слоя под интерфейсом;
   2) стеклянные панели — сайдбар, шапка, футер, участники, модалки;
   3) неоновые пузыри и светлая тема на тех же токенах.
   ============================================================ */

html {
    background: var(--bg-shell);
}

/* --- 1. Живой фон: неоновые пятна и сетка ПОД интерфейсом ---
   ::before и ::after — фиксированные слои с z-index: 0, .app поднят
   на z-index: 1 (см. правило .app выше). На мобилке fixed-панель
   участников по-прежнему считается от вьюпорта: filter/transform
   стоят на самих псевдоэлементах, а не на предках панели. */
body::before,
body::after {
    content: '';
    position: fixed;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Три радиальных зарева (магента / циан / розовый). Дрейфуют очень
   медленно, alternate — чтобы в конце цикла не было «прыжка». */
body::before {
    inset: -30vmax;
    background:
        radial-gradient(38vmax 38vmax at 18% 24%, rgba(var(--accent-neon-1-rgb), 0.30), transparent 70%),
        radial-gradient(34vmax 34vmax at 82% 16%, rgba(var(--accent-neon-2-rgb), 0.20), transparent 70%),
        radial-gradient(36vmax 36vmax at 66% 84%, rgba(var(--accent-neon-3-rgb), 0.18), transparent 70%);
    animation: atmosAuroraDrift 36s ease-in-out infinite alternate;
}

/* Едва заметная сетка поверх зарева. Слой на 64px больше вьюпорта,
   поэтому сдвиг на клетку бесшовен, а маска прячет края. */
body::after {
    inset: -64px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 92%);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 92%);
    animation: atmosGridPan 48s linear infinite;
}

@keyframes atmosAuroraDrift {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1);
    }

    50% {
        transform: translate3d(3%, 3%, 0) scale(1.08);
    }

    100% {
        transform: translate3d(4%, -3%, 0) scale(1.02);
    }
}

/* Сдвиг ровно на клетку: шаг 64px повторяется, стыка не видно */
@keyframes atmosGridPan {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(64px, 64px, 0);
    }
}

/* --- 2. Стеклянные панели ---
   Один рецепт на все крупные поверхности: полупрозрачный фон, blur 12px
   и волосяная светлая рамка. Радиусы и отступы не меняются — их задают
   прежние правила, поэтому мобильная раскладка (радиус 0, drawer) цела. */
.sidebar,
.chat header,
.chat-main>footer,
#members-panel,
#pinned-bar,
#reply-bar,
#attach-bar,
.modal-box {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Верхняя полоса нативного десктоп-окна — тоже стекло */
body.tauri-app .window-titlebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom: 1px solid var(--glass-border);
}

/* «Дно» чата: тёмное стекло, сквозь которое угадывается зарево.
   backdrop-filter здесь намеренно НЕ используется: это прокручиваемая
   область с сотнями сообщений, и blur на весь экран в ней заметно дороже,
   чем полупрозрачный фон — зарево и так читается сквозь него. */
#messages-wrap {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45), var(--shadow-sm);
}

#messages {
    background: transparent;
}

/* Пузыри: волосяная светлая рамка для чёткости на тёмном стекле */
.msg-body {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Свои сообщения светятся в цвет акцента */
.msg.mine .msg-body {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.28);
}

/* --- 3. Светлая тема: тот же фон, но светлый и приглушённый --- */
body.light-theme::before {
    opacity: 0.55;
}

body.light-theme::after {
    background-image:
        linear-gradient(rgba(20, 20, 45, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 20, 45, 0.05) 1px, transparent 1px);
    opacity: 0.7;
}

/* Кнопки-стёкла на белом: база .btn — почти белая вуаль, в светлой теме
   она «исчезает». Здесь белая поверхность с мягкой тенью, а не серая. */
body.light-theme .btn {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(74, 60, 44, 0.10);
}

body.light-theme .btn:hover {
    background: #ffffff;
}

/* Градиент и белый текст .btn-primary/.btn-danger остаются: на светлом
   фоне это главный цветовой акцент. Фон приходится задавать тем же уровнем
   (body + класс), иначе правило .btn выше перебивало .btn-primary и кнопки
   становились серыми с белым текстом. */
body.light-theme .btn-primary,
body.light-theme .btn-primary:hover,
body.light-theme .btn-danger,
body.light-theme .btn-danger:hover {
    color: #fff;
}

body.light-theme .btn-primary {
    background: linear-gradient(135deg, var(--accent-neon-1) 0%, #6c3bff 55%, #2b6bff 100%);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(var(--accent-neon-1-rgb), 0.28);
}

body.light-theme .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-neon-1) 0%, #7c4bff 55%, #3f8bff 100%);
    box-shadow: 0 8px 22px rgba(var(--accent-neon-1-rgb), 0.34);
}

body.light-theme .btn-danger {
    background: linear-gradient(135deg, var(--accent-neon-3) 0%, var(--danger) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(var(--accent-neon-3-rgb), 0.26);
}

body.light-theme .btn-danger:hover {
    background: linear-gradient(135deg, var(--accent-neon-3) 0%, #c43652 100%);
    box-shadow: 0 8px 22px rgba(var(--accent-neon-3-rgb), 0.32);
}

body.light-theme .btn-secondary {
    background: rgba(255, 255, 255, 0.70);
}

body.light-theme .btn-secondary:hover {
    background: #ffffff;
}

body.light-theme .btn-ghost,
body.light-theme .btn-ghost:hover,
body.light-theme .btn-icon {
    background: transparent;
}

body.light-theme .btn-icon:hover,
body.light-theme .chat header .btn-icon:hover,
body.light-theme .voice-panel-actions .btn-icon:hover {
    background: rgba(20, 20, 45, 0.07);
}

/* Пузыри в светлой теме: рамка тёмная, «свои» — с белой */
body.light-theme .msg-body {
    border-color: rgba(20, 20, 45, 0.07);
}

body.light-theme .msg.mine .msg-body {
    border-color: rgba(255, 255, 255, 0.55);
}

/* Виньетка «дна» чата в светлой теме: тёмная тень по краям (0.45) на белом
   фоне читается как грязь — здесь она почти незаметная. */
body.light-theme #messages-wrap {
    box-shadow: inset 0 0 60px rgba(23, 26, 33, 0.05), var(--shadow-sm);
}

/* --- 4. Доступность и экономия батареи ---
   Пользователь просил меньше движения — фон становится статичным. */
@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after {
        animation: none;
    }
}

/* ============================================================
   РЕДИЗАЙН «NEO ATMOS», ФАЗА 2
   САЙДБАР, АВАТАРЫ, VAD, ПУЗЫРИ, ПАНЕЛЬ ВВОДА, МОДАЛКИ
   ------------------------------------------------------------
   Блок, как и фундамент Фазы 1, стоит последним в файле и
   перекрывает прежние правила порядком. Логика не тронута: все
   классы (.user-item, .avatar, .voice-user.speaking, .msg.mine,
   .modal-box) по-прежнему рисует app.js.
   ============================================================ */

/* --- 1. Строки сайдбара: воздух под палец и плавность ---
   Друзья и беседы живут в одном списке (.user-item), поэтому
   padding и min-height подняты сразу для обоих: строка 54px —
   комфортная цель для пальца, имя и превью не слипаются. */
.user-item {
    padding: 10px 12px;
    gap: 11px;
    min-height: 54px;
    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.channel-btn,
.channel-category,
.member-item {
    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* Стеклянный ховер: неоновая подсветка акцентом и сдвиг вправо.
   Только для мыши: на тач-устройствах :hover «залипает», поэтому
   там остаются прежние правила и анимация тапа (.tapped). */
@media (hover: hover) and (pointer: fine) {
    .user-item:hover,
    .channel-btn:hover,
    .channel-category:hover {
        background: linear-gradient(
            90deg,
            rgba(var(--accent-rgb), 0.16) 0%,
            rgba(var(--accent-rgb), 0.05) 62%,
            rgba(var(--accent-rgb), 0) 100%
        );
        color: var(--text-bright);
        transform: translateX(4px);
        box-shadow:
            0 0 0 1px rgba(var(--accent-rgb), 0.20),
            0 6px 18px rgba(var(--accent-rgb), 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    /* Закреплённая строка: полоска слева (inset 3px из legacy-правила)
       должна остаться — неоновая тень её больше не перекрывает. */
    .user-item.pinned:hover {
        background: linear-gradient(
            90deg,
            rgba(var(--accent-rgb), 0.24) 0%,
            rgba(var(--accent-rgb), 0.08) 62%,
            rgba(var(--accent-rgb), 0) 100%
        );
        box-shadow:
            inset 3px 0 0 var(--accent),
            0 0 0 1px rgba(var(--accent-rgb), 0.22),
            0 6px 18px rgba(var(--accent-rgb), 0.18);
    }

    /* Участники: панель узкая, поэтому без сдвига — только подсветка */
    .member-item:hover {
        background: rgba(var(--accent-rgb), 0.10);
        box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
    }
}

/* --- 2. Аватары: круг + тонкое градиентное кольцо ---
   У .avatar фон задаётся инлайново (цвет из nameColor или фото),
   поэтому градиент рисуем на обёртке: 2px padding превращаются
   в кольцо, а сам аватар растягивается на content-box.
   box-sizing: border-box сохраняет прежний внешний размер. */
.user-item .avatar-wrap,
.member-avatar-wrap {
    width: 34px;
    height: 34px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 50%;
    background: linear-gradient(
        140deg,
        var(--accent-neon-1) 0%,
        var(--accent-neon-2) 100%
    );
}

.user-item .avatar-wrap .avatar,
.member-avatar-wrap .avatar {
    width: 100% !important;
    height: 100% !important;
}

/* Активный чат: кольцо уже градиентное — оставляем мягкое свечение
   вместо прежней второй рамки толщиной 2px. */
.user-item.active .avatar-wrap {
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.60),
        0 0 16px rgba(var(--accent-rgb), 0.45);
}

/* Крупные аватары (шапка, профиль) и аватарки в сообщениях: у них
   фон/картинка внутри одного элемента, поэтому тонкое кольцо плюс
   неоновый ореол даём тенями — вёрстка не меняется. */
.msg .avatar,
.chat-header-avatar,
.profile-avatar {
    box-shadow:
        0 0 0 1px rgba(var(--accent-neon-1-rgb), 0.45),
        0 0 12px rgba(var(--accent-neon-2-rgb), 0.22);
}

.mini-profile-avatar {
    padding: 2px;
    box-sizing: border-box;
    background: linear-gradient(
        140deg,
        var(--accent-neon-1) 0%,
        var(--accent-neon-2) 100%
    );
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.35);
}

.mini-profile-avatar .avatar {
    width: 100% !important;
    height: 100% !important;
}

/* --- 3. VAD: кто говорит — пульсирующее неоновое кольцо ---
   Класс .speaking ставит app.js (setVoiceUserSpeaking) на строку
   .voice-user. Анимация переливается циан → розовый, поэтому
   говорящего видно даже боковым зрением. */
@keyframes atmosSpeakingPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(var(--accent-neon-2-rgb), 0.90),
            0 0 10px 2px rgba(var(--accent-neon-2-rgb), 0.45);
    }

    50% {
        box-shadow:
            0 0 0 2px rgba(var(--accent-neon-3-rgb), 0.95),
            0 0 18px 5px rgba(var(--accent-neon-3-rgb), 0.55);
    }
}

.voice-user.speaking .avatar,
.avatar.speaking {
    animation: atmosSpeakingPulse 1.2s ease-in-out infinite;
    transform: scale(1.08);
}

.voice-user.speaking .name {
    color: var(--accent-neon-2);
    text-shadow: 0 0 10px rgba(var(--accent-neon-2-rgb), 0.55);
}

/* --- 4. Пузыри: стекло, градиентная рамка у своих, плавный вход --- */
.msg-body {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background var(--transition), box-shadow var(--transition);
}

/* Свои: градиентная рамка без псевдоэлементов — прозрачный border,
   нижний слой красит border-box (кольцо), верхний — padding-box.
   Заливка плотная: белый текст внутри остаётся читаемым. */
.msg.mine .msg-body {
    border: 1px solid transparent;
    background-image:
        linear-gradient(
            135deg,
            #8a24eb 0%,
            #5a2cdc 52%,
            #2058dc 100%
        ),
        linear-gradient(
            135deg,
            var(--accent-neon-1) 0%,
            var(--accent-neon-2) 62%,
            var(--accent-neon-3) 100%
        );
    background-origin: border-box, border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        0 8px 24px rgba(var(--accent-rgb), 0.30),
        0 0 18px rgba(var(--accent-neon-2-rgb), 0.14);
}

/* Светлая тема: прежние правила красили рамку в белый/тёмный —
   снимаем, иначе они закрашивают неоновое кольцо (specificity выше). */
body.light-theme .msg.mine .msg-body {
    border-color: transparent;
    box-shadow:
        0 8px 22px rgba(var(--accent-rgb), 0.22),
        0 0 14px rgba(var(--accent-neon-2-rgb), 0.10);
}

body.light-theme .msg-body {
    box-shadow:
        0 4px 16px rgba(23, 26, 33, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Появление новых сообщений: слайд «со своей стороны» + fade.
   История и перерисовки без класса .new-message не анимируются. */
@keyframes atmosMsgInLeft {
    from {
        opacity: 0;
        transform: translate3d(-14px, 10px, 0) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes atmosMsgInRight {
    from {
        opacity: 0;
        transform: translate3d(14px, 10px, 0) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.msg.new-message {
    animation: atmosMsgInLeft 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.msg.mine.new-message {
    animation: atmosMsgInRight 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.system-msg.new-message {
    animation: atmosMsgInLeft 0.32s ease both;
}

/* --- 5. Панель ввода: стекло + циановая рамка при фокусе --- */
.chat-main>footer {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.chat-main>footer:focus-within {
    /* Неоновая рамка вместо прежнего outline: свечение «дышит» вместе
       с фокусом в поле и не сдвигает содержимое футера. */
    outline: none;
    border-color: rgba(var(--accent-neon-2-rgb), 0.55);
    box-shadow:
        0 0 0 1px rgba(var(--accent-neon-2-rgb), 0.40),
        0 0 26px rgba(var(--accent-neon-2-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* !important обязателен: legacy-правило #input,#input:focus,#input:active
   глушит фон и рамку поля, чтобы они не «мигали» при клике. */
#input,
#input:focus,
#input:active {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    transition:
        background var(--transition),
        border-color var(--transition);
}

#input:focus {
    border-color: rgba(var(--accent-neon-2-rgb), 0.45) !important;
    background: var(--glass-bg-strong) !important;
}

/* --- 6. Модалки: «всплытие» с лёгкой пружиной --- */
@keyframes atmosModalIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(0.93);
    }

    62% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Id-селекторы обязательны: прежние анимации конкретных модалок
   (#settings-modal, #call-modal и т.д.) сильнее класса .modal-box. */
.modal-box,
#settings-modal .modal-box,
#call-modal .modal-box,
#delete-msg-modal .modal-box,
#profile-modal .modal-box {
    animation: atmosModalIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal {
    /* Затемнение глубже прежнего плюс размытие: модалка «отрывается» от чата */
    background: rgba(3, 3, 10, 0.66);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* --- 7. Иконки панелей: увеличение и неоновый ореол --- */
@media (hover: hover) and (pointer: fine) {
    .btn-icon:hover,
    .chat header .btn-icon:hover,
    .voice-panel-actions .btn-icon:hover,
    .sidebar .profile-icon-btn:hover,
    .sidebar .profile-status-btn:hover {
        transform: scale(1.15);
        color: var(--text-bright);
        background: rgba(var(--accent-neon-1-rgb), 0.14);
        border-color: rgba(var(--accent-neon-1-rgb), 0.35);
        box-shadow:
            0 0 18px rgba(var(--accent-neon-1-rgb), 0.35),
            0 0 8px rgba(var(--accent-neon-2-rgb), 0.22);
    }
}

/* Тач-устройства: hover не залипает — иконки остаются на месте */
@media (hover: none) {
    .btn-icon:hover,
    .chat header .btn-icon:hover,
    .voice-panel-actions .btn-icon:hover,
    .sidebar .profile-icon-btn:hover,
    .sidebar .profile-status-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* --- 8. Доступность: без движения, но со свечением --- */
@media (prefers-reduced-motion: reduce) {
    .msg.new-message,
    .system-msg.new-message,
    .voice-user.speaking .avatar,
    .avatar.speaking {
        animation: none;
    }

    .user-item:hover,
    .channel-btn:hover,
    .channel-category:hover {
        transform: none;
    }
}

/* ============================================================
   РЕДИЗАЙН «NEO ATMOS», ФАЗА 3
   ЭКРАН ВХОДА, ЗВОНКИ, СМЕНА ЧАТОВ, ТОСТЫ
   ------------------------------------------------------------
   Блок, как и предыдущие фазы, стоит последним и перекрывает
   прежние правила порядком. Логика не тронута: классы
   .call-ringing / .in-call / .hidden по-прежнему ставит app.js.
   !important ровно один смысловой — размер .avatar внутри
   #call-avatar: ширину/высоту инлайном задаёт avatarHtml().
   ============================================================ */

/* --- 1. Экран входа: глубина, объём и живые частицы ---
   Пять радиальных зарев поверх глубокой подложки: фиолет слева
   сверху, циан справа сверху, розовый и индиго у «дна». Все слои
   дышат одним authGradient — медленнее прежнего (22 с). */
#auth-screen {
    background:
        radial-gradient(58% 58% at 12% 6%, rgba(176, 38, 255, 0.42), transparent 68%),
        radial-gradient(52% 52% at 88% 10%, rgba(0, 240, 255, 0.26), transparent 70%),
        radial-gradient(60% 60% at 82% 94%, rgba(255, 42, 133, 0.22), transparent 72%),
        radial-gradient(70% 70% at 26% 96%, rgba(96, 44, 232, 0.30), transparent 74%),
        linear-gradient(135deg, #06060f 0%, #0b0b1c 48%, #04040b 100%);
    background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
    animation: authGradient 22s ease-in-out infinite;
}

/* Неоновая сетка: медленно ползёт и растворяется к краям маской */
#auth-screen::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px;
    -webkit-mask-image: radial-gradient(72% 64% at 50% 46%, #000 0%, transparent 76%);
    mask-image: radial-gradient(72% 64% at 50% 46%, #000 0%, transparent 76%);
    animation: authGridPan 64s linear infinite;
}

@keyframes authGridPan {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-72px, -72px, 0);
    }
}

/* Частицы: разметка в index.html (.auth-particles → .auth-particle),
   каждая точка живёт своими --px/--py/--ps/--pd/--pdelay/--pc. */
.auth-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-particle {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 50%);
    width: var(--ps, 4px);
    height: var(--ps, 4px);
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, var(--pc, rgba(0, 240, 255, 0.9)) 42%, transparent 72%);
    box-shadow:
        0 0 10px var(--pc, rgba(0, 240, 255, 0.9)),
        0 0 26px rgba(176, 38, 255, 0.35);
    opacity: 0;
    will-change: transform, opacity;
    animation: authParticleFloat var(--pd, 18s) linear infinite;
    animation-delay: var(--pdelay, 0s);
}

@keyframes authParticleFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(0.7);
        opacity: 0;
    }

    12% {
        opacity: 0.85;
    }

    55% {
        transform: translate3d(18px, -32vh, 0) scale(1.15);
        opacity: 0.55;
    }

    85% {
        opacity: 0.18;
    }

    100% {
        transform: translate3d(-12px, -62vh, 0) scale(0.8);
        opacity: 0;
    }
}

/* Контент — поверх сетки и частиц */
.auth-split {
    position: relative;
    z-index: 2;
}

/* --- 2. Карточка входа: градиентная рамка и мягкое свечение ---
   Тот же приём, что у своих пузырей: прозрачная рамка + два слоя
   background-image (padding-box — стекло, border-box — градиент).
   border-image не используем: он не дружит со скруглениями. */
.auth-box {
    position: relative;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(18, 18, 38, 0.88) 0%, rgba(8, 8, 20, 0.82) 100%) padding-box,
        linear-gradient(135deg,
            rgba(var(--accent-neon-1-rgb), 0.95) 0%,
            rgba(var(--accent-neon-2-rgb), 0.85) 48%,
            rgba(var(--accent-neon-3-rgb), 0.90) 100%) border-box;
    background-size: 100% 100%, 240% 240%;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.55),
        0 0 42px rgba(var(--accent-neon-1-rgb), 0.30),
        0 0 90px rgba(var(--accent-neon-2-rgb), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    animation:
        popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        authBoxBorder 9s ease-in-out infinite;
}

/* Перелив градиентной рамки: двигаем только второй слой */
@keyframes authBoxBorder {
    0% {
        background-position: 0% 0%, 0% 50%;
    }

    50% {
        background-position: 0% 0%, 100% 50%;
    }

    100% {
        background-position: 0% 0%, 0% 50%;
    }
}

/* --- 3. Поля входа: неоновый циан в фокусе --- */
.auth-form input {
    caret-color: var(--accent-neon-2);
    border-color: rgba(255, 255, 255, 0.09);
}

@media (hover: hover) and (pointer: fine) {
    .auth-form input:hover {
        border-color: rgba(var(--accent-neon-1-rgb), 0.40);
    }
}

.auth-form input:focus {
    border-color: rgba(var(--accent-neon-2-rgb), 0.80);
    background: rgba(0, 240, 255, 0.06);
    box-shadow:
        0 0 0 1px rgba(var(--accent-neon-2-rgb), 0.55),
        0 0 20px rgba(var(--accent-neon-2-rgb), 0.30),
        0 0 44px rgba(var(--accent-neon-2-rgb), 0.14),
        inset 0 0 14px rgba(var(--accent-neon-2-rgb), 0.10);
}

/* --- 4. Кнопка «Войти»: фиолет → циан и пульсация свечения --- */
.auth-form button {
    position: relative;
    background:
        linear-gradient(120deg,
            #a826ff 0%,
            #7b2cff 38%,
            #00c8ff 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 10px 28px rgba(123, 44, 255, 0.35),
        0 0 24px rgba(var(--accent-neon-2-rgb), 0.20);
    transition:
        background-position 0.5s ease,
        transform 0.15s ease,
        box-shadow 0.3s ease;
}

@keyframes authButtonPulse {
    0%,
    100% {
        box-shadow:
            0 10px 28px rgba(123, 44, 255, 0.35),
            0 0 22px rgba(var(--accent-neon-2-rgb), 0.22);
    }

    50% {
        box-shadow:
            0 14px 38px rgba(123, 44, 255, 0.55),
            0 0 48px rgba(var(--accent-neon-2-rgb), 0.45);
    }
}

@media (hover: hover) and (pointer: fine) {
    .auth-form button:hover {
        background-position: 100% 50%;
        transform: translateY(-2px);
        animation: authButtonPulse 1.6s ease-in-out infinite;
    }
}

/* На тач-устройствах hover не залипает: гасим legacy-подсветку и
   сдвигаем градиент по нажатию */
@media (hover: none) {
    .auth-form button:hover {
        background: linear-gradient(120deg,
            #a826ff 0%,
            #7b2cff 38%,
            #00c8ff 100%);
        background-size: 200% 200%;
        transform: none;
        animation: none;
    }

    .auth-form button:active {
        background-position: 100% 50%;
    }
}

.auth-form button:active {
    transform: scale(0.98);
    animation: none;
}

.auth-form button:disabled {
    background: linear-gradient(120deg, rgba(90, 44, 150, 0.55), rgba(30, 80, 110, 0.55));
    box-shadow: none;
    animation: none;
    transform: none;
}

/* Активный таб тоже с градиентом — карточка выглядит цельной */
.auth-tabs button.active {
    background: linear-gradient(120deg, var(--accent-neon-1), #6a3cff 60%, #0097c8);
    box-shadow: 0 4px 16px rgba(var(--accent-neon-1-rgb), 0.35);
}

/* --- 5. Звонок: большой аватар с неоновыми кольцами --- */
#call-avatar {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 6px auto 22px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 50%;
    isolation: isolate;
    background: linear-gradient(135deg,
        var(--accent-neon-1) 0%,
        var(--accent-neon-2) 52%,
        var(--accent-neon-3) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 26px rgba(var(--accent-neon-1-rgb), 0.35),
        0 0 60px rgba(var(--accent-neon-2-rgb), 0.22);
}

/* Внутренний аватар: размер приходит инлайном из avatarHtml(),
   поэтому тянем его на 100% только через !important (как в Фазе 2). */
#call-avatar .avatar {
    width: 100% !important;
    height: 100% !important;
    font-size: 54px !important;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: none;
}

/* Два неоновых кольца расходятся от аватара: циан и розовый */
#call-avatar::before,
#call-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--call-ring, rgba(var(--accent-neon-2-rgb), 0.85));
    box-shadow:
        0 0 20px var(--call-ring, rgba(var(--accent-neon-2-rgb), 0.55)),
        inset 0 0 18px rgba(var(--accent-neon-2-rgb), 0.18);
    opacity: 0;
    pointer-events: none;
}

#call-avatar::after {
    --call-ring: rgba(var(--accent-neon-3-rgb), 0.80);
    border-color: rgba(var(--accent-neon-3-rgb), 0.80);
}

@keyframes atmosCallRing {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }

    72% {
        transform: scale(1.58);
        opacity: 0;
    }

    100% {
        transform: scale(1.58);
        opacity: 0;
    }
}

/* Кольца крутятся только на входящем и в активном разговоре:
   у скрытой модалки анимации не жгут батарею. */
#call-modal.call-ringing #call-avatar::before,
#call-modal.call-ringing #call-avatar::after,
#call-modal.in-call #call-avatar::before,
#call-modal.in-call #call-avatar::after {
    animation: atmosCallRing 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

#call-modal.call-ringing #call-avatar::after,
#call-modal.in-call #call-avatar::after {
    animation-delay: -1.3s;
}

/* Прежнюю пульсацию box-shadow снимаем: колец уже три слоя */
#call-modal.call-ringing #call-avatar,
#call-modal.in-call #call-avatar {
    animation: none;
}

/* В разговоре кольца зелёно-циановые, а аватар «дышит» */
#call-modal.in-call #call-avatar {
    background: linear-gradient(135deg, #22e0a1 0%, var(--accent-neon-2) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 26px rgba(34, 224, 161, 0.42),
        0 0 64px rgba(var(--accent-neon-2-rgb), 0.26);
    animation: atmosCallBreath 3.6s ease-in-out infinite;
}

#call-modal.in-call #call-avatar::before {
    --call-ring: rgba(34, 224, 161, 0.85);
    border-color: rgba(34, 224, 161, 0.85);
    box-shadow: 0 0 20px rgba(34, 224, 161, 0.55);
}

#call-modal.in-call #call-avatar::after {
    --call-ring: rgba(var(--accent-neon-2-rgb), 0.80);
    border-color: rgba(var(--accent-neon-2-rgb), 0.80);
}

@keyframes atmosCallBreath {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

/* --- 6. Кнопки звонка: крупные, сочные, со свечением --- */
#call-modal .call-btn {
    width: 64px;
    height: 64px;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        background 0.25s ease;
}

#call-modal .call-btn .icon {
    width: 26px;
    height: 26px;
}

#call-modal .call-btn-accept {
    color: #04231a;
    background: linear-gradient(140deg, #6bffce 0%, var(--success) 48%, #12c6ff 100%);
    box-shadow:
        0 10px 26px rgba(34, 224, 161, 0.45),
        0 0 26px rgba(var(--accent-neon-2-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#call-modal .call-btn-decline {
    color: #ffffff;
    background: linear-gradient(140deg, var(--accent-neon-3) 0%, #ff2d55 55%, var(--danger) 100%);
    box-shadow:
        0 10px 26px rgba(var(--danger-rgb), 0.45),
        0 0 26px rgba(var(--accent-neon-3-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#call-modal .call-btn-mute {
    color: var(--text);
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#call-modal .call-btn-mute.muted {
    color: #201600;
    background: var(--warning);
}

@keyframes atmosCallAcceptPulse {
    0%,
    100% {
        box-shadow:
            0 10px 26px rgba(34, 224, 161, 0.45),
            0 0 22px rgba(var(--accent-neon-2-rgb), 0.30);
    }

    50% {
        box-shadow:
            0 12px 32px rgba(34, 224, 161, 0.70),
            0 0 52px rgba(var(--accent-neon-2-rgb), 0.55);
    }
}

@keyframes atmosCallDeclinePulse {
    0%,
    100% {
        box-shadow:
            0 10px 26px rgba(var(--danger-rgb), 0.45),
            0 0 22px rgba(var(--accent-neon-3-rgb), 0.30);
    }

    50% {
        box-shadow:
            0 12px 32px rgba(var(--danger-rgb), 0.70),
            0 0 48px rgba(var(--accent-neon-3-rgb), 0.55);
    }
}

/* Пульсируют только на входящем — в разговоре не отвлекают */
#call-modal.call-ringing .call-btn-accept {
    animation: atmosCallAcceptPulse 1.6s ease-in-out infinite;
}

#call-modal.call-ringing .call-btn-decline {
    animation: atmosCallDeclinePulse 1.8s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
    #call-modal .call-btn:hover {
        transform: scale(1.10);
    }
}

#call-modal .call-btn:active {
    transform: scale(0.95);
}

/* --- 7. Плавный переход в активный разговор --- */
#call-modal .modal-box {
    transition:
        box-shadow 0.55s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#call-modal.in-call .modal-box {
    box-shadow:
        0 0 0 1px rgba(34, 224, 161, 0.22),
        0 0 58px rgba(34, 224, 161, 0.18),
        0 24px 64px rgba(0, 0, 0, 0.55);
    animation: atmosCallConnected 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes atmosCallConnected {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

#call-modal #call-name {
    font-size: 22px;
    letter-spacing: 0.3px;
}

#call-modal #call-status {
    letter-spacing: 0.2px;
}

/* Таймер «всплывает», когда JS показывает его (display: none → block) */
#call-timer {
    animation: atmosCallTimerIn 0.35s ease both;
    text-shadow: 0 0 18px rgba(var(--accent-neon-2-rgb), 0.45);
}

@keyframes atmosCallTimerIn {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Телефон: аватар и кнопки чуть меньше, но остаются крупными */
@media (max-width: 420px) {
    #call-avatar {
        width: 112px;
        height: 112px;
    }

    #call-avatar .avatar {
        font-size: 46px !important;
    }

    #call-modal .call-btn {
        width: 58px;
        height: 58px;
    }
}

/* --- 8. Тосты: выезд справа с пружиной, стекло и неоновая рамка --- */
.toast-notification {
    left: auto;
    right: 24px;
    bottom: 88px;
    max-width: min(380px, calc(100vw - 32px));
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(150deg, rgba(20, 20, 40, 0.92), rgba(10, 10, 24, 0.88)) padding-box,
        linear-gradient(135deg,
            rgba(var(--accent-neon-1-rgb), 0.85),
            rgba(var(--accent-neon-2-rgb), 0.75) 55%,
            rgba(var(--accent-neon-3-rgb), 0.70)) border-box;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.55),
        0 0 26px rgba(var(--accent-neon-1-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translate3d(calc(100% + 44px), 0, 0) scale(0.94);
    transition:
        transform 0.46s cubic-bezier(0.16, 1.45, 0.36, 1),
        opacity 0.3s ease;
}

.toast-notification.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Кликабельный тост: та же стеклянная подложка, только светлее */
.toast-notification.clickable:hover {
    background:
        linear-gradient(150deg, rgba(30, 30, 58, 0.94), rgba(14, 14, 32, 0.90)) padding-box,
        linear-gradient(135deg,
            rgba(var(--accent-neon-1-rgb), 0.95),
            rgba(var(--accent-neon-2-rgb), 0.85)) border-box;
}

/* Светлая тема: текст тоста тёмный (--text-bright), поэтому стекло белое —
   иначе получили бы тёмный текст на тёмной подложке. Рамка остаётся неоновой. */
body.light-theme .toast-notification {
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.94) 0%, rgba(242, 243, 255, 0.90) 100%) padding-box,
        linear-gradient(135deg,
            rgba(var(--accent-neon-1-rgb), 0.70),
            rgba(var(--accent-neon-2-rgb), 0.60) 55%,
            rgba(var(--accent-neon-3-rgb), 0.55)) border-box;
    box-shadow:
        0 16px 42px rgba(23, 26, 33, 0.18),
        0 0 22px rgba(var(--accent-neon-1-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.light-theme .toast-notification.clickable:hover {
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 255, 0.95)) padding-box,
        linear-gradient(135deg,
            rgba(var(--accent-neon-1-rgb), 0.85),
            rgba(var(--accent-neon-2-rgb), 0.70)) border-box;
}

@media (max-width: 768px) {
    .toast-notification {
        left: 12px;
        right: 12px;
        bottom: 84px;
        max-width: none;
    }
}

/* --- 9. Смена чатов: старый гаснет вверх, новый въезжает снизу ---
   Классы ставит renderChatWithTransition() из app.js: перерисовка ленты
   откладывается на 130 мс, чтобы старый чат успел уйти. Сама логика
   переключения (currentDialog, черновики, шапка) остаётся синхронной. */
@keyframes atmosChatOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -12px, 0);
    }
}

@keyframes atmosChatIn {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

#messages.chat-leaving {
    animation: atmosChatOut 0.13s ease-in forwards;
    pointer-events: none;
}

#messages.chat-entering {
    animation: atmosChatIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 10. Доступность: без движения, но со свечением --- */
@media (prefers-reduced-motion: reduce) {
    #auth-screen,
    #auth-screen::before,
    .auth-particle,
    .auth-box,
    #call-modal.call-ringing #call-avatar::before,
    #call-modal.call-ringing #call-avatar::after,
    #call-modal.in-call #call-avatar,
    #call-modal.in-call #call-avatar::before,
    #call-modal.in-call #call-avatar::after,
    #call-modal.in-call .modal-box,
    #call-modal.call-ringing .call-btn-accept,
    #call-modal.call-ringing .call-btn-decline,
    #call-timer,
    #messages.chat-leaving,
    #messages.chat-entering {
        animation: none;
    }

    .auth-particle {
        opacity: 0;
    }

    .auth-form button:hover {
        animation: none;
    }

    .toast-notification {
        transform: translate3d(0, 0, 0);
        transition: opacity 0.2s ease;
    }

    .toast-notification.show {
        transform: translate3d(0, 0, 0);
    }
}

/* ============================================================
   РЕДИЗАЙН «АТМОС», ФАЗА 4: СПОКОЙНЫЕ АКЦЕНТЫ
   ------------------------------------------------------------
   Фаза снимает «кислотность» фаз 1–3: неоновые кольца фокуса,
   пульсации, пружины, градиентные рамки и стекло поверх всего.
   Блок последний в файле, поэтому перекрывает прежние правила
   порядком. !important только там, где базовое правило само
   написано с !important (поля ввода, вкладки, стекло).
   Логика не тронута: те же классы по-прежнему ставит app.js.
   ============================================================ */

/* --- 1. Светлая тема: тёплое матовое стекло вместо неона ---
   Токены сменились в :root/body.light-theme, здесь — то, что
   токенами не выразить: прозрачность зарева, тени панелей, «дно». */

/* Зарево в светлой теме просвечивало на 55% — на бежевом фоне это
   читалось как цветные пятна. Оставляем намёк. */
body.light-theme::before {
    opacity: 0.20;
}

body.light-theme::after {
    opacity: 0.32;
}

/* Панели: короткая мягкая тень вместо «парящей» на 40px */
body.light-theme .sidebar,
body.light-theme .chat header,
body.light-theme .chat-main>footer,
body.light-theme #members-panel,
body.light-theme #pinned-bar,
body.light-theme #reply-bar,
body.light-theme #attach-bar,
body.light-theme .modal-box {
    box-shadow: var(--shadow-sm);
    border-color: var(--glass-border);
}

/* «Дно» чата: полупрозрачность плюс внутренняя виньетка делали его
   грязнее панелей. Один ровный тёплый тон и волосяная рамка. */
body.light-theme #messages-wrap {
    background: var(--bg-shell);
    border-color: var(--glass-border);
    box-shadow: inset 0 0 36px rgba(74, 60, 44, 0.05);
}

/* Чужие пузыри: светлее дна, с рамкой и короткой тенью */
body.light-theme .msg-body {
    background: var(--bg-message);
    border-color: var(--border-light);
    box-shadow: var(--bubble-shadow);
}

/* Затемнение модалок: было почти чёрным — на светлой теме как выключенный
   экран. Теперь тёплая тень средней плотности. */
body.light-theme .modal {
    background: rgba(48, 42, 34, 0.32);
    -webkit-backdrop-filter: blur(6px) saturate(105%);
    backdrop-filter: blur(6px) saturate(105%);
}

/* Поле ввода светлой темы: белая карточка на тёплом футере, иначе «плывёт» */
body.light-theme #input,
body.light-theme #input:focus,
body.light-theme #input:active {
    background: #ffffff !important;
}

/* --- 2. Контролы вкладки «Внешний вид»: цвет и тумблер --- */
.settings-color-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Круглый свотч: системный прямоугольник цвета выбивался из строк настроек */
.settings-color-input {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--bg-input);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.settings-color-input::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.settings-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.settings-color-input::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.settings-color-input:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.settings-color-input:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.45);
    outline-offset: 2px;
}

/* Подсказки под строками: мельче и тише самих строк настроек */
.settings-section .settings-hint {
    margin: -2px 0 10px;
    padding: 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim);
}

/* --- 3. Свои сообщения: ровная акцентная заливка ---
   Было: трёхцветное неоновое кольцо (accent → cyan → pink) + двойное
   свечение. Стало: заливка в цвет акцента, чуть притемнённая сверху вниз
   (белый текст читается при любом выборе пользователя), волосяная светлая
   рамка и короткая тень. background записан шорткатом, чтобы сбросить
   background-image/clip от прежних правил. */
.msg.mine .msg-body {
    background: var(--accent);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.20));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
    transition: box-shadow var(--transition), background-color var(--transition);
}

/* Светлая тема: акцент и так темнее, затемнение сильнее — иначе белый
   текст на пастельном цвете «плывёт». Рамку тоже фиксируем своим уровнем,
   иначе её задаёт правило из фазы 2 (оно сильнее одиночного класса). */
body.light-theme .msg.mine .msg-body {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.30));
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 3px 10px rgba(74, 60, 44, 0.22);
}

/* --- 4. Панель ввода: спокойный фокус вместо неонового кольца --- */
.chat-main>footer:focus-within {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.38);
    box-shadow:
        0 0 0 2px rgba(var(--accent-rgb), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Поле ввода: граница акцента при фокусе, без «дыхания» и без cyan */
#input:focus {
    border-color: rgba(var(--accent-rgb), 0.32) !important;
    box-shadow: none !important;
}

/* Кнопка «микрофон / видео / отправить»: ровный акцент, тени короткие.
   Пульсацию sendPulse (мобильный блок) гасим — она мигала постоянно. */
.action-btn {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.action-btn:hover {
    background: var(--accent-hover);
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.action-btn:not(.is-empty) {
    animation: none;
}

/* Запись: красное кольцо тоньше прежнего 4px — состояние видно, но не «орёт» */
.action-btn.recording,
.action-btn.recording:hover {
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.22) !important;
    transform: none;
}

/* --- 5. Иконки панелей: подсветка остаётся, неонового ореола нет ---
   Селекторы скопированы из фазы 2 дословно: одинаковая специфичность,
   побеждает порядок, поэтому блок стоит последним. */
@media (hover: hover) and (pointer: fine) {
    .btn-icon:hover,
    .chat header .btn-icon:hover,
    .voice-panel-actions .btn-icon:hover,
    .sidebar .profile-icon-btn:hover,
    .sidebar .profile-status-btn:hover {
        transform: none;
        color: var(--text-bright);
        background: var(--bg-hover);
        border-color: var(--glass-border);
        box-shadow: none;
    }
}

/* --- 6. «Друг / Беседа» и «Канал / Войти»: одна грамматика с табами ---
   На десктопе это были обычные .btn-secondary (стекло + тень), на мобилке —
   отдельные плоские пилюли. Теперь везде как сегмент-контрол «Беседы /
   Каналы»: тот же фон, радиус, высота и способ подсветки. */
.sidebar-quick-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 8px;
    flex-shrink: 0;
}

.btn.sidebar-quick-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    gap: 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    transform: none;
}

.btn.sidebar-quick-btn:hover {
    background: var(--bg-hover);
    color: var(--accent);
    box-shadow: none;
    transform: none;
}

.btn.sidebar-quick-btn:active {
    background: var(--bg-active);
    transform: none;
}

.btn.sidebar-quick-btn .icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: inherit;
}

/* Активный таб — акцентный текст, фон остаётся нейтральным: цветные
   плашки в сайдбаре конкурировали со списком диалогов. */
.sidebar-tab.active {
    background: var(--bg-active) !important;
    color: var(--text-bright);
    box-shadow: none !important;
}

.sidebar-tab.active .icon {
    color: var(--accent);
}

/* Быстрые кнопки в светлой теме: правило body.light-theme .btn (2 класса +
   body) сильнее одиночного .btn.sidebar-quick-btn, поэтому белый фон и тень
   возвращаем к виду табов тем же уровнем. */
body.light-theme .btn.sidebar-quick-btn {
    background: var(--bg-tertiary);
    box-shadow: none;
}

body.light-theme .btn.sidebar-quick-btn:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

/* «Сбросить цвет»: акцентная «призрачная» кнопка, а не серый .btn-ghost */
.settings-section .settings-secondary-btn {
    margin-top: 2px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--accent);
    box-shadow: none;
}

.settings-section .settings-secondary-btn:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: none;
}

body.light-theme .settings-secondary-btn {
    background: rgba(var(--accent-rgb), 0.10);
    border-color: rgba(var(--accent-rgb), 0.30);
    color: var(--accent);
    box-shadow: none;
}

/* Главные кнопки: один акцент вместо трёхцветного градиента фаз 1–2.
   Пользовательский цвет из настроек применяется и здесь, поэтому градиент
   строится из --accent / --accent-hover, а не из --accent-neon-*. */
.btn-primary,
body.light-theme .btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.26);
}

.btn-primary:hover,
body.light-theme .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.32);
}

/* --- 7. Анимации без «пружины» ---
   Переопределяем @keyframes с теми же именами: последнее определение
   в файле побеждает, поэтому менять правила-потребители не нужно. */

/* Модалки: короткий подъём с растворением вместо overshoot на 1.01 */
@keyframes atmosModalIn {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Новые сообщения: только сдвиг и прозрачность, без масштабирования */
@keyframes atmosMsgInLeft {
    from {
        opacity: 0;
        transform: translate3d(-8px, 6px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes atmosMsgInRight {
    from {
        opacity: 0;
        transform: translate3d(8px, 6px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Тосты: спокойный въезд справа. Рамка нейтральная, вместо неонового
   градиента по периметру — одна волосяная линия. Шорткат background
   сбрасывает двухслойный градиент из фазы 3. */
.toast-notification {
    border: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
    box-shadow: var(--shadow);
    transform: translate3d(calc(100% + 24px), 0, 0);
    transition:
        transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}

.toast-notification.show {
    transform: translate3d(0, 0, 0);
}

.toast-notification.clickable:hover {
    background: var(--bg-active);
}

body.light-theme .toast-notification {
    background: #fffdfa;
    box-shadow: var(--shadow);
}

body.light-theme .toast-notification.clickable:hover {
    background: #ffffff;
}

/* Кнопка «Войти»: подсветка при наведении остаётся, пульсация уходит */
@media (hover: hover) and (pointer: fine) {
    .auth-form button:hover {
        animation: none;
        transform: translateY(-1px);
    }
}

/* --- 8. Простой режим (body.simple-mode) ---
   Ставится из настроек (setSimpleMode в app.js). Сплошные поверхности
   вместо стекла, никаких свечений и размытых теней, декоративные слои
   фона выключены: спокойнее для глаз и дешевле для слабых устройств. */

body.simple-mode::before,
body.simple-mode::after {
    display: none;
}

/* Ключевые поверхности: непрозрачный фон темы, без backdrop-filter */
body.simple-mode .sidebar,
body.simple-mode .chat header,
body.simple-mode .chat-main>footer,
body.simple-mode #members-panel,
body.simple-mode #pinned-bar,
body.simple-mode #reply-bar,
body.simple-mode #attach-bar,
body.simple-mode .modal-box,
body.simple-mode .toast-notification {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* «Дно» чата — ровный тон темы */
body.simple-mode #messages-wrap {
    background: var(--bg-shell) !important;
    border-color: var(--border-light) !important;
    box-shadow: none !important;
}

/* Модалки без размытия подложки */
body.simple-mode .modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(6, 6, 12, 0.72);
}

body.light-theme.simple-mode .modal {
    background: rgba(48, 42, 34, 0.40);
}

/* Пузыри: плотные, с волосяной рамкой и без тени */
body.simple-mode .msg-body {
    background: var(--bg-message) !important;
    border-color: var(--border-light) !important;
    box-shadow: none !important;
}

body.simple-mode .msg.mine .msg-body {
    background: var(--accent) !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.24)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}

/* Поле ввода и поле поиска — сплошные, без «стекла».
   --bg-input в тёмной теме полупрозрачный, поэтому берём плотный --bg-tertiary. */
body.simple-mode #input,
body.simple-mode #input:focus,
body.simple-mode #input:active {
    background: var(--bg-tertiary) !important;
}

/* Кнопки и панели: без теней и свечений */
body.simple-mode .btn,
body.simple-mode .btn:hover,
body.simple-mode .action-btn,
body.simple-mode .action-btn:hover {
    box-shadow: none !important;
}

body.simple-mode .action-btn:hover {
    transform: none;
}

/* Свечение шрифта (ники в голосовых, акценты) в простом режиме не нужно */
body.simple-mode,
body.simple-mode * {
    text-shadow: none !important;
}

/* --- 9. Доступность: без движения, но и без «телепорта» --- */
@media (prefers-reduced-motion: reduce) {

    .modal-box,
    #settings-modal .modal-box,
    #call-modal .modal-box,
    #delete-msg-modal .modal-box,
    #profile-modal .modal-box {
        animation: none;
    }

    .toast-notification,
    .toast-notification.show {
        transform: translate3d(0, 0, 0);
    }

    .action-btn:not(.is-empty),
    .auth-form button:hover {
        animation: none;
    }
}

/* ============================================
   ВЫБОР ОКНА ДЛЯ ТРАНСЛЯЦИИ (ДЕСКТОП-КЛИЕНТ)
   Модалка #screen-picker-modal: тёмная сетка превью.
   Данные приходят из src-tauri/src/screen.rs (xcap + WGC),
   кадры выбранного окна рисуются на canvas в app.js.
   ============================================ */
#screen-picker-modal {
    /* поверх настроек (3000), профиля и подтверждений (3100) */
    z-index: 3200;
}

.screen-picker-box {
    width: min(880px, 94vw);
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.screen-picker-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.screen-picker-head-text {
    flex: 1;
    min-width: 0;
}

.screen-picker-head h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-bright);
}

.screen-picker-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.screen-picker-status {
    padding: 8px 0;
    font-size: 13px;
    text-align: center;
    color: var(--text-muted);
}

.screen-picker-status.hidden {
    display: none;
}

.screen-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    flex: 1;
    min-height: 120px;
    padding: 2px;
    overflow-y: auto;
}

.screen-picker-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.screen-picker-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.22);
}

.screen-picker-card:active {
    transform: scale(0.98);
}

.screen-picker-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #05050a;
}

.screen-picker-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screen-picker-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

.screen-picker-empty .icon {
    width: 28px;
    height: 28px;
}

.screen-picker-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.screen-picker-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screen-picker-app {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screen-picker-hint {
    font-size: 11px;
    text-align: center;
    color: var(--text-dim);
}

@media (max-width: 768px) {
    .screen-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }
}