/* ==================== CSS ПЕРЕМЕННЫЕ (ТЕМЫ) ==================== */
        :root {
            /* Тёмная тема (default) */
            --bg-primary: #0f1220;
            --bg-secondary: #151a2c;
            --bg-card: rgba(255, 255, 255, 0.06);
            --bg-hover: rgba(255, 255, 255, 0.10);
            --stroke: rgba(255, 255, 255, 0.10);
            --stroke-hover: rgba(255, 255, 255, 0.16); 
            --text-primary: rgba(245, 247, 255, 0.94);
            --text-secondary: rgba(228, 233, 255, 0.72);
            --text-muted: rgba(203, 212, 248, 0.52);
            --accent: #8b7dff;
            --accent-hover: #9a8eff;
            --accent-light: rgba(139, 125, 255, 0.20);
            --danger: #ef4444;
            --success: #10b981;
            --warning: #f59e0b;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
            --header-height: 56px;
            --nav-height: 64px; 
        }  

        /* Светлая тема (будет добавлена позже через data-theme="light") */
        [data-theme="light"] {
            --bg-primary: #f5f7ff;
            --bg-secondary: #ffffff;
            --bg-card: rgba(76, 92, 170, 0.06);
            --bg-hover: rgba(76, 92, 170, 0.11);
            --stroke: rgba(74, 87, 155, 0.14);
            --stroke-hover: rgba(74, 87, 155, 0.24);
            --text-primary: rgba(23, 28, 54, 0.92);
            --text-secondary: rgba(39, 50, 93, 0.68);
            --text-muted: rgba(54, 69, 125, 0.48);
            --accent: #6f63ff;
            --accent-hover: #5f53f3;
            --accent-light: rgba(111, 99, 255, 0.14);
        }

        /* ==================== БАЗОВЫЕ СТИЛИ ==================== */
        * { box-sizing: border-box; }
        
        html, body { 
            height: 100%; 
            margin: 0;
        }
        
        body {
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
            color: var(--text-primary);
            background:
                radial-gradient(1200px 840px at 15% -15%, rgba(139, 125, 255, 0.18), transparent 62%),
                radial-gradient(760px 620px at 90% -10%, rgba(99, 179, 255, 0.12), transparent 60%),
                linear-gradient(180deg, #0d1120 0%, var(--bg-primary) 100%);
            overflow: hidden;
        }

        [data-theme="light"] body {
            background:
                radial-gradient(1200px 840px at 8% -22%, rgba(111, 99, 255, 0.11), transparent 62%),
                radial-gradient(700px 580px at 92% -10%, rgba(122, 188, 255, 0.14), transparent 60%),
                linear-gradient(180deg, #f7f8ff 0%, var(--bg-primary) 100%);
        }

        /* ==================== LAYOUT ==================== */
        .app {
            display: grid;
            grid-template-rows: var(--header-height) 1fr var(--nav-height);
            height: 100vh;
            max-height: 100dvh;
        }

        /* ==================== HEADER ==================== */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--stroke);
            backdrop-filter: blur(10px);
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
            /*
             * Небольшой гарантированный зазор между правым блоком (бургер)
             * и блоком режима сети из центральной части шапки.
             * Это исключает визуальное «слипание» кнопок на узких экранах.
             */
            margin-left: 6px;
        }

        .header-center {
            flex: 1;
            text-align: center;
            min-width: 0;
            overflow: hidden;
            /*
             * Subtitle позиционируем абсолютно (см. ниже), поэтому центр
             * становится опорной областью для этой подписи.
             */
            position: relative;
        }

        .header-title-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        /*
         * Резервный вариант индикатора (как «кнопка-пилюля» + текст).
         * Пока отключён, чтобы оставить только компактную лампочку.
         *
         * .header-network-indicator {
         *     display: inline-flex;
         *     align-items: center;
         *     gap: 5px;
         *     flex-shrink: 0;
         *     min-height: 24px;
         *     padding: 0 8px;
         *     border: 1px solid var(--stroke);
         *     border-radius: 999px;
         *     background: var(--bg-secondary);
         *     transition: border-color 0.2s ease, background-color 0.2s ease;
         * }
         *
         * .header-network-indicator[data-state="ok"] {
         *     border-color: rgba(52, 211, 153, 0.45);
         *     background: rgba(5, 46, 22, 0.18);
         * }
         *
         * .header-network-indicator[data-state="error"] {
         *     border-color: rgba(248, 113, 113, 0.45);
         *     background: rgba(127, 29, 29, 0.16);
         * }
         *
         * .header-network-status-text {
         *     font-size: 10px;
         *     letter-spacing: 0.03em;
         *     color: #fca5a5;
         *     user-select: none;
         *     text-transform: lowercase;
         *     white-space: nowrap;
         * }
         *
         * .header-network-status-text[data-state="ok"] {
         *     color: #86efac;
         * }
         */

        .header-network-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: absolute;
            top: 7px;
            right: 7px;
            width: 10px;
            height: 10px;
            pointer-events: none;
        }

        .header-network-status-text {
            display: none;
        }

        .header-connection-controls {
            display: inline-flex;
            align-items: center;
            gap: 0;
            flex-shrink: 0;
        }

        .header-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            flex: 1;
            width: auto;
            min-width: 0;
            max-width: 100%;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .header-chats-presence {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            min-height: 20px;
            padding: 0 6px;
            border-radius: 999px;
            border: 1px solid var(--stroke);
            background: var(--bg-card);
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.01em;
            user-select: none;
        }

        .header-page-dot {
            display: inline-block;
            font-size: 9px;
            line-height: 1;
            vertical-align: middle;
            color: #f87171;
            text-shadow: 0 0 10px rgba(248, 113, 113, 0.45);
            transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
        }

        .header-connection-toggle {
            position: relative;
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: var(--radius-md);
            border: 1px solid var(--stroke);
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            font-size: 12px;
            line-height: 1;
            transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
            padding: 0;
        }

        .header-connection-toggle-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            line-height: 1;
        }

        .header-connection-toggle:hover {
            background: var(--bg-hover);
            border-color: var(--stroke-hover);
        }

        .header-connection-toggle:active {
            transform: scale(0.94);
        }

        .header-connection-toggle[data-mode="offline"] {
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.55);
        }

        .header-connection-mode-label {
            font-size: 10px;
            letter-spacing: 0.05em;
            color: var(--text-secondary);
            user-select: none;
        }

        .header-connection-mode-label[data-mode="offline"] {
            color: #fca5a5;
        }

        .header-page-dot[data-state="ok"] {
            color: #34d399;
            text-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
        }

        .header-page-dot[data-state="loading"] {
            color: #f87171;
        }

        .header-subtitle {
            display: none;
        }

        .btn-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            border: 1px solid var(--stroke);
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }

        .btn-icon:hover {
            background: var(--bg-hover);
            border-color: var(--stroke-hover);
        }

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

        .btn-icon svg {
            width: 22px;
            height: 22px;
        }

        .btn-icon-danger {
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.45);
            background: rgba(127, 29, 29, 0.18);
            font-size: 24px;
            font-weight: 500;
            line-height: 1;
        }

        .btn-icon-danger:hover {
            color: #fecaca;
            border-color: rgba(248, 113, 113, 0.7);
            background: rgba(127, 29, 29, 0.34);
        }

        .btn-icon-danger:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
        }

        .btn-back {
            visibility: hidden;
        }

        .btn-back.visible {
            visibility: visible;
        }

        .header-menu {
            position: fixed;
            top: calc(var(--header-height) - 4px);
            right: 12px;
            z-index: 120;
            min-width: 210px;
            display: grid;
            gap: 6px;
            padding: 8px;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            background: var(--bg-secondary);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        }

        .header-menu-item {
            width: 100%;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: transparent;
            color: var(--text-primary);
            text-align: left;
            font-size: 13px;
            padding: 9px 10px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .header-menu-item:hover {
            border-color: var(--stroke-hover);
            background: var(--bg-hover);
        }

        /* ==================== MAIN CONTENT ==================== */
        .main {
            overflow: hidden;
            position: relative;
        }

        .view {
            position: absolute;
            inset: 0;
            overflow: hidden;
            display: none;
        }

        .view.active {
            display: block;
        }

        .view-content {
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 8px;
        }

        /* ==================== BOTTOM NAV ==================== */
        .nav {
            display: flex;
            background: var(--bg-secondary);
            border-top: 1px solid var(--stroke);
            padding: 8px 12px;
            padding-bottom: max(8px, env(safe-area-inset-bottom));
        }

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 4px;
            border-radius: var(--radius-md);
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
            font-size: 11px;
            font-weight: 500;
        }

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

        .nav-item.active {
            color: var(--accent);
            background: var(--accent-light);
        }

        .nav-item svg {
            width: 24px;
            height: 24px;
        }

        /* ==================== VIEW: CHATS ==================== */
        .chats-list {
            padding: 4px;
            margin: 0;
            list-style: none;
        }

        .chats-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 4px;
            margin-bottom: 8px;
        }

        .chats-toolbar .btn-create-chat {
            flex-shrink: 0;
        }

        .chat-create-wrap {
            position: relative;
            flex-shrink: 0;
        }

        .btn-create-chat {
            border: 1px solid var(--stroke);
            border-radius: 999px;
            background: var(--accent-light);
            color: var(--accent);
            width: 36px;
            height: 36px;
            padding: 0;
            font-size: 22px;
            line-height: 1;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-create-chat:hover {
            border-color: var(--accent);
            background: rgba(139, 125, 255, 0.28);
        }

        .create-chat-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 20;
            min-width: 190px;
            border: 1px solid var(--stroke);
            border-radius: 12px;
            background: var(--bg-secondary);
            box-shadow: 0 14px 26px rgba(4, 10, 28, 0.35);
            padding: 6px;
        }

        .create-chat-menu button {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text-primary);
            text-align: left;
            border-radius: 9px;
            font-size: 13px;
            padding: 9px 10px;
            cursor: pointer;
        }

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

        .chat-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }

        .chat-filter-chip {
            border: 1px solid var(--stroke);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            font-size: 12px;
            padding: 6px 10px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .chat-filter-chip:hover {
            border-color: var(--stroke-hover);
            color: var(--text-primary);
        }

        .chat-filter-chip.active {
            border-color: rgba(139, 125, 255, 0.45);
            background: rgba(139, 125, 255, 0.20);
            color: #d8cbff;
        }

        .private-dialog-screen {
            position: absolute;
            inset: 0;
            z-index: 12;
            background: var(--bg-primary);
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #viewChats .view-content {
            position: relative;
        }

        .private-dialog-screen-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }

        .private-dialog-screen-title {
            margin: 0;
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .private-dialog-screen .members-list {
            max-height: none;
            flex: 1;
        }

        .private-user-pick-main {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }

        .private-user-pick-avatar {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            border: 1px solid var(--stroke);
            background: rgba(139, 125, 255, 0.16);
            color: #d8cbff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            overflow: hidden;
            flex-shrink: 0;
        }

        .private-user-pick-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .private-user-pick-text {
            min-width: 0;
        }

        .private-user-pick-username {
            margin: 0;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .private-user-pick-name {
            font-size: 14px;
            font-weight: 600;
        }

        .private-user-pick-login {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
            opacity: 0.9;
        }

        .private-user-pick-about {
            margin: 2px 0 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .private-user-pick-presence {
            margin-top: 3px;
        }

        .private-user-pick-presence-online {
            color: #34d399;
            font-weight: 700;
        }

        .private-user-pick-presence-offline {
            color: var(--text-secondary);
        }

        .chat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            margin-bottom: 10px;
            background: var(--bg-card);
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .chat-item:hover {
            background: var(--bg-hover);
            border-color: var(--stroke-hover);
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(8, 12, 28, 0.18);
        }

        .chat-item:last-child {
            margin-bottom: 0;
        }

        .chat-avatar {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-lg);
            background: var(--accent-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            color: var(--accent);
            flex-shrink: 0;
        }

        .chat-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }

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

        .chat-name {
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chat-preview {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }

        .chat-meta {
            text-align: right;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }

        .chat-time {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .chat-unread {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 10px;
            background: var(--accent);
            color: white;
            font-size: 11px;
            font-weight: 600;
        }

        /* ==================== VIEW: CHAT DETAIL ==================== */
        .chat-detail {
            display: none;
            position: absolute;
            inset: 0;
            background: var(--bg-primary);
            z-index: 10;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        .chat-detail.active {
            display: flex;
            flex-direction: column;
        }

        .chat-detail-folders {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 10px 14px 0;
        }

        .chat-detail-folders-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        .chat-detail-folder-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            text-align: left;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            background: var(--bg-card);
            color: var(--text-primary);
            padding: 10px 12px;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .chat-detail-folder-row:hover {
            background: var(--bg-hover);
            border-color: var(--stroke-hover);
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(8, 12, 28, 0.18);
        }

        .chat-detail-folder-row.active {
            border-color: rgba(139, 125, 255, 0.45);
            background: rgba(139, 125, 255, 0.20);
            box-shadow: 0 10px 20px rgba(8, 12, 28, 0.18);
        }

        .chat-detail-folder-avatar {
            width: 42px;
            height: 42px;
            border-radius: var(--radius-lg);
            background: var(--accent-light);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--accent);
            flex-shrink: 0;
        }

        .chat-detail-folder-info {
            flex: 1;
            min-width: 0;
        }

        .chat-detail-folder-name {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chat-detail-folder-description {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chat-detail-folder-meta {
            font-size: 11px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .chat-detail-folder-add {
            border: 1px solid rgba(59, 130, 246, 0.6);
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.88);
            color: #ffffff;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 10px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s ease;
            flex-shrink: 0;
            align-self: flex-start;
        }

        .chat-detail-folder-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .chat-detail-folder-settings {
            border: 1px solid var(--stroke);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            padding: 6px 10px;
            cursor: pointer;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        .chat-detail-folder-settings:hover {
            border-color: var(--stroke-hover);
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.12);
        }

        .chat-detail-folder-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }

        .chat-detail-folder-add:hover {
            background: rgba(59, 130, 246, 1);
            border-color: rgba(96, 165, 250, 0.88);
        }

        .messages-container {
            flex: 1;
            overflow-y: auto;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .channel-mode-banner {
            margin: 10px 14px 0;
            border: 1px solid rgba(110, 168, 254, 0.42);
            background: rgba(110, 168, 254, 0.10);
            border-radius: 12px;
            color: #cfe1ff;
            padding: 8px 10px;
            font-size: 12px;
            line-height: 1.35;
        }

        .chat-detail.channel-mode .messages-container {
            padding-top: 12px;
            align-items: center;
        }

        .message {
            display: flex;
            gap: 8px;
            max-width: 80%;
            animation: messageAppear 0.18s ease;
        }

        .chat-detail.channel-mode .message {
            width: min(100%, 760px);
            max-width: min(100%, 760px);
            align-self: center;
            gap: 0;
        }

        .message.sent {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

        .message.local-pending .message-bubble {
            border-style: dashed;
            border-color: rgba(250, 204, 21, 0.55);
        }

        .message.local-error .message-bubble {
            border-color: rgba(248, 113, 113, 0.65);
            box-shadow: 0 8px 22px rgba(127, 29, 29, 0.22);
        }

        .chat-detail.channel-mode .message.sent {
            align-self: center;
            flex-direction: row;
        }

        .message-highlighted .message-bubble {
            box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.45), 0 10px 22px rgba(4, 10, 28, 0.28);
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--accent-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: var(--accent);
            flex-shrink: 0;
        }

        .chat-detail.channel-mode .message-avatar {
            display: none;
        }

        .message-bubble {
            padding: 10px 14px;
            border-radius: var(--radius-lg);
            background: var(--bg-card);
            border: 1px solid var(--stroke);
            box-shadow: 0 6px 18px rgba(4, 10, 28, 0.25);
        }

        .message.sent .message-bubble {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        .chat-detail.channel-mode .message-bubble,
        .chat-detail.channel-mode .message.sent .message-bubble {
            width: 100%;
            border-radius: 14px;
            background: var(--bg-card);
            border-color: var(--stroke);
            color: var(--text-primary);
            box-shadow: 0 8px 20px rgba(4, 10, 28, 0.22);
        }

        .channel-post-meta {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin: -2px 0 8px;
            align-items: center;
        }

        .channel-post-author {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .channel-post-time {
            font-size: 11px;
            color: var(--text-muted);
        }

        .message-content {
            font-size: 14px;
            line-height: 1.4;
            margin: 0 0 2px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .message-content:last-child {
            margin-bottom: 0;
        }

        .message-meta {
            font-size: 11px;
            color: var(--text-muted);
            text-align: right;
        }

        .message.sent .message-meta {
            color: rgba(255, 255, 255, 0.7);
        }

        .message-reply-preview {
            width: 100%;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            margin-bottom: 8px;
            padding: 6px 8px;
            display: flex;
            gap: 8px;
            align-items: flex-start;
            cursor: pointer;
            color: inherit;
            text-align: left;
            transition: border-color .12s ease, background .12s ease;
        }

        .message-reply-preview:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.11);
        }

        .message-reply-preview svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .message-reply-preview-title {
            font-size: 11px;
            opacity: 0.9;
            margin: 0;
        }

        .message-reply-preview-text {
            font-size: 12px;
            line-height: 1.3;
            margin: 2px 0 0;
            opacity: 0.84;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px;
        }

        .message-actions-row {
            margin-top: 4px;
            display: flex;
            gap: 6px;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .message-time {
            font-size: 11px;
            color: var(--text-muted);
            margin-right: 2px;
        }

        .message.sent .message-time {
            color: rgba(255, 255, 255, 0.72);
        }

        .message-offline-marker {
            font-size: 11px;
            border: 1px solid var(--stroke);
            border-radius: 999px;
            padding: 2px 8px;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.04);
        }

        .message-offline-marker.error {
            border-color: rgba(248, 113, 113, 0.48);
            color: #fecaca;
            background: rgba(127, 29, 29, 0.25);
        }

        /* Индикатор кешированных сообщений */
        .offline-cache-indicator {
            background: rgba(139, 125, 255, 0.12);
            border: 1px solid rgba(139, 125, 255, 0.24);
            border-radius: var(--radius-sm);
            padding: 8px 12px;
            margin: 8px 0;
            font-size: 12px;
            color: var(--text-secondary);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        /* Toggle switch для настроек */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

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

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--stroke);
            transition: 0.2s ease;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            top: 3px;
            background-color: var(--bg-secondary);
            transition: 0.2s ease;
            border-radius: 50%;
        }

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

        input:checked + .toggle-slider:before {
            transform: translateX(20px);
            background-color: #ffffff;
        }

        .message-icon-btn {
            border: 1px solid var(--stroke);
            border-radius: 999px;
            background: transparent;
            color: inherit;
            font-size: 11px;
            padding: 3px 7px;
            cursor: pointer;
            opacity: 0.9;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 24px;
        }

        .message-icon-btn svg {
            width: 13px;
            height: 13px;
        }

        .message-icon-btn:hover {
            opacity: 1;
            border-color: var(--stroke-hover);
        }

        .app-copy-link-btn {
            flex: 0 0 auto;
        }

        .message-reply-notice {
            border: 1px solid var(--stroke);
            border-radius: 999px;
            padding: 3px 8px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: inherit;
            opacity: 0.92;
        }

        .message-reply-notice svg {
            width: 12px;
            height: 12px;
        }

        .reply-composer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.06);
            border-radius: var(--radius-md);
            padding: 8px 10px;
            margin-bottom: 8px;
            gap: 8px;
        }

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

        .reply-composer-cancel {
            border: 1px solid var(--stroke);
            border-radius: 8px;
            background: transparent;
            color: inherit;
            font-size: 16px;
            line-height: 1;
            width: 26px;
            height: 26px;
            cursor: pointer;
        }

        .education-discussion-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 2px 0;
        }

        .education-discussion-message {
            display: flex;
            gap: 8px;
            max-width: 92%;
            align-self: flex-end;
            animation: messageAppear 0.18s ease;
        }

        .education-discussion-message .education-discussion-bubble {
            width: 100%;
            padding: 10px 14px;
            border-radius: var(--radius-lg);
            background: var(--bg-card);
            border: 1px solid var(--stroke);
            box-shadow: 0 6px 18px rgba(4, 10, 28, 0.25);
        }

        .education-discussion-message.sent {
            align-self: flex-start;
            flex-direction: row;
        }

        .education-discussion-message.sent .education-discussion-bubble {
            background: rgba(139, 125, 255, 0.12);
            border-color: rgba(139, 125, 255, 0.24);
            color: var(--text-primary);
        }

        .education-discussion-message:not(.sent) .education-discussion-bubble {
            background: rgba(255, 255, 255, 0.05);
            border-color: var(--stroke);
        }

        .education-discussion-message.sent .education-discussion-time {
            color: var(--text-muted);
        }

        .education-discussion-avatar {
            width: 30px;
            height: 30px;
            font-size: 13px;
            border-radius: 50%;
            background: var(--accent-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: var(--accent);
            flex-shrink: 0;
        }

        .education-discussion-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-bottom: 6px;
        }

        .education-discussion-author-line {
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.35;
        }

        .education-discussion-composer {
            padding: 0;
            border-top: none;
            background: transparent;
            backdrop-filter: none;
        }

        .education-discussion-input-wrapper {
            display: flex;
            gap: 10px;
            align-items: center;
            position: relative;
        }

        .education-discussion-input {
            min-width: 0;
            flex: 1;
            padding: 10px 14px;
            border-radius: var(--radius-xl);
            border: 1px solid var(--stroke);
            background: var(--bg-card);
            color: var(--text-primary);
            font-size: 14px;
            outline: none;
            transition: border-color 0.15s ease;
        }

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

        .education-discussion-input::placeholder {
            color: var(--text-muted);
        }

        .education-discussion-send {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--accent);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        .education-discussion-send:hover {
            background: var(--accent-hover);
            transform: scale(1.05);
        }

        .education-discussion-send:active {
            transform: scale(0.95);
        }

        .education-discussion-send svg {
            width: 20px;
            height: 20px;
        }

        .education-discussion-content {
            font-size: 15px;
            line-height: 1.5;
        }

        .education-discussion-reply-box {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border: 1px solid var(--stroke);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
        }

        .education-discussion-reply-meta {
            font-size: 12px;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .education-discussion-reply-cancel {
            border: 1px solid var(--stroke);
            border-radius: 8px;
            background: transparent;
            color: inherit;
            font-size: 16px;
            line-height: 1;
            width: 26px;
            height: 26px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .education-discussion-time {
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.2;
        }

        .message-input-container {
            padding: 12px;
            border-top: 1px solid var(--stroke);
            background: var(--bg-secondary);
            backdrop-filter: blur(12px);
        }

        .catalog-subscribe-bar {
            position: absolute;
            left: 50%;
            bottom: 84px;
            transform: translateX(-50%);
            z-index: 35;
            pointer-events: none;
        }

        .catalog-subscribe-btn {
            border: 1px solid rgba(59, 130, 246, 0.6);
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.88);
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            padding: 10px 26px;
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
            pointer-events: auto;
        }

        .catalog-subscribe-btn:hover {
            background: rgba(59, 130, 246, 1);
            border-color: rgba(96, 165, 250, 0.88);
            transform: translateY(-1px);
        }

        .catalog-subscribe-btn:disabled {
            opacity: 0.7;
            cursor: default;
            transform: none;
        }

        .chat-detail.channel-mode.readonly-compose .message-input-container {
            opacity: 0.88;
        }

        .composer-file-input {
            display: none;
        }

        .composer-upload-status {
            margin: 0 0 8px;
            font-size: 12px;
            color: var(--text-secondary);
            min-height: 16px;
        }

        .composer-upload-status.error {
            color: #fca5a5;
        }

        .composer-upload-status.success {
            color: #86efac;
        }

        .composer-offline-status {
            margin: 0 0 8px;
            font-size: 12px;
            color: #fde68a;
            min-height: 16px;
        }

        .composer-offline-status.error {
            color: #fca5a5;
        }

        .message-input-wrapper {
            display: flex;
            gap: 8px;
            align-items: center;
            position: relative;
        }

        .composer-attach-menu {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 0;
            z-index: 25;
            min-width: 210px;
            border: 1px solid var(--stroke);
            border-radius: 12px;
            background: var(--bg-secondary);
            box-shadow: 0 14px 26px rgba(4, 10, 28, 0.35);
            padding: 6px;
        }

        .composer-attach-menu button {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text-primary);
            text-align: left;
            border-radius: 9px;
            font-size: 13px;
            padding: 9px 10px;
            cursor: pointer;
        }

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

        .composer-attach-menu button:disabled {
            opacity: 0.55;
            cursor: default;
        }

        .btn-attach {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        .btn-attach:hover {
            border-color: var(--stroke-hover);
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.14);
        }

        .btn-attach:disabled {
            opacity: 0.6;
            cursor: default;
        }

        .btn-attach svg {
            width: 20px;
            height: 20px;
        }

        .message-input {
            flex: 1;
            padding: 10px 14px;
            border-radius: var(--radius-xl);
            border: 1px solid var(--stroke);
            background: var(--bg-card);
            color: var(--text-primary);
            font-size: 14px;
            outline: none;
            transition: border-color 0.15s ease;
        }

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

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

        .btn-send {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--accent);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }

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

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

        .btn-send svg {
            width: 20px;
            height: 20px;
        }

        .message-media {
            margin: 0 0 4px;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            max-width: min(320px, 100%);
        }

        .message-media-preview-btn {
            border: none;
            padding: 0;
            margin: 0;
            background: transparent;
            display: block;
            width: 100%;
            text-align: left;
            cursor: zoom-in;
            position: relative;
            color: inherit;
        }

        .message-media-preview-btn.message-media-preview-btn-fallback {
            min-width: 220px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 6, 23, 0.55);
        }

        .message-media-preview-btn img,
        .message-media-preview-btn video {
            display: block;
            width: 100%;
            max-height: 320px;
            height: auto;
            object-fit: contain;
            background: rgba(0, 0, 0, 0.26);
        }

        .message-media-gallery {
            margin: 0 0 6px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            width: min(420px, 100%);
        }

        .message-media-gallery-item {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 1 / 1;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 14px;
            overflow: hidden;
            padding: 0;
            margin: 0;
            cursor: zoom-in;
            background: rgba(2, 6, 23, 0.5);
            color: inherit;
        }

        .message-media-gallery-item img,
        .message-media-gallery-item video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: rgba(0, 0, 0, 0.26);
        }

        .message-media-preview-hint {
            position: absolute;
            right: 8px;
            bottom: 8px;
            border: 1px solid rgba(255, 255, 255, 0.32);
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 11px;
            color: #f8fafc;
            background: rgba(2, 6, 23, 0.58);
            pointer-events: none;
        }

        .message-media audio {
            display: block;
            width: min(320px, 100%);
        }

        .message-media.message-media-audio {
            display: block;
            width: 100%;
            max-width: 100%;
            padding: 8px;
            background: rgba(2, 6, 23, 0.55);
        }

        .message-media.message-media-audio audio {
            display: block;
            width: 100%;
            min-height: 42px;
            height: 42px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.92);
        }

        .message-audio-open-btn {
            margin-top: 8px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
            font-size: 12px;
            line-height: 1.2;
            padding: 6px 10px;
            cursor: pointer;
        }

        .message-audio-open-btn:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.34);
        }

        .poll-card {
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.04);
            padding: 10px;
            margin-bottom: 6px;
        }

        .poll-question {
            margin: 0 0 10px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.35;
        }

        .poll-option {
            width: 100%;
            border: 1px solid var(--stroke);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            text-align: left;
            padding: 8px 10px;
            margin-bottom: 6px;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }

        .poll-option:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.08);
        }

        .poll-option.voted {
            border-color: rgba(139, 125, 255, 0.6);
            background: rgba(139, 125, 255, 0.20);
        }

        .poll-option:disabled {
            cursor: default;
        }

        .poll-option-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }

        .poll-option-percent {
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }

        .poll-meta {
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-secondary);
        }

        .reaction-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }

        .reaction-chip,
        .reaction-action {
            border: 1px solid var(--stroke);
            border-radius: 999px;
            font-size: 12px;
            line-height: 1;
            padding: 6px 8px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
            cursor: pointer;
        }

        .reaction-chip.active,
        .reaction-action:hover {
            border-color: rgba(124, 58, 237, 0.6);
            background: rgba(124, 58, 237, 0.20);
        }

        .reaction-popup-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .reaction-actions-popup {
            position: absolute;
            right: 0;
            bottom: calc(100% + 8px);
            display: flex;
            flex-wrap: nowrap;
            gap: 6px;
            border: 1px solid var(--stroke);
            border-radius: 12px;
            background: var(--bg-secondary);
            box-shadow: 0 12px 24px rgba(4, 10, 28, 0.34);
            padding: 6px;
            opacity: 0;
            pointer-events: none;
            transform: translateY(4px);
            transition: opacity 0.16s ease, transform 0.16s ease;
            z-index: 12;
        }

        .reaction-popup-wrap.open .reaction-actions-popup {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .reaction-actions-popup .reaction-action {
            min-width: 34px;
            text-align: center;
            padding: 6px 7px;
        }

        .settings-stack {
            display: grid;
            gap: 12px;
            padding: 10px;
        }

        .surface-card {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            background: var(--bg-card);
            padding: 14px;
            box-shadow: 0 8px 18px rgba(8, 12, 28, 0.12);
        }

        .surface-title {
            margin: 0 0 6px;
            font-size: 15px;
            font-weight: 600;
        }

        .surface-subtitle {
            margin: 0;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.4;
        }

        .surface-actions {
            margin-top: 12px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .btn-secondary {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: transparent;
            color: var(--text-primary);
            padding: 9px 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .btn-secondary:hover {
            border-color: var(--stroke-hover);
            background: var(--bg-hover);
        }

        .btn-secondary.active {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }

        .quick-meta {
            margin-top: 12px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid var(--stroke);
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 12px;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.03);
        }

        .settings-level {
            display: grid;
            gap: 12px;
        }

        .settings-group-list {
            display: grid;
            gap: 10px;
        }

        .settings-group-item {
            width: 100%;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            text-align: left;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .settings-group-item:hover {
            border-color: var(--stroke-hover);
            background: var(--bg-hover);
        }

        .settings-group-title {
            margin: 0 0 3px;
            font-size: 14px;
            font-weight: 600;
        }

        .settings-group-subtitle {
            margin: 0;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.35;
        }

        .settings-group-arrow {
            font-size: 18px;
            color: var(--text-muted);
            flex: 0 0 auto;
        }

        .settings-back-row {
            margin-bottom: 2px;
        }

        .settings-note-list {
            margin: 0;
            padding-left: 18px;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
            display: grid;
            gap: 4px;
        }

        .settings-placeholder-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--stroke);
            border-radius: 999px;
            padding: 4px 8px;
            font-size: 11px;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.04);
            margin-bottom: 10px;
        }

        .client-policy-banner {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 12px;
            border-bottom: 1px solid var(--stroke);
            background: rgba(245, 158, 11, 0.12);
        }

        .client-policy-banner.visible {
            display: flex;
        }

        .client-policy-banner-text {
            margin: 0;
            font-size: 12px;
            color: var(--text-primary);
            line-height: 1.35;
        }

        .client-policy-lock {
            position: fixed;
            inset: 0;
            z-index: 70;
            background: rgba(10, 12, 24, 0.92);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .client-policy-lock.visible {
            display: flex;
        }

        .client-policy-lock-card {
            width: min(460px, 100%);
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            background: var(--bg-secondary);
            box-shadow: 0 20px 42px rgba(8, 12, 28, 0.34);
            padding: 16px;
        }

        .client-policy-lock-title {
            margin: 0 0 6px;
            font-size: 18px;
            font-weight: 700;
        }

        .client-policy-lock-text {
            margin: 0;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.45;
        }

        .client-policy-lock-actions {
            margin-top: 14px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .system-announcement-overlay {
            position: fixed;
            inset: 0;
            z-index: 65;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(9, 13, 28, 0.78);
            backdrop-filter: blur(4px);
        }

        .system-announcement-overlay.visible {
            display: flex;
        }

        .system-announcement-card {
            width: min(520px, 100%);
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            background: var(--bg-secondary);
            box-shadow: 0 20px 42px rgba(8, 12, 28, 0.34);
            padding: 18px;
        }

        .system-announcement-title {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 700;
        }

        .system-announcement-text {
            margin: 0;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .system-announcement-actions {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(6, 10, 24, 0.56);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 50;
        }

        .modal-overlay.visible {
            display: flex;
        }

        .media-viewer-overlay {
            background: rgba(3, 8, 20, 0.86);
            z-index: 70;
            padding: 16px;
        }

        .media-viewer-card {
            width: min(940px, 100%);
            max-height: 92vh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .media-viewer-close {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(2, 6, 23, 0.84);
            color: #f8fafc;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            z-index: 2;
        }

        .media-viewer-body {
            max-width: 100%;
            max-height: 92vh;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(2, 6, 23, 0.65);
            box-shadow: 0 20px 40px rgba(2, 6, 23, 0.5);
        }

        .media-viewer-body img,
        .media-viewer-body video {
            display: block;
            max-width: min(92vw, 920px);
            max-height: 88vh;
            width: auto;
            height: auto;
            object-fit: contain;
            background: rgba(0, 0, 0, 0.48);
        }

        .modal-card {
            width: min(460px, 100%);
            border: 1px solid var(--stroke);
            border-radius: var(--radius-lg);
            background: var(--bg-secondary);
            box-shadow: 0 20px 42px rgba(8, 12, 28, 0.34);
            padding: 16px;
        }

        .modal-title {
            margin: 0 0 4px;
            font-size: 17px;
            font-weight: 600;
        }

        .modal-subtitle {
            margin: 0 0 14px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .form-row {
            margin-bottom: 10px;
        }

        .form-row:last-of-type {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            font-size: 14px;
            padding: 10px 12px;
            outline: none;
        }

        .form-textarea {
            resize: vertical;
            min-height: 86px;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            border-color: var(--accent);
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 14px;
        }

        .members-toolbar {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 12px;
        }

        .members-filters {
            display: grid;
            grid-template-columns: 1fr 130px;
            gap: 8px;
            margin-bottom: 12px;
        }

        .members-toolbar .form-input {
            flex: 1;
            min-width: 0;
        }

        .members-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 8px;
            max-height: 280px;
            overflow-y: auto;
        }

        .member-item {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.02);
            padding: 10px;
            display: flex;
            justify-content: space-between;
            gap: 8px;
            align-items: center;
        }

        .member-item.member-item-selectable {
            cursor: pointer;
            transition: border-color .12s ease, background .12s ease;
        }

        .member-item.member-item-selectable:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.05);
        }

        .member-item.member-item-selected {
            border-color: rgba(99, 102, 241, 0.55);
            background: rgba(99, 102, 241, 0.12);
        }

        .member-title {
            margin: 0 0 2px;
            font-size: 14px;
            font-weight: 600;
        }

        .member-subtitle {
            margin: 0;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .member-role {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--stroke);
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 11px;
            color: var(--text-secondary);
            margin-left: 8px;
        }

        .member-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .chat-settings-panel {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.02);
            padding: 10px;
            margin-bottom: 12px;
        }

        .chat-settings-title {
            margin: 0 0 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .chat-settings-avatar-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .chat-settings-avatar {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: var(--text-secondary);
            overflow: hidden;
        }

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

        .chat-settings-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 10px;
        }

        .btn-primary {
            border: 1px solid var(--accent);
            border-radius: var(--radius-md);
            background: var(--accent);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            padding: 9px 12px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .btn-primary:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
        }

        @keyframes messageAppear {
            from {
                opacity: 0;
                transform: translateY(6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message:hover .reaction-actions {
            opacity: 1;
        }

        .chat-detail.channel-mode .reaction-actions {
            opacity: 1;
        }

        @media (max-width: 640px) {
            .composer-row {
                grid-template-columns: 1fr;
            }

            .members-filters {
                grid-template-columns: 1fr;
            }

            .chats-toolbar {
                align-items: flex-start;
            }

            .chat-filters {
                justify-content: flex-start;
            }
        }

        /* ==================== EMPTY STATE ==================== */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 40px 20px;
            text-align: center;
            color: var(--text-muted);
        }

        .empty-state-icon {
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 8px;
            color: var(--text-secondary);
        }

        .empty-state-text {
            font-size: 14px;
            margin: 0;
            line-height: 1.5;
        }

        /* ==================== LOADING ==================== */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: var(--text-muted);
            font-size: 14px;
        }

        .loading::before {
            content: '';
            width: 16px;
            height: 16px;
            border: 2px solid var(--stroke);
            border-top-color: var(--accent);
            border-radius: 50%;
            margin-right: 8px;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* ==================== LIBRARY ==================== */
        .library-shell {
            display: flex;
            flex-direction: column;
            height: 100%;
            gap: 10px;
            padding: 10px;
        }

        .library-toolbar {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
        }

        .library-search-input {
            margin: 0;
        }

        .library-nav-row {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 36px;
        }

        .library-bulk-download-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border: 1px solid rgba(59, 130, 246, 0.35);
            border-radius: var(--radius-md);
            background: rgba(30, 64, 175, 0.18);
            padding: 8px 10px;
        }

        .library-bulk-download-status[data-kind="ok"] {
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(6, 78, 59, 0.22);
        }

        .library-bulk-download-status[data-kind="error"] {
            border-color: rgba(239, 68, 68, 0.4);
            background: rgba(127, 29, 29, 0.22);
        }

        .library-bulk-download-status-text {
            font-size: 12px;
            line-height: 1.35;
            color: var(--text-secondary);
        }

        .library-breadcrumbs {
            display: flex;
            align-items: center;
            gap: 6px;
            overflow-x: auto;
            white-space: nowrap;
            min-width: 0;
            flex: 1;
            padding-bottom: 2px;
            scrollbar-width: thin;
        }

        .library-breadcrumb-item {
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-secondary);
            border-radius: 999px;
            padding: 4px 8px;
            font-size: 12px;
            line-height: 1.2;
            cursor: pointer;
        }

        .library-breadcrumb-item.current {
            color: var(--text-primary);
            background: rgba(139, 125, 255, 0.16);
            border-color: rgba(139, 125, 255, 0.35);
            cursor: default;
        }

        .library-breadcrumb-sep {
            color: var(--text-muted);
            font-size: 12px;
        }

        .library-stage {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            overflow: auto;
            padding: 10px;
            min-height: 0;
            display: grid;
            gap: 10px;
            align-content: start;
        }

        .library-content-list {
            display: grid;
            gap: 8px;
            align-content: start;
        }

        .library-content-item {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.03);
            padding: 10px;
            cursor: pointer;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }

        .library-content-item.library-content-header {
            border-style: dashed;
            cursor: default;
        }

        .library-content-item:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.05);
        }

        .library-content-item-title {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .library-content-count-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1px 6px;
            border-radius: 999px;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.2;
            font-weight: 600;
            white-space: nowrap;
        }

        .library-content-item-description {
            margin: 6px 0 0;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.45;
        }

        .library-content-item-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .library-content-item-head .library-content-item-title {
            margin: 0;
            flex: 1 1 auto;
            min-width: 0;
        }

        .library-content-item-actions {
            margin-top: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }

        .library-recent-block {
            margin-top: 12px;
            border-top: 1px solid var(--stroke);
            padding-top: 12px;
            display: grid;
            gap: 8px;
        }

        .library-recent-block-head {
            display: grid;
            gap: 4px;
        }

        .library-recent-block-title {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .library-recent-block-subtitle {
            margin: 0;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-secondary);
        }

        .library-recent-list {
            display: grid;
            gap: 8px;
        }

        .library-recent-item {
            width: 100%;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            padding: 10px;
            text-align: left;
            cursor: pointer;
            display: grid;
            gap: 6px;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }

        .library-recent-item:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.05);
        }

        .library-recent-item-title {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .library-recent-item-description {
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-secondary);
        }

        /*
         * Компактная сетка для последовательных разделов (sleaf):
         * - в одной строке помещается много серий;
         * - каждая ячейка имеет стабильный размер и работает как кнопка;
         * - номер серии остаётся главным визуальным якорем.
         */
        .library-sleaf-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
            gap: 8px;
            align-content: start;
        }

        .library-sleaf-cell {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            min-height: 52px;
            padding: 6px;
            display: block;
            transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
        }

        .library-sleaf-cell:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.08);
        }

        .library-sleaf-cell:active {
            transform: translateY(1px);
        }

        .library-sleaf-cell-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
            color: var(--text-primary);
        }

        .library-sleaf-cell-head {
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }

        .library-sleaf-cell-open {
            flex: 1 1 auto;
            min-width: 0;
            border: 0;
            background: transparent;
            color: inherit;
            padding: 0;
            cursor: pointer;
            text-align: center;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .library-sleaf-cell-copy {
            align-self: flex-start;
        }

        .library-section-offline-download-btn {
            color: var(--text-secondary);
        }

        .library-section-offline-download-btn:hover {
            color: var(--text-primary);
        }

        .library-section-offline-download-btn:disabled {
            cursor: default;
            opacity: 0.65;
        }

        .library-content-card {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.02);
            padding: 12px;
            display: grid;
            gap: 10px;
        }

        .library-content-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .library-content-card-title {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .library-content-card-description {
            margin: 0;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.45;
        }

        .library-content-card-media audio,
        .library-content-card-media video,
        .library-content-card-media img {
            width: 100%;
            border-radius: var(--radius-sm);
            border: 1px solid var(--stroke);
            background: #000;
        }

        .library-media-loading {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--stroke);
            border-radius: var(--radius-sm);
            padding: 10px;
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 8px;
        }

        .library-media-loading[data-kind="error"] {
            border-color: rgba(239, 68, 68, 0.45);
            color: #fecaca;
            background: rgba(127, 29, 29, 0.2);
        }

        .library-media-loading[data-kind="ready"] {
            border-color: rgba(16, 185, 129, 0.32);
            color: #bbf7d0;
            background: rgba(6, 78, 59, 0.2);
        }

        .library-media-loading-spinner {
            width: 14px;
            height: 14px;
            border: 2px solid var(--stroke);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            flex-shrink: 0;
        }

        .library-media-loading[data-kind="error"] .library-media-loading-spinner,
        .library-media-loading[data-kind="ready"] .library-media-loading-spinner {
            display: none;
        }

        .library-media-loading-text {
            min-width: 0;
        }

        .library-local-cache-controls {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .library-local-cache-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }

        .library-local-cache-action-btn {
            flex: 0 0 auto;
        }

        .library-local-cache-status {
            width: 100%;
            order: 3;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.35;
        }

        .library-local-cache-status[data-kind="ok"] {
            color: #86efac;
        }

        .library-local-cache-status[data-kind="error"] {
            color: #fca5a5;
        }

        .library-local-cache-status[data-kind="loading"] {
            color: #bfdbfe;
        }

        .library-local-cache-progress {
            width: auto;
            min-width: 170px;
            flex: 1 1 220px;
            order: 2;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .library-local-cache-progress.hidden {
            display: none;
        }

        .library-local-cache-progress-bar {
            position: relative;
            flex: 1;
            height: 8px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .library-local-cache-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #60a5fa 0%, #22d3ee 100%);
            transition: width 0.2s ease;
        }

        .library-local-cache-progress[data-indeterminate="1"] .library-local-cache-progress-fill {
            width: 35%;
            animation: library-local-cache-indeterminate 1.1s ease-in-out infinite;
        }

        .library-local-cache-progress-label {
            min-width: 88px;
            text-align: right;
            font-size: 12px;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        @keyframes library-local-cache-indeterminate {
            0% {
                transform: translateX(-120%);
            }
            50% {
                transform: translateX(80%);
            }
            100% {
                transform: translateX(220%);
            }
        }

        .library-content-card-text {
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.55;
            white-space: pre-wrap;
        }

        /* ==================== EDUCATION UI REFINEMENTS ==================== */
        .education-course-card {
            gap: 8px;
            cursor: pointer;
        }

        .education-course-card-top {
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 12px;
            align-items: start;
        }

        .education-course-main {
            min-width: 0;
        }

        .education-course-title {
            margin: 0;
            font-size: 15px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            flex: 1 1 auto;
            min-width: 0;
        }

        .education-course-line {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            white-space: nowrap;
        }

        .education-course-line-sep {
            color: var(--text-muted);
            font-size: 13px;
            line-height: 1;
            flex: 0 0 auto;
        }

        .education-course-inline-meta {
            font-size: 12px;
            color: var(--text-secondary);
            flex: 0 0 auto;
        }

        .education-course-open-btn {
            padding: 6px 10px;
            font-size: 12px;
            line-height: 1.1;
            white-space: nowrap;
            flex: 0 0 auto;
        }

        .education-course-description {
            margin: 4px 0 0;
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-secondary);
        }

        .education-course-avatar {
            width: 72px;
            height: 72px;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.03);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .education-course-avatar-lg {
            width: 88px;
            height: 88px;
            border-radius: 16px;
        }

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

        .education-course-avatar-fallback {
            font-size: 28px;
            line-height: 1;
            user-select: none;
        }

        .education-progress {
            margin-top: 2px;
        }

        .education-progress-bar {
            width: 100%;
            height: 8px;
            border-radius: 999px;
            overflow: hidden;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, 0.08);
        }

        .education-progress-fill {
            display: block;
            height: 100%;
            min-width: 0;
            background: linear-gradient(90deg, #60a5fa 0%, #22c55e 100%);
            transition: width 0.25s ease;
        }

        .education-course-hero {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.03);
            padding: 10px;
            margin-bottom: 10px;
            display: grid;
            grid-template-columns: 88px 1fr;
            gap: 12px;
            align-items: center;
        }

        .education-course-hero-main {
            min-width: 0;
        }

        .education-course-hero-description {
            margin: 6px 0 0;
            font-size: 13px;
            line-height: 1.45;
            color: var(--text-secondary);
        }

        .education-course-inline {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .education-course-inline .education-course-avatar {
            width: 44px;
            height: 44px;
            border-radius: 10px;
        }

        .education-course-inline .education-course-avatar-fallback {
            font-size: 20px;
        }

        .education-course-inline-title {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .education-lesson-card {
            display: block;
            width: 100%;
            gap: 6px;
            border-color: var(--stroke);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--stroke);
            border-radius: var(--radius-md);
            padding: 12px;
            margin: 0;
        }

        .education-lesson-card.is-unlocked {
            cursor: pointer;
        }

        .education-lesson-card.is-unlocked:hover {
            border-color: var(--stroke-hover);
            background: rgba(255, 255, 255, 0.05);
        }

        .education-lesson-card.is-locked {
            opacity: 0.72;
            background: rgba(255, 255, 255, 0.02);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .education-lesson-head {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            min-width: 0;
        }

        .education-lesson-badge {
            flex: 0 0 auto;
            min-width: 34px;
            height: 34px;
            padding: 0 8px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            background: rgba(139, 125, 255, 0.16);
            border: 1px solid rgba(139, 125, 255, 0.24);
        }

        .education-lesson-main {
            flex: 1 1 auto;
            min-width: 0;
        }

        .education-lesson-title {
            margin: 0;
            font-size: 15px;
            line-height: 1.35;
            white-space: normal;
            overflow: visible;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            line-clamp: 3;
        }

        .education-lesson-state-badge {
            flex: 0 0 auto;
            align-self: flex-start;
            border-radius: 999px;
            padding: 4px 8px;
            font-size: 11px;
            line-height: 1.1;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--stroke);
        }

        .education-lesson-inline-meta {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 6px;
            line-height: 1.45;
        }

        .education-lesson-actions {
            justify-content: flex-start;
            margin-top: 10px;
        }

        .education-lesson-note {
            margin: 2px 0 0;
            font-size: 12px;
            line-height: 1.4;
        }

        .education-lessons-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            align-content: start;
        }

        .education-lessons-list > .education-lesson-card + .education-lesson-card {
            position: relative;
        }

        .education-lessons-list > .education-lesson-card + .education-lesson-card::before {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            top: -6px;
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
            pointer-events: none;
        }

        .education-lesson-card.is-locked .education-lesson-title,
        .education-lesson-card.is-locked .education-lesson-inline-meta,
        .education-lesson-card.is-locked .education-lesson-state-badge,
        .education-lesson-card.is-locked .education-lesson-badge {
            color: var(--text-muted);
        }

        .education-lesson-card.is-locked .education-lesson-badge {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .library-transcription {
            display: grid;
            gap: 6px;
        }

        .library-transcription-segment {
            border: 1px solid var(--stroke);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.02);
            padding: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .library-transcription-time {
            display: inline-block;
            margin-right: 6px;
            color: var(--accent);
            font-weight: 600;
            font-size: 12px;
        }

        #viewLibrary.library-focus-content .library-toolbar,
        #viewLibrary.library-focus-content .library-nav-row,
        #viewLibrary.library-focus-content .library-content-list {
            display: none;
        }

        #viewLibrary.library-focus-content .library-stage {
            border-color: transparent;
            background: transparent;
            padding: 0;
        }

        #viewLibrary.library-focus-content #btnLibraryCloseContent {
            display: none;
        }

        @media (max-width: 640px) {
            .library-toolbar {
                grid-template-columns: 1fr;
            }

            .library-nav-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .library-breadcrumbs {
                width: 100%;
            }
        }

        /* ==================== FLOATING FULLSCREEN BUTTON ==================== */
        .fullscreen-fab {
            position: fixed;
            right: 14px;
            bottom: calc(var(--nav-height) + 14px + env(safe-area-inset-bottom));
            width: 46px;
            height: 46px;
            border-radius: 999px;
            border: 1px solid var(--stroke-hover);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 22px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
            backdrop-filter: blur(8px);
            z-index: 125;
            transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
        }

        .fullscreen-fab:hover {
            background: var(--bg-hover);
            border-color: var(--stroke-hover);
        }

        .fullscreen-fab:active {
            transform: scale(0.96);
        }

        @media (max-width: 640px) {
            .fullscreen-fab {
                right: 10px;
                width: 44px;
                height: 44px;
                font-size: 20px;
            }
        }

        /* ==================== UTILS ==================== */
        .hidden {
            display: none !important;
        }

        .text-accent {
            color: var(--accent);
        }