@charset "UTF-8";

/* ===== /static/css/modules/01-foundation-themes.css ===== */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            --transition: cubic-bezier(0.2, 0.9, 0.4, 1.1);
            --radius: 12px;
            --font: 'Inter', system-ui, sans-serif;
            --font-size: 15px;
            --sidebar-width: 320px;
            --brand-text: #ffffff;
            --bg-primary: #121212;
            --bg-secondary: #1f1f1f;
            --text-primary: #ffffff;
            --text-secondary: #a1a1a1;
            --color-bg: #ffffff;
            --color-text: #000000;
            --color-brand: #000000;
            --message-meta-bg: rgba(15, 23, 42, 0.42);
            --message-meta-text: rgba(255, 255, 255, 0.92);
            --system-bubble-bg: rgba(15, 23, 42, 0.56);
            --system-bubble-text: #ffffff;
            --floating-date-bg: rgba(15, 23, 42, 0.58);
            --floating-date-text: #ffffff;
        }

        body.light-theme {
            --brand-text: #000000;
            --bg-primary: #ffffff;
            --bg-secondary: #f5f5f5;
            --text-primary: #000000;
            --text-secondary: #4b4b4b;
            --message-meta-bg: rgba(255, 255, 255, 0.82);
            --message-meta-text: #334155;
            --system-bubble-bg: rgba(255, 255, 255, 0.9);
            --system-bubble-text: #334155;
            --floating-date-bg: rgba(255, 255, 255, 0.92);
            --floating-date-text: #334155;
        }

        body {
            --accent: #2aabee;
            --accent-hover: #229ed9;
            --accent-glow: rgba(42, 171, 238, 0.22);
            --bg: #0e1621;
            --bg2: #17212b;
            --bg3: #202b36;
            --surface: rgba(30, 32, 40, 0.96);
            --surface2: rgba(40, 42, 52, 0.96);
            --text: #e2e4e9;
            --text2: #9ca3af;
            --text3: #6b7280;
            --border: rgba(255, 255, 255, 0.06);
            --divider: #2a2d36;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
            --header-bg: rgba(21, 23, 30, 0.95);
            --message-meta-bg: rgba(15, 23, 42, 0.46);
            --message-meta-text: rgba(255, 255, 255, 0.92);
            --system-bubble-bg: rgba(15, 23, 42, 0.58);
            --system-bubble-text: #ffffff;
            --floating-date-bg: rgba(15, 23, 42, 0.62);
            --floating-date-text: #ffffff;
        }

        body.light-theme {
            --bg: #dfe6ef;
            --bg2: #edf2f7;
            --bg3: #f8fafc;
            --surface: rgba(248, 250, 252, 0.98);
            --surface2: rgba(235, 241, 247, 0.98);
            --text: #17202c;
            --text2: #4c5b6b;
            --text3: #6e7d8e;
            --border: rgba(42, 56, 74, 0.14);
            --divider: #cfd9e5;
            --shadow: 0 8px 24px rgba(31, 45, 61, 0.10);
            --shadow-sm: 0 3px 10px rgba(31, 45, 61, 0.08);
            --header-bg: rgba(237, 242, 247, 0.96);
            --message-meta-bg: rgba(255, 255, 255, 0.82);
            --message-meta-text: #334155;
            --system-bubble-bg: rgba(255, 255, 255, 0.92);
            --system-bubble-text: #334155;
            --floating-date-bg: rgba(255, 255, 255, 0.92);
            --floating-date-text: #334155;

        }

        body.light-theme .right-panel {
            background: rgba(248, 250, 252, 0.98);
            backdrop-filter: blur(8px) saturate(110%);
            -webkit-backdrop-filter: blur(8px) saturate(110%);
            border-left: 1px solid rgba(42, 56, 74, 0.12);
            box-shadow: -8px 0 24px rgba(31, 45, 61, 0.10);
        }

        body.chat-bg-enabled {
            --message-meta-bg: rgba(15, 23, 42, 0.58);
            --message-meta-text: #ffffff;
            --system-bubble-bg: rgba(15, 23, 42, 0.62);
            --system-bubble-text: #ffffff;
            --floating-date-bg: rgba(15, 23, 42, 0.68);
            --floating-date-text: #ffffff;
        }

        body.light-theme.chat-bg-enabled {
            --message-meta-bg: rgba(255, 255, 255, 0.88);
            --message-meta-text: #1f2937;
            --system-bubble-bg: rgba(255, 255, 255, 0.9);
            --system-bubble-text: #1f2937;
            --floating-date-bg: rgba(255, 255, 255, 0.92);
            --floating-date-text: #1f2937;
        }

        body.theme-purple {
            --accent: #7c3aed;
            --accent-hover: #6d28d9;
            --accent-glow: rgba(124, 58, 237, 0.22);
        }

        body.theme-blue {
            --accent: #3b82f6;
            --accent-hover: #2563eb;
            --accent-glow: rgba(59, 130, 246, 0.22);
        }

        body.theme-green {
            --accent: #10b981;
            --accent-hover: #059669;
            --accent-glow: rgba(16, 185, 129, 0.22);
        }

        body.theme-pink {
            --accent: #ec4899;
            --accent-hover: #db2777;
            --accent-glow: rgba(236, 72, 153, 0.22);
        }

        body.theme-orange {
            --accent: #f59e0b;
            --accent-hover: #d97706;
            --accent-glow: rgba(245, 158, 11, 0.22);
        }

        html {
            font-size: var(--font-size);
            height: 100%;
        }

        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text);
            height: 100dvh;
            overflow: hidden;
            transition: background 0.2s, color 0.2s;
        }

        ::-webkit-scrollbar {
            width: 4px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: var(--text3);
            border-radius: 10px;
        }

        #particles-canvas {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.3;
        }

        #app {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .auth-bg {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #1a0b2e, #0f0f13, #1a1a2e);
            background-size: 200% 200%;
            animation: authBgMove 8s ease infinite;
            z-index: -1;
        }

        @keyframes authBgMove {
            0% {
                background-position: 0% 0%;
            }

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

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

        .user-profile-panel {
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(20px);
        }

        .profile-top {
            text-align: center;
            padding: 25px;
        }

        .profile-bio {
            margin-top: 15px;
            color: var(--text2);
            font-size: 14px;
        }

        .profile-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
        }

        .profile-tab {
            flex: 1;
            padding: 14px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }

        .profile-tab.active {
            color: #7c3aed;
            border-bottom: 2px solid #7c3aed;
        }

        .tab-pane {
            display: none;
            padding: 20px;
        }

        .tab-pane.active {
            display: block;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            border: none;
            background: var(--bg3);
            color: var(--text);
            transition: all 0.2s;
        }

        .btn:hover {
            opacity: 0.85;
            transform: translateY(-1px);
        }

        .btn:active {
            transform: scale(0.97);
        }

        .btn-accent {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 2px 8px var(--accent-glow);
        }

        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--surface);
            color: var(--text);
            padding: 10px 20px;
            border-radius: 40px;
            box-shadow: var(--shadow);
            z-index: 10000;
            transition: transform 0.3s;
            font-size: 0.85rem;
            backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            white-space: nowrap;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
        }

        .toast.error {
            border-left: 3px solid #ef4444;
        }

        .toast.success {
            border-left: 3px solid #10b981;
        }

        body.light-theme .toast,
        body.light-theme .notification {
            background: rgba(255, 255, 255, 0.96) !important;
            color: #17212b !important;
            border-color: rgba(148, 163, 184, 0.32) !important;
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14) !important;
            backdrop-filter: blur(6px) saturate(110%) !important;
            -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
        }

        body.light-theme .context-menu,
        body.light-theme #right-panel,
        body.light-theme .right-panel,
        body.light-theme .vc-modal-card,
        body.light-theme .modal-content,
        body.light-theme .format-toolbar,
        body.light-theme .send-action-menu {
            backdrop-filter: blur(8px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
            background-color: rgba(255, 255, 255, 0.94) !important;
        }

        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: var(--accent);
            border-radius: 0 0 40px 40px;
            animation: progressAnim 2s linear forwards;
        }

        @keyframes progressAnim {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        .avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1rem;
            color: #fff;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .avatar .online-indicator {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            background: #10b981;
            border-radius: 50%;
            border: 2px solid var(--bg2);
        }

/* ===== /static/css/modules/02-auth.css ===== */
        #auth-screen {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 20px;
            transition: opacity 0.3s;
            position: absolute;
            inset: 0;
            z-index: 10;
        }

        #auth-screen:not(.hidden) {
            opacity: 1 !important;
            pointer-events: all;
        }

        #auth-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        body.auth-bootstrapping #auth-screen,
        body.auth-bootstrapping #messenger {
            opacity: 0;
            pointer-events: none;
        }

        #auth-card {
            width: 100%;
            max-width: 380px;
            padding: 40px 32px;
            text-align: center;
            background: rgba(15, 15, 19, 0.85);
            backdrop-filter: blur(20px);
            border-radius: 32px;
            border: 1px solid rgba(124, 58, 237, 0.3);
            box-shadow: 0 0 40px rgba(124, 58, 237, 0.2);
        }

        #auth-card h1 {
            font-size: 2rem;
            margin-bottom: 8px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent), #a78bfa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .version {
            position: absolute;
            bottom: 16px;
            right: 20px;
            font-size: 0.7rem;
            color: var(--text3);
        }

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

        .input-group label {
            display: block;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .input-group input {
            width: 100%;
            padding: 12px 14px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            font-size: 0.9rem;
            outline: none;
        }

        .input-group input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

/* ===== /static/css/modules/03-app-shell-sidebar.css ===== */
        #messenger {
            display: flex;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            position: absolute;
            inset: 0;
            z-index: 5;
        }

        #messenger.active {
            opacity: 1;
            pointer-events: all;
            position: relative;
        }

        #sidebar {
            width: var(--sidebar-width);
            min-width: 260px;
            max-width: 400px;
            background: var(--bg2);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            z-index: 10;
        }

        .brand-panel {
            height: 58px;
            padding: 0 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            background: var(--bg2);
            border-bottom: 1px solid var(--border);
            box-shadow: none;
        }

        .brand-logo {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .brand-title {
            font-size: 1.16rem;
            font-weight: 800;
            letter-spacing: 0.1px;
            color: var(--brand-text);
            text-shadow: none;
        }

        .brand-copy {
            display: flex;
            flex-direction: column;
            min-width: 0;
            line-height: 1.05;
        }

        .connection-status {
            min-height: 14px;
            margin-top: 3px;
            font-size: 0.72rem;
            color: var(--text3);
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 180ms ease-out, transform 180ms ease-out, color 180ms ease-out;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .connection-status::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.9;
        }

        .connection-status.show {
            opacity: 1;
            transform: translateY(0);
        }

        .connection-status.online {
            color: #22c55e;
        }

        .connection-status.offline {
            color: #ef4444;
        }

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

        .sidebar-icon-btn {
            width: 38px;
            height: 38px;
            padding: 0;
            border: none;
            border-radius: 14px;
            background: var(--bg3);
            color: var(--text);
            cursor: pointer;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, transform 0.1s;
        }

        .sidebar-icon-btn:hover {
            background: var(--surface2);
        }

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

        #search-box {
            margin: 12px 16px;
            position: relative;
        }

        #search-box input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 30px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            font-size: 0.85rem;
            outline: none;
        }

        #search-box input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        #search-box .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text3);
        }


        .toggle-link {
            text-align: center;
            margin-top: 12px;
            font-size: 0.8rem;
            cursor: pointer;
            color: var(--accent);
            text-decoration: underline;
        }

        .error-msg {
            font-size: 0.75rem;
            margin-top: 8px;
            color: #ef4444;
        }

        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: var(--accent);
            border-radius: 0 0 40px 40px;
            animation: progressAnim 2s linear forwards;
        }

        @keyframes progressAnim {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        .online-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            margin-left: 6px;
        }

/* ===== /static/css/modules/04-chat-messages-composer.css ===== */
        #chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            background: var(--bg);
            position: relative;
        }

        .chat-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: blur(8px);
            opacity: 0.3;
            z-index: 0;
        }

        .chat-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #chat-header {
            padding: 12px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border);
            background: var(--header-bg);
            backdrop-filter: blur(12px);
            gap: 14px;
        }

        #chat-user-info {
            display: flex;
            align-items: center;
            gap: 14px;
            flex: 1;
            min-width: 0;
            /* чтобы текст не вылезал */
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 14px;
            transition: background 0.15s;
        }

        #chat-user-info:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        #chat-user-info .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            border: 2px solid var(--accent);
            opacity: 0.95;
            transition: transform 0.2s;
            cursor: pointer;
            /* только для аватара */
        }

        #chat-user-info .avatar:hover {
            transform: scale(1.05);
        }

        .chat-user-meta {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #chat-partner-name {
            font-weight: 650;
            font-size: 1rem;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text);
        }

        #chat-partner-status {
            font-size: 0.75rem;
            color: var(--text2);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Кнопка ⋮ – оставляем прежней, только может быть чуть крупнее */
        #btn-chat-settings {
            font-size: 1.4rem;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: transparent;
            color: var(--text);
            border: none;
            cursor: pointer;
            transition: background 0.2s;
        }

        #btn-chat-settings:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .chat-header-info {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        #messages-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .message-row {
            display: flex;
            flex-direction: column;
            max-width: 70%;
            animation: none;
        }

        .message-row.message-enter {
            animation: fadeSlideUp 0.18s ease-out both;
        }

        @keyframes fadeSlideUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .message-row.mine {
            align-self: flex-end;
            align-items: flex-end;
        }

        .message-row.theirs {
            align-self: flex-start;
            align-items: flex-start;
        }

        .message-bubble {
            padding: 10px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            line-height: 1.4;
            word-break: break-word;
        }

        .message-row.mine .message-bubble {
            background: var(--accent) !important;
            color: #ffffff !important;
            border-bottom-right-radius: 4px;
        }

        .message-row.theirs .message-bubble {
            background: var(--surface);
            color: var(--text);
            border-bottom-left-radius: 5px;
            box-shadow: var(--shadow-sm);
        }

        .message-row.system {
            align-self: center;
            max-width: min(560px, calc(100% - 24px));
        }

        .system-message {
            padding: 7px 12px;
            border-radius: 12px;
            background: rgba(42, 171, 238, 0.12);
            color: var(--text2);
            font-size: 0.78rem;
            text-align: center;
        }

        .message-meta {
            font-size: 0.65rem;
            color: var(--text3);
            margin-top: 4px;
            display: flex;
            gap: 6px;
        }

        .message-status {
            font-size: 12px;
            letter-spacing: -1px;
            margin-left: 2px;
            color: inherit !important;
        }

        .message-status.sent {
            color: var(--text3);
        }

        .message-status.delivered {
            color: var(--text2);
        }

        .message-status.read {
            color: #34d399;
        }

        body.light-theme .message-status.read,
        body.light-theme .message-status.read::before,
        body.light-theme .message-row.mine .message-status.read,
        body.light-theme .message-row.mine .message-status.read::before {
            color: #4a9eff !important;
        }


        #input-area {
            padding: 14px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: flex-end;
            gap: 12px;
            background: var(--header-bg);
            backdrop-filter: blur(12px);
            position: relative;
        }

        #input-area textarea {
            flex: 1;
            padding: 11px 18px;
            border-radius: 28px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            font-size: 0.9rem;
            resize: none;
            outline: none;
            max-height: 100px;
            min-height: 42px;
        }

        #input-area textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        .msg-char-counter {
            position: absolute;
            right: 64px;
            bottom: -15px;
            padding: 2px 7px;
            border-radius: 999px;
            background: var(--surface);
            color: var(--text3);
            border: 1px solid var(--border);
            font-size: 0.68rem;
            line-height: 1.2;
            opacity: 0;
            transform: translateY(-2px);
            pointer-events: none;
            transition: opacity 160ms ease-out, transform 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
        }

        .msg-char-counter.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .msg-char-counter.over {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.45);
        }

        .emoji-btn,
        .send-btn,
        .chat-settings-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            padding: 0;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        #emoji-picker {
            position: absolute;
            bottom: 80px;
            left: 20px;

            width: 320px;
            max-width: calc(100vw - 32px);
            max-height: 350px;

            background: var(--surface);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            z-index: 50;

            display: none;
            overflow: hidden;
            box-sizing: border-box;
        }

        #emoji-picker.show {
            display: block;
        }

        .emoji-search {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            border: none;
            border-bottom: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            outline: none;
        }

        .emoji-grid {
            display: grid;

            /* фиксированная таблица: 8 столбцов */
            grid-template-columns: repeat(8, 32px);
            justify-content: center;

            gap: 6px;
            padding: 12px;

            max-height: 260px;
            overflow-y: auto;
            overflow-x: hidden;

            box-sizing: border-box;
            width: 100%;
        }

        .emoji-item {
            width: 32px;
            height: 32px;
            min-width: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 1.35rem;
            line-height: 1;
            text-align: center;

            padding: 0;
            cursor: pointer;
            border-radius: 10px;
            transition: 0.15s;
            user-select: none;
        }

        .emoji-item:hover {
            transform: translateY(-1px);
            background: var(--surface2);
        }

        @media (max-width: 420px) {
            #emoji-picker {
                left: 8px;
                width: calc(100vw - 16px);
            }

            .emoji-grid {
                grid-template-columns: repeat(7, 32px);
                gap: 6px;
                padding: 10px;
            }
        }

/* SMCHAT_UNIVERSAL_CHAT_X_OVERFLOW_FIX */

/*
 * Единое ограничение ширины для личных и групповых чатов.
 * Горизонтальная прокрутка в области сообщений запрещена.
 */
#chat-area,
.chat-content,
#messages-container,
#input-area {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#messages-container {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

#messages-container > *,
#messages-container .message-row,
#messages-container .message-bubble,
#messages-container .message-content,
#messages-container .message-media-wrap,
#messages-container .media-preview,
#messages-container .multi-attachment-collage,
#messages-container .message-attachment-row,
#messages-container .voice-player {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#messages-container .message-bubble,
#messages-container .message-content,
#messages-container .message-attachment-name,
#messages-container .message-reply-text,
#messages-container .media-inline-caption {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#messages-container img,
#messages-container video,
#messages-container audio,
#messages-container canvas,
#messages-container iframe {
    max-width: 100%;
    box-sizing: border-box;
}

#messages-container pre,
#messages-container code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#input-area {
    width: 100%;
    overflow-x: hidden;
}

#msg-input,
#input-area textarea {
    min-width: 0;
    max-width: 100%;
}

/* ===== /static/css/modules/05-profile-right-panel.css ===== */
        .right-panel {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 380px;
            max-width: 85vw;
            background: rgba(21, 23, 30, 0.75);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
            transform: translateX(100%);
            transition: transform 0.3s;
            z-index: 30;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow);
        }

        .right-panel.open {
            transform: translateX(0);
        }

        .right-panel-header {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border);
            background: var(--header-bg);
        }

        .right-panel-header h3 {
            font-weight: 600;
            font-size: 1.1rem;
        }

        .contact-profile-panel {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
        }

        /* Блок профиля с аватаркой и именем */
        .contact-profile-header {
            padding: 24px 16px 16px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .contact-profile-header .avatar-large {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.15);
        }

        .contact-profile-header .name {
            font-weight: 700;
            font-size: 1.15rem;
            color: var(--text);
        }

        .contact-profile-header .login {
            font-size: 0.85rem;
            color: var(--text2);
            opacity: 0.9;
        }

        .contact-profile-header .status {
            margin-top: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .contact-profile-header .about {
            margin-top: 6px;
            font-size: 0.8rem;
            color: var(--text2);
            max-width: 220px;
            opacity: 0.8;
            line-height: 1.4;
        }

        /* Разделитель */
        .contact-profile-divider {
            margin: 0 16px;
            border: none;
            border-top: 1px solid var(--border);
            opacity: 0.5;
        }

        /* Обёртка табов с прокруткой */
        .profile-tabs-wrapper {
            padding: 8px 8px 0;
            display: flex;
            gap: 4px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Стиль одной вкладки */
        .profile-tab {
            white-space: nowrap;
            padding: 8px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.06);
            color: var(--text2);
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid transparent;
        }

        .profile-tab:hover {
            background: rgba(255, 255, 255, 0.12);
            color: var(--text);
        }

        .profile-tab.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            box-shadow: 0 2px 8px var(--accent-glow);
        }

        /* Контейнер контента вкладок */
        .profile-tab-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }

        /* Сетка для медиа (одинаково для media и gifs) */
        .media-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .media-grid-item {
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 12px;
            background: var(--bg3);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: transform 0.15s;
            cursor: pointer;
        }

        .media-grid-item img,
        .media-grid-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .media-grid-item:hover {
            transform: scale(1.02);
        }

        /* Список файлов/музыки */
        .attachment-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .attachment-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--surface);
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            backdrop-filter: blur(8px);
        }

        .attachment-row .file-info {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow: hidden;
        }

        .attachment-row .file-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.85rem;
        }

        .attachment-row .btn {
            flex-shrink: 0;
            padding: 6px 14px;
            font-size: 0.75rem;
        }

        /* Ссылки */
        .links-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .link-item {
            background: var(--surface);
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 0.85rem;
            word-break: break-all;
            border: 1px solid var(--border);
        }

        .right-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .profile-avatar-large {
            width: 140px;
            height: 140px;
            border-radius: 28px;
            margin: 20px auto;
            background-size: cover;
            background-position: center;
            background-color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: 700;
            color: #fff;
        }

        .profile-field {
            margin-bottom: 20px;
        }

        .profile-field label {
            display: block;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .profile-field input,
        .profile-field textarea {
            width: 100%;
            padding: 12px 14px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            font-size: 0.9rem;
            outline: none;
        }

        .profile-field input:focus,
        .profile-field textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        .profile-field textarea {
            resize: none;
            height: 80px;
        }

        /* Контейнер для профиля */
        .profile-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Блок с большой аватаркой */
        .profile-avatar-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        .profile-avatar-large {
            width: 100%;
            aspect-ratio: 1 / 1;
            /* Делаем квадрат 1:1 */
            background-size: cover;
            background-position: center;
            background-color: var(--accent);
            border-radius: 20px;
            /* Скругленные края */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            font-weight: 700;
            color: #fff;
            box-shadow: var(--shadow);
        }

        /* Имя пользователя в правом нижнем углу аватарки */
        .profile-avatar-name {
            position: absolute;
            bottom: 16px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            padding: 8px 16px;
            border-radius: 40px;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            max-width: calc(100% - 40px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-photo-strip {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
            gap: 8px;
        }

        .profile-photo-thumb {
            position: relative;
            aspect-ratio: 1 / 1;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            overflow: hidden;
            background: var(--bg3);
            cursor: pointer;
        }

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

        .profile-photo-thumb.active {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        .profile-photo-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        /* Стили для информационных блоков */
        .profile-info-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        .profile-info-item {
            border-bottom: 1px solid var(--border);
            padding-bottom: 12px;
        }

        .profile-info-label {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text2);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

        .profile-info-value {
            font-size: 1rem;
            color: var(--text);
            word-break: break-word;
        }

        /* Для возможности изменения ширины правой панели (опционально) */
        .right-panel {
            resize: horizontal;
            overflow: auto;
            min-width: 300px;
            max-width: 600px;
        }

        .profile-divider {
            height: 1px;
            background: var(--divider);
            margin: 20px 0;
        }

        .theme-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin: 12px 0;
        }

        .theme-btn {
            padding: 8px 16px;
            border-radius: 30px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.8rem;
            color: white;
        }

        .chat-search-input,
        .chat-search-dates input {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            outline: none;
            margin-bottom: 8px;
        }

        .chat-search-dates {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .chat-search-results {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        .chat-search-result {
            padding: 10px;
            border-radius: 12px;
            background: var(--surface2);
            border: 1px solid var(--border);
            cursor: pointer;
            font-size: 0.85rem;
        }

        .chat-search-result:hover {
            border-color: var(--accent);
        }

        .search-highlight {
            background: var(--accent);
            color: #fff;
            border-radius: 4px;
            padding: 0 3px;
        }

        .message-search-active .message-bubble {
            outline: 2px solid var(--accent);
            box-shadow: 0 0 0 4px var(--accent-glow);
        }

/* ===== /static/css/modules/06-menus-responsive.css ===== */
        .context-menu {
            position: fixed;
            background: var(--surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            z-index: 200;
            min-width: 180px;
            overflow: hidden;
            border: 1px solid var(--border);
            backdrop-filter: blur(12px);
        }

        .context-menu-item {
            padding: 12px 16px;
            cursor: pointer;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .context-menu-item:hover {
            background: var(--surface2);
        }

        .context-menu-item.danger {
            color: #ef4444;
        }

        #mobile-nav {
            display: none;
            background: var(--header-bg);
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            padding: 8px 16px;
            gap: 8px;
        }

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px;
            border-radius: var(--radius);
            cursor: pointer;
            font-size: 0.7rem;
            color: var(--text3);
        }

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

        .nav-item .nav-icon {
            font-size: 1.3rem;
        }

        @media (max-width: 768px) {
            #sidebar {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                z-index: 20;
                transform: translateX(-100%);
                transition: transform 0.3s;
            }

            #sidebar.open {
                transform: translateX(0);
            }

            #sidebar-backdrop {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(4px);
                z-index: 15;
            }

            #sidebar-backdrop.show {
                display: block;
            }

            #mobile-nav {
                display: flex;
            }

            .message-row {
                max-width: 85%;
            }

            #emoji-picker {
                width: calc(100vw - 40px);
                left: 20px;
            }

            .right-panel {
                width: 100%;
                max-width: none;
            }
        }

        @media (min-width: 769px) {
            #sidebar-backdrop {
                display: none !important;
            }

            #sidebar {
                transform: translateX(0) !important;
            }

            #mobile-nav {
                display: none !important;
            }
        }

        .floating-date {
            position: sticky;
            top: 8px;
            text-align: center;
            margin: 8px 0;
        }

        .floating-date span {
            background: var(--surface);
            color: var(--text2);
            padding: 4px 14px;
            border-radius: 40px;
            font-size: 0.7rem;
        }

        .empty-chat {
            text-align: center;
            color: var(--text3);
            padding: 60px 20px;
        }

        .close-panel {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text);
            padding: 0 8px;
        }

        .message-status {
            transition: all 0.3s ease;
        }

        .message-status.sent {
            animation: fadeIn 0.3s ease;
            color: #9ca3af;
        }

        .message-sender {
            font-size: 0.7rem;
            margin-bottom: 2px;
            margin-left: 8px;
            color: var(--text2);
        }

        .message-sender.sender-info {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 0;
            padding: 0;
            background: transparent;
            color: var(--accent);
            cursor: pointer;
            font: inherit;
            font-weight: 600;
        }

        .sender-avatar-mini {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex: 0 0 22px;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
        }

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

        .message-status.delivered {
            animation: fadeIn 0.3s ease;
            color: #9ca3af;
        }

        .message-status.read {
            animation: fadeIn 0.3s ease, glow 0.5s ease;
            color: #34d399;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

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

        @keyframes glow {
            0% {
                text-shadow: 0 0 0 rgba(52, 211, 153, 0);
            }

            50% {
                text-shadow: 0 0 4px rgba(52, 211, 153, 0.8);
            }

            100% {
                text-shadow: 0 0 0 rgba(52, 211, 153, 0);
            }
        }

/* ===== /static/css/modules/07-media-attachments-modals.css ===== */
        /* Медиа и вложения */
        .media-preview {
            max-width: 260px;
            max-height: 220px;
            border-radius: 16px;
            display: block;
            cursor: pointer;
        }

        .message-file-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 16px;
            background: rgba(0, 0, 0, 0.18);
            color: inherit;
            text-decoration: none;
            font-size: 0.85rem;
        }

        .attachments-panel {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 380px;
            max-width: 90vw;
            background: var(--bg2);
            border-left: 1px solid var(--border);
            transform: translateX(100%);
            transition: transform 0.25s;
            z-index: 60;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow);
        }

        .attachments-panel.open {
            transform: translateX(0);
        }

        .attachments-header {
            padding: 18px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            background: var(--header-bg);
        }

        .attachments-list {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .attachment-item {
            padding: 10px 12px;
            border-radius: var(--radius);
            background: var(--surface);
            border: 1px solid var(--border);
        }

        .attachment-item a {
            color: var(--accent);
            text-decoration: none;
        }

        .attachment-date {
            color: var(--text3);
            font-size: 0.7rem;
            margin-top: 4px;
        }

        .media-grid {
            gap: 10px;
        }

        .media-grid-item {
            border: 1px solid var(--border);
            background: var(--surface2);
        }

        .attachment-row,
        .link-item {
            border: 1px solid var(--border);
            background: var(--surface2);
            border-radius: 12px;
        }

        .group-modal-card {
            background: var(--surface);
            margin: 8vh auto;
            padding: 18px;
            border-radius: 18px;
            width: min(440px, calc(100vw - 28px));
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
        }

        .group-modal-card h3 {
            margin: 0 0 14px;
            font-size: 1.1rem;
        }

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

        .group-members-select {
            max-height: 240px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 8px;
            background: var(--bg2);
        }

        .avatar-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(8px);
            z-index: 70;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .avatar-modal.open {
            display: flex;
        }

        .avatar-modal-content {
            width: 100%;
            max-width: 330px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 28px;
            padding: 22px;
            text-align: center;
            box-shadow: var(--shadow);
        }

        .avatar-modal-img {
            width: 200px;
            height: 200px;
            margin: 0 auto 18px;
            border-radius: 28px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
            font-weight: 700;
            overflow: hidden;
        }

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

        .refined-profile .profile-hero,
        .group-settings-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 10px 0 18px;
        }

        .profile-subtitle,
        .group-settings-subtitle,
        .member-role {
            color: var(--text2);
            font-size: 0.82rem;
        }

        .clickable-avatar {
            cursor: zoom-in;
            transition: transform 0.16s, box-shadow 0.16s;
        }

        .clickable-avatar:hover {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
        }

        .group-settings-head {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .group-settings-avatar {
            width: 52px;
            height: 52px;
            font-size: 1.35rem;
        }

        .group-settings-title {
            font-weight: 700;
            font-size: 1rem;
        }

        .settings-block {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px;
            margin: 10px 0;
        }

        .settings-block-title {
            font-weight: 700;
            margin-bottom: 10px;
        }

        .soft-upload-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 9px 12px;
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
            background: var(--accent);
        }

        .group-members-panel {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 260px;
            overflow-y: auto;
        }

        .group-member-row {
            width: 100%;
            border: 0;
            background: transparent;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border-radius: 12px;
            cursor: pointer;
            text-align: left;
        }

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

        .group-member-row .avatar {
            width: 38px;
            height: 38px;
            font-size: 0.82rem;
        }

        .member-main {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .member-name {
            font-weight: 650;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #avatar-crop-container {
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            background: #000;
        }

        /* Модальное окно */
        .modal {
            display: none;
            align-items: center;
            justify-content: center;
        }

        .modal.show {
            display: flex;
        }

        /* Для красоты чекбоксы */
        .member-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            cursor: pointer;
        }

        .member-checkbox:hover {
            background: var(--surface2);
            border-radius: 10px;
        }

/* ===== /static/css/modules/08-telegram-polish.css ===== */
        /* Telegram-like adaptive polish */
        #messenger {
            background: var(--bg);
        }

        #sidebar {
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }

        #messages-container {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 42%);
        }

        .message-row {
            width: fit-content;
        }

        .message-bubble {
            max-width: min(560px, 100%);
        }

        #input-area {
            margin: 0 auto 12px;
            width: min(760px, calc(100% - 28px));
            border: 1px solid var(--border);
            border-radius: 18px;
            background: rgba(23, 33, 43, 0.92);
            box-shadow: var(--shadow-sm);
        }

        body.light-theme #input-area {
            background: rgba(255, 255, 255, 0.94);
        }

        #msg-input {
            max-height: 130px;
        }

        @media (max-width: 920px) {
            :root {
                --sidebar-width: 290px;
            }

            #messages-container {
                padding: 16px;
            }
        }

        @media (max-width: 768px) {
            #messenger {
                height: 100dvh;
            }

            #sidebar {
                width: min(88vw, 360px);
                max-width: none;
            }

            #chat-header {
                min-height: 64px;
                padding: 8px 12px;
            }

            #chat-user-info .avatar {
                width: 42px;
                height: 42px;
            }

            #messages-container {
                padding: 12px 10px 86px;
            }

            .message-row {
                max-width: 92%;
            }

            #input-area {
                position: fixed;
                left: 8px;
                right: 8px;
                bottom: calc(54px + env(safe-area-inset-bottom));
                width: auto;
                margin: 0;
                padding: 8px;
                z-index: 12;
            }

            #mobile-nav {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 11;
                padding-bottom: calc(8px + env(safe-area-inset-bottom));
            }
        }


        :root {
            --sidebar-width: 360px;
            --radius: 12px;
            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        }

        /* Тёмная тема как Telegram Desktop/Web */
        body {
            --accent: #2aabee;
            --accent-hover: #229ed9;
            --accent-glow: rgba(42, 171, 238, 0.28);

            --bg: #0e1621;
            --bg2: #17212b;
            --bg3: #242f3d;

            --surface: #182533;
            --surface2: #243447;

            --text: #e9edef;
            --text2: #a8b3bd;
            --text3: #6f7d89;

            --border: rgba(255, 255, 255, 0.07);
            --divider: rgba(255, 255, 255, 0.06);

            --header-bg: rgba(23, 33, 43, 0.94);
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
            --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.18);

            background: var(--bg);
        }

        /* Светлая тема как Telegram */
        body.light-theme {
            --accent: #3390ec;
            --accent-hover: #2481cc;
            --accent-glow: rgba(51, 144, 236, 0.24);

            --bg: #dfe6ef;
            --bg2: #edf2f7;
            --bg3: #f8fafc;

            --surface: #f8fafc;
            --surface2: #ebf1f7;

            --text: #17202c;
            --text2: #4c5b6b;
            --text3: #6e7d8e;

            --border: rgba(42, 56, 74, 0.14);
            --divider: #cfd9e5;

            --header-bg: rgba(237, 242, 247, 0.96);
            --shadow: 0 8px 24px rgba(31, 45, 61, 0.10);
            --shadow-sm: 0 3px 10px rgba(31, 45, 61, 0.08);
        }

        /* Общий фон чата — Telegram-like pattern */
        #chat-area {
            background:
                radial-gradient(circle at 20% 20%, rgba(42, 171, 238, 0.08), transparent 26%),
                radial-gradient(circle at 80% 10%, rgba(42, 171, 238, 0.06), transparent 28%),
                radial-gradient(circle at 40% 90%, rgba(42, 171, 238, 0.05), transparent 30%),
                var(--bg);
        }

        body.light-theme #chat-area {
            background:
                radial-gradient(circle at 20% 20%, rgba(51, 144, 236, 0.09), transparent 26%),
                radial-gradient(circle at 80% 10%, rgba(51, 144, 236, 0.07), transparent 28%),
                radial-gradient(circle at 40% 90%, rgba(51, 144, 236, 0.05), transparent 30%),
                #dfe8f3;
        }

        /* Убираем сильное размытие пользовательских обоев */
        .chat-bg {
            filter: none !important;
            opacity: 0.22 !important;
        }

        body.light-theme .chat-bg {
            opacity: 0.18 !important;
        }

        /* Левая панель */
        #sidebar {
            background: var(--bg2);
            border-right: 1px solid var(--border);
        }

        /* Поиск как Telegram */
        #search-box {
            margin: 8px 12px 10px;
        }

        #search-box input {
            height: 38px;
            border-radius: 10px;
            border: none;
            background: var(--bg3);
            color: var(--text);
            box-shadow: none;
        }

        #search-box input:focus {
            background: var(--surface);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        /* Аватары */
        .avatar {
            width: 48px;
            height: 48px;
            font-size: 17px;
            box-shadow: none;
        }

        .avatar .online-indicator,
        .online-dot {
            background: #31c76a;
            box-shadow: 0 0 0 2px var(--bg2);
        }

        /* Шапка чата */
        #chat-header {
            min-height: 58px;
            padding: 7px 16px;
            background: var(--header-bg);
            border-bottom: 1px solid var(--divider);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        #chat-user-info {
            border-radius: 10px;
        }

        #chat-user-info:hover {
            background: rgba(255, 255, 255, 0.055);
        }

        body.light-theme #chat-user-info:hover {
            background: rgba(0, 0, 0, 0.045);
        }

        #chat-user-info .avatar {
            width: 42px;
            height: 42px;
            border: none;
            box-shadow: none;
        }

        #chat-partner-name {
            font-size: 15px;
            font-weight: 600;
        }

        #chat-partner-status {
            font-size: 13px;
            color: var(--accent);
        }

        /* Контейнер сообщений */
        #messages-container {
            padding: 18px 22px 16px;
            gap: 3px;
            scroll-behavior: smooth;
        }

        /* Telegram-like появление сообщений */
        .message-row {
            max-width: min(72%, 620px);
            width: fit-content;
            animation: noteFaxMsgIn 0.18s ease-out;
        }

        @keyframes noteFaxMsgIn {
            from {
                opacity: 0;
                transform: translateY(6px) scale(0.985);
            }

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

        /* Пузырьки */
        .message-bubble {
            position: relative;
            padding: 7px 10px 6px 10px;
            border-radius: 12px;
            font-size: 15px;
            line-height: 1.38;
            box-shadow: none;
            word-break: break-word;
        }

        /* Чужие сообщения */
        .message-row.theirs .message-bubble {
            background: #182533;
            color: var(--text);
            border-bottom-left-radius: 4px;
        }

        body.light-theme .message-row.theirs .message-bubble {
            background: #ffffff;
            color: var(--text);
        }

        /* Мои сообщения — Telegram green/blue style */
        .message-row.mine .message-bubble {
            background: var(--accent) !important;
            color: #ffffff !important;
            border-bottom-right-radius: 4px;
        }

        body.light-theme .message-row.mine .message-bubble {
            background: var(--accent) !important;
            color: #fff !important;
        }

        body.light-theme.theme-purple {
            --accent: #7c3aed;
            --accent-hover: #6d28d9;
            --accent-glow: rgba(124, 58, 237, 0.22);
        }

        body.light-theme.theme-blue {
            --accent: #3b82f6;
            --accent-hover: #2563eb;
            --accent-glow: rgba(59, 130, 246, 0.22);
        }

        body.light-theme.theme-green {
            --accent: #10b981;
            --accent-hover: #059669;
            --accent-glow: rgba(16, 185, 129, 0.22);
        }

        body.light-theme.theme-pink {
            --accent: #ec4899;
            --accent-hover: #db2777;
            --accent-glow: rgba(236, 72, 153, 0.22);
        }

        body.light-theme.theme-orange {
            --accent: #f59e0b;
            --accent-hover: #d97706;
            --accent-glow: rgba(245, 158, 11, 0.22);
        }

        /* Имя отправителя в группе */
        .message-sender {
            color: var(--accent);
            font-size: 13px;
            font-weight: 600;
            margin: 0 0 3px 4px;
        }

        /* Время и галочки */
        .message-meta {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 4px;
            margin-top: 3px;
            font-size: 11px;
            line-height: 1;
            color: rgba(233, 237, 239, 0.58);
        }

        body.light-theme .message-meta {
            color: rgba(89, 102, 114, 0.8);
        }

        .message-row.mine .message-meta {
            color: rgba(255, 255, 255, 0.68);
        }

        body.light-theme .message-row.mine .message-meta {
            color: #5f8f5f;
        }

        .message-status {
            font-size: 12px;
            letter-spacing: -1px;
            margin-left: 2px;
            color: inherit !important;
        }

        .message-status.read {
            color: #5ac8fa !important;
        }

        body.light-theme .message-status.read {
            color: #3390ec !important;
        }

        /* Дата */
        .floating-date {
            z-index: 2;
            margin: 10px 0;
        }

        .floating-date span {
            background: rgba(24, 37, 51, 0.82);
            color: #c8d2dc;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        body.light-theme .floating-date span {
            background: rgba(255, 255, 255, 0.82);
            color: #6b7280;
        }

        /* Нижняя панель ввода как Telegram */
        #input-area {
            width: min(820px, calc(100% - 32px));
            margin: 0 auto 12px;
            padding: 8px 10px;
            border-radius: 14px;
            border: none;
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            position: relative;
            border: 1px solid var(--border);
            flex-wrap: wrap;
        }

        #input-area textarea,
        #msg-input {
            min-height: 42px;
            max-height: 140px;
            padding: 11px 16px;
            border-radius: 18px;
            border: none;
            background: transparent;
            color: var(--text);
            box-shadow: none;
        }

        #input-area textarea:focus,
        #msg-input:focus {
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        /* Кнопки */
        .btn,
        .emoji-btn,
        .send-btn,
        .chat-settings-btn,
        #btn-chat-settings {
            transition:
                background 0.15s ease,
                transform 0.1s ease,
                opacity 0.15s ease;
        }

        .btn:active,
        .emoji-btn:active,
        .send-btn:active,
        .chat-settings-btn:active,
        #btn-chat-settings:active {
            transform: scale(0.94);
        }

        .send-btn {
            background: var(--accent) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 16px var(--accent-glow);
        }

        .send-btn:hover {
            background: var(--accent-hover) !important;
        }

        .attachment-menu {
            position: absolute;
            left: 54px;
            bottom: calc(100% + 10px);
            display: none;
            grid-template-columns: repeat(4, minmax(70px, 1fr));
            gap: 8px;
            width: min(360px, calc(100vw - 40px));
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--surface);
            box-shadow: var(--shadow);
            z-index: 55;
        }

        .attachment-menu.show {
            display: grid;
        }

        .attachment-menu button {
            border: 0;
            border-radius: 10px;
            padding: 10px 8px;
            background: var(--surface2);
            color: var(--text);
            cursor: pointer;
            font: inherit;
        }

        .attachment-menu button:hover {
            background: var(--bg3);
        }

        #emoji-picker {
            bottom: 76px;
            left: max(16px, calc((100% - min(820px, calc(100% - 32px))) / 2));
            right: auto;
        }

        /* Emoji / панели / модалки */
        #emoji-picker,
        .right-panel,
        .attachments-panel,
        .context-menu,
        .modal-content,
        #auth-card {
            border: 1px solid var(--border);
            background: rgba(23, 33, 43, 0.92);
            backdrop-filter: blur(22px) saturate(160%);
            -webkit-backdrop-filter: blur(22px) saturate(160%);
            box-shadow: var(--shadow);
        }

        body.light-theme #emoji-picker,
        body.light-theme .right-panel,
        body.light-theme .attachments-panel,
        body.light-theme .context-menu,
        body.light-theme .modal-content {
            background: rgba(255, 255, 255, 0.92);
        }

        /* Auth экран — A NoteFax в стиле Telegram */
        #auth-screen {
            background:
                radial-gradient(circle at 20% 20%, rgba(42, 171, 238, 0.26), transparent 28%),
                radial-gradient(circle at 80% 80%, rgba(42, 171, 238, 0.18), transparent 30%),
                #0e1621;
        }

        .auth-bg {
            background:
                linear-gradient(135deg, #0e1621, #17212b 50%, #0e1621) !important;
            animation: noteFaxAuthBg 10s ease-in-out infinite;
        }

        @keyframes noteFaxAuthBg {

            0%,
            100% {
                filter: hue-rotate(0deg);
            }

            50% {
                filter: hue-rotate(8deg);
            }
        }

        #auth-card {
            max-width: 390px;
            border-radius: 20px;
            border: 1px solid rgba(42, 171, 238, 0.24);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.38),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        }

        #auth-card h1 {
            background: none !important;
            -webkit-text-fill-color: initial !important;
            color: #ffffff;
            font-size: 30px;
            letter-spacing: -0.5px;
        }

        .input-group input {
            border: none;
            border-radius: 12px;
            background: var(--bg3);
        }

        .input-group input:focus {
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        /* Toast как Telegram уведомление */
        .toast {
            border-radius: 999px;
            background: rgba(23, 33, 43, 0.92);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        /* Mobile */
        @media (max-width: 768px) {
            #messages-container {
                padding: 12px 8px 88px;
            }

            .message-row {
                max-width: 88%;
            }

            .message-bubble {
                font-size: 15px;
            }

            #input-area {
                left: 8px;
                right: 8px;
                bottom: calc(54px + env(safe-area-inset-bottom));
                width: auto;
                padding: 6px;
            }

            #chat-header {
                min-height: 56px;
            }

            #sidebar {
                width: min(92vw, 380px);
            }
        }

        .message-status.read {
            color: #53bdeb !important;
        }

/* ===== /static/css/modules/09-message-layout-features.css ===== */
        /* Telegram message layout */

        .message-meta {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;

            margin-top: 4px;

            font-size: 11px;
            line-height: 1;

            opacity: 0.75;
        }

        /* мои сообщения */
        .message-row.mine .message-meta {
            color: rgba(255, 255, 255, 0.72);
        }

        /* светлая тема */
        body.light-theme .message-row.mine .message-meta {
            color: #5f8f5f;
        }

        /* чужие */
        .message-row.theirs .message-meta {
            color: var(--text3);
        }

        /* галочки */

        .message-status {
            font-size: 0;
            letter-spacing: -1px;
            margin-left: 2px;
            font-weight: 700;
            display: inline-flex;
            min-width: 15px;
            line-height: 1;
            white-space: nowrap;
        }

        .message-status::before {
            content: "✓";
            font-size: 12px;
            letter-spacing: -1px;
            line-height: 1;
        }

        /* доставлено */

        .message-status.sent,
        .message-status.delivered {
            color: inherit !important;
        }

        /* прочитано */

        .message-status.read {
            color: #53bdeb !important;
        }

        .message-status.read::before {
            content: "✓✓";
        }

        /* пузырь */

        .message-bubble {
            position: relative;
            padding-bottom: 5px;
        }

        /* анимация как TG */

        .message-row {
            animation: tgMessageIn 0.16s ease-out;
        }

        @keyframes tgMessageIn {
            from {
                opacity: 0;
                transform: translateY(6px) scale(0.985);
            }

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

        .chat-search-input,
        .chat-search-dates input {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            outline: none;
            margin-bottom: 8px;
        }

        .chat-search-dates {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .chat-search-results {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        .chat-search-result {
            padding: 10px;
            border-radius: 12px;
            background: var(--surface2);
            border: 1px solid var(--border);
            cursor: pointer;
            font-size: 0.85rem;
        }

        .chat-search-result:hover {
            border-color: var(--accent);
        }

        .search-highlight {
            background: var(--accent);
            color: #fff;
            border-radius: 4px;
            padding: 0 3px;
        }

        .message-search-active .message-bubble {
            outline: 2px solid var(--accent);
            box-shadow: 0 0 0 4px var(--accent-glow);
        }

        .reply-preview {
            width: 100%;
            flex: 0 0 100%;
            order: -1;
            box-sizing: border-box;
            background: var(--surface2);
            border-left: 3px solid var(--accent);
            color: var(--text);
            padding: 8px 12px;
            border-radius: 12px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.85rem;
        }

        .reply-preview button {
            background: none;
            border: none;
            color: var(--text2);
            font-size: 1.2rem;
            cursor: pointer;
        }

        .message-reply-block {
            border-left: 3px solid var(--accent);
            padding: 8px 10px;
            margin-bottom: 8px;
            font-size: 0.82rem;
            border-radius: 11px;
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
        }

        .message-reply-block[data-reply-target-id] {
            cursor: pointer;
        }

        .message-jump-highlight .message-bubble {
            outline: 2px solid var(--accent);
            box-shadow: 0 0 0 4px var(--accent-glow);
        }

        .message-row.selection-mode {
            position: relative;
            cursor: pointer;
            padding-left: 32px;
        }

        .message-row.mine.selection-mode {
            padding-left: 0;
            padding-right: 32px;
        }

        .message-row.selected .message-bubble {
            outline: 2px solid var(--accent);
            box-shadow: 0 0 0 4px var(--accent-glow);
        }

        .message-select-check {
            position: absolute;
            left: 4px;
            top: 50%;
            width: 22px;
            height: 22px;
            transform: translateY(-50%);
            border-radius: 50%;
            border: 2px solid var(--border);
            background: var(--surface);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            box-sizing: border-box;
        }

        .message-row.mine .message-select-check {
            left: auto;
            right: 4px;
        }

        .message-row.selected .message-select-check {
            border-color: var(--accent);
            background: var(--accent);
        }

        .selection-bar,
        .voice-recording-panel {
            width: 100%;
            flex: 0 0 100%;
            box-sizing: border-box;
            background: var(--surface2);
            color: var(--text);
            border-radius: 12px;
            padding: 8px 12px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.85rem;
        }

        .selection-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .voice-recording-panel {
            border-left: 3px solid #ef4444;
        }

        #btn-voice.recording {
            background: #ef4444;
            color: #fff;
        }

        #btn-voice {
            display: none;
        }

        .send-action-menu {
            position: absolute;
            right: 10px;
            bottom: calc(100% + 10px);
            width: 210px;
            padding: 8px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: rgba(23, 33, 43, 0.94);
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px) saturate(160%);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            z-index: 80;
        }

        body.light-theme .send-action-menu {
            background: rgba(255, 255, 255, 0.94);
        }

        .send-action-menu button {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            border: none;
            border-radius: 10px;
            padding: 10px 12px;
            background: transparent;
            color: var(--text);
            cursor: pointer;
            text-align: left;
            font: inherit;
        }

        .send-action-menu button:hover {
            background: var(--surface2);
        }

        .voice-player {
            width: min(280px, 100%);
            display: grid;
            grid-template-columns: 36px 1fr auto;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.14);
        }

        .message-row.theirs .voice-player {
            background: var(--surface2);
            border-color: var(--border);
        }

        .voice-player {
            width: min(230px, 100%);
            min-width: 190px;
            display: grid;
            grid-template-columns: 30px 1fr;
            align-items: center;
            gap: 8px;
            padding: 5px 7px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.10);
        }

        .message-row.theirs .voice-player {
            background: var(--surface2);
            border-color: var(--border);
        }

        .voice-play {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            color: var(--accent);
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
            flex-shrink: 0;
        }

        .message-row.theirs .voice-play {
            background: var(--accent);
            color: #ffffff;
        }

        .voice-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .voice-bar {
            position: relative;
            height: 14px;
            display: flex;
            align-items: center;
        }

        .voice-progress {
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.28);
            overflow: hidden;
            pointer-events: none;
        }

        .voice-progress-fill {
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: currentColor;
            opacity: 0.95;
        }

        .voice-seek {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 14px;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        .voice-time-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            color: rgba(255, 255, 255, 0.72);
            font-size: 10px;
            line-height: 1;
            white-space: nowrap;
        }

        .message-row.theirs .voice-time-row {
            color: var(--text3);
        }

        .voice-player audio {
            display: none;
        }

        .vc-icon {
            width: 22px;
            height: 22px;
            display: inline-block;
            position: relative;
            flex: 0 0 auto;
        }

        .vc-icon::before,
        .vc-icon::after {
            content: "";
            position: absolute;
            box-sizing: border-box;
        }

        .vc-icon-search::before {
            width: 13px;
            height: 13px;
            left: 2px;
            top: 2px;
            border: 3px solid currentColor;
            border-radius: 50%;
        }

        .vc-icon-search::after {
            width: 10px;
            height: 3px;
            right: 1px;
            bottom: 3px;
            border-radius: 3px;
            background: currentColor;
            transform: rotate(45deg);
        }

        .vc-icon-group::before {
            width: 11px;
            height: 11px;
            left: 5px;
            top: 1px;
            border: 3px solid currentColor;
            border-radius: 50%;
        }

        .vc-icon-group::after {
            width: 18px;
            height: 10px;
            left: 2px;
            bottom: 1px;
            border: 3px solid currentColor;
            border-top: none;
            border-radius: 0 0 12px 12px;
        }

        .vc-icon-smile::before {
            inset: 2px;
            border: 3px solid currentColor;
            border-radius: 50%;
        }

        .vc-icon-smile::after {
            width: 9px;
            height: 5px;
            left: 6px;
            top: 11px;
            border-bottom: 3px solid currentColor;
            border-radius: 0 0 10px 10px;
            box-shadow: -4px -5px 0 -2px currentColor, 4px -5px 0 -2px currentColor;
        }

        .vc-icon-attach::before {
            width: 10px;
            height: 18px;
            left: 6px;
            top: 1px;
            border: 3px solid currentColor;
            border-radius: 8px;
            transform: rotate(38deg);
        }

        .vc-icon-chat::before {
            inset: 3px;
            border: 3px solid currentColor;
            border-radius: 7px;
        }

        .vc-icon-chat::after {
            width: 8px;
            height: 8px;
            right: 3px;
            bottom: 1px;
            border-right: 3px solid currentColor;
            border-bottom: 3px solid currentColor;
            transform: rotate(45deg);
        }

        .vc-icon-mic::before {
            width: 10px;
            height: 14px;
            left: 6px;
            top: 1px;
            border: 3px solid currentColor;
            border-radius: 8px;
        }

        .vc-icon-mic::after {
            width: 16px;
            height: 11px;
            left: 3px;
            top: 8px;
            border: 3px solid currentColor;
            border-top: none;
            border-radius: 0 0 10px 10px;
            box-shadow: 5px 9px 0 -3px currentColor, -5px 9px 0 -3px currentColor;
        }

        .vc-icon-clock::before {
            inset: 2px;
            border: 3px solid currentColor;
            border-radius: 50%;
        }

        .vc-icon-clock::after {
            width: 8px;
            height: 8px;
            left: 10px;
            top: 5px;
            border-left: 3px solid currentColor;
            border-bottom: 3px solid currentColor;
        }

        .sidebar-icon-btn,
        .emoji-btn {
            color: #fff;
            background: linear-gradient(135deg, #13a7ff, #0877f2);
            border: none;
            box-shadow: 0 8px 20px rgba(8, 119, 242, 0.22);
        }

        .sidebar-icon-btn:hover,
        .emoji-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(8, 119, 242, 0.3);
        }

        .message-reply-title {
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 2px;
        }

        .message-reply-text {
            white-space: pre-wrap;
            overflow: visible;
            text-overflow: clip;
            max-width: none;
            color: var(--text2);
            line-height: 1.35;
        }

        .message-row.mine .message-reply-block {
            border-left-color: rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.14);
        }

        .message-row.mine .message-reply-title {
            color: #fff;
        }

        .message-row.mine .message-reply-text {
            color: rgba(255, 255, 255, 0.82);
        }

        .message-forwarded-label {
            font-size: 0.75rem;
            color: var(--accent);
            margin-bottom: 4px;
            font-weight: 700;
        }

        .message-edited {
            font-size: 0.65rem;
            opacity: 0.75;
        }

        .pinned-message-bar {
            width: min(820px, calc(100% - 32px));
            margin: 8px auto 0;
            padding: 9px 14px;
            background: var(--surface2);
            border-left: 3px solid var(--accent);
            color: var(--text);
            font-size: 0.85rem;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            position: relative;
            z-index: 3;
        }

        .pinned-message-title {
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 2px;
        }

        .pinned-message-preview {
            color: var(--text2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pinned-menu-item {
            display: block;
            min-width: 260px;
            max-width: 360px;
        }

        .pinned-menu-item .message-reply-text {
            max-width: 320px;
        }

        .favorites-profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 24px;
            background: linear-gradient(135deg, #10b981, #3b82f6);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }

        body.theme-dark {
            --color-bg: #1e1e1e;
            --color-text: #ffffff;
            --color-brand: #ffffff;
        }

        .message-bubble:has(.voice-player) {
            padding: 6px 8px;
            border-radius: 18px;
        }

        .voice-player {
            width: 230px;
            min-width: 190px;
            height: 42px;
            display: grid;
            grid-template-columns: 30px 1fr;
            align-items: center;
            gap: 8px;
            padding: 5px 7px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.10);
        }

        .message-row.theirs .voice-player {
            background: var(--surface2);
            border-color: var(--border);
        }

        .voice-play {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 0;
            background: #fff;
            color: var(--accent);
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
        }

        .voice-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .voice-bar {
            position: relative;
            height: 12px;
            display: flex;
            align-items: center;
        }

        .voice-progress {
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .28);
            overflow: hidden;
        }

        .voice-progress-fill {
            width: 0%;
            height: 100%;
            background: currentColor;
        }

        .voice-seek {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 12px;
            opacity: 0;
            cursor: pointer;
        }

        .voice-time-row {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            line-height: 1;
            opacity: .75;
        }

        .voice-player audio,
        .voice-player audio[controls] {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        :root {
            --icon-sm: 18px;
            --icon-md: 20px;
            --icon-lg: 24px;
        }

        .icon-btn svg,
        .chat-action-btn svg,
        .sidebar-action svg,
        .attach-btn svg,
        .emoji-btn svg,
        .search-toggle-btn svg,
        .message-action svg,
        .context-menu svg,
        .menu-item svg,
        .profile-action svg,
        .settings-action svg {
            width: var(--icon-sm) !important;
            height: var(--icon-sm) !important;
        }

        .icon-btn,
        .chat-action-btn,
        .sidebar-action,
        .attach-btn,
        .emoji-btn,
        .search-toggle-btn,
        .message-action,
        .profile-action,
        .settings-action {
            width: 34px;
            height: 34px;
            min-width: 34px;
            min-height: 34px;
            padding: 0;
        }

        .sidebar-icon-btn,
        .emoji-btn,
        .chat-settings-btn,
        #btn-chat-settings {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            min-height: 34px !important;
            padding: 0 !important;
            font-size: 15px !important;
            color: var(--text2) !important;
            background: var(--bg3) !important;
            border: 1px solid var(--border) !important;
            box-shadow: none !important;
        }

        .sidebar-icon-btn:hover,
        .emoji-btn:hover,
        .chat-settings-btn:hover,
        #btn-chat-settings:hover {
            color: var(--text) !important;
            background: var(--surface2) !important;
            box-shadow: none !important;
        }

        body.light-theme .sidebar-icon-btn,
        body.light-theme .emoji-btn,
        body.light-theme .chat-settings-btn,
        body.light-theme #btn-chat-settings {
            color: #ffffff !important;
            background: var(--accent) !important;
            border-color: transparent !important;
            box-shadow: 0 2px 8px var(--accent-glow) !important;
        }

        body.light-theme .sidebar-icon-btn:hover,
        body.light-theme .emoji-btn:hover,
        body.light-theme .chat-settings-btn:hover,
        body.light-theme #btn-chat-settings:hover {
            background: var(--accent-hover) !important;
        }

        .vc-icon {
            width: 17px !important;
            height: 17px !important;
        }

        .vc-icon-search::before,
        .vc-icon-group::before,
        .vc-icon-smile::before,
        .vc-icon-attach::before,
        .vc-icon-chat::before,
        .vc-icon-mic::before,
        .vc-icon-clock::before {
            border-width: 2px !important;
        }

        .vc-icon-search::after {
            width: 8px !important;
            height: 2px !important;
            right: 2px !important;
            bottom: 3px !important;
        }

        .vc-icon-group::after {
            width: 14px !important;
            height: 8px !important;
            left: 2px !important;
            border-width: 2px !important;
            border-top: none !important;
        }

        .vc-icon-smile::after {
            border-bottom-width: 2px !important;
        }

        .vc-icon-attach::before {
            width: 8px !important;
            height: 14px !important;
            left: 5px !important;
            border-width: 2px !important;
        }

        .vc-icon-mic::after,
        .vc-icon-clock::after {
            border-width: 2px !important;
        }

        .send-btn {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            min-height: 38px !important;
            font-size: 18px !important;
        }

        .brand-logo {
            width: var(--icon-lg);
            height: var(--icon-lg);
        }

        .chat-header-actions svg,
        .right-panel-header svg,
        .panel-action svg {
            width: var(--icon-md) !important;
            height: var(--icon-md) !important;
        }

        .context-menu .menu-item {
            gap: 10px;
        }

        .context-menu .menu-item svg {
            width: 16px !important;
            height: 16px !important;
        }

        .emoji-picker .emoji {
            font-size: 20px;
        }

        .voice-play {
            width: 28px;
            height: 28px;
            font-size: 11px;
        }

        :root {
            --ui-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
            --ui-fast: 160ms;
            --ui-mid: 240ms;
            --ui-slow: 300ms;
        }

        .right-panel {
            transition:
                transform var(--ui-slow) var(--ui-ease),
                opacity var(--ui-mid) ease,
                box-shadow var(--ui-mid) ease !important;
            opacity: 0;
            will-change: transform, opacity;
        }

        .right-panel.open {
            opacity: 1;
        }

        #panel-content,
        .right-panel-content {
            animation: panelContentIn var(--ui-mid) var(--ui-ease);
        }

        @keyframes panelContentIn {
            from {
                opacity: 0;
                transform: translateX(12px);
            }

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

        .modal {
            opacity: 0;
            transform: scale(0.97);
            transition:
                opacity var(--ui-mid) ease,
                transform var(--ui-mid) var(--ui-ease);
            will-change: opacity, transform;
        }

        .modal.show {
            opacity: 1;
            transform: scale(1);
        }

        .modal-content,
        .group-modal-card,
        .avatar-modal-content {
            animation: modalCardIn var(--ui-mid) var(--ui-ease);
        }

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

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

        .context-menu {
            animation: contextMenuIn var(--ui-fast) var(--ui-ease);
            transform-origin: top left;
            will-change: opacity, transform;
        }

        @keyframes contextMenuIn {
            from {
                opacity: 0;
                transform: translateY(-6px) scale(0.96);
            }

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

        #messages-container {
            transition: opacity var(--ui-fast) ease;
        }

        /* SMCHAT_MESSAGE_STABILITY_03G */
        .message-row {
            animation: none !important;
        }

        .message-row.message-enter {
            animation:
                messageIn
                var(--ui-mid)
                var(--ui-ease)
                both !important;
        }

        @keyframes messageIn {
            from {
                opacity: 0;
                transform: translateY(8px) scale(0.985);
            }

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

        .profile-tab {
            transition:
                background var(--ui-fast) ease,
                color var(--ui-fast) ease,
                border-color var(--ui-fast) ease,
                box-shadow var(--ui-fast) ease,
                transform var(--ui-fast) var(--ui-ease) !important;
        }

        .profile-tab:hover {
            transform: translateY(-1px);
        }

        .profile-tab.active {
            animation: tabActiveIn var(--ui-fast) var(--ui-ease);
        }

        @keyframes tabActiveIn {
            from {
                opacity: 0.75;
                transform: translateY(3px);
            }

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

        .profile-tab-content,
        #attachments-tab-content,
        #profile-tab-content {
            animation: tabContentIn var(--ui-mid) var(--ui-ease);
        }

        @keyframes tabContentIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        #emoji-picker,
        .attachment-menu {
            transition:
                opacity var(--ui-mid) ease,
                transform var(--ui-mid) var(--ui-ease);
            opacity: 0;
            transform: translateY(8px) scale(0.98);
            pointer-events: none;
        }

        #emoji-picker.show,
        .attachment-menu.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .toast {
            transition:
                transform var(--ui-slow) var(--ui-ease),
                opacity var(--ui-mid) ease !important;
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 1ms !important;
                transition-duration: 1ms !important;
                scroll-behavior: auto !important;
            }
        }

        .custom-video-player {
            width: min(280px, 72vw);
            border-radius: 16px;
            overflow: hidden;
            background: #000;
            position: relative;
        }

        .custom-video-player video {
            display: block;
            width: 100%;
            max-height: 210px;
            object-fit: cover;
        }

        .video-play {
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            width: 42px;
            height: 42px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .92);
            color: var(--accent);
            font-weight: 800;
            cursor: pointer;
        }

        .video-controls {
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 8px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 6px;
            align-items: center;
            padding: 5px 7px;
            border-radius: 999px;
            background: rgba(0, 0, 0, .48);
            color: #fff;
            font-size: 10px;
            transition: opacity .18s ease, transform .18s ease;
            z-index: 3;
        }

        .custom-video-player .video-play,
        .custom-video-player .video-open {
            transition: opacity .18s ease, transform .18s ease;
        }

        .custom-video-player.controls-hidden.playing .video-controls,
        .custom-video-player.controls-hidden.playing .video-play,
        .custom-video-player.controls-hidden.playing .video-open {
            opacity: 0;
            pointer-events: none;
        }

        .video-seek {
            width: 100%;
            accent-color: var(--accent);
        }

        .custom-video-player video {
            cursor: pointer;
        }

        .video-open {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: rgba(0, 0, 0, .45);
            color: #fff;
            cursor: pointer;
            z-index: 3;
        }

        .media-viewer {
            position: fixed;
            inset: 0;
            z-index: 10050;
            display: flex;
            flex-direction: column;
            background: rgba(0, 0, 0, .92);
            opacity: 0;
            animation: mediaViewerIn 180ms ease forwards;
        }

        @keyframes mediaViewerIn {
            to {
                opacity: 1;
            }
        }

        .media-viewer-top {
            height: 58px;
            padding: 10px 14px;
            display: grid;
            grid-template-columns: 1fr 38px 38px;
            gap: 8px;
            align-items: center;
            color: #fff;
            background: rgba(0, 0, 0, .35);
            backdrop-filter: blur(14px);
        }

        .media-viewer-name {
            font-size: 14px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .media-viewer-time {
            margin-top: 2px;
            font-size: 12px;
            opacity: .7;
        }

        .media-viewer-fullscreen,
        .media-viewer-close {
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            color: #fff;
            cursor: pointer;
            font-size: 20px;
        }

        .media-viewer-body {
            flex: 1;
            min-height: 0;
            padding: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .media-viewer-stage {
            position: relative;
            flex: 1;
            min-width: 0;
            min-height: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: none;
            cursor: grab;
        }

        .media-viewer-stage.is-dragging {
            cursor: grabbing;
        }

        .media-viewer-media {
            max-width: none !important;
            max-height: none !important;
            width: auto;
            height: auto;
            object-fit: unset !important;
            user-select: none;
            -webkit-user-drag: none;
            transform-origin: center center;
            will-change: transform;
        }

        .media-viewer-media.media-viewer-image {
            cursor: grab;
        }

        .media-viewer-stage.is-dragging .media-viewer-image {
            cursor: grabbing;
        }

        .media-viewer-media.media-viewer-video {
            max-width: 96vw !important;
            max-height: calc(100vh - 96px) !important;
            object-fit: contain !important;
        }

        .media-viewer-zoom-hint {
            position: fixed;
            left: 50%;
            bottom: 22px;
            transform: translateX(-50%);
            z-index: 3;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.45);
            color: #fff;
            font-size: 12px;
            pointer-events: none;
            opacity: 0.75;
        }

        .media-viewer-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .14);
            color: #fff;
            cursor: pointer;
            font-size: 34px;
            line-height: 1;
            z-index: 2;
        }

        .media-viewer-prev {
            left: 18px;
        }

        .media-viewer-next {
            right: 18px;
        }

        .media-viewer-nav.is-hidden {
            display: none;
        }

        .emoji-tabs {
            display: grid !important;
            grid-template-columns: repeat(7, 28px) !important;
            justify-content: center !important;
            gap: 6px !important;
            padding: 7px 8px !important;
            background: var(--bg2) !important;
            border-bottom: 1px solid var(--border) !important;
            overflow: hidden !important;
        }

        .emoji-tab {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            padding: 0 !important;
            border-radius: 9px !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            color: var(--text3) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-family: var(--font) !important;
            font-size: 17px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            cursor: pointer;
            box-shadow: none !important;
        }

        .emoji-tab span {
            display: block;
            line-height: 1;
            transform: translateY(-1px);
        }

        .emoji-tab:hover {
            color: var(--text) !important;
            background: var(--surface2) !important;
            border-color: var(--border) !important;
        }

        .emoji-tab.active {
            color: #ffffff !important;
            background: var(--accent) !important;
            border-color: transparent !important;
            box-shadow: 0 4px 12px var(--accent-glow) !important;
        }

        body.light-theme .emoji-tab {
            color: var(--text2) !important;
        }

        body.light-theme .emoji-tab.active {
            color: #ffffff !important;
        }

        .message-reply-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 6px;
        }

        .message-reply-list .message-reply-item {
            margin-bottom: 0;
        }

        .message-reply-item+.message-reply-item {
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            padding-top: 6px;
        }

        .pending-attachment-preview {
            width: 100%;
            display: grid;
            grid-template-columns: 46px 1fr 30px;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 14px;
            background: var(--surface2);
            border: 1px solid var(--border);
        }

        .pending-attachment-thumb {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pending-attachment-thumb img,
        .pending-attachment-thumb video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .pending-attachment-icon {
            font-size: 20px;
        }

        .pending-attachment-info {
            min-width: 0;
        }

        .pending-attachment-title {
            font-size: 13px;
            font-weight: 650;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pending-attachment-type {
            margin-top: 2px;
            font-size: 11px;
            color: var(--text3);
        }

        .pending-attachment-remove {
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: var(--bg3);
            color: var(--text2);
            cursor: pointer;
            font-size: 18px;
        }

        .pending-attachment-preview.multiple {
            display: block;
        }

        .pending-attachment-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            width: 100%;
        }

        .pending-attachment-chip {
            position: relative;
            display: grid;
            grid-template-columns: 42px minmax(80px, 1fr);
            align-items: center;
            gap: 8px;
            max-width: 180px;
            padding: 6px 30px 6px 6px;
            border-radius: 12px;
            background: var(--bg3);
            border: 1px solid var(--border);
        }

        .pending-attachment-chip span {
            min-width: 0;
            font-size: 12px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pending-attachment-chip-remove {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            border: 0;
            border-radius: 50%;
            background: var(--surface2);
            color: var(--text2);
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
        }

        #brand-home {
            cursor: pointer;
            user-select: none;
        }

        #brand-home:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
        }

        .send-btn.voice-mode {
            background: #10b981 !important;
            color: #fff !important;
        }

        .send-btn.voice-recording {
            background: #ef4444 !important;
            color: #fff !important;
        }

        .scroll-bottom-btn {
            position: absolute;
            right: clamp(18px, 4vw, 42px);
            bottom: 92px;
            min-width: 42px;
            width: auto;
            height: 42px;
            padding: 0 13px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--surface);
            color: var(--text);
            box-shadow: var(--shadow);
            z-index: 7;
            opacity: 0;
            pointer-events: none;
            transform: translateY(8px);
            transition: opacity 0.18s ease, transform 0.18s ease;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
        }

        .scroll-bottom-btn.icon-only {
            width: 42px;
            padding: 0;
            font-size: 20px;
        }

        .scroll-bottom-btn.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .multi-attachment-collage {
            display: grid;
            grid-template-columns: repeat(2, minmax(120px, 1fr));
            gap: 4px;
            max-width: min(360px, 72vw);
            overflow: hidden;
            border-radius: 14px;
        }

        .multi-attachment-collage.count-1 {
            grid-template-columns: minmax(160px, 1fr);
        }

        .multi-attachment-collage.count-3 .attachment-collage-item:nth-child(3) {
            grid-column: 1 / -1;
            width: 50%;
            justify-self: center;
        }

        .attachment-collage-item {
            position: relative;
            min-width: 0;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background: var(--bg3);
            cursor: pointer;
        }

        .attachment-collage-item img,
        .attachment-collage-item video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .attachment-collage-video-mark {
            position: absolute;
            inset: auto 8px 8px auto;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .message-attachment-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: min(220px, 62vw);
        }

        .message-attachment-row {
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.16);
            color: inherit;
            text-decoration: none;
        }

        .message-attachment-icon {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.16);
        }

        .message-attachment-name {
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 13px;
            font-weight: 650;
        }

        .message-attachment-size {
            margin-top: 2px;
            color: rgba(255, 255, 255, 0.72);
            font-size: 11px;
        }

        body.light-theme .message-row.theirs .message-attachment-row {
            background: var(--surface2);
        }

        body.light-theme .message-row.theirs .message-attachment-size {
            color: var(--text3);
        }

        .pending-attachment-preview.multiple {
            grid-template-columns: 1fr 30px;
        }

        .pending-attachment-grid {
            display: flex;
            gap: 7px;
            overflow-x: auto;
            min-width: 0;
        }

        .pending-attachment-chip {
            width: 62px;
            flex: 0 0 62px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .pending-attachment-chip .pending-attachment-thumb {
            width: 62px;
            height: 50px;
        }

        .pending-attachment-chip span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 10px;
            color: var(--text2);
        }

        .delete-message-modal {
            position: fixed;
            inset: 0;
            z-index: 10070;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.46);
            backdrop-filter: blur(8px);
        }

        .delete-message-card {
            width: min(360px, 100%);
            border-radius: 16px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            box-shadow: var(--shadow);
            padding: 18px;
        }

        .delete-message-card h3 {
            margin: 0 0 10px;
            font-size: 18px;
        }

        .delete-message-card p {
            margin: 0 0 14px;
            color: var(--text2);
            font-size: 14px;
        }

        .delete-message-scope {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 12px 0 16px;
            font-size: 14px;
            color: var(--text);
        }

        .delete-message-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .contact-pin-indicator {
            margin-left: 6px;
            color: var(--accent);
            font-size: 12px;
            vertical-align: 1px;
        }

        .background-proposal-system {
            flex-direction: column;
            gap: 8px;
            max-width: 420px;
            margin: 14px auto;
            padding: 10px 14px;
            text-align: center;
        }

        .background-proposal-text {
            font-size: 13px;
            color: var(--text);
        }

        .background-proposal-status {
            font-size: 12px;
            color: var(--text2);
        }

        .bg-proposal-actions {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 4px;
        }

        .bg-proposal-actions .btn {
            padding: 6px 12px;
            font-size: 12px;
        }

        body.light-theme {
            --bg: #dfe8f3;
            --bg2: #ffffff;
            --bg3: #f1f4f8;
            --surface: #ffffff;
            --surface2: #f1f4f8;
            --text: #111827;
            --text2: #536471;
            --text3: #7b8794;
            --border: rgba(15, 23, 42, 0.10);
            --divider: rgba(15, 23, 42, 0.08);
            --header-bg: rgba(255, 255, 255, 0.92);
            --accent: #3390ec;
            --accent-hover: #2481cc;
            --accent-glow: rgba(51, 144, 236, 0.22);
        }

        body.light-theme #sidebar,
        body.light-theme .brand-panel {
            background: #ffffff !important;
        }

        body.light-theme #chat-area {
            background:
                radial-gradient(circle at 20% 20%, rgba(51, 144, 236, 0.08), transparent 26%),
                radial-gradient(circle at 80% 10%, rgba(51, 144, 236, 0.06), transparent 28%),
                radial-gradient(circle at 40% 90%, rgba(51, 144, 236, 0.05), transparent 30%),
                #dfe8f3 !important;
        }

        body.light-theme #chat-header,
        body.light-theme #input-area,
        body.light-theme .right-panel {
            background: rgba(255, 255, 255, 0.94) !important;
            color: #111827 !important;
        }

        body.light-theme .message-row.theirs .message-bubble {
            background: #ffffff !important;
            color: #111827 !important;
        }

        body.light-theme .message-row.mine .message-bubble {
            background: #d8f4c6 !important;
            color: #111827 !important;
        }

        body.light-theme .message-row.mine .message-meta,
        body.light-theme .message-row.theirs .message-meta,
        body.light-theme .message-meta {
            color: #5f6f7f !important;
        }

        body.light-theme .message-status.read,
        body.light-theme .message-status.read::before,
        body.light-theme .message-row.mine .message-status.read,
        body.light-theme .message-row.mine .message-status.read::before {
            color: #1e9bf0 !important;
            opacity: 1 !important;
            filter: none !important;
            text-shadow: 0 0 1px rgba(30, 155, 240, 0.35);
        }

        body.light-theme .message-status.delivered,
        body.light-theme .message-status.sent {
            color: #7b8794 !important;
            opacity: 1 !important;
        }

        body.light-theme .floating-date span,
        body.light-theme .system-message,
        body.light-theme .background-proposal-system {
            background: rgba(255, 255, 255, 0.86) !important;
            color: #536471 !important;
            border: 1px solid rgba(15, 23, 42, 0.08);
        }

        body.light-theme .message-row.mine .message-reply-block,
        body.light-theme .message-row.theirs .message-reply-block {
            background: rgba(255, 255, 255, 0.58) !important;
            border-left-color: #3390ec !important;
            color: #111827 !important;
            backdrop-filter: blur(14px) saturate(150%);
            -webkit-backdrop-filter: blur(14px) saturate(150%);
        }

        body.light-theme .message-row.mine .message-reply-title,
        body.light-theme .message-row.theirs .message-reply-title {
            color: #168acd !important;
        }

        body.light-theme .message-row.mine .message-reply-text,
        body.light-theme .message-row.theirs .message-reply-text {
            color: #111827 !important;
        }

        body.light-theme .message-row.mine .message-forwarded-label,
        body.light-theme .message-row.theirs .message-forwarded-label {
            color: #168acd !important;
        }

        body.light-theme .context-menu,
        body.light-theme .attachment-menu,
        body.light-theme #emoji-picker,
        body.light-theme .right-panel,
        body.light-theme .attachments-panel,
        body.light-theme .modal-content {
            background: rgba(255, 255, 255, 0.72) !important;
            border: 1px solid rgba(255, 255, 255, 0.65) !important;
            color: #111827 !important;
            box-shadow:
                0 18px 45px rgba(31, 45, 61, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
            backdrop-filter: blur(24px) saturate(170%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
            animation: glassMenuIn 0.16s ease-out;
        }

        body.light-theme .context-menu-item,
        body.light-theme .attachment-menu button {
            color: #111827 !important;
            background: transparent !important;
            transition: background 0.14s ease, transform 0.1s ease, color 0.14s ease;
        }

        body.light-theme .context-menu-item:hover,
        body.light-theme .attachment-menu button:hover {
            background: rgba(51, 144, 236, 0.12) !important;
            color: #0f172a !important;
            transform: translateX(2px);
        }

        body.light-theme .context-menu-item.danger {
            color: #ef4444 !important;
        }

        body.light-theme .context-menu-item.danger:hover {
            background: rgba(239, 68, 68, 0.10) !important;
        }

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

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

        :root {
            --transition: cubic-bezier(0.22, 0.8, 0.28, 1);
            --radius: 14px;
            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --tg-blue: #3390ec;
            --tg-blue-hover: #2b7fd1;
            --tg-green: #5fc66b;
            --tg-bg: #0e1621;
            --tg-panel: rgba(23, 33, 43, 0.94);
            --tg-panel-strong: rgba(30, 41, 54, 0.96);
            --tg-field: rgba(36, 48, 62, 0.92);
            --tg-divider: rgba(255, 255, 255, 0.08);
            --tg-radius-sm: 10px;
            --tg-radius-md: 12px;
            --tg-radius-lg: 14px;
            --tg-motion: cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        body {
            --accent: var(--tg-blue);
            --accent-hover: var(--tg-blue-hover);
            --accent-glow: rgba(51, 144, 236, 0.22);
            --bg: var(--tg-bg);
            --bg2: #17212b;
            --bg3: #24303e;
            --surface: var(--tg-panel);
            --surface2: var(--tg-panel-strong);
            --border: var(--tg-divider);
            --divider: var(--tg-divider);
            --header-bg: rgba(23, 33, 43, 0.88);
            font-family: var(--font);
        }

        body.light-theme {
            --bg: #dfe8f3;
            --bg2: #f4f8fb;
            --bg3: #ffffff;
            --surface: rgba(255, 255, 255, 0.92);
            --surface2: rgba(245, 249, 252, 0.94);
            --border: rgba(15, 23, 42, 0.09);
            --divider: rgba(15, 23, 42, 0.08);
            --header-bg: rgba(255, 255, 255, 0.9);
        }

        body.theme-purple {
            --accent: #8b5cf6;
            --accent-hover: #7c3aed;
            --accent-glow: rgba(139, 92, 246, 0.2);
        }

        body.theme-blue {
            --accent: #3390ec;
            --accent-hover: #2b7fd1;
            --accent-glow: rgba(51, 144, 236, 0.22);
        }

        body.theme-green {
            --accent: #4fb75d;
            --accent-hover: #3fa24d;
            --accent-glow: rgba(79, 183, 93, 0.2);
        }

        body.theme-pink {
            --accent: #f05a91;
            --accent-hover: #dc4a80;
            --accent-glow: rgba(240, 90, 145, 0.2);
        }

        body.theme-orange {
            --accent: #f4a340;
            --accent-hover: #e08e27;
            --accent-glow: rgba(244, 163, 64, 0.2);
        }

        #sidebar,
        #chat-header,
        #input-area,
        .right-panel,
        .modal-content,
        .group-modal-card,
        .avatar-modal-content,
        .context-menu,
        .attachment-menu,
        #emoji-picker {
            backdrop-filter: blur(22px) saturate(160%);
            -webkit-backdrop-filter: blur(22px) saturate(160%);
        }

        button,
        .btn,
        input,
        textarea,
        select,
        #msg-input,
        .theme-btn,
        .profile-tab,
        .context-menu,
        .context-menu-item,
        .attachment-menu,
        #emoji-picker,
        .modal-content,
        .group-modal-card,
        .avatar-modal-content {
            border-radius: var(--tg-radius-md);
        }

        .btn,
        button,
        .profile-tab,
        .context-menu-item,
        .attachment-menu button,
        #chat-user-info,
        #msg-input,
        .message-bubble {
            transition:
                background-color 220ms var(--tg-motion),
                border-color 220ms var(--tg-motion),
                color 220ms var(--tg-motion),
                box-shadow 220ms var(--tg-motion),
                transform 220ms var(--tg-motion),
                opacity 220ms var(--tg-motion);
        }

        .right-panel {
            transition:
                transform 260ms var(--tg-motion),
                opacity 220ms ease-out,
                box-shadow 260ms var(--tg-motion) !important;
            opacity: 0;
        }

        .right-panel.open {
            opacity: 1;
        }

        .modal,
        .context-menu,
        .attachment-menu,
        #emoji-picker {
            transition:
                opacity 220ms ease-out,
                transform 240ms var(--tg-motion),
                visibility 220ms ease-out;
        }

        #messages-container {
            scroll-behavior: auto !important;
        }

        .message-row.message-edit-flash .message-bubble {
            animation: messageEditFlash 1400ms ease-out;
        }

        @keyframes messageEditFlash {
            0% {
                box-shadow: 0 0 0 1px rgba(51, 144, 236, 0.28), 0 0 0 rgba(51, 144, 236, 0);
                background-color: color-mix(in srgb, var(--accent) 18%, transparent);
            }

            100% {
                box-shadow: none;
            }
        }

        .pending-attachment-preview {
            display: block !important;
            max-height: 230px;
            overflow-y: auto;
            padding: 8px;
            border-radius: var(--tg-radius-lg);
            background: rgba(23, 33, 43, 0.78);
            border: 1px solid var(--border);
        }

        body.light-theme .pending-attachment-preview {
            background: rgba(255, 255, 255, 0.82);
        }

        .pending-attachment-grid {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 7px;
            width: 100%;
            min-width: 0;
            overflow: visible;
        }

        .pending-attachment-chip {
            width: 100% !important;
            max-width: none !important;
            min-width: 0;
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) auto 28px;
            align-items: center;
            gap: 10px;
            padding: 7px 8px;
            border-radius: var(--tg-radius-md);
            background: rgba(36, 48, 62, 0.84);
            border: 1px solid var(--border);
        }

        body.light-theme .pending-attachment-chip {
            background: rgba(245, 249, 252, 0.9);
        }

        .pending-attachment-chip .pending-attachment-thumb {
            width: 42px;
            height: 42px;
            border-radius: var(--tg-radius-sm);
        }

        .pending-attachment-meta {
            min-width: 0;
            display: grid;
            gap: 2px;
        }

        .pending-attachment-chip .pending-attachment-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            font-weight: 650;
            color: var(--text);
        }

        .pending-attachment-chip .pending-attachment-type {
            margin: 0;
            color: var(--text3);
            font-size: 11px;
        }

        .pending-attachment-chip-remove,
        .pending-attachment-remove {
            position: static !important;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
        }

        .pending-attachment-chip-remove:disabled,
        .pending-attachment-remove:disabled {
            opacity: 0.45;
            cursor: default;
        }

        .pending-upload-progress {
            width: 42px;
            height: 42px;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
        }

        .pending-upload-progress svg {
            width: 42px;
            height: 42px;
            transform: rotate(-90deg);
        }

        .pending-upload-progress .pending-progress-track {
            fill: none;
            stroke: rgba(255, 255, 255, 0.13);
            stroke-width: 3;
        }

        body.light-theme .pending-upload-progress .pending-progress-track {
            stroke: rgba(15, 23, 42, 0.12);
        }

        .pending-upload-progress .pending-progress-value {
            fill: none;
            stroke: currentColor;
            stroke-width: 3;
            stroke-linecap: round;
            transition: stroke-dashoffset 160ms ease-out;
        }

        .pending-upload-progress span {
            position: absolute;
            inset: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            color: currentColor;
        }

        .pending-upload-progress.pending {
            color: var(--text3);
        }

        .pending-upload-progress.done {
            color: #4fb75d;
        }

        .pending-upload-progress.error {
            color: #ef4444;
        }

        .pending-upload-progress.pending-upload-retry {
            border: 0;
            background: transparent;
            cursor: pointer;
            padding: 0;
        }

        .message-row .message-bubble {
            user-select: text;
        }

        .message-reactions {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
        }

        .message-reaction-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 22px;
            padding: 2px 7px 2px 3px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            color: inherit;
            font-size: 13px;
            line-height: 1;
        }

        .reaction-avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex: 0 0 18px;
            background: var(--bg3);
            color: #fff;
            font-size: 8px;
            font-weight: 800;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
        }

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

        .message-reaction-pill.reaction-pop {
            animation: reactionPop 320ms cubic-bezier(0.2, 0.9, 0.24, 1.25);
        }

        @keyframes reactionPop {
            0% {
                opacity: 0;
                transform: scale(0.35) translateY(6px);
            }

            70% {
                opacity: 1;
                transform: scale(1.12) translateY(-1px);
            }

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

        body.light-theme .message-reaction-pill {
            background: rgba(51, 144, 236, 0.12);
        }

        .quick-reaction-menu {
            position: fixed;
            z-index: 10080;
            display: grid;
            grid-template-columns: repeat(6, 34px);
            gap: 6px;
            padding: 8px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(20, 28, 38, 0.72);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
            animation: contextMenuIn 160ms var(--ui-ease);
        }

        body.light-theme .quick-reaction-menu {
            background: rgba(255, 255, 255, 0.76);
            border-color: rgba(255, 255, 255, 0.72);
            box-shadow: 0 18px 45px rgba(31, 45, 61, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        .quick-reaction-btn {
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text);
            font-size: 20px;
            cursor: pointer;
        }

        .quick-reaction-btn:hover {
            background: rgba(51, 144, 236, 0.16);
            transform: translateY(-1px) scale(1.06);
        }

        .link-item {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            color: var(--text);
            text-decoration: none;
        }

        .link-favicon {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--bg3);
        }

        .link-title,
        .link-url {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .link-title {
            font-weight: 650;
        }

        .link-url {
            margin-top: 2px;
            color: var(--text3);
            font-size: 12px;
        }

        .group-admin-panel {
            display: grid;
            gap: 10px;
        }

        .group-admin-panel input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
        }

        .group-member-row {
            width: 100%;
            border: 0;
            color: inherit;
        }

        .member-remove-btn {
            margin-left: auto;
            padding: 6px 10px;
            font-size: 12px;
            color: #ef4444;
        }

        .member-promote-btn {
            margin-left: auto;
            padding: 6px 10px;
            font-size: 12px;
            color: var(--accent);
        }

        .member-promote-btn+.member-remove-btn {
            margin-left: 6px;
        }

        @media (max-width: 560px) {
            .pending-attachment-chip {
                grid-template-columns: 38px minmax(0, 1fr) 36px 26px;
                gap: 8px;
            }

            .pending-attachment-chip .pending-attachment-thumb,
            .pending-upload-progress,
            .pending-upload-progress svg {
                width: 38px;
                height: 38px;
            }
        }

        .chat-header-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 50%;
            background: transparent;
        }

        .chat-header-icon:hover {
            background: var(--surface2);
        }

        .mobile-chat-back {
            display: none;
            font-size: 28px;
            line-height: 1;
        }

        .header-search-input {
            display: none;
            flex: 1;
            min-width: 0;
            height: 42px;
            padding: 0 14px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            outline: none;
        }

        #chat-header.search-open #chat-user-info {
            display: none;
        }

        #chat-header.search-open .header-search-input {
            display: block;
        }

        .chat-date-picker {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .message-row.message-search-hidden {
            display: none !important;
        }

        .message-row.message-date-hit .message-bubble {
            box-shadow: 0 0 0 2px rgba(51, 144, 236, 0.45);
        }

        .sticker-picker {
            position: absolute;
            left: 78px;
            bottom: 82px;
            width: min(360px, calc(100vw - 24px));
            max-height: 420px;
            display: none;
            grid-template-rows: auto 1fr;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            background: rgba(20, 28, 38, 0.78);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
            z-index: 50;
            overflow: hidden;
        }

        .sticker {
            width: 150px;
            max-width: 38vw;
            max-height: 150px;
            object-fit: contain;
            display: block;
        }

        .message-row .message-bubble:has(.sticker) {
            padding: 6px;
            background: transparent !important;
            box-shadow: none;
        }

        .sticker-item {
            cursor: pointer;
        }

        .sticker-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        body.light-theme .sticker-picker {
            background: rgba(255, 255, 255, 0.86);
        }

        .sticker-picker.show {
            display: grid;
            animation: contextMenuIn 180ms var(--ui-ease);
        }

        .sticker-pack-tabs {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding-bottom: 8px;
        }

        .sticker-pack-tab {
            white-space: nowrap;
            padding: 7px 10px;
            border: 0;
            border-radius: 999px;
            background: var(--surface2);
            color: var(--text);
        }

        .sticker-pack-tab.active {
            background: var(--accent);
            color: #fff;
        }

        .sticker-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            overflow-y: auto;
            padding-right: 2px;
        }

        .sticker-item {
            width: 100%;
            aspect-ratio: 1;
            border: 0;
            border-radius: 12px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
        }

        .sticker-item:hover {
            background: rgba(51, 144, 236, 0.14);
        }

        .sticker-item img,
        .sticker-message {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .sticker-message {
            width: min(180px, 46vw);
            height: auto;
            display: block;
        }

        .contact-mute-indicator {
            margin-left: 5px;
            color: var(--text3);
            font-size: 12px;
        }

        .settings-menu-glass,
        .mute-menu {
            background: rgba(20, 28, 38, 0.74) !important;
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
        }

        body.light-theme .settings-menu-glass,
        body.light-theme .mute-menu {
            background: rgba(255, 255, 255, 0.82) !important;
        }

        .context-menu-item.active {
            color: var(--accent);
            font-weight: 700;
        }

        .vc-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 10090;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0, 0, 0, 0.42);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            animation: fadeIn 180ms ease-out;
        }

        .vc-modal-card {
            width: min(460px, 100%);
            display: grid;
            gap: 14px;
            padding: 18px;
            border-radius: 18px;
            background: var(--surface);
            color: var(--text);
            box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
            animation: modalCardIn 200ms var(--ui-ease);
        }

        .vc-modal-card h3 {
            margin: 0;
            font-size: 18px;
        }

        .vc-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }

        .restriction-list,
        .notification-setting-row {
            display: grid;
            gap: 10px;
        }

        .restriction-list label,
        .notification-setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            background: var(--bg3);
        }

        .global-search-panel {
            display: grid;
            gap: 12px;
        }

        .global-search-results {
            display: grid;
            gap: 10px;
        }

        .global-search-group {
            display: grid;
            gap: 6px;
        }

        .global-search-title {
            color: var(--text3);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .global-search-result {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 9px 10px;
            border: 0;
            border-radius: 12px;
            background: var(--bg3);
            color: var(--text);
            text-align: left;
        }

        .global-search-result:hover {
            background: var(--surface2);
        }

        .group-management-panel {
            display: grid;
            gap: 14px;
        }

        .group-management-section {
            display: grid;
            gap: 10px;
            padding: 12px;
            border-radius: 14px;
            background: var(--bg3);
        }

        .group-management-members {
            display: grid;
            gap: 8px;
        }

        .group-management-member {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }

        .member-action-buttons {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .attachments-profile {
            margin: -12px -12px 0;
            padding-bottom: 120px;
        }

        .attachments-hero {
            position: relative;
            width: min(420px, 100%);
            aspect-ratio: 1;
            margin: 0 auto 14px;
            overflow: hidden;
            border-radius: 0 0 18px 18px;
            background: var(--bg3);
            transition: transform 380ms var(--ui-ease), border-radius 380ms var(--ui-ease), margin-bottom 380ms var(--ui-ease);
            transform-origin: top center;
        }

        .attachments-hero-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .attachments-hero-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 84px;
            font-weight: 800;
        }

        .attachments-hero-top,
        .attachments-hero-bottom {
            position: absolute;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px;
            color: #fff;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
        }

        .attachments-hero-top {
            top: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), transparent);
        }

        .attachments-hero-bottom {
            bottom: 0;
            display: block;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
        }

        .attachments-hero-name {
            font-size: 22px;
            font-weight: 800;
        }

        .attachments-hero-status {
            margin-top: 4px;
            opacity: 0.88;
        }

        .attachments-close,
        .attachments-back {
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.32);
            color: #fff;
            font-size: 22px;
        }

        .attachments-sticky {
            position: sticky;
            top: 0;
            z-index: 2;
            display: none;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            margin: 0 -12px 10px;
            background: var(--header-bg);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .attachments-sticky-title {
            font-weight: 800;
        }

        .attachments-sticky-summary {
            color: var(--text3);
            font-size: 12px;
        }

        .right-panel.attachments-scrolled .attachments-sticky {
            display: flex;
        }

        .right-panel.attachments-scrolled .attachments-hero {
            transform: scale(0.34);
            border-radius: 28px;
            margin-bottom: -250px;
        }

        .media-viewer-author {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            color: #fff;
        }

        .media-viewer-author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            flex: 0 0 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
        }

        .media-viewer-author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .media-viewer-top.video-info {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent);
        }

        #chat-bg {
            opacity: 1 !important;
        }

        #chat-bg {
            filter: blur(var(--chat-bg-blur, 0px)) brightness(var(--chat-bg-brightness, 100%)) contrast(var(--chat-bg-contrast, 100%)) saturate(var(--chat-bg-saturate, 100%)) !important;
        }

        @media (max-width: 768px) {
            body.mobile-chat-open #sidebar {
                display: none;
            }

            body.mobile-chat-open #chat-area {
                display: flex;
                width: 100%;
            }

            body:not(.mobile-chat-open) #chat-area {
                display: none;
            }

            body:not(.mobile-chat-open) #sidebar {
                width: 100%;
                max-width: none;
            }

            .mobile-chat-back {
                display: inline-flex;
            }

            #right-panel.open {
                width: 100vw !important;
                max-width: none;
            }

            #input-area {
                min-height: 64px;
                padding: 8px;
            }

            #input-area .btn,
            .emoji-btn,
            .send-btn,
            .chat-header-icon,
            #btn-chat-settings {
                min-width: 44px;
                min-height: 44px;
            }

            .context-menu {
                max-width: calc(100vw - 20px);
            }

            .attachments-hero {
                width: 100%;
                border-radius: 0 0 16px 16px;
            }

            .right-panel.attachments-scrolled .attachments-hero {
                transform: scale(0.28);
                margin-bottom: -230px;
            }

            .sticker-picker {
                left: 10px;
                right: 10px;
                bottom: 74px;
                width: auto;
            }
        }

        .sticker-picker {
            position: absolute;
            left: 20px;
            bottom: 78px;
            width: 360px;
            max-width: calc(100vw - 32px);
            max-height: 420px;
            display: none;
            flex-direction: column;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: var(--shadow);
            overflow: hidden;
            z-index: 60;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .sticker-picker.show {
            display: flex;
        }

        .sticker-pack-tabs {
            display: flex;
            gap: 6px;
            padding: 10px;
            overflow-x: auto;
            border-bottom: 1px solid var(--border);
        }

        .sticker-pack-tab {
            flex-shrink: 0;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid transparent;
            background: var(--bg3);
            color: var(--text2);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 600;
        }

        .sticker-pack-tab.active {
            background: var(--accent);
            color: #ffffff;
            border-color: var(--accent);
        }

        .sticker-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            padding: 12px;
            overflow-y: auto;
            max-height: 340px;
        }

        .sticker-item {
            aspect-ratio: 1;
            border: none;
            border-radius: 14px;
            background: var(--bg3);
            cursor: pointer;
            padding: 6px;
            transition: transform 0.15s, background 0.15s;
        }

        .sticker-item:hover {
            background: var(--surface2);
            transform: translateY(-1px);
        }

        .sticker-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .sticker {
            width: 150px;
            max-width: 38vw;
            max-height: 150px;
            object-fit: contain;
            display: block;
        }

        .message-row .message-bubble:has(.sticker) {
            padding: 6px;
            background: transparent !important;
            box-shadow: none;
        }

        .attachments-stickers-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .attachments-sticker-item {
            aspect-ratio: 1;
            border-radius: 14px;
            background: var(--bg3);
            padding: 8px;
            cursor: pointer;
            overflow: hidden;
        }

        .attachments-sticker-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .message-sender.sender-info {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: fit-content;
            max-width: 100%;
            margin: 0 0 4px 2px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--accent);
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
        }

        .message-sender.sender-info:hover span:last-child {
            text-decoration: underline;
        }

        .sender-avatar-mini {
            width: 22px;
            height: 22px;
            min-width: 22px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 0.62rem;
            font-weight: 800;
            line-height: 1;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        }

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

        .mobile-back-btn {
            display: none;
        }

        @media (max-width: 768px) {

            html,
            body {
                width: 100%;
                height: 100dvh;
                overflow: hidden;
                touch-action: manipulation;
            }

            #messenger {
                width: 100%;
                height: 100dvh;
                overflow: hidden;
                display: flex;
                position: relative;
            }

            #sidebar {
                position: absolute;
                inset: 0;
                width: 100% !important;
                max-width: none !important;
                min-width: 0 !important;
                height: 100dvh;
                transform: translateX(0);
                z-index: 20;
                border-right: none;
                transition: transform 0.24s var(--transition);
            }

            body.mobile-chat-open #sidebar {
                transform: translateX(-100%);
                pointer-events: none;
            }

            #chat-area {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100dvh;
                min-width: 0;
                transform: translateX(100%);
                transition: transform 0.24s var(--transition);
                z-index: 21;
                background: var(--bg);
            }

            body.mobile-chat-open #chat-area {
                transform: translateX(0);
            }

            .mobile-back-btn {
                display: inline-flex;
                width: 44px;
                height: 44px;
                min-width: 44px;
                border: none;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                background: transparent;
                color: var(--text);
                font-size: 1.35rem;
                cursor: pointer;
                margin-right: 2px;
            }

            .mobile-back-btn:active {
                background: var(--surface2);
                transform: scale(0.96);
            }

            #chat-header {
                min-height: 58px;
                padding: 7px 8px;
                gap: 6px;
                flex-shrink: 0;
            }

            #chat-user-info {
                gap: 9px;
                padding: 3px 4px;
                min-width: 0;
            }

            #chat-user-info .avatar {
                width: 38px;
                height: 38px;
                min-width: 38px;
            }

            #chat-partner-name {
                font-size: 0.92rem;
            }

            #chat-partner-status {
                font-size: 0.7rem;
            }

            #btn-chat-settings,
            .emoji-btn,
            .send-btn,
            .chat-settings-btn,
            #btn-file,
            #btn-voice,
            #btn-stickers,
            .sidebar-icon-btn,
            .btn {
                min-width: 44px;
                min-height: 44px;
            }

            #messages-container {
                padding: 10px 8px 92px;
                gap: 5px;
                height: 100%;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .message-row {
                max-width: 94%;
            }

            .message-bubble {
                max-width: 100%;
                font-size: 0.9rem;
                padding: 9px 12px;
            }

            #input-area {
                position: fixed;
                left: 8px;
                right: 8px;
                bottom: calc(8px + env(safe-area-inset-bottom));
                width: auto;
                margin: 0;
                padding: 7px;
                gap: 7px;
                border-radius: 18px;
                z-index: 25;
                align-items: flex-end;
            }

            #input-area textarea,
            #msg-input {
                min-height: 44px;
                max-height: 116px;
                padding: 11px 13px;
                font-size: 16px;
            }

            .right-panel {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100dvh;
                inset: 0;
                border-left: none;
                border-radius: 0;
                z-index: 80;
            }

            .right-panel-header {
                min-height: 58px;
                padding: 12px 14px;
            }

            .right-panel-content,
            #panel-content {
                padding: 14px;
                padding-bottom: calc(20px + env(safe-area-inset-bottom));
            }

            .context-menu {
                position: fixed !important;
                left: 8px !important;
                right: 8px !important;
                bottom: calc(8px + env(safe-area-inset-bottom)) !important;
                top: auto !important;
                width: auto !important;
                max-width: none !important;
                border-radius: 18px;
                z-index: 120;
            }

            .context-menu-item,
            .context-menu .menu-item {
                min-height: 46px;
                font-size: 0.95rem;
                padding: 12px 14px;
            }

            .modal-content,
            .group-modal-card,
            .avatar-modal-content,
            #auth-card {
                width: calc(100vw - 20px) !important;
                max-width: calc(100vw - 20px) !important;
                max-height: calc(100dvh - 20px);
                overflow-y: auto;
                border-radius: 22px;
            }

            #emoji-picker,
            #sticker-picker {
                position: fixed;
                left: 8px !important;
                right: 8px !important;
                bottom: calc(68px + env(safe-area-inset-bottom)) !important;
                width: auto !important;
                max-width: none !important;
                max-height: min(430px, calc(100dvh - 110px));
                z-index: 70;
            }

            .attachment-menu {
                position: fixed;
                left: 8px;
                right: 8px;
                bottom: calc(68px + env(safe-area-inset-bottom));
                width: auto;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                z-index: 70;
            }
        }

        .chat-settings-context-menu {
            min-width: 260px;
        }

        .chat-settings-context-menu .context-menu-item,
        .mute-menu .context-menu-item {
            justify-content: space-between;
        }

        .context-menu-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .context-menu-status {
            color: var(--text3);
            font-size: 0.78rem;
            white-space: nowrap;
        }

        .message-row.message-search-match .message-bubble {
            box-shadow: 0 0 0 2px rgba(51, 144, 236, 0.45), var(--shadow-sm);
        }

        #messages-container.restricted-no-copy .message-bubble {
            user-select: none;
            -webkit-user-select: none;
        }

        #messages-container:not(.restricted-no-copy) .message-row .message-bubble,
        #messages-container:not(.restricted-no-copy) .message-content {
            user-select: text;
            -webkit-user-select: text;
        }

        .long-message-text {
            white-space: normal;
        }

        .long-message-rest {
            display: none;
        }

        .long-message-text.expanded .long-message-rest {
            display: inline;
        }

        .long-message-text.expanded .long-message-ellipsis,
        .long-message-text.expanded .long-message-toggle {
            display: none;
        }

        .long-message-toggle {
            display: block;
            width: fit-content;
            margin-top: 8px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--accent);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        #messages-container.restricted-no-download .message-download-action {
            display: none !important;
        }

        #messages-container.restricted-no-download .message-file-link,
        #messages-container.restricted-no-download .message-attachment-row {
            cursor: default;
        }

        .archive-item {
            animation: archiveItemIn 180ms ease-out;
        }

        .archive-timer {
            color: var(--accent);
            font-size: 0.72rem;
            font-variant-numeric: tabular-nums;
        }

        #input-area {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 58px;
            padding: 8px 12px;
        }

        #input-area .emoji-btn,
        #input-area .send-btn {
            width: 42px;
            height: 42px;
            min-width: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }

        #input-area textarea {
            min-height: 42px;
            max-height: 120px;
            padding: 11px 14px;
            align-self: center;
        }

        #btn-send {
            box-shadow: 0 10px 22px rgba(39, 135, 245, 0.26);
        }

        .group-management-panel {
            gap: 16px;
        }

        .group-management-hero {
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
            padding: 12px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--surface2), var(--bg3));
            border: 1px solid var(--border);
        }

        .group-management-hero .avatar {
            width: 58px;
            height: 58px;
            font-size: 22px;
        }

        .group-management-title {
            font-weight: 800;
            font-size: 1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .group-management-subtitle {
            color: var(--text3);
            font-size: 0.82rem;
            margin-top: 3px;
        }

        .group-management-section {
            border: 1px solid var(--border);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        }

        .group-management-section .settings-block-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.86rem;
            letter-spacing: 0;
            color: var(--text);
        }

        .group-management-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .group-management-avatar-row,
        .group-management-bg-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }

        .group-management-hint {
            color: var(--text3);
            font-size: 0.78rem;
            line-height: 1.35;
        }

        .group-member-row {
            border-radius: 12px;
            background: var(--surface2);
            border: 1px solid transparent;
        }

        .group-member-row:hover {
            border-color: var(--border);
        }

        .group-member-row .btn {
            padding: 6px 9px;
            border-radius: 10px;
            font-size: 0.72rem;
            min-height: 34px;
            white-space: normal;
        }

        .group-management-members {
            max-height: min(420px, 48vh);
            overflow: auto;
            display: grid;
            gap: 8px;
        }

        .group-management-members .group-member-row {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto auto;
            align-items: center;
            gap: 8px;
        }

        .group-management-members .member-main {
            min-width: 0;
        }

        .group-management-members .member-name,
        .group-management-members .member-role {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }



/* SMCHAT_DATE_NO_SHADOW_03J */
#messages-container .floating-date,
#messages-container .floating-date.visible,
#messages-container .floating-date span,
#messages-container .floating-date.visible span,
#messages-container .date-separator,
#messages-container .date-separator span {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* ===== /static/css/modules/10-mobile-search-attachments.css ===== */
        @media (max-width: 768px) {
            .group-management-members .group-member-row {
                grid-template-columns: 42px minmax(0, 1fr);
            }

            .group-management-members .group-member-row .btn {
                grid-column: 2;
                width: 100%;
            }
        }

        .perf-truncated-notice {
            text-align: center;
            color: var(--text3);
            font-size: 0.78rem;
            padding: 10px;
        }

        body.low-performance *,
        body.low-performance *::before,
        body.low-performance *::after {
            animation-duration: 1ms !important;
            transition-duration: 1ms !important;
        }

        body.low-performance .context-menu,
        body.low-performance .right-panel,
        body.low-performance .modal,
        body.low-performance .vc-modal-backdrop,
        body.low-performance .vc-modal-card,
        body.low-performance .quick-reaction-menu,
        body.low-performance .media-viewer-top {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        @keyframes archiveItemIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        .vc-modal-card p {
            margin: 0;
            color: var(--text2);
            line-height: 1.45;
        }

        .vc-modal-card label {
            cursor: pointer;
        }

        .vc-modal-danger {
            background: #ef4444 !important;
            color: #fff !important;
        }

        .notification-setting-button {
            width: 100%;
            border: 0;
            color: var(--text);
            cursor: pointer;
            font: inherit;
        }

        .notification-setting-button strong {
            color: var(--accent);
        }

        #chat-bg {
            opacity: 1 !important;
            filter: blur(var(--chat-bg-blur, 0px)) brightness(var(--chat-bg-brightness, 100%)) contrast(var(--chat-bg-contrast, 100%)) saturate(var(--chat-bg-saturate, 100%)) !important;
            transform: scale(var(--chat-bg-scale, 1));
            transition: opacity 180ms ease-out, filter 180ms ease-out, transform 180ms ease-out;
            will-change: opacity, filter, transform;
        }

        .chat-bg::before,
        .chat-bg::after {
            display: none !important;
            content: none !important;
            background: transparent !important;
        }

        .chat-bg-blur-control {
            display: grid;
            gap: 8px;
            margin-top: 12px;
        }

        .chat-bg-blur-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 54px;
            gap: 10px;
            align-items: center;
        }

        .chat-bg-blur-row input[type="range"] {
            width: 100%;
            accent-color: var(--accent);
        }

        .chat-bg-blur-value {
            color: var(--text2);
            font-variant-numeric: tabular-nums;
            text-align: right;
        }

        .chat-bg-effects-modal {
            display: grid;
            gap: 12px;
        }

        .chat-bg-effects-preview {
            width: 100%;
            aspect-ratio: 16 / 10;
            border-radius: 14px;
            background-size: cover;
            background-position: center;
            overflow: hidden;
            transition: filter 160ms ease-out, transform 160ms ease-out;
        }

        .right-panel {
            will-change: transform;
            transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        .right-panel.attachments-panel-view .right-panel-header {
            display: none;
        }

        .right-panel.attachments-panel-view {
            width: 420px;
            max-width: min(100vw, 420px);
        }

        .right-panel.attachments-panel-view #panel-content {
            padding: 0;
        }

        .attachments-profile {
            min-height: 100%;
            margin: 0;
            padding-bottom: 18px;
        }

        .attachments-hero {
            width: 420px;
            height: 420px;
            max-width: 100%;
            aspect-ratio: auto;
            border-radius: 0 0 22px 22px;
            transform-origin: 16px 16px;
            transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform, border-radius;
        }

        .attachments-profile-main {
            padding: 0 12px;
        }

        .attachments-summary-row {
            margin: 0 0 12px;
            color: var(--text3);
            font-size: 0.84rem;
        }

        .attachments-info-label {
            font-weight: 700;
            font-size: 16px;
        }

        .attachments-back {
            display: none;
        }

        .attachments-sticky {
            display: flex;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-12px);
            transition: opacity 180ms ease-out, transform 180ms ease-out;
            will-change: opacity, transform;
        }

        .attachments-sticky-avatar {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            flex: 0 0 38px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg3);
            color: #fff;
            font-weight: 800;
        }

        .attachments-sticky-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .attachments-sticky-avatar .attachments-hero-fallback {
            font-size: 14px;
            border-radius: 12px;
        }

        .right-panel.attachments-scrolled .attachments-sticky {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .right-panel.attachments-scrolled .attachments-hero {
            transform: translate3d(12px, 12px, 0) scale(0.22);
            margin-bottom: 14px;
            border-radius: 28px;
        }

        .right-panel.attachments-scrolled .attachments-close {
            display: none;
        }

        .right-panel.attachments-scrolled .attachments-back {
            display: inline-flex;
        }

        .media-viewer-top {
            will-change: opacity, transform;
        }

        .media-viewer-top.video-info {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.26) 54%, transparent);
        }

        .media-viewer-time {
            color: rgba(255, 255, 255, 0.92);
            font-size: 13px;
            font-weight: 700;
        }

        .context-menu,
        .vc-modal-card,
        .media-viewer,
        .message-row {
            will-change: transform, opacity;
        }

        .menu-toggle {
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 22px;
        }

        .sidebar-global-search-panel {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 8px);
            display: none;
            background: rgba(21, 28, 38, 0.86);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
            overflow: hidden;
            z-index: 65;
        }

        body.light-theme .sidebar-global-search-panel,
        body.light-theme .sidebar-burger-menu {
            background: rgba(255, 255, 255, 0.88);
            border-color: rgba(15, 23, 42, 0.08);
        }

        .sidebar-global-search-panel.open {
            display: block;
        }

        .sidebar-search-tabs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-bottom: 1px solid var(--border);
        }

        .sidebar-search-tabs button {
            border: 0;
            background: transparent;
            color: var(--text2);
            padding: 11px 6px;
            cursor: pointer;
            font: inherit;
            font-weight: 700;
            border-bottom: 2px solid transparent;
        }

        .sidebar-search-tabs button.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        .sidebar-global-search-results {
            max-height: min(58vh, 520px);
            overflow-y: auto;
            padding: 8px;
            display: grid;
            gap: 6px;
        }

        .sidebar-search-result {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            border: 0;
            background: transparent;
            color: var(--text);
            text-align: left;
            padding: 8px;
            border-radius: 12px;
            cursor: pointer;
        }

        .sidebar-search-result:hover {
            background: var(--surface2);
        }

        .sidebar-search-result .avatar {
            width: 42px;
            height: 42px;
        }

        .sidebar-search-empty {
            color: var(--text3);
            padding: 16px;
            text-align: center;
        }

        .sidebar-burger-menu {
            position: fixed;
            min-width: 220px;
            padding: 8px;
            border-radius: 18px;
            background: rgba(21, 28, 38, 0.86);
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
            z-index: 100;
            display: grid;
            gap: 4px;
        }

        .sidebar-burger-menu button {
            min-height: 42px;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: var(--text);
            text-align: left;
            padding: 0 12px;
            cursor: pointer;
            font: inherit;
            font-weight: 700;
        }

        .sidebar-burger-menu button:hover {
            background: var(--surface2);
        }

        #btn-header-calendar {
            display: none;
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 160ms ease-out, transform 160ms ease-out;
        }

        #chat-header.search-open #btn-header-calendar {
            display: inline-flex;
            opacity: 1;
            transform: translateY(0);
        }

        .message-reaction-pill.own-reaction {
            cursor: pointer;
        }

        .message-reaction-pill.reaction-removing {
            opacity: 0;
            transform: scale(0.88);
            transition: opacity 150ms ease-out, transform 150ms ease-out;
        }

        .attachment-list {
            gap: 10px;
        }

        .attachment-row {
            min-height: 64px;
            padding: 12px 14px;
            border-radius: 16px;
        }

        .attachment-row .file-info>span:first-child,
        .message-attachment-icon {
            width: 46px;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: var(--surface2);
            font-size: 24px;
            flex: 0 0 46px;
        }

        .media-grid {
            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
            gap: 8px;
        }

        .media-grid-item {
            min-height: 96px;
            border-radius: 14px;
            overflow: hidden;
        }

        .right-panel.attachments-panel-view .right-panel-header {
            display: none;
        }

        .right-panel.attachments-panel-view #panel-content {
            padding: 0;
        }

        .attachments-profile {
            margin: 0 !important;
            min-height: 100%;
            padding-bottom: 18px;
        }

        .attachments-hero {
            width: 420px !important;
            height: 420px !important;
            max-width: 100%;
            aspect-ratio: auto !important;
            margin: 0 auto !important;
            border-radius: 0 0 22px 22px !important;
            transform-origin: 14px 14px;
            transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 380ms cubic-bezier(0.22, 1, 0.36, 1), margin 380ms cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform, border-radius;
        }

        .attachments-profile-main {
            padding: 14px;
        }

        .attachments-profile-details {
            display: grid;
            gap: 8px;
            margin-bottom: 14px;
        }

        .attachments-profile-title {
            font-size: 20px;
            font-weight: 800;
        }

        .attachments-profile-meta {
            color: var(--text2);
            line-height: 1.35;
        }

        .attachments-sticky {
            display: flex !important;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-12px);
            transition: opacity 190ms ease-out, transform 190ms ease-out;
        }

        .attachments-back {
            display: none;
        }

        .right-panel.attachments-scrolled .attachments-sticky {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .right-panel.attachments-scrolled .attachments-hero {
            transform: translate3d(14px, 14px, 0) scale(0.14);
            border-radius: 14px !important;
            margin-bottom: -342px !important;
        }

        .right-panel.attachments-scrolled .attachments-close {
            display: none;
        }

        .right-panel.attachments-scrolled .attachments-back {
            display: inline-flex;
        }

        .brand-panel {
            align-items: center !important;
        }

        .brand-logo,
        .brand-title {
            display: inline-block;
            vertical-align: middle;
        }

        .brand-copy {
            position: relative;
            min-height: 32px;
            justify-content: center;
        }

        .brand-title {
            line-height: 32px;
        }

        .connection-status {
            position: absolute;
            left: 0;
            top: 25px;
            margin-top: 0;
        }

        .sidebar-search-result.has-add-action {
            grid-template-columns: 42px minmax(0, 1fr) auto;
        }

        .sidebar-search-add {
            align-self: center;
            justify-self: end;
            padding: 7px 10px;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .profile-tabs-wrapper,
        .sticker-pack-tabs,
        .emoji-tabs {
            overflow: visible !important;
            scroll-behavior: auto !important;
            -webkit-overflow-scrolling: auto !important;
            flex-wrap: wrap;
        }

        #attachments-tabs {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
            gap: 8px;
            padding: 8px 0 0;
        }

        .profile-tab {
            width: 100%;
            text-align: center;
            transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out !important;
        }

        .profile-tabs-wrapper:not(#attachments-tabs) .profile-tab {
            width: auto;
            min-width: 96px;
            flex: 1 1 96px;
        }

        .sidebar-search-tabs button,
        .profile-tab {
            transform: none !important;
        }

        .attachments-sticky {
            z-index: 8;
            min-height: 58px;
            padding: 9px 12px;
        }

        .attachments-back {
            position: relative;
            z-index: 9;
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            margin-right: 2px;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .right-panel.attachments-scrolled .attachments-hero {
            pointer-events: none;
            z-index: 1;
        }

        .group-modal-card {
            width: min(520px, calc(100vw - 28px)) !important;
            padding: 0 !important;
            overflow: hidden;
        }

        .group-create-head {
            display: grid;
            grid-template-columns: 82px minmax(0, 1fr);
            gap: 14px;
            align-items: center;
            padding: 18px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(59, 130, 246, 0.12));
        }

        .group-avatar-picker {
            width: 74px;
            height: 74px;
            border: 1px solid var(--border);
            border-radius: 24px;
            background: var(--bg3);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            overflow: hidden;
            cursor: pointer;
        }

        .group-avatar-picker img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .group-create-body {
            display: grid;
            gap: 14px;
            padding: 18px;
        }

        .group-create-hint {
            margin-top: 5px;
            color: var(--text3);
            font-size: 12px;
            line-height: 1.35;
        }

        .group-member-search {
            width: 100%;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--bg3);
            color: var(--text);
            padding: 0 12px;
            outline: none;
        }

        .group-selected-members {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            min-height: 0;
        }

        .group-selected-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            border-radius: 999px;
            background: var(--surface2);
            color: var(--text);
            font-size: 12px;
            font-weight: 700;
        }

        .group-selected-chip button {
            width: 18px;
            height: 18px;
            border: 0;
            border-radius: 50%;
            background: var(--bg3);
            color: var(--text2);
            cursor: pointer;
            line-height: 1;
        }

        .group-members-select {
            display: grid;
            gap: 6px;
        }

        .member-checkbox {
            display: grid;
            grid-template-columns: auto 40px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 8px;
            border-radius: 14px;
            cursor: pointer;
        }

        .member-checkbox:hover {
            background: var(--surface2);
        }

        @media (max-width: 768px) {
            body.mobile-chat-open #mobile-nav {
                display: none !important;
            }

            body:not(.mobile-chat-open) #mobile-nav {
                display: flex;
                padding-bottom: calc(8px + env(safe-area-inset-bottom));
            }

            .sidebar-global-search-panel {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                border-radius: 0;
                z-index: 90;
                padding-top: max(62px, env(safe-area-inset-top));
            }

            .sidebar-global-search-results {
                max-height: none;
                height: calc(100dvh - 112px);
            }

            #messages-container {
                padding-bottom: calc(var(--mobile-input-height, 104px) + env(safe-area-inset-bottom) + 20px) !important;
            }

            #input-area {
                bottom: calc(8px + env(safe-area-inset-bottom) + var(--mobile-keyboard-offset, 0px)) !important;
            }

            .attachments-hero {
                width: 100%;
                height: min(420px, 100vw);
                border-radius: 0 0 18px 18px;
            }

            .right-panel.attachments-panel-view {
                width: 100vw;
                max-width: 100vw;
            }

            .right-panel.attachments-scrolled .attachments-hero {
                transform: translate3d(10px, 10px, 0) scale(0.16);
                margin-bottom: -68vw !important;
            }
        }

        .sticker-user-pack-tools {
            grid-column: 1 / -1;
            display: grid;
            gap: 8px;
        }

        .sticker-upload-btn {
            min-height: 44px;
            border: 1px dashed var(--border);
            border-radius: 14px;
            background: var(--surface2);
            color: var(--text);
            cursor: pointer;
            font: inherit;
            font-weight: 700;
        }

        .sticker-upload-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .sticker-item-wrap {
            position: relative;
            aspect-ratio: 1;
        }

        .sticker-item-wrap .sticker-item {
            width: 100%;
            height: 100%;
        }

        .sticker-delete-btn {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 24px;
            height: 24px;
            border: 0;
            border-radius: 50%;
            background: rgba(239, 68, 68, 0.92);
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            opacity: 0;
            transform: scale(0.85);
            transition: opacity 150ms ease-out, transform 150ms ease-out;
        }

        .sticker-item-wrap:hover .sticker-delete-btn,
        .sticker-delete-btn:focus-visible {
            opacity: 1;
            transform: scale(1);
        }

        .attachments-sticky {
            align-items: flex-start;
        }

        .attachments-sticky-main {
            min-width: 0;
            flex: 1;
            display: grid;
            gap: 6px;
        }

        .attachments-sticky-tabs {
            display: none;
            gap: 5px;
            overflow-x: auto;
            padding-bottom: 1px;
            scrollbar-width: none;
        }

        .attachments-sticky-tabs::-webkit-scrollbar {
            display: none;
        }

        .right-panel.attachments-scrolled .attachments-sticky-tabs {
            display: flex;
        }

        .attachments-mini-tab {
            min-height: 30px;
            padding: 0 10px;
            border: 0;
            border-radius: 999px;
            background: var(--surface2);
            color: var(--text2);
            white-space: nowrap;
            cursor: pointer;
            font: inherit;
            font-size: 12px;
            font-weight: 700;
        }

        .attachments-mini-tab.active,
        .attachments-mini-tab:hover {
            background: var(--accent);
            color: #fff;
        }

        .scheduled-messages-bar {
            margin: 8px 12px 0;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--surface);
            display: grid;
            gap: 6px;
        }

        .scheduled-message-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            padding: 8px;
            border-radius: 10px;
            background: var(--surface2);
        }

        .scheduled-message-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
        }

        .scheduled-message-time {
            color: var(--text3);
            font-size: 12px;
            margin-top: 2px;
        }

        .scheduled-message-actions {
            display: flex;
            gap: 5px;
        }

        .scheduled-message-actions button {
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 9px;
            background: var(--bg3);
            color: var(--text);
            cursor: pointer;
        }

        .schedule-datetime-input {
            width: 100%;
            height: 42px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg3);
            color: var(--text);
            padding: 0 12px;
            font: inherit;
        }

        .format-toolbar {
            position: fixed;
            z-index: 10080;
            display: none;
            gap: 4px;
            padding: 5px;
            border-radius: 12px;
            background: rgba(20, 28, 38, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        body.light-theme .format-toolbar {
            background: rgba(255, 255, 255, 0.9);
        }

        .format-toolbar.show {
            display: flex;
        }

        .format-toolbar button {
            min-width: 34px;
            height: 32px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: var(--text);
            cursor: pointer;
            font: inherit;
            font-weight: 800;
        }

        .format-toolbar button:hover {
            background: var(--surface2);
        }

        .spoiler-text {
            border-radius: 6px;
            background: currentColor;
            color: transparent;
            cursor: pointer;
            transition: background 160ms ease-out, color 160ms ease-out;
        }

        .spoiler-text.revealed {
            background: rgba(148, 163, 184, 0.22);
            color: inherit;
        }

        @media (max-width: 768px) {
            body.mobile-chat-open #mobile-nav {
                display: none !important;
            }

            body.mobile-chat-open #messages-container {
                padding-bottom: calc(var(--mobile-input-height, 112px) + env(safe-area-inset-bottom) + 28px) !important;
            }

            body.mobile-chat-open #input-area {
                left: 8px !important;
                right: 8px !important;
                bottom: calc(10px + env(safe-area-inset-bottom) + var(--mobile-keyboard-offset, 0px)) !important;
                gap: 6px !important;
                padding: 8px !important;
                border-radius: 18px !important;
                flex-wrap: wrap !important;
            }

            #input-area .btn,
            #btn-send,
            #btn-emoji,
            #btn-stickers,
            #btn-attach,
            #btn-schedule-send,
            #btn-voice {
                min-width: 44px !important;
                min-height: 44px !important;
            }

            #msg-input {
                order: 2 !important;
                flex: 1 1 calc(100% - 54px) !important;
                min-width: 0 !important;
                min-height: 44px !important;
                font-size: 16px !important;
            }

            #btn-file,
            #btn-emoji,
            #btn-stickers,
            #btn-schedule-send {
                order: 1 !important;
                flex: 0 0 44px !important;
            }

            #btn-voice,
            #btn-send {
                order: 2 !important;
                flex: 0 0 44px !important;
            }

            .quick-reaction-menu {
                grid-template-columns: repeat(6, 38px);
                gap: 7px;
                max-width: calc(100vw - 16px);
            }

            .quick-reaction-btn {
                width: 38px;
                height: 38px;
            }

            .format-toolbar {
                max-width: calc(100vw - 16px);
                flex-wrap: wrap;
            }

            .attachments-sticky-main {
                min-width: 0;
            }

            .attachments-sticky-tabs {
                max-width: calc(100vw - 96px);
                overflow-x: auto;
            }

            .attachments-mini-tab {
                flex: 0 0 auto;
                min-height: 34px;
            }

            .vc-modal-card {
                width: calc(100vw - 20px) !important;
                max-height: calc(100dvh - 24px) !important;
            }
        }

        .chat-settings-actions,
        .group-management-actions,
        .scheduled-panel-actions,
        .settings-actions-row,
        .session-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .chat-settings-actions .btn,
        .chat-settings-action-btn,
        .group-management-actions .btn,
        .group-member-actions .btn,
        .scheduled-panel-actions .btn,
        .settings-actions-row .btn,
        .session-row .btn {
            min-height: 40px;
            border-radius: 12px;
            padding: 9px 14px;
            white-space: nowrap;
        }

        .saved-account-row .avatar {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
        }

        .support-ticket-item {
            display: grid;
            gap: 6px;
            padding: 12px;
            border-radius: 14px;
            background: var(--surface2);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .support-ticket-meta {
            color: var(--text3);
            font-size: 12px;
        }

        .chat-settings-action-btn {
            width: 100%;
            margin-top: 8px;
        }

        .settings-toggle-row,
        .permission-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            background: var(--surface2);
            margin-top: 8px;
        }

        .scheduled-panel,
        .active-sessions-list {
            display: grid;
            gap: 10px;
        }

        .scheduled-panel-item,
        .active-session-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px;
            border-radius: 14px;
            background: var(--surface2);
        }

        .scheduled-panel-main,
        .active-session-main {
            min-width: 0;
            display: grid;
            gap: 4px;
        }

        .scheduled-panel-main span,
        .active-session-main span {
            color: var(--text2);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .scheduled-panel-main small,
        .active-session-main small,
        .active-session-current {
            color: var(--text3);
            font-size: 0.78rem;
        }

        .archive-folder-chevron {
            color: var(--text3);
            font-size: 1.1rem;
        }

        .qr-login-card {
            display: grid;
            justify-items: center;
            gap: 8px;
            color: #dbeafe;
        }

        .qr-login-card img {
            width: 190px;
            height: 190px;
            border-radius: 18px;
            background: #fff;
            padding: 10px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            image-rendering: pixelated;
        }

        .qr-login-image-missing {
            display: grid;
            gap: 6px;
            width: min(260px, 100%);
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(245, 158, 11, 0.28);
            background: rgba(245, 158, 11, 0.08);
            color: #fde68a;
            text-align: center;
        }

        .qr-login-image-missing small {
            color: rgba(254, 243, 199, 0.78);
            line-height: 1.35;
        }

        .composer-show-voice #btn-send {
            display: none;
        }

        #input-area:not(.composer-show-voice) #btn-voice:not(.recording) {
            display: none;
        }

        .settings-tabs {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            overflow: visible;
            padding-bottom: 10px;
            margin-bottom: 12px;
        }

        .settings-tab {
            border: 0;
            border-radius: 999px;
            padding: 9px 13px;
            color: var(--text2);
            background: var(--surface2);
            white-space: nowrap;
            cursor: pointer;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .settings-tab.active {
            color: #fff;
            background: var(--accent);
        }

        @media (max-width: 768px) {
            .settings-tabs {
                display: flex;
                overflow-x: auto;
            }

            .settings-tab {
                flex: 0 0 auto;
            }
        }

        .custom-theme-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .custom-theme-grid label {
            display: grid;
            gap: 6px;
            color: var(--text2);
            font-size: 0.85rem;
        }

        .custom-theme-grid input[type="color"] {
            width: 100%;
            height: 40px;
            border: 0;
            border-radius: 12px;
            background: var(--surface2);
        }

        .password-toggle-wrap {
            position: relative;
        }

        .password-toggle-wrap input {
            padding-right: 12px !important;
        }

        .password-show-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            color: var(--text2);
            font-size: 0.84rem;
            cursor: pointer;
            user-select: none;
        }

        .password-show-check input {
            width: 16px;
            height: 16px;
        }

        #sidebar {
            background: var(--personal-sidebar-bg, var(--surface));
        }

        #right-panel,
        .right-panel {
            background: var(--personal-panel-bg, var(--surface));
        }

        .message-row.theirs .message-bubble {
            background: var(--personal-other-bubble-bg, var(--bubble-in));
        }

        .message-row.mine .media-caption-bubble {
            background: var(--accent) !important;
            color: #ffffff !important;
            padding: 7px 10px 6px;
            border-radius: 12px;
            border-bottom-right-radius: 4px;
        }

        .message-row.theirs .media-caption-bubble {
            background: var(--surface) !important;
            color: var(--text) !important;
            padding: 7px 10px 6px;
            border-radius: 12px;
            border-bottom-left-radius: 4px;
            box-shadow: var(--shadow-sm);
        }

        body.light-theme .message-row.theirs .media-caption-bubble {
            background: #ffffff !important;
            color: #111827 !important;
        }

        body.light-theme .message-row.mine .media-caption-bubble {
            background: var(--accent) !important;
            color: #ffffff !important;
        }

        .personalization-preview {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr 0.85fr;
            gap: 8px;
            min-height: 120px;
            margin: 12px 0;
        }

        .personalization-preview-sidebar,
        .personalization-preview-panel,
        .personalization-preview-chat {
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 10px;
            color: var(--text);
        }

        .personalization-preview-chat {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chat-bg-crop-modal {
            display: grid;
            gap: 12px;
        }

        .chat-bg-crop-frame {
            aspect-ratio: 16 / 9;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: #0f172a;
        }

        .chat-bg-crop-frame canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .chat-bg-crop-controls {
            display: grid;
            gap: 8px;
        }

        .chat-bg-crop-controls label {
            display: grid;
            grid-template-columns: 80px 1fr;
            align-items: center;
            gap: 10px;
            color: var(--text2);
            font-size: 0.85rem;
        }

        .multi-attachment-collage,
        .media-preview {
            max-width: min(320px, 70vw);
        }

        .multi-attachment-collage {
            max-height: 260px;
        }

        .attachment-collage-item img,
        .attachment-collage-item video,
        .media-preview {
            object-fit: cover;
        }

        #mobile-nav .nav-item[data-tab="settings"] {
            font-size: 0;
        }

        #mobile-nav .nav-item[data-tab="settings"]::before {
            content: "⚙";
            font-size: 1.15rem;
            line-height: 1;
        }

        #mobile-nav .nav-item[data-tab="settings"] span {
            display: none;
        }

        #mobile-nav .nav-item[data-tab="settings"]::after {
            content: "Настройки";
            font-size: 0.72rem;
        }

        @media (max-width: 768px) {
            #mobile-nav .nav-item[data-tab="contacts"] {
                display: none !important;
            }

            .chat-settings-actions,
            .group-management-actions,
            .scheduled-panel-actions,
            .session-row,
            .scheduled-panel-item,
            .active-session-item {
                align-items: stretch;
                flex-direction: column;
            }

            .chat-settings-actions .btn,
            .group-management-actions .btn,
            .group-member-actions .btn,
            .scheduled-panel-actions .btn,
            .session-row .btn {
                width: 100%;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 1ms !important;
                transition-duration: 1ms !important;
                scroll-behavior: auto !important;
            }
        }

        .qr-login-fallback {
            display: grid;
            gap: 8px;
            padding: 12px;
            border-radius: 14px;
            background: var(--surface2);
            border: 1px solid var(--border);
            text-align: left;
            font-size: 0.78rem;
        }

        .qr-login-fallback code {
            display: block;
            padding: 8px;
            border-radius: 10px;
            background: var(--bg3);
            color: var(--text);
            word-break: break-all;
            white-space: normal;
        }

        .member-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .member-actions .btn {
            min-height: 38px;
            border-radius: 12px;
            padding: 8px 12px;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .member-actions {
                width: 100%;
                justify-content: stretch;
            }

            .member-actions .btn {
                flex: 1 1 auto;
            }
        }

        .message-stack {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-width: min(560px, 100%);
        }

        .message-row.mine .message-stack {
            align-items: flex-end;
        }

        .message-row.theirs .message-stack {
            align-items: flex-start;
        }

        .message-media-wrap {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-width: min(320px, 78vw);
        }

        .message-media-wrap .media-preview {
            display: block;
            max-width: min(320px, 78vw);
            max-height: 260px;
            border-radius: 14px;
            object-fit: cover;
        }

        .message-media-wrap .message-attachment-row,
        .message-media-wrap .compact-file {
            max-width: min(320px, 78vw);
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
        }


        .message-text-bubble {
            width: fit-content;
            max-width: min(560px, 100%);
        }

        .message-meta-outside {
            padding: 0 6px;
            margin-top: 1px;
            justify-content: flex-end;
            opacity: 0.85;
        }

        .message-row.mine .message-meta-outside {
            align-self: flex-end;
        }

        .message-row.theirs .message-meta-outside {
            align-self: flex-start;
        }

        .message-service-bubble {
            background: var(--surface);
            color: var(--text);
            padding: 7px 10px;
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
        }

        .message-row.mine .message-service-bubble {
            background: var(--accent);
            color: #fff;
        }

        body.light-theme .message-media-wrap .message-attachment-row,
        body.light-theme .message-media-wrap .compact-file {
            background: transparent !important;
        }

        .media-message-stack {
            gap: 4px;
        }

        .message-media-wrap {
            background: transparent !important;
            box-shadow: none !important;
            border: 0 !important;
            padding: 0 !important;
        }

        .message-media-wrap .message-content {
            background: transparent !important;
            box-shadow: none !important;
            border: 0 !important;
            padding: 0 !important;
        }

        .message-media-wrap .media-preview,
        .message-media-wrap video,
        .message-media-wrap img {
            display: block;
            max-width: min(320px, 78vw);
            max-height: 260px;
            border-radius: 14px;
            object-fit: cover;
            background: transparent !important;
            box-shadow: none !important;
        }

        .media-caption-bubble {
            margin-top: 2px;
            width: fit-content;
            max-width: min(420px, 78vw);
        }

        .message-media-wrap {
            overflow: hidden;
            border-radius: 14px;
            background: transparent !important;
            box-shadow: none !important;
            border: 0 !important;
            padding: 0 !important;
        }

        .message-media-wrap.has-caption {
            background: var(--surface) !important;
            box-shadow: var(--shadow-sm) !important;
        }

        .message-row.mine .message-media-wrap.has-caption {
            background: var(--accent) !important;
        }

        .message-media-wrap video,
        .message-media-wrap img,
        .message-media-wrap .media-preview,
        .message-media-wrap .video-player,
        .message-media-wrap [class*="video"] {
            display: block;
            border-radius: 14px;
            margin: 0 !important;
        }

        .message-media-wrap.has-caption video,
        .message-media-wrap.has-caption img,
        .message-media-wrap.has-caption .media-preview,
        .message-media-wrap.has-caption .video-player,
        .message-media-wrap.has-caption [class*="video"] {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .media-inline-caption {
            padding: 8px 10px 9px;
            font-size: 15px;
            line-height: 1.38;
            word-break: break-word;
            background: var(--surface);
            color: var(--text);
        }

        .message-row.mine .media-inline-caption {
            background: var(--accent);
            color: #ffffff;
        }

        body.light-theme .message-row.theirs .media-inline-caption {
            background: #ffffff;
            color: #17202c;
        }

        body.light-theme .message-row.mine .media-inline-caption {
            background: var(--accent);
            color: #ffffff;
        }

        body.light-theme .context-menu,
        body.light-theme .attachment-menu,
        body.light-theme #emoji-picker,
        body.light-theme .right-panel,
        body.light-theme #right-panel,
        body.light-theme .attachments-panel,
        body.light-theme .modal-content,
        body.light-theme .vc-modal-card,
        body.light-theme .format-toolbar,
        body.light-theme .send-action-menu,
        body.light-theme .message-reply-block {
            background-color: rgba(255, 255, 255, 0.93) !important;
            backdrop-filter: blur(6px) saturate(110%) !important;
            -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
        }

        body.light-theme .toast,
        body.light-theme .notification,
        body.light-theme .system-notification {
            background: rgba(255, 255, 255, 0.96) !important;
            color: #17202c !important;
            border-color: rgba(16, 24, 40, 0.12) !important;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
        }

        #pending-attachment-preview.pending-attachment-preview {
            width: min(520px, calc(100% - 16px)) !important;
            max-width: 520px !important;
            max-height: 150px !important;
            margin: 6px 0 !important;
            align-self: flex-start !important;
            overflow-y: auto !important;
        }

        #pending-attachment-preview .pending-attachment-grid {
            width: auto !important;
            max-width: 520px !important;
            grid-template-columns: repeat(auto-fit, minmax(180px, 240px)) !important;
            justify-content: start !important;
        }

        #pending-attachment-preview .pending-attachment-chip {
            width: 240px !important;
            max-width: 240px !important;
            min-height: 42px !important;
            grid-template-columns: 34px minmax(0, 1fr) 34px 24px !important;
            padding: 5px 6px !important;
        }

        #scheduled-messages-bar {
            display: none !important;
        }

        .music-player {
            width: min(320px, 100%) !important;
            grid-template-columns: 34px minmax(0, 1fr) !important;
            border-radius: 14px !important;
            background: rgba(42, 171, 238, 0.14) !important;
        }

        .music-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
            font-size: 12px;
            line-height: 1.15;
        }

        .music-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 700;
        }

        .music-size {
            color: var(--text3);
            white-space: nowrap;
            font-size: 10px;
        }

        #chat-area.chat-drag-over::after {
            content: "Отпустите файлы для отправки";
            position: absolute;
            inset: 74px 18px 86px;
            z-index: 40;
            display: grid;
            place-items: center;
            border: 2px dashed var(--accent);
            border-radius: 18px;
            background: rgba(42, 171, 238, 0.12);
            color: var(--text);
            font-weight: 700;
            pointer-events: none;
            backdrop-filter: blur(6px);
        }

        .profile-field-counter {
            margin-top: 4px;
            text-align: right;
            font-size: 12px;
            color: var(--text3);
        }

        .profile-field-counter.over {
            color: var(--danger);
        }

        .square-crop-frame {
            aspect-ratio: 1 / 1;
            max-height: min(52vh, 420px);
        }

        @media (max-width: 768px) {
            #input-area {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
                padding: 8px;
            }

            #pending-attachment-preview,
            #reply-preview,
            #forward-preview {
                order: 0;
                flex: 0 0 100%;
            }

            #pending-attachment-preview.pending-attachment-preview {
                width: 100% !important;
                max-width: 100% !important;
                max-height: 132px !important;
            }

            #pending-attachment-preview .pending-attachment-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
            }

            #pending-attachment-preview .pending-attachment-chip {
                width: 100% !important;
                max-width: 100% !important;
            }

            #btn-attach,
            #btn-emoji,
            #btn-sticker,
            #btn-schedule-send {
                order: 1;
                flex: 0 0 38px;
                width: 38px;
                height: 38px;
                min-width: 38px;
            }

            #msg-input {
                order: 2;
                flex: 1 1 calc(100% - 54px);
                min-width: 0;
            }

            #btn-voice,
            #btn-send {
                order: 2;
                flex: 0 0 44px;
                width: 44px;
                height: 44px;
                min-width: 44px;
            }
        }

/* ===== /static/css/modules/11-stability-scheduled.css ===== */
        /* === Silent UI updates: убираем видимые мигания при микрообновлениях === */

        #messages-container.is-silent-refresh {
            overflow-anchor: none;
        }

        #messages-container.is-silent-refresh .message-row {
            animation: none !important;
            transition: none !important;
        }


        /* Стабильный рендер чата: существующие сообщения не анимируются повторно. */
        #messages-container[data-render-room] {
            overflow-anchor: none;
            contain: layout style;
        }

        #messages-container .message-row:not(.message-enter),
        #messages-container .floating-date {
            animation: none !important;
        }

        /* === Непрозрачный фон чужих сообщений === */

        .message-row.theirs .message-bubble {
            background: #182533 !important;
            color: var(--text) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        body.light-theme .message-row.theirs .message-bubble {
            background: #ffffff !important;
            color: #17202c !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .message-row.theirs .message-media-wrap.has-caption {
            background: #182533 !important;
            box-shadow: var(--shadow-sm) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        body.light-theme .message-row.theirs .message-media-wrap.has-caption {
            background: #ffffff !important;
        }

        .message-row.theirs .media-inline-caption {
            background: #182533 !important;
            color: var(--text) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        body.light-theme .message-row.theirs .media-inline-caption {
            background: #ffffff !important;
            color: #17202c !important;
        }

        #messages-container.is-silent-refresh .message-row {
            animation: none !important;
            transition: none !important;
        }

        #messages-container {
            overflow-anchor: none;
        }

        #pending-attachment-preview.pending-attachment-preview {
            width: min(360px, calc(100% - 18px)) !important;
            max-width: 360px !important;
            max-height: 118px !important;
            margin: 6px 0 8px !important;
            padding: 6px !important;
            border-radius: 14px !important;
            box-shadow: var(--shadow-sm) !important;
            flex: 0 0 auto !important;
        }

        #pending-attachment-preview .pending-attachment-grid {
            max-width: 348px !important;
            grid-template-columns: repeat(auto-fit, minmax(126px, 168px)) !important;
            gap: 6px !important;
        }

        #pending-attachment-preview .pending-attachment-chip {
            width: 168px !important;
            max-width: 168px !important;
            min-height: 38px !important;
            grid-template-columns: 30px minmax(0, 1fr) 30px 22px !important;
            gap: 5px !important;
            padding: 4px 5px !important;
        }

        #pending-attachment-preview .pending-attachment-chip .pending-attachment-thumb {
            width: 30px !important;
            height: 30px !important;
            border-radius: 8px !important;
        }

        #pending-attachment-preview .pending-attachment-chip[data-kind="image"] .pending-attachment-thumb,
        #pending-attachment-preview .pending-attachment-chip[data-kind="video"] .pending-attachment-thumb {
            cursor: pointer;
        }

        #pending-attachment-preview .pending-attachment-title,
        #pending-attachment-preview .pending-attachment-type {
            line-height: 1.12 !important;
        }

        .message-bubble:has(.multi-attachment-collage),
        .message-bubble:has(.media-preview) {
            max-width: min(320px, 72vw) !important;
            padding: 5px !important;
        }

        .multi-attachment-collage {
            max-width: min(300px, 68vw) !important;
            max-height: 240px !important;
        }

        .multi-attachment-collage.count-1 {
            grid-template-columns: minmax(140px, 300px) !important;
        }

        .media-preview {
            max-width: min(300px, 68vw) !important;
            max-height: 320px !important;
        }

        .chat-settings-action-btn,
        .group-management-actions .btn,
        .group-management-section .btn,
        .group-management-avatar-row .soft-upload-btn,
        .group-management-bg-row .soft-upload-btn {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: normal;
            line-height: 1.2;
        }

        .group-management-actions {
            display: flex;
            gap: 10px;
            align-items: stretch;
        }

        .music-player {
            max-width: min(320px, 100%) !important;
        }

        body.global-drag-over #chat-area::after {
            content: "Отпустите файл для загрузки";
            position: fixed;
            inset: 92px 18px 92px 338px;
            z-index: 2500;
            display: grid;
            place-items: center;
            border: 2px dashed var(--accent);
            border-radius: 22px;
            background: rgba(15, 23, 42, 0.26);
            color: #fff;
            font-weight: 800;
            pointer-events: none;
            backdrop-filter: blur(6px);
        }

        @media (max-width: 768px) {
            #pending-attachment-preview.pending-attachment-preview {
                width: min(330px, calc(100vw - 96px)) !important;
                max-width: calc(100vw - 96px) !important;
                max-height: 104px !important;
                margin-bottom: 8px !important;
            }

            #pending-attachment-preview .pending-attachment-grid {
                grid-template-columns: repeat(auto-fit, minmax(118px, 154px)) !important;
                max-width: 318px !important;
            }

            #pending-attachment-preview .pending-attachment-chip {
                width: 154px !important;
                max-width: 154px !important;
            }

            body.mobile-chat-open #input-area {
                bottom: calc(10px + env(safe-area-inset-bottom) + var(--mobile-keyboard-offset, 0px)) !important;
                padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
            }

            body.mobile-chat-open #messages-container {
                padding-bottom: calc(var(--mobile-input-height, 112px) + env(safe-area-inset-bottom) + 34px) !important;
            }

            .message-bubble:has(.multi-attachment-collage),
            .message-bubble:has(.media-preview) {
                max-width: min(310px, 78vw) !important;
            }

            .multi-attachment-collage,
            .media-preview {
                max-width: min(292px, 76vw) !important;
            }

            body.global-drag-over #chat-area::after {
                inset: 72px 12px calc(110px + env(safe-area-inset-bottom)) 12px;
            }
        }

        /* Production stability layer: compact previews, file bubbles, readable meta. */
        .attachment-preview-area {
            position: absolute;
            left: clamp(14px, 3vw, 28px);
            right: clamp(14px, 3vw, 28px);
            bottom: calc(74px + env(safe-area-inset-bottom));
            z-index: 8;
            display: none;
            justify-content: center;
            pointer-events: none;
        }

        .attachment-preview-area.has-items {
            display: flex;
            pointer-events: auto;
        }

        .attachment-preview-area .pending-attachment-preview {
            width: fit-content !important;
            max-width: min(430px, calc(100vw - var(--sidebar-width) - 86px)) !important;
            max-height: 132px !important;
            margin: 0 !important;
            padding: 8px !important;
            border-radius: 14px !important;
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            box-shadow: var(--shadow-sm) !important;
            overflow: hidden !important;
        }

        .attachment-preview-area .pending-attachment-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(132px, 160px)) !important;
            gap: 8px !important;
            width: auto !important;
            max-width: 100% !important;
            max-height: 116px !important;
            overflow: auto !important;
        }

        .attachment-preview-area .pending-attachment-grid[data-grid="1"] {
            grid-template-columns: minmax(220px, 360px) !important;
        }

        .attachment-preview-area .pending-attachment-grid[data-grid="2"] {
            grid-template-columns: repeat(2, minmax(132px, 160px)) !important;
            max-width: 328px !important;
        }

        .attachment-preview-area .pending-attachment-grid[data-grid="3"] {
            grid-template-columns: repeat(3, minmax(126px, 150px)) !important;
            max-width: 466px !important;
        }

        .attachment-preview-area .pending-attachment-grid[data-grid="4"] {
            grid-template-columns: repeat(4, minmax(118px, 140px)) !important;
            max-width: 584px !important;
        }

        .attachment-preview-area .pending-attachment-chip {
            width: 100% !important;
            max-width: 160px !important;
            min-width: 0 !important;
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) 36px !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 6px 26px 6px 6px !important;
            border-radius: 12px !important;
            background: var(--bg3) !important;
        }

        .attachment-preview-area .pending-attachment-meta {
            min-width: 0;
        }

        .attachment-preview-area .pending-attachment-title,
        .attachment-preview-area .pending-attachment-type {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .message-bubble {
            max-width: min(560px, 76vw);
            overflow-wrap: anywhere;
        }

        .message-row.theirs .message-bubble {
            background-color: var(--surface);
        }

        body.light-theme .message-row.theirs .message-bubble {
            background-color: #ffffff;
        }

        .message-attachment-row,
        .message-file-link,
        .compact-file {
            width: 100%;
            max-width: min(360px, 100%);
            min-width: 0;
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) auto;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.16);
            color: inherit;
            text-decoration: none;
            overflow: hidden;
        }

        .message-attachment-row>div,
        .message-file-link>div,
        .compact-file>div {
            min-width: 0;
        }

        .message-attachment-name,
        .message-file-name,
        .compact-file-name {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-wrap: anywhere;
        }

        .message-attachment-size,
        .message-file-size,
        .compact-file-size {
            min-width: 0;
            color: var(--text3);
            font-size: 11px;
        }

        .message-media-wrap {
            max-width: min(360px, 78vw) !important;
            min-width: 0 !important;
            margin-inline: auto !important;
        }

        .message-bubble .media-preview,
        .message-bubble .custom-video-player,
        .message-bubble .multi-attachment-collage {
            margin-inline: auto;
        }

        .message-row.mine .message-attachment-row,
        .message-row.mine .message-file-link,
        .message-row.mine .compact-file,
        .message-row.mine .audio-message,
        .message-row.mine .voice-player {
            background: rgba(255, 255, 255, 0.18);
            color: inherit;
        }

        body.light-theme .message-row.mine .message-attachment-row,
        body.light-theme .message-row.mine .message-file-link,
        body.light-theme .message-row.mine .compact-file,
        body.light-theme .message-row.mine .audio-message,
        body.light-theme .message-row.mine .voice-player {
            background: rgba(42, 171, 238, 0.16);
            border-color: rgba(42, 171, 238, 0.22);
        }

        body.light-theme .message-row.theirs .message-attachment-row,
        body.light-theme .message-row.theirs .message-file-link,
        body.light-theme .message-row.theirs .compact-file,
        body.light-theme .message-row.theirs .audio-message,
        body.light-theme .message-row.theirs .voice-player {
            background: #f1f5f9;
            border-color: #e2e8f0;
        }

        .audio-message {
            width: min(340px, 100%);
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 14px;
            background: rgba(15, 23, 42, 0.16);
        }

        .audio-message .music-play {
            justify-self: center;
        }

        .audio-message .music-title {
            max-width: 100%;
        }

        .message-media-wrap.has-caption {
            overflow: hidden;
            border-radius: 14px;
        }

        .message-meta,
        .message-meta-outside {
            color: var(--message-meta-text) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
        }

        .message-status {
            color: inherit;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
        }

        .message-media-wrap .message-meta,
        .message-media-wrap .message-meta-outside,
        .media-message-stack .message-meta,
        .media-message-stack .message-meta-outside {
            width: fit-content;
            border-radius: 999px;
            padding: 2px 7px;
            background: var(--message-meta-bg);
            color: var(--message-meta-text) !important;
        }

        .floating-date span {
            background: var(--floating-date-bg) !important;
            color: var(--floating-date-text) !important;
            box-shadow: var(--shadow-sm);
        }

        #messages-container .floating-date {
            opacity: 0;
            transform: translateY(-4px);
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease;
        }

        #messages-container .floating-date.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .forward-preview-list,
        .forward-confirm-preview {
            display: grid;
            gap: 8px;
            margin-top: 8px;
        }

        .forward-item-preview {
            display: grid;
            gap: 7px;
            min-width: 0;
            padding: 9px 10px;
            border-radius: 12px;
            background: var(--surface2);
            border: 1px solid var(--border);
        }

        .forward-item-preview.compact {
            padding: 7px 8px;
        }

        .forward-preview-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
            color: var(--accent);
            font-size: 12px;
            font-weight: 750;
        }

        .forward-preview-head small {
            flex: 0 0 auto;
            color: var(--text3);
            font-weight: 500;
        }

        .forward-preview-text {
            min-width: 0;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            color: var(--text2);
            font-size: 12px;
            line-height: 1.35;
        }

        .forward-preview-text.muted {
            color: var(--text3);
        }

        .forward-attachment-preview {
            display: grid;
            gap: 7px;
            justify-items: start;
        }

        .forward-attachment-preview.compact {
            grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
            align-items: center;
        }

        .forward-preview-media {
            width: min(160px, 100%);
            max-height: 120px;
            border-radius: 10px;
            object-fit: cover;
            background: var(--bg3);
        }

        .forward-preview .forward-preview-media {
            width: 92px;
            height: 70px;
        }

        #btn-scheduled-messages {
            position: relative;
        }

        #btn-scheduled-messages.has-scheduled::after {
            content: attr(data-count);
            position: absolute;
            right: -3px;
            top: -4px;
            min-width: 17px;
            height: 17px;
            padding: 0 4px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            color: white;
            font-size: 10px;
            font-weight: 800;
            box-shadow: 0 0 0 2px var(--surface);
        }

        .scheduled-panel {
            display: grid;
            gap: 10px;
        }

        .scheduled-panel-head,
        .scheduled-panel-item {
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--surface2);
            padding: 12px;
        }

        .scheduled-panel-head {
            display: grid;
            gap: 4px;
        }

        .scheduled-panel-head span,
        .scheduled-panel-main small,
        .scheduled-panel-main em {
            color: var(--text3);
            font-style: normal;
            font-size: 12px;
        }

        .scheduled-panel-main {
            display: grid;
            gap: 7px;
            min-width: 0;
        }

        .scheduled-message-text {
            overflow-wrap: anywhere;
        }

        .scheduled-panel-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
        }



        /* Отложенные сообщения: отдельное контекстное меню из шапки чата */
        .scheduled-context-menu {
            position: fixed;
            z-index: 420;
            width: 380px;
            max-width: calc(100vw - 18px);
            max-height: min(560px, calc(100vh - 72px));
            display: none;
            flex-direction: column;
            overflow: hidden;
            border-radius: 22px;
            border: 1px solid rgba(139, 177, 214, 0.18);
            background:
                linear-gradient(180deg, rgba(23, 37, 53, 0.98), rgba(13, 24, 37, 0.98));
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255,255,255,0.02) inset;
            backdrop-filter: blur(22px) saturate(140%);
            -webkit-backdrop-filter: blur(22px) saturate(140%);
            transform-origin: top right;
        }

        .scheduled-context-menu.open {
            display: flex;
            animation: scheduledContextIn 0.16s ease-out both;
        }

        @keyframes scheduledContextIn {
            from {
                opacity: 0;
                transform: translateY(-6px) scale(0.975);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .scheduled-context-menu::before {
            content: "";
            position: absolute;
            right: 28px;
            top: -7px;
            width: 14px;
            height: 14px;
            transform: rotate(45deg);
            background: rgba(23, 37, 53, 0.98);
            border-left: 1px solid rgba(139, 177, 214, 0.18);
            border-top: 1px solid rgba(139, 177, 214, 0.18);
        }

        .scheduled-menu-header {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 16px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.075);
        }

        .scheduled-menu-title {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .scheduled-menu-title strong {
            color: #f4f8ff;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.1px;
        }

        .scheduled-menu-title span {
            color: #8fa3b8;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .scheduled-menu-close {
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            color: #b8c6d6;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            line-height: 1;
            transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease;
        }

        .scheduled-menu-close:hover {
            background: rgba(255,255,255,0.11);
            color: #ffffff;
        }

        .scheduled-menu-close:active {
            transform: scale(0.94);
        }

        .scheduled-menu-toolbar {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .scheduled-menu-search {
            min-width: 0;
            height: 38px;
            border-radius: 13px;
            border: 1px solid rgba(139, 177, 214, 0.14);
            background: rgba(7, 17, 29, 0.48);
            color: #eef5ff;
            outline: none;
            padding: 0 12px;
            font-size: 13px;
        }

        .scheduled-menu-search:focus {
            border-color: rgba(42, 171, 238, 0.55);
            box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.10);
        }

        .scheduled-menu-refresh {
            height: 38px;
            border: 1px solid rgba(139, 177, 214, 0.14);
            border-radius: 13px;
            background: rgba(255,255,255,0.055);
            color: #dbeafe;
            cursor: pointer;
            padding: 0 12px;
            font-weight: 750;
            transition: background 0.14s ease, transform 0.1s ease;
        }

        .scheduled-menu-refresh:hover {
            background: rgba(255,255,255,0.095);
        }

        .scheduled-menu-refresh:active {
            transform: scale(0.96);
        }

        .scheduled-menu-list {
            padding: 12px;
            overflow-y: auto;
            display: grid;
            gap: 10px;
        }

        .scheduled-menu-empty {
            padding: 28px 18px;
            text-align: center;
            color: #8799ad;
            display: grid;
            gap: 8px;
        }

        .scheduled-menu-empty b {
            color: #dbeafe;
            font-size: 14px;
        }

        .scheduled-menu-item {
            display: grid;
            gap: 10px;
            padding: 12px;
            border-radius: 16px;
            background: rgba(255,255,255,0.055);
            border: 1px solid rgba(139, 177, 214, 0.12);
            transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
        }

        .scheduled-menu-item:hover {
            background: rgba(255,255,255,0.075);
            border-color: rgba(42, 171, 238, 0.25);
        }

        .scheduled-menu-item.hidden-by-filter {
            display: none;
        }

        .scheduled-item-main {
            display: grid;
            gap: 8px;
            min-width: 0;
        }

        .scheduled-item-text {
            color: #f3f7ff;
            font-size: 13px;
            line-height: 1.35;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }

        .scheduled-item-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #8fa3b8;
            font-size: 12px;
        }

        .scheduled-item-status {
            color: #5cc8ff;
            font-weight: 750;
        }

        .scheduled-item-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .scheduled-item-actions button {
            height: 34px;
            border: 1px solid rgba(139, 177, 214, 0.12);
            border-radius: 12px;
            background: rgba(255,255,255,0.055);
            color: #dbeafe;
            cursor: pointer;
            padding: 0 12px;
            font-size: 12px;
            font-weight: 750;
            transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
        }

        .scheduled-item-actions button:hover {
            background: rgba(42, 171, 238, 0.14);
            border-color: rgba(42, 171, 238, 0.25);
            color: #ffffff;
        }

        .scheduled-item-actions button.danger {
            color: #ff9a9a;
        }

        .scheduled-item-actions button.danger:hover {
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.24);
        }

        #btn-scheduled-messages.menu-open {
            background: rgba(42, 171, 238, 0.16) !important;
        }

        body.light-theme .scheduled-context-menu {
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(42, 56, 74, 0.14);
            box-shadow: 0 20px 56px rgba(15, 23, 42, 0.18);
        }

        body.light-theme .scheduled-context-menu::before {
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(42, 56, 74, 0.14);
        }

        body.light-theme .scheduled-menu-header,
        body.light-theme .scheduled-menu-toolbar {
            border-color: rgba(42, 56, 74, 0.10);
        }

        body.light-theme .scheduled-menu-title strong,
        body.light-theme .scheduled-item-text,
        body.light-theme .scheduled-menu-empty b {
            color: #17202c;
        }

        body.light-theme .scheduled-menu-title span,
        body.light-theme .scheduled-item-meta,
        body.light-theme .scheduled-menu-empty {
            color: #64748b;
        }

        body.light-theme .scheduled-menu-search,
        body.light-theme .scheduled-menu-item,
        body.light-theme .scheduled-menu-refresh,
        body.light-theme .scheduled-item-actions button,
        body.light-theme .scheduled-menu-close {
            background: rgba(226, 235, 245, 0.7);
            border-color: rgba(42, 56, 74, 0.10);
            color: #17202c;
        }

        @media (max-width: 520px) {
            .scheduled-context-menu {
                width: calc(100vw - 16px) !important;
                left: 8px !important;
                right: 8px !important;
                top: auto !important;
                bottom: calc(78px + env(safe-area-inset-bottom));
                max-height: min(520px, calc(100vh - 120px));
                transform-origin: bottom right;
            }

            .scheduled-context-menu::before {
                display: none;
            }
        }

        body.light-theme .toast,
        body.light-theme .notification,
        body.light-theme .connection-toast {
            background: rgba(255, 255, 255, 0.96) !important;
            color: #0f172a !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
            backdrop-filter: blur(4px) !important;
        }

        body.light-theme .context-menu,
        body.light-theme .modal,
        body.light-theme #right-panel,
        body.light-theme .right-panel {
            backdrop-filter: blur(6px) !important;
        }

        .system-message,
        .message-service-bubble {
            background: var(--system-bubble-bg) !important;
            color: var(--system-bubble-text) !important;
            text-shadow: none;
        }

        .media-inline-caption {
            color: var(--text);
        }

        .settings-tabs {
            display: none !important;
        }

        .settings-section-list {
            display: grid;
            gap: 9px;
            padding: 4px 0 12px;
        }

        .settings-section-item {
            width: 100%;
            min-height: 52px;
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--surface2);
            color: var(--text);
            cursor: pointer;
            text-align: left;
            transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
        }

        .settings-section-item:hover {
            transform: translateY(-1px);
            border-color: rgba(42, 171, 238, 0.38);
        }

        .settings-section-icon {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background: rgba(42, 171, 238, 0.14);
            color: var(--accent);
            font-weight: 800;
        }

        .settings-section-copy {
            min-width: 0;
        }

        .settings-section-title {
            font-weight: 750;
            line-height: 1.2;
        }

        .settings-section-desc {
            margin-top: 2px;
            color: var(--text3);
            font-size: 12px;
            line-height: 1.25;
        }

        body {
            --app-bg: var(--bg);
            --app-surface: var(--surface);
            --sidebar-bg: var(--surface);
            --sidebar-accent: var(--accent);
            --panel-bg: var(--surface);
            --modal-bg: var(--surface);
            --settings-bg: var(--surface);
            --chat-bg: var(--bg2);
            --chat-my-bubble: color-mix(in srgb, var(--accent) 82%, #ffffff 18%);
            --chat-their-bubble: var(--surface2);
            --chat-accent: var(--accent);
            --chat-meta-bg: var(--message-meta-bg);
            --text-primary: var(--text);
            --text-secondary: var(--text2);
            --border-color: var(--border);
            --ui-radius: 14px;
        }

        #messenger,
        #app {
            background: var(--app-bg);
            color: var(--text-primary);
        }

        #sidebar,
        .brand-panel,
        .right-panel,
        .settings-block,
        .vc-modal-card,
        .context-menu {
            border-color: var(--border-color);
        }

        #sidebar,
        .brand-panel {
            background: var(--sidebar-bg);
        }

        .right-panel,
        .settings-block,
        .vc-modal-card,
        .context-menu {
            background: var(--panel-bg);
            color: var(--text-primary);
        }

        .message-row.mine .message-bubble,
        .message-row.mine .message-media-wrap {
            background: var(--chat-my-bubble);
        }

        .message-row.theirs .message-bubble,
        .message-row.theirs .message-media-wrap {
            background: var(--chat-their-bubble);
        }

        .pin-scope-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 12px;
        }

        .pin-scope-actions .btn {
            min-height: 42px;
            white-space: normal;
        }

        body.light-theme .right-panel,
        body.light-theme .context-menu,
        body.light-theme .vc-modal-card,
        body.light-theme #emoji-picker {
            backdrop-filter: blur(4px) saturate(105%) !important;
            -webkit-backdrop-filter: blur(4px) saturate(105%) !important;
        }

        .settings-subpanel[hidden],
        .settings-sections-source[hidden] {
            display: none !important;
        }

        .settings-subpanel {
            display: grid;
            gap: 12px;
            animation: panelIn 0.18s ease-out;
        }

        @keyframes panelIn {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

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

        .settings-subpanel-header {
            position: sticky;
            top: 0;
            z-index: 3;
            display: grid;
            grid-template-columns: 40px minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            padding: 4px 0 10px;
            background: var(--surface);
        }

        .settings-back-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface2);
            color: var(--text);
            cursor: pointer;
            font-size: 18px;
        }

        .settings-subpanel-title {
            min-width: 0;
            font-size: 18px;
            font-weight: 800;
            line-height: 1.15;
        }

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

        @media (max-width: 768px) {
            .attachment-preview-area {
                left: 8px;
                right: 8px;
                bottom: calc(var(--mobile-input-height, 72px) + 12px + env(safe-area-inset-bottom));
            }

            .attachment-preview-area .pending-attachment-preview {
                max-width: calc(100vw - 16px) !important;
            }

            .attachment-preview-area .pending-attachment-grid {
                grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
            }

            .message-bubble {
                max-width: min(560px, 84vw);
            }
        }

        body.light-theme {
            --bg: #eef3f8;
            --bg2: #f7f9fc;
            --bg3: #dbe5ef;
            --text: #142133;
            --text2: #45566c;
            --text3: #718096;
        }

        body.light-theme #sidebar,
        body.light-theme .brand-panel,
        body.light-theme #chat-header,
        body.light-theme #input-area,
        body.light-theme .right-panel,
        body.light-theme #right-panel,
        body.light-theme .context-menu,
        body.light-theme .modal-content,
        body.light-theme .vc-modal-card,
        body.light-theme #emoji-picker {
            background: rgba(248, 251, 255, .92) !important;
            backdrop-filter: blur(8px) saturate(110%) !important;
            -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
        }

        body.light-theme #chat-area,
        body.light-theme #messages-container {
            background-color: #eef3f8 !important;
        }

        body.light-theme .message-row.theirs .message-bubble,
        body.light-theme .message-row.theirs .message-media-wrap {
            background: #ffffff !important;
            color: #142133 !important;
            border: 1px solid rgba(148, 163, 184, .28) !important;
        }

        body.light-theme .toast,
        body.light-theme .notification,
        body.light-theme .connection-toast {
            background: rgba(255, 255, 255, .96) !important;
            color: #142133 !important;
            border: 1px solid rgba(148, 163, 184, .35) !important;
            box-shadow: 0 12px 32px rgba(15, 23, 42, .14) !important;
        }

        .attachments-load-more {
            width: min(100%, 220px);
            margin: 12px auto 0;
            display: block;
        }

        .attachment-preview-area {
            width: min(520px, calc(100vw - 380px));
            max-width: 520px;
            right: 24px;
            left: auto;
            pointer-events: none;
        }

        .attachment-preview-area .pending-attachment-preview {
            width: auto !important;
            max-width: 520px !important;
            pointer-events: auto;
        }

        .attachment-preview-area .pending-attachment-grid {
            grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
            max-height: 168px;
            overflow: auto;
        }

        .attachment-preview-area .pending-attachment-chip {
            min-width: 0 !important;
        }

        @media (max-width: 768px) {
            .attachment-preview-area {
                width: calc(100vw - 16px);
                max-width: none;
                left: 8px;
                right: 8px;
            }
        }

        .support-inbox-layout {
            display: grid;
            grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
            gap: 12px;
            height: calc(100vh - 120px);
            min-height: 520px;
        }

        .support-inbox-sidebar,
        .support-inbox-chat {
            min-width: 0;
            min-height: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 18px;
            overflow: hidden;
        }

        .support-inbox-sidebar {
            padding: 12px;
        }

        .support-inbox-rooms {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
            max-height: calc(100% - 34px);
            overflow-y: auto;
        }

        .support-inbox-room {
            width: 100%;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            border-radius: 14px;
            padding: 10px;
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) auto;
            gap: 10px;
            text-align: left;
            cursor: pointer;
        }

        .support-inbox-room:hover,
        .support-inbox-room.has-unread {
            border-color: var(--accent);
            background: var(--surface2);
        }

        .support-inbox-room-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: cover;
            background-position: center;
            font-weight: 700;
        }

        .support-inbox-room-main {
            min-width: 0;
        }

        .support-inbox-room-title {
            font-weight: 700;
            font-size: 0.88rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .support-inbox-room-preview,
        .support-inbox-room-meta {
            color: var(--text3);
            font-size: 0.74rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .support-inbox-chat {
            display: flex;
            flex-direction: column;
        }

        .support-inbox-chat-header {
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            background: var(--header-bg);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .support-inbox-chat-header span {
            color: var(--text3);
            font-size: 0.76rem;
        }

        .support-inbox-messages {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .support-inbox-message {
            max-width: 78%;
            padding: 9px 12px;
            border-radius: 16px;
            border: 1px solid var(--border);
            background: var(--bg3);
        }

        .support-inbox-message.support-reply {
            align-self: flex-end;
            background: var(--accent);
            color: #fff;
            border-color: transparent;
        }

        .support-inbox-message.support-user-message {
            align-self: flex-start;
            background: var(--surface2);
        }

        .support-inbox-message-author {
            font-size: 0.72rem;
            font-weight: 700;
            opacity: 0.85;
            margin-bottom: 4px;
        }

        .support-inbox-message-text {
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 0.88rem;
        }

        .support-inbox-message-time {
            margin-top: 4px;
            font-size: 0.68rem;
            opacity: 0.72;
            text-align: right;
        }

        .support-inbox-composer {
            padding: 12px;
            border-top: 1px solid var(--border);
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            background: var(--header-bg);
        }

        .support-inbox-composer textarea {
            min-height: 44px;
            max-height: 140px;
            resize: vertical;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            padding: 10px 12px;
            outline: none;
        }

        .support-inbox-composer textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-glow);
        }

        @media (max-width: 760px) {
            .support-inbox-layout {
                grid-template-columns: 1fr;
                height: auto;
                min-height: 0;
            }

            .support-inbox-sidebar {
                max-height: 260px;
            }

            .support-inbox-chat {
                min-height: 520px;
            }

            .support-inbox-composer {
                grid-template-columns: 1fr;
            }

            .support-inbox-message {
                max-width: 92%;
            }
        }

/* ===== /static/css/modules/12-settings-redesign.css ===== */
        /* === Settings window redesign: centered modal, SmChat dark style === */
        body.settings-window-open::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 108;
            background:
                radial-gradient(circle at 50% 34%, rgba(42, 171, 238, 0.10), transparent 34%),
                rgba(3, 7, 14, 0.66);
            backdrop-filter: blur(5px) saturate(115%);
            -webkit-backdrop-filter: blur(5px) saturate(115%);
            pointer-events: none;
        }

        .right-panel.settings-window {
            left: 50% !important;
            right: auto !important;
            top: 50% !important;
            bottom: auto !important;
            width: min(1100px, calc(100vw - 48px)) !important;
            height: min(760px, calc(100dvh - 48px)) !important;
            min-width: 0 !important;
            max-width: none !important;
            max-height: calc(100dvh - 48px) !important;
            resize: none !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            background:
                linear-gradient(145deg, rgba(31, 38, 51, 0.98), rgba(17, 22, 31, 0.98)) !important;
            border: 1px solid rgba(255, 255, 255, 0.16) !important;
            border-radius: 26px !important;
            box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.035) inset !important;
            transform: translate(-50%, -50%) scale(0.965) !important;
            opacity: 0;
            z-index: 130 !important;
            transition: opacity 180ms ease-out, transform 180ms ease-out !important;
        }

        .right-panel.settings-window.open {
            transform: translate(-50%, -50%) scale(1) !important;
            opacity: 1;
        }

        .right-panel.settings-window .right-panel-header {
            min-height: 94px;
            padding: 26px 30px 20px;
            background: transparent !important;
            border-bottom: 0;
            align-items: flex-start;
        }

        .right-panel.settings-window .right-panel-header h3 {
            position: relative;
            margin: 0;
            color: #f7fafc;
            font-size: 26px;
            line-height: 1.15;
            font-weight: 760;
            letter-spacing: -0.03em;
        }

        .right-panel.settings-window .right-panel-header h3::after {
            content: "Параметры приложения";
            display: block;
            margin-top: 8px;
            color: #aeb8c6;
            font-size: 15px;
            line-height: 1.3;
            font-weight: 500;
            letter-spacing: 0;
        }

        .right-panel.settings-window .close-panel {
            width: 40px;
            height: 40px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: #e8eef7;
            font-size: 20px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
        }

        .right-panel.settings-window .close-panel:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.18);
            transform: scale(1.04);
        }

        .right-panel.settings-window .right-panel-content {
            padding: 0 30px 30px;
            min-height: 0;
            overflow: hidden;
        }

        .settings-window-shell {
            height: 100%;
            min-height: 0;
            display: grid;
            grid-template-columns: 250px minmax(0, 1fr);
            gap: 16px;
        }

        .settings-window-nav {
            min-height: 0;
            padding: 2px 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .settings-nav-item {
            width: 100%;
            min-height: 62px;
            padding: 12px 14px;
            border: 1px solid transparent;
            border-radius: 14px;
            background: transparent;
            color: #c3ccd9;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 13px;
            text-align: left;
            font: inherit;
            font-size: 15px;
            font-weight: 640;
            transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
        }

        .settings-nav-item:hover {
            background: rgba(255, 255, 255, 0.055);
            color: #f1f6fd;
        }

        .settings-nav-item.active {
            color: #79b7ff;
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.20), rgba(255, 255, 255, 0.035));
            border-color: rgba(59, 130, 246, 0.22);
            box-shadow: inset 3px 0 0 #4f9cff;
        }

        .settings-nav-icon {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: currentColor;
            font-size: 19px;
            flex: 0 0 auto;
        }

        .settings-window-content {
            min-height: 0;
            overflow-y: auto;
            padding: 2px 2px 2px 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .settings-section {
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .settings-section[hidden] {
            display: none !important;
        }

        .settings-block {
            margin: 0;
            padding: 20px 22px;
            border-radius: 18px;
            background:
                linear-gradient(145deg, rgba(36, 43, 57, 0.94), rgba(24, 30, 42, 0.94));
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
        }

        .settings-block-title {
            margin: 0 0 10px;
            color: #f5f8fc;
            font-size: 17px;
            line-height: 1.25;
            font-weight: 740;
            letter-spacing: -0.015em;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-block-desc {
            margin: -2px 0 16px;
            color: #aeb8c6;
            font-size: 14px;
            line-height: 1.5;
            font-weight: 450;
        }

        .settings-segmented {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: rgba(10, 14, 22, 0.22);
        }

        .settings-appearance-btn {
            min-height: 96px;
            padding: 14px 10px;
            border: 0;
            border-right: 1px solid rgba(255, 255, 255, 0.09);
            background: transparent;
            color: #dce5ef;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font: inherit;
            font-size: 15px;
            font-weight: 650;
            transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease;
        }

        .settings-appearance-btn:last-child {
            border-right: 0;
        }

        .settings-appearance-btn:hover {
            background: rgba(255, 255, 255, 0.055);
        }

        .settings-appearance-btn.active {
            color: #8dc1ff;
            background: rgba(59, 130, 246, 0.12);
            box-shadow: inset 0 0 0 1px #4f9cff;
        }

        .settings-appearance-icon {
            font-size: 26px;
            line-height: 1;
        }

        .settings-dot-row,
        .settings-actions-row,
        .theme-buttons {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .theme-buttons .theme-btn,
        .settings-accent-dot {
            width: 32px;
            height: 32px;
            padding: 0;
            min-width: 32px;
            border-radius: 50%;
            border: 0;
            color: transparent;
            cursor: pointer;
            position: relative;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
            transition: transform 130ms ease, outline-color 130ms ease, box-shadow 130ms ease;
        }

        .theme-buttons .theme-btn:hover,
        .settings-accent-dot:hover {
            transform: translateY(-1px) scale(1.05);
        }

        .theme-buttons .theme-btn.active,
        .settings-accent-dot.active {
            outline: 2px solid #eaf3ff;
            outline-offset: 4px;
            box-shadow: 0 0 0 4px rgba(79, 156, 255, 0.24), 0 10px 22px rgba(0, 0, 0, 0.26);
        }

        .custom-theme-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(120px, 1fr));
            gap: 12px;
        }

        .custom-theme-grid label {
            color: #cbd5e1;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .custom-theme-grid input[type="color"] {
            width: 100%;
            height: 40px;
            padding: 3px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.06);
            cursor: pointer;
        }

        .settings-window .btn,
        .right-panel.settings-window .btn {
            min-height: 42px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 680;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.07);
            color: #dbe5f1;
            box-shadow: none;
        }

        .settings-window .btn:hover,
        .right-panel.settings-window .btn:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.11);
        }

        .settings-window .btn-accent,
        .right-panel.settings-window .btn-accent {
            border-color: rgba(79, 156, 255, 0.42);
            background: linear-gradient(180deg, #5aa2ff, #337dea);
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(51, 125, 234, 0.24);
        }

        .settings-toggle-row,
        .notification-setting-row {
            min-height: 46px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            color: #d8e1ec;
            font-size: 14px;
            line-height: 1.35;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }

        .settings-toggle-row:first-of-type,
        .notification-setting-row:first-of-type {
            border-top: 0;
        }

        .settings-toggle-row input[type="checkbox"],
        .notification-setting-row input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent);
            flex: 0 0 auto;
        }

        .settings-window .chat-search-input,
        .right-panel.settings-window .chat-search-input,
        .settings-window select,
        .right-panel.settings-window select {
            min-height: 42px;
            margin: 0;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: rgba(10, 14, 22, 0.28);
            color: #eef4fb;
            font-size: 14px;
        }

        .settings-window .empty-chat,
        .right-panel.settings-window .empty-chat {
            color: #95a2b3;
        }

        .settings-window-inline {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }



        /* === Settings light-theme readability + live personalization preview === */
        body.light-theme.settings-window-open::before {
            background: rgba(15, 23, 42, 0.22) !important;
            backdrop-filter: blur(5px) saturate(108%) !important;
            -webkit-backdrop-filter: blur(5px) saturate(108%) !important;
        }

        body.light-theme .right-panel.settings-window {
            background: linear-gradient(145deg, #f8fbff, #e8eef6) !important;
            border-color: rgba(30, 41, 59, 0.14) !important;
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.65) inset !important;
            color: #111827 !important;
        }

        body.light-theme .right-panel.settings-window .right-panel-header h3 {
            color: #0f172a !important;
            text-shadow: none !important;
        }

        body.light-theme .right-panel.settings-window .right-panel-header h3::after {
            color: #475569 !important;
        }

        body.light-theme .right-panel.settings-window .close-panel {
            background: rgba(15, 23, 42, 0.06) !important;
            color: #0f172a !important;
            border-color: rgba(15, 23, 42, 0.10) !important;
        }

        body.light-theme .right-panel.settings-window .close-panel:hover {
            background: rgba(15, 23, 42, 0.10) !important;
            border-color: rgba(15, 23, 42, 0.16) !important;
        }

        body.light-theme .settings-nav-item {
            color: #334155 !important;
            text-shadow: none !important;
        }

        body.light-theme .settings-nav-item:hover {
            background: rgba(59, 130, 246, 0.08) !important;
            color: #0f172a !important;
        }

        body.light-theme .settings-nav-item.active {
            color: #1d4ed8 !important;
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.16), rgba(255, 255, 255, 0.76)) !important;
            border-color: rgba(59, 130, 246, 0.28) !important;
            box-shadow: inset 3px 0 0 #3b82f6 !important;
        }

        body.light-theme .settings-block {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96)) !important;
            border-color: rgba(15, 23, 42, 0.10) !important;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
            color: #111827 !important;
        }

        body.light-theme .settings-block-title {
            color: #0f172a !important;
            text-shadow: none !important;
        }

        body.light-theme .settings-block-desc,
        body.light-theme .settings-toggle-row,
        body.light-theme .notification-setting-row,
        body.light-theme .custom-theme-grid label,
        body.light-theme .settings-window .empty-chat,
        body.light-theme .right-panel.settings-window .empty-chat {
            color: #475569 !important;
            text-shadow: none !important;
        }

        body.light-theme .settings-toggle-row,
        body.light-theme .notification-setting-row {
            border-top-color: rgba(15, 23, 42, 0.10) !important;
        }

        body.light-theme .settings-segmented {
            background: rgba(226, 232, 240, 0.58) !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
        }

        body.light-theme .settings-appearance-btn {
            color: #334155 !important;
            border-right-color: rgba(15, 23, 42, 0.10) !important;
        }

        body.light-theme .settings-appearance-btn:hover {
            background: rgba(255, 255, 255, 0.72) !important;
            color: #0f172a !important;
        }

        body.light-theme .settings-appearance-btn.active {
            color: #1d4ed8 !important;
            background: rgba(59, 130, 246, 0.12) !important;
            box-shadow: inset 0 0 0 1px #3b82f6 !important;
        }

        body.light-theme .settings-window .btn,
        body.light-theme .right-panel.settings-window .btn {
            background: rgba(15, 23, 42, 0.06) !important;
            color: #1f2937 !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
        }

        body.light-theme .settings-window .btn:hover,
        body.light-theme .right-panel.settings-window .btn:hover {
            background: rgba(15, 23, 42, 0.10) !important;
        }

        body.light-theme .settings-window .btn-accent,
        body.light-theme .right-panel.settings-window .btn-accent {
            background: linear-gradient(180deg, #4f9cff, #2f73df) !important;
            color: #ffffff !important;
            border-color: rgba(47, 115, 223, 0.40) !important;
            box-shadow: 0 10px 22px rgba(47, 115, 223, 0.20) !important;
        }

        body.light-theme .settings-window .chat-search-input,
        body.light-theme .right-panel.settings-window .chat-search-input,
        body.light-theme .settings-window select,
        body.light-theme .right-panel.settings-window select {
            background: rgba(255, 255, 255, 0.86) !important;
            color: #0f172a !important;
            border-color: rgba(15, 23, 42, 0.14) !important;
        }

        body.light-theme .settings-window .chat-search-input::placeholder,
        body.light-theme .right-panel.settings-window .chat-search-input::placeholder {
            color: #64748b !important;
        }

        .settings-live-preview {
            margin-top: 16px;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: #101827;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        body.light-theme .settings-live-preview {
            border-color: rgba(15, 23, 42, 0.12);
            background: #e2e8f0;
        }

        .settings-live-preview-header {
            min-height: 48px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #f8fafc;
            background: var(--preview-panel-bg, #17212b);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .settings-live-preview-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4f9cff, #7c3aed);
            flex: 0 0 auto;
        }

        .settings-live-preview-name {
            font-weight: 750;
            font-size: 13px;
            line-height: 1.15;
        }

        .settings-live-preview-status {
            margin-top: 2px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.68);
        }

        .settings-live-preview-body {
            min-height: 190px;
            padding: 18px;
            background:
                radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.06), transparent 28%),
                var(--preview-chat-bg, #0e1621);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .settings-live-preview-message {
            max-width: 72%;
            padding: 9px 12px;
            border-radius: 16px;
            font-size: 13px;
            line-height: 1.35;
            color: var(--preview-text-color, #ffffff);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
        }

        .settings-live-preview-message.theirs {
            align-self: flex-start;
            background: var(--preview-other-bubble-bg, #223247);
            border-bottom-left-radius: 5px;
        }

        .settings-live-preview-message.mine {
            align-self: flex-end;
            background: var(--preview-accent-color, #2aabee);
            color: #ffffff;
            border-bottom-right-radius: 5px;
        }

        .settings-live-preview-input {
            margin-top: auto;
            height: 38px;
            border-radius: 999px;
            background: var(--preview-panel-bg, #17212b);
            color: rgba(255, 255, 255, 0.70);
            display: flex;
            align-items: center;
            padding: 0 14px;
            font-size: 12px;
        }

        @media (max-width: 860px) {
            .right-panel.settings-window {
                width: calc(100vw - 16px) !important;
                height: calc(100dvh - 16px) !important;
                border-radius: 22px !important;
            }

            .right-panel.settings-window .right-panel-header {
                min-height: 82px;
                padding: 20px 20px 14px;
            }

            .right-panel.settings-window .right-panel-content {
                padding: 0 16px 16px;
            }

            .settings-window-shell {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .settings-window-nav {
                flex-direction: row;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .settings-nav-item {
                min-width: max-content;
                min-height: 44px;
                padding: 10px 12px;
            }

            .settings-nav-icon {
                display: none;
            }

            .settings-segmented,
            .custom-theme-grid {
                grid-template-columns: 1fr;
            }
        }

/* ===== /static/css/modules/13-final-ui-patch.css ===== */
        /* === FINAL UI PATCH: mockup settings, support composer, sidebar rail, centered personalization === */
        #sidebar {
            flex-direction: row !important;
            width: var(--sidebar-width) !important;
            min-width: 320px;
            max-width: 440px;
            background: #111b25 !important;
        }

        .desktop-nav-rail {
            width: 78px;
            flex: 0 0 78px;
            min-height: 100%;
            padding: 18px 8px 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            background: linear-gradient(180deg, #0b131d 0%, #0f1823 100%);
            border-right: 1px solid rgba(255, 255, 255, 0.06);
        }

        .desktop-nav-item {
            width: 62px;
            min-height: 70px;
            border: 0;
            border-radius: 16px;
            background: transparent;
            color: #718096;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            position: relative;
            transition: background 150ms ease, color 150ms ease, transform 120ms ease;
            font: inherit;
        }

        .desktop-nav-item:hover,
        .desktop-nav-item.active {
            background: rgba(255, 255, 255, 0.06);
            color: #dbeafe;
        }

        .desktop-nav-item:active {
            transform: scale(0.96);
        }

        .desktop-nav-icon {
            font-size: 22px;
            line-height: 1;
            filter: saturate(0.85);
        }

        .desktop-nav-item em {
            font-style: normal;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.15;
        }

        .desktop-nav-dot {
            position: absolute;
            bottom: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #2f80ed;
            box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.14);
        }

        #sidebar .brand-panel {
            height: 58px;
            padding: 0 16px;
            background: #17212b !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .right-panel.settings-window .right-panel-content {
            overflow-x: hidden !important;
        }

        .settings-window-shell {
            align-items: start;
        }

        .settings-section {
            max-width: 760px;
            width: 100%;
            margin: 0 auto;
        }

        .settings-section .settings-block {
            width: 100%;
        }

        .settings-window .custom-theme-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
            align-items: end;
        }

        .settings-window .custom-theme-grid input[type="color"] {
            height: 38px !important;
        }

        .vc-modal-card.personalization-vc-card {
            width: min(760px, calc(100vw - 32px)) !important;
            max-height: calc(100dvh - 32px) !important;
            overflow: auto;
            border-radius: 24px;
            padding: 20px;
            background: #f3f7fc;
            color: #0f172a;
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.30);
        }

        body:not(.light-theme) .vc-modal-card.personalization-vc-card {
            background: #171f2b;
            color: #f8fafc;
        }

        .personalization-vc-card h3 {
            color: inherit;
            font-size: 22px;
            font-weight: 800;
        }

        .personalization-vc-card .settings-block-desc {
            color: #475569;
        }

        body:not(.light-theme) .personalization-vc-card .settings-block-desc {
            color: #aeb8c6;
        }

        .personalization-modal {
            display: grid;
            grid-template-columns: minmax(220px, 0.82fr) minmax(320px, 1.18fr);
            gap: 18px;
            align-items: start;
        }

        .personalization-vc-card .custom-theme-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 0;
        }

        .personalization-vc-card .custom-theme-grid label {
            color: #334155;
            font-size: 13px;
            font-weight: 700;
            gap: 8px;
        }

        body:not(.light-theme) .personalization-vc-card .custom-theme-grid label {
            color: #cbd5e1;
        }

        .personalization-vc-card .custom-theme-grid input[type="color"] {
            height: 42px;
            border-radius: 12px;
            border: 1px solid rgba(15, 23, 42, 0.14);
            background: rgba(255, 255, 255, 0.75);
        }

        body:not(.light-theme) .personalization-vc-card .custom-theme-grid input[type="color"] {
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.08);
        }

        .settings-live-preview {
            margin-top: 0 !important;
            min-height: 264px;
            border-radius: 22px !important;
        }

        .settings-live-preview.theme-light-preview {
            border-color: rgba(15, 23, 42, 0.12);
            background: #dbe6f2;
        }

        .settings-live-preview.theme-light-preview .settings-live-preview-header,
        .settings-live-preview.theme-light-preview .settings-live-preview-input {
            color: #172033;
            border-color: rgba(15, 23, 42, 0.10);
        }

        .settings-live-preview.theme-light-preview .settings-live-preview-status,
        .settings-live-preview.theme-light-preview .settings-live-preview-input {
            color: rgba(30, 41, 59, 0.72);
        }

        .support-inbox-layout {
            height: min(720px, calc(100dvh - 170px)) !important;
            min-height: 0 !important;
        }

        .support-inbox-chat {
            overflow: hidden;
        }

        .support-inbox-messages {
            flex: 1 1 auto;
            min-height: 0;
            padding-bottom: 16px;
        }

        .support-inbox-composer {
            flex: 0 0 auto;
            position: sticky;
            bottom: 0;
            z-index: 4;
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) auto !important;
            align-items: end;
            background: rgba(248, 251, 255, 0.96) !important;
            box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.08);
        }

        body:not(.light-theme) .support-inbox-composer {
            background: rgba(23, 33, 43, 0.96) !important;
        }

        .support-inbox-attach-btn {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--text);
            cursor: pointer;
            font-size: 18px;
        }

        .support-inbox-file-preview {
            grid-column: 1 / -1;
            display: none;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 2px;
        }

        .support-inbox-file-preview.has-files {
            display: flex;
        }

        .support-inbox-file-chip,
        .support-inbox-attachment {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            max-width: 100%;
            padding: 7px 9px;
            border-radius: 12px;
            background: rgba(47, 128, 237, 0.11);
            color: inherit;
            text-decoration: none;
            font-size: 12px;
            border: 1px solid rgba(47, 128, 237, 0.20);
        }

        .support-inbox-file-chip button {
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 50%;
            background: rgba(15, 23, 42, 0.10);
            cursor: pointer;
        }

        .support-inbox-attachments {
            margin-top: 8px;
            display: grid;
            gap: 6px;
        }

        .support-inbox-attachment-image {
            display: block;
            max-width: min(260px, 100%);
            max-height: 180px;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.16);
        }

        .support-inbox-message.support-reply .support-inbox-attachment {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.24);
            color: #fff;
        }

        .profile-actions-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 14px 0 4px;
        }

        .profile-actions-row .btn {
            flex: 1 1 160px;
        }

        @media (max-width: 768px) {
            #sidebar {
                width: min(92vw, 390px) !important;
                min-width: 0;
            }

            .desktop-nav-rail {
                display: none;
            }

            .personalization-modal {
                grid-template-columns: 1fr;
            }

            .support-inbox-layout {
                height: auto !important;
            }

            .support-inbox-composer {
                grid-template-columns: 42px minmax(0, 1fr) !important;
            }

            .support-inbox-composer #support-inbox-send {
                grid-column: 1 / -1;
            }
        }



        .support-agent-settings-card {
            border-color: color-mix(in srgb, var(--accent, #3390ec) 52%, var(--border, #2b3b4f));
            box-shadow: 0 14px 34px color-mix(in srgb, var(--accent, #3390ec) 15%, transparent);
            background: linear-gradient(145deg,
                color-mix(in srgb, var(--accent, #3390ec) 10%, var(--surface, #172234)),
                var(--surface, #172234));
        }

        .support-agent-settings-card[data-access-state="checking"] {
            opacity: .78;
        }

        .support-agent-settings-card #open-support-inbox:disabled {
            cursor: progress;
            opacity: .65;
        }

        /* === Patch 2026-06-10: dynamic rail, scrollable settings/support, media and composer polish === */
        .desktop-nav-dot[hidden] {
            display: none !important;
        }

        .desktop-nav-dot {
            left: 50%;
            transform: translateX(-50%);
        }

        .right-panel.settings-window {
            max-height: calc(100dvh - 32px) !important;
        }

        .right-panel.settings-window .right-panel-content {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            display: flex !important;
            overflow: hidden !important;
        }

        .right-panel.settings-window[data-mode="settings"] .settings-window-shell {
            flex: 1 1 auto;
            height: 100%;
            min-height: 0;
            width: 100%;
        }

        .settings-window-nav {
            min-height: 0 !important;
            overflow-y: auto !important;
            padding-right: 6px !important;
        }

        .settings-window-content {
            min-height: 0 !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding-right: 10px !important;
        }

        .settings-window-content::-webkit-scrollbar,
        .settings-window-nav::-webkit-scrollbar,
        .support-inbox-messages::-webkit-scrollbar {
            width: 7px;
        }

        .settings-window-content::-webkit-scrollbar-thumb,
        .settings-window-nav::-webkit-scrollbar-thumb,
        .support-inbox-messages::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.45);
            border-radius: 999px;
        }

        .right-panel.support-inbox-window .right-panel-content {
            padding: 0 30px 30px !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
            display: flex !important;
            overflow: hidden !important;
        }

        .support-inbox-layout {
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            flex: 1 1 auto !important;
            display: grid !important;
            grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
            overflow: hidden !important;
        }

        .support-inbox-sidebar,
        .support-inbox-chat {
            min-height: 0 !important;
            overflow: hidden !important;
        }

        .support-inbox-rooms {
            min-height: 0 !important;
            overflow-y: auto !important;
        }

        .support-inbox-chat {
            display: flex !important;
            flex-direction: column !important;
        }

        .support-inbox-messages {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            padding: 16px !important;
        }

        .support-inbox-composer {
            flex: 0 0 auto !important;
            position: relative !important;
            bottom: auto !important;
            width: 100% !important;
            padding: 12px !important;
            border-top: 1px solid var(--border) !important;
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) 110px !important;
            gap: 10px !important;
            align-items: end !important;
        }

        .support-inbox-composer textarea {
            min-height: 42px !important;
            max-height: 118px !important;
            resize: vertical !important;
            margin: 0 !important;
        }

        .support-inbox-composer #support-inbox-send {
            height: 42px !important;
            white-space: nowrap;
        }

        .support-inbox-file-preview {
            grid-column: 1 / -1 !important;
            max-height: 96px;
            overflow-y: auto;
        }

        .vc-modal-card.personalization-vc-card {
            width: min(960px, calc(100vw - 36px)) !important;
            max-width: min(960px, calc(100vw - 36px)) !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        .personalization-modal {
            width: 100%;
            min-width: 0;
            display: grid !important;
            grid-template-columns: minmax(230px, 300px) minmax(360px, 1fr) !important;
            align-items: stretch !important;
        }

        .personalization-vc-card .custom-theme-grid {
            min-width: 0;
        }

        .settings-live-preview {
            width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        .personalization-vc-card .vc-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 16px;
        }

        .media-message-stack {
            max-width: min(680px, 82vw) !important;
        }

        .message-media-wrap {
            max-width: min(640px, 78vw) !important;
            width: fit-content !important;
            padding: 0 !important;
            overflow: visible !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .message-media-wrap .multi-attachment-collage {
            width: min(560px, 66vw) !important;
            max-width: min(560px, 66vw) !important;
            grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
            gap: 6px !important;
            border-radius: 18px !important;
            overflow: hidden !important;
        }

        .message-media-wrap .multi-attachment-collage.count-1 {
            width: min(360px, 60vw) !important;
            grid-template-columns: minmax(260px, 1fr) !important;
        }

        .message-media-wrap .attachment-collage-item {
            min-height: 190px;
            background: rgba(148, 163, 184, 0.12);
        }

        .message-media-wrap .attachment-collage-item img,
        .message-media-wrap .attachment-collage-item video {
            object-fit: cover !important;
            width: 100% !important;
            height: 100% !important;
        }

        .media-inline-caption {
            margin-top: 6px !important;
            padding: 9px 12px !important;
            border-radius: 14px !important;
            background: rgba(23, 33, 43, 0.92) !important;
            color: var(--text) !important;
        }

        .message-row.mine .media-inline-caption {
            background: rgba(76, 175, 95, 0.92) !important;
            color: #fff !important;
        }

        #input-area {
            width: min(860px, calc(100% - 32px)) !important;
            min-height: 58px !important;
            padding: 9px 12px !important;
            border-radius: 22px !important;
            gap: 9px !important;
            align-items: center !important;
            background: linear-gradient(180deg, rgba(34, 47, 63, 0.96), rgba(24, 34, 47, 0.96)) !important;
            border: 1px solid rgba(148, 163, 184, 0.22) !important;
            box-shadow: 0 14px 40px rgba(2, 8, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        }

        #input-area .emoji-btn,
        #input-area .send-btn {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            border-radius: 14px !important;
            border: 1px solid rgba(148, 163, 184, 0.20) !important;
            background: rgba(255, 255, 255, 0.055) !important;
            color: #d8e6f7 !important;
            box-shadow: none !important;
        }

        #input-area .emoji-btn:hover {
            background: rgba(59, 130, 246, 0.16) !important;
            border-color: rgba(96, 165, 250, 0.38) !important;
        }

        #input-area #msg-input {
            min-height: 40px !important;
            padding: 10px 14px !important;
            border-radius: 16px !important;
            border: 1px solid rgba(74, 222, 128, 0.22) !important;
            background: rgba(12, 21, 32, 0.72) !important;
            color: #eaf2fb !important;
        }

        #input-area #msg-input::placeholder {
            color: rgba(226, 232, 240, 0.58) !important;
        }

        #input-area #btn-send {
            border-radius: 16px !important;
            background: linear-gradient(180deg, #4f9cff, #2f80ed) !important;
            color: #fff !important;
            font-size: 16px !important;
        }

        body.light-theme #input-area {
            background: rgba(248, 251, 255, 0.96) !important;
            border-color: rgba(42, 56, 74, 0.16) !important;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
        }

        body.light-theme #input-area .emoji-btn,
        body.light-theme #input-area .send-btn {
            background: rgba(226, 234, 244, 0.88) !important;
            color: #253044 !important;
            border-color: rgba(42, 56, 74, 0.14) !important;
        }

        body.light-theme #input-area #msg-input {
            background: #ffffff !important;
            color: #111827 !important;
            border-color: rgba(47, 128, 237, 0.24) !important;
        }

        @media (max-width: 900px) {
            .personalization-modal {
                grid-template-columns: 1fr !important;
            }

            .support-inbox-layout {
                grid-template-columns: 1fr !important;
            }

            .support-inbox-sidebar {
                max-height: 220px;
            }

            .message-media-wrap .multi-attachment-collage {
                width: min(440px, 86vw) !important;
                max-width: min(440px, 86vw) !important;
                grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
            }
        }

/* SMCHAT_SUPPORT_REPORTS_LIFECYCLE_1_01_B4 */
.support-compose-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

#chat-header .support-chat-back {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text1);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

#chat-header .support-chat-back:hover {
    background: var(--surface2);
}

body.support-chat-active #btn-voice {
    display: none;
}

@media (max-width: 720px) {
    .support-compose-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== /static/css/modules/14-full-mockup-redesign.css ===== */
        /* === FULL MOCKUP REDESIGN 2026-06-11 ===
   Цель: основной экран как в согласованном макете: rail + список чатов + чистая область чата.
   Этот блок намеренно стоит последним и переопределяет старые спорные патчи. */
        :root {
            --sidebar-width: 420px;
            --mock-rail: 84px;
            --mock-list: 336px;
            --mock-bg: #07111d;
            --mock-bg-soft: #0b1623;
            --mock-panel: rgba(15, 28, 42, 0.96);
            --mock-panel-2: rgba(20, 34, 49, 0.98);
            --mock-panel-3: rgba(28, 43, 61, 0.98);
            --mock-border: rgba(255, 255, 255, 0.075);
            --mock-border-strong: rgba(255, 255, 255, 0.13);
            --mock-text: #f2f7ff;
            --mock-muted: #8f9cae;
            --mock-muted-2: #627083;
            --mock-blue: #2f8df7;
            --mock-blue-soft: rgba(47, 141, 247, 0.18);
            --mock-in: #1c2a3a;
            --mock-out: #1d5d95;
            --mock-radius: 20px;
        }

        body:not(.light-theme) {
            --bg: var(--mock-bg);
            --bg2: #101b28;
            --bg3: #1b2a3c;
            --surface: var(--mock-panel);
            --surface2: var(--mock-panel-2);
            --text: var(--mock-text);
            --text2: var(--mock-muted);
            --text3: var(--mock-muted-2);
            --border: var(--mock-border);
            --divider: rgba(255, 255, 255, 0.06);
            --accent: var(--mock-blue);
            --accent-hover: #227bdf;
            --accent-glow: rgba(47, 141, 247, 0.24);
            --header-bg: rgba(10, 20, 32, 0.72);
            background: var(--mock-bg) !important;
        }

        #messenger {
            background:
                radial-gradient(circle at 38% 14%, rgba(47, 141, 247, 0.08), transparent 30%),
                radial-gradient(circle at 78% 50%, rgba(47, 141, 247, 0.055), transparent 34%),
                var(--mock-bg) !important;
        }

        /* --- Desktop shell: exactly rail + chat list + chat area --- */
        @media (min-width: 769px) {
            #sidebar {
                width: var(--sidebar-width) !important;
                min-width: var(--sidebar-width) !important;
                max-width: var(--sidebar-width) !important;
                display: grid !important;
                grid-template-columns: var(--mock-rail) var(--mock-list) !important;
                flex-direction: initial !important;
                background: transparent !important;
                border-right: 1px solid var(--mock-border) !important;
                resize: none !important;
                overflow: hidden !important;
            }

            .desktop-nav-rail {
                width: var(--mock-rail) !important;
                flex: 0 0 var(--mock-rail) !important;
                height: 100dvh !important;
                padding: 16px 8px 12px !important;
                gap: 12px !important;
                background: linear-gradient(180deg, #08111c 0%, #0b1723 100%) !important;
                border-right: 1px solid rgba(255, 255, 255, 0.055) !important;
                box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025) !important;
            }
        }

        .desktop-nav-user-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, #2f8df7, #19c37d);
            background-position: center;
            background-size: cover;
            color: #fff;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        }

        .desktop-nav-user-avatar::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 1px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 3px #08111c;
        }

        .desktop-nav-item {
            width: 64px !important;
            min-height: 68px !important;
            border-radius: 18px !important;
            background: transparent !important;
            color: #748396 !important;
            gap: 6px !important;
            border: 1px solid transparent !important;
        }

        .desktop-nav-item:hover,
        .desktop-nav-item.active {
            background: rgba(255, 255, 255, 0.075) !important;
            color: #f2f7ff !important;
            border-color: rgba(255, 255, 255, 0.035) !important;
        }

        .desktop-nav-item.active {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 8px 22px rgba(0, 0, 0, 0.18) !important;
        }

        .desktop-nav-icon {
            font-size: 23px !important;
            filter: none !important;
        }

        .desktop-nav-item em {
            font-size: 11px !important;
            color: currentColor !important;
            opacity: 0.98 !important;
        }

        .desktop-nav-dot {
            width: 8px !important;
            height: 8px !important;
            left: 50% !important;
            bottom: 8px !important;
            transform: translateX(-50%) !important;
            background: #2f8df7 !important;
            box-shadow: 0 0 0 3px rgba(47, 141, 247, 0.16) !important;
        }

        /* --- Chat list column --- */
        #sidebar .brand-panel {
            display: none !important;
        }

        #sidebar-menu-toggle,
        .menu-toggle {
            display: none !important;
        }

        #messages-container::-webkit-scrollbar {
            width: 6px !important;
        }

        #messages-container::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.5) !important;
            border-radius: 999px !important;
        }

        /* --- Chat area --- */
        #chat-area {
            background:
                radial-gradient(circle at 72% 18%, rgba(47, 141, 247, 0.105), transparent 32%),
                linear-gradient(180deg, rgba(10, 22, 36, 0.92) 0%, rgba(6, 15, 26, 0.96) 100%) !important;
            min-width: 0 !important;
        }

        .chat-bg {
            opacity: 0.18 !important;
            filter: none !important;
        }

        #chat-header {
            min-height: 74px !important;
            height: 74px !important;
            padding: 0 22px !important;
            background: rgba(8, 18, 31, 0.72) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
            backdrop-filter: blur(18px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
        }

        #chat-user-info,
        .chat-user-info {
            padding: 6px 8px !important;
            border-radius: 16px !important;
        }

        #chat-user-info:hover,
        .chat-user-info:hover {
            background: rgba(255, 255, 255, 0.045) !important;
        }

        #chat-user-info .avatar,
        #chat-avatar {
            width: 50px !important;
            height: 50px !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        #chat-partner-name {
            color: #f2f7ff !important;
            font-size: 18px !important;
            font-weight: 850 !important;
            letter-spacing: -0.015em !important;
        }

        #chat-partner-status {
            color: #8fa0b5 !important;
            font-size: 14px !important;
        }

        #btn-header-calendar,
        #btn-scheduled-messages,
        #header-chat-search,
        #chat-date-picker {
            display: none !important;
        }

        .chat-header-icon,
        .chat-settings-btn,
        #btn-chat-settings,
        #btn-header-search {
            width: 42px !important;
            height: 42px !important;
            border-radius: 50% !important;
            background: transparent !important;
            border: 0 !important;
            color: #b4c0cf !important;
            box-shadow: none !important;
        }

        .chat-header-icon:hover,
        .chat-settings-btn:hover,
        #btn-chat-settings:hover,
        #btn-header-search:hover {
            background: rgba(255, 255, 255, 0.07) !important;
            color: #f2f7ff !important;
        }

        #messages-container {
            padding: 38px 34px 104px !important;
            gap: 6px !important;
            background: transparent !important;
        }

        .floating-date span {
            background: rgba(15, 26, 41, 0.78) !important;
            color: #cfd8e6 !important;
            padding: 7px 12px !important;
            border-radius: 999px !important;
            font-size: 12px !important;
            font-weight: 750 !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
        }

        .message-row {
            max-width: min(72%, 760px) !important;
        }

        .message-bubble {
            padding: 10px 14px !important;
            border-radius: 16px !important;
            font-size: 15px !important;
            line-height: 1.42 !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10) !important;
        }

        .message-row.theirs .message-bubble {
            background: var(--mock-in) !important;
            color: #f2f7ff !important;
            border-bottom-left-radius: 5px !important;
        }

        .message-row.mine .message-bubble {
            background: linear-gradient(135deg, #2f8df7, #1c74d6) !important;
            color: #fff !important;
            border-bottom-right-radius: 5px !important;
        }

        .message-meta,
        .message-meta-outside {
            font-size: 11px !important;
            color: rgba(225, 235, 248, 0.78) !important;
        }

        /* Media should not be squeezed into a tiny bubble */
        .media-message-stack,
        .message-row:has(.message-media-wrap),
        .message-row.mine:has(.message-media-wrap),
        .message-row.theirs:has(.message-media-wrap) {
            max-width: min(78vw, 720px) !important;
        }

        .message-media-wrap {
            width: fit-content !important;
            max-width: min(720px, 78vw) !important;
            background: transparent !important;
            padding: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .message-media-wrap .multi-attachment-collage {
            width: min(620px, 70vw) !important;
            max-width: min(620px, 70vw) !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
            gap: 6px !important;
            border-radius: 18px !important;
            overflow: hidden !important;
            background: rgba(255, 255, 255, 0.06) !important;
        }

        .message-media-wrap .multi-attachment-collage.count-1 {
            width: min(420px, 64vw) !important;
            grid-template-columns: minmax(300px, 1fr) !important;
        }

        .message-media-wrap .attachment-collage-item {
            min-height: 230px !important;
        }

        .message-media-wrap .attachment-collage-item img,
        .message-media-wrap .attachment-collage-item video,
        .message-media-wrap .media-preview {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        .media-inline-caption {
            width: fit-content !important;
            max-width: min(620px, 70vw) !important;
            margin-top: 8px !important;
            padding: 10px 13px !important;
            border-radius: 16px !important;
            background: rgba(28, 42, 58, 0.95) !important;
            color: #f2f7ff !important;
        }

        .message-row.mine .media-inline-caption {
            margin-left: auto !important;
            background: linear-gradient(135deg, #2f8df7, #1c74d6) !important;
            color: #fff !important;
        }

        /* --- Composer like target mockup --- */
        .attachment-preview-area {
            left: 34px !important;
            right: 34px !important;
            bottom: 96px !important;
        }

        #input-area {
            position: absolute !important;
            left: 26px !important;
            right: 26px !important;
            bottom: 20px !important;
            width: auto !important;
            max-width: none !important;
            min-height: 64px !important;
            margin: 0 !important;
            padding: 9px 11px !important;
            display: flex !important;
            align-items: center !important;
            gap: 9px !important;
            border-radius: 20px !important;
            background: rgba(16, 29, 43, 0.92) !important;
            border: 1px solid rgba(255, 255, 255, 0.095) !important;
            box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
            backdrop-filter: blur(16px) saturate(145%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
        }

        #input-area textarea,
        #msg-input {
            min-height: 44px !important;
            height: 44px;
            max-height: 132px !important;
            padding: 12px 16px !important;
            border-radius: 15px !important;
            background: rgba(6, 15, 26, 0.78) !important;
            border: 1px solid rgba(47, 141, 247, 0.25) !important;
            color: #f2f7ff !important;
            font-size: 15px !important;
            line-height: 1.35 !important;
            box-shadow: inset 0 0 0 1px rgba(47, 141, 247, 0.06) !important;
        }

        #input-area textarea::placeholder,
        #msg-input::placeholder {
            color: #8793a4 !important;
        }

        #input-area textarea:focus,
        #msg-input:focus {
            border-color: rgba(47, 141, 247, 0.65) !important;
            box-shadow: 0 0 0 3px rgba(47, 141, 247, 0.14), inset 0 0 0 1px rgba(47, 141, 247, 0.12) !important;
        }

        #input-area .btn,
        #input-area .emoji-btn,
        #input-area .send-btn {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            padding: 0 !important;
            border-radius: 15px !important;
            border: 1px solid rgba(255, 255, 255, 0.085) !important;
            background: rgba(31, 46, 65, 0.92) !important;
            color: #c6d1df !important;
            box-shadow: none !important;
            font-size: 18px !important;
        }

        #input-area .btn:hover,
        #input-area .emoji-btn:hover {
            background: rgba(47, 141, 247, 0.18) !important;
            border-color: rgba(47, 141, 247, 0.28) !important;
            color: #fff !important;
            transform: translateY(-1px) !important;
        }

        #btn-send.send-btn,
        #input-area .send-btn {
            background: linear-gradient(135deg, #2f8df7, #1d73d1) !important;
            color: #fff !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            font-size: 0 !important;
        }

        #btn-send.send-btn::before {
            content: "➤";
            font-size: 17px;
            transform: translateX(1px);
        }

        #btn-file {
            order: 1;
        }

        #btn-stickers {
            order: 2;
        }

        #btn-emoji {
            order: 3;
        }

        #msg-input {
            order: 4;
        }

        #btn-schedule-send {
            order: 5;
        }

        #btn-voice {
            order: 6;
        }

        #btn-send {
            order: 7;
        }

        #btn-emoji .vc-icon,
        #btn-file .vc-icon,
        #btn-voice .vc-icon,
        #btn-schedule-send .vc-icon {
            display: none !important;
        }

        #btn-file::before {
            content: "📎";
        }

        #btn-emoji::before {
            content: "☺";
            font-size: 22px;
        }

        #btn-stickers::before {
            content: "▣";
            font-size: 17px;
        }

        #btn-voice::before {
            content: "🎙";
            font-size: 17px;
        }

        #btn-schedule-send::before {
            content: "◷";
            font-size: 20px;
        }

        /* --- Settings modal remains available but no longer defines the main screen --- */
        .right-panel.settings-window {
            border-radius: 24px !important;
        }

        /* Light theme keeps contrast when user switches it */
        body.light-theme #messenger {
            background: #dfe8f3 !important;
        }

        body.light-theme .desktop-nav-rail {
            background: #dbe5f0 !important;
            border-color: rgba(30, 41, 59, 0.12) !important;
        }

        body.light-theme .desktop-nav-item {
            color: #536273 !important;
        }

        body.light-theme .desktop-nav-item:hover,
        body.light-theme .desktop-nav-item.active {
            color: #0f172a !important;
            background: rgba(47, 141, 247, 0.12) !important;
        }

        body.light-theme #input-area textarea,
        body.light-theme #msg-input {
            background: #ffffff !important;
            color: #111827 !important;
            border-color: rgba(30, 41, 59, 0.14) !important;
        }

        body.light-theme #chat-partner-name {
            color: #172033 !important;
        }

        body.light-theme #chat-partner-status {
            color: #64748b !important;
        }

        body.light-theme #chat-area {
            background: linear-gradient(180deg, #e8eef7, #dde8f4) !important;
        }

        body.light-theme #chat-header,
        body.light-theme #input-area {
            background: rgba(248, 250, 252, 0.9) !important;
            border-color: rgba(30, 41, 59, 0.12) !important;
        }

        body.light-theme .message-row.theirs .message-bubble,
        body.light-theme .media-inline-caption {
            background: #ffffff !important;
            color: #111827 !important;
        }

        body.light-theme #input-area .btn,
        body.light-theme #input-area .emoji-btn {
            background: #e7eef7 !important;
            color: #334155 !important;
            border-color: rgba(30, 41, 59, 0.12) !important;
        }

        @media (max-width: 1024px) {
            :root {
                --sidebar-width: 372px;
                --mock-list: 300px;
                --mock-rail: 72px;
            }

            .desktop-nav-item {
                width: 56px !important;
            }
        }

        @media (max-width: 768px) {
            #sidebar {
                width: min(92vw, 390px) !important;
                min-width: 0 !important;
                max-width: none !important;
                display: flex !important;
            }

            .desktop-nav-rail {
                display: none !important;
            }

            #input-area {
                left: 8px !important;
                right: 8px !important;
                bottom: calc(58px + env(safe-area-inset-bottom)) !important;
                border-radius: 18px !important;
            }

            #input-area .btn,
            #input-area .emoji-btn,
            #input-area .send-btn {
                width: 40px !important;
                min-width: 40px !important;
                height: 40px !important;
            }

            #btn-stickers,
            #btn-schedule-send {
                display: none !important;
            }

            #messages-container {
                padding: 18px 12px 116px !important;
            }

            .message-media-wrap .multi-attachment-collage {
                width: min(94vw, 420px) !important;
                grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
            }

            .message-media-wrap .attachment-collage-item {
                min-height: 150px !important;
            }
        }

/* SMCHAT_FIXED_BOTTOM_COMPOSER */

/*
 * Внешняя страница не прокручивается.
 * Прокрутка остаётся только у истории сообщений.
 */
html,
body,
#app {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden !important;
}

#messenger.active {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#chat-area,
.chat-content {
    width: 100%;
    height: 100%;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#chat-header,
#pinned-message-bar {
    flex: 0 0 auto !important;
}

/*
 * Единственный вертикально прокручиваемый блок —
 * сама история сообщений.
 */
#messages-container {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/*
 * Панель отправки всегда остаётся внизу.
 * Она не участвует в прокрутке сообщений.
 */
#input-area {
    position: absolute !important;
    left: 26px !important;
    right: 26px !important;
    bottom: 20px !important;
    top: auto !important;

    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;

    overflow: visible !important;
    z-index: 35 !important;
    transform: translateZ(0);
}

/*
 * Полосы прокрутки внутри поля ввода не отображаются.
 * При длинном тексте поле продолжает работать.
 */
#msg-input {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
}

#msg-input::-webkit-scrollbar {
    display: none;
}

/*
 * Мобильная панель также закреплена снизу
 * с учётом системной безопасной зоны.
 */
@media (max-width: 900px) {
    #messenger.active {
        height: 100dvh !important;
    }

    #input-area {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        margin: 0 !important;
    }

    #messages-container {
        padding-bottom:
            calc(
                var(--mobile-input-height, 72px)
                + 24px
                + env(safe-area-inset-bottom)
            ) !important;
    }
}

/* ===== /static/css/modules/15-current-profile.css ===== */
        /* === Patch: real current-user profile in top-left rail + fullscreen profile === */
        .rail-profile-button {
            width: 62px !important;
            height: 62px !important;
            min-height: 62px !important;
            padding: 0 !important;
            margin: 0 0 4px !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 18px !important;
            background: rgba(255, 255, 255, 0.035) !important;
            color: #fff !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;
            transition: background 150ms ease, transform 120ms ease, box-shadow 150ms ease !important;
        }

        .rail-profile-button:hover {
            background: rgba(255, 255, 255, 0.075) !important;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important;
        }

        .rail-profile-button:active {
            transform: scale(0.96) !important;
        }

        .rail-profile-avatar {
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: hidden !important;
            background: linear-gradient(135deg, #4f8cff, #29d3b2) !important;
            background-size: cover !important;
            background-position: center !important;
            color: #fff !important;
            font-size: 14px !important;
            font-weight: 850 !important;
            letter-spacing: -0.03em !important;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
            position: relative !important;
        }

        .rail-profile-button::after {
            content: "";
            position: absolute;
            right: 9px;
            bottom: 9px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #22c55e;
            border: 2px solid #0b131d;
            box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
        }

        body.profile-window-open::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 110;
            background: rgba(3, 7, 13, 0.58);
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            pointer-events: none;
        }

        .right-panel.profile-fullscreen {
            left: 24px !important;
            right: 24px !important;
            top: 24px !important;
            bottom: 24px !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            height: auto !important;
            max-height: none !important;
            resize: none !important;
            overflow: hidden !important;
            transform: none !important;
            opacity: 1 !important;
            z-index: 120 !important;
            border-radius: 28px !important;
            border: 1px solid rgba(148, 163, 184, 0.30) !important;
            background: linear-gradient(180deg, rgba(16, 25, 39, 0.98), rgba(9, 16, 28, 0.99)) !important;
            box-shadow: 0 26px 90px rgba(0, 0, 0, 0.52) !important;
        }

        .right-panel.profile-fullscreen.open {
            transform: none !important;
        }

        .right-panel.profile-fullscreen .right-panel-header {
            display: none !important;
        }

        .right-panel.profile-fullscreen .right-panel-content {
            height: 100% !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        .current-profile-shell {
            height: 100%;
            min-height: 0;
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            color: #eef5ff;
            background:
                radial-gradient(circle at 62% 18%, rgba(47, 128, 237, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(18, 31, 50, 0.98), rgba(8, 14, 24, 0.99));
        }

        .current-profile-menu {
            padding: 34px 20px 22px;
            border-right: 1px solid rgba(255, 255, 255, 0.07);
            background: linear-gradient(180deg, rgba(12, 21, 34, 0.94), rgba(8, 15, 26, 0.96));
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 0;
        }

        .current-profile-menu-btn {
            width: 100%;
            height: 52px;
            padding: 0 16px;
            border: 0;
            border-radius: 14px;
            background: transparent;
            color: #c6d0de;
            font: inherit;
            font-size: 15px;
            font-weight: 650;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: background 160ms ease, color 160ms ease, transform 120ms ease;
        }

        .current-profile-menu-btn:hover,
        .current-profile-menu-btn.active {
            color: #eaf2ff;
            background: rgba(47, 128, 237, 0.16);
        }

        .current-profile-menu-btn:active {
            transform: scale(0.985);
        }

        .current-profile-menu-btn.danger {
            margin-top: 6px;
            color: #ff6b6b;
        }

        .current-profile-menu-separator {
            height: 1px;
            margin: 10px 0;
            background: rgba(255, 255, 255, 0.08);
        }

        .current-profile-main {
            position: relative;
            min-height: 0;
            overflow-y: auto;
            padding: 54px clamp(28px, 5vw, 74px) 34px;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        }

        .current-profile-main::-webkit-scrollbar {
            width: 6px;
        }

        .current-profile-main::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.45);
            border-radius: 999px;
        }

        .current-profile-close {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 42px;
            height: 42px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: #eaf2ff;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 150ms ease, transform 120ms ease;
        }

        .current-profile-close:hover {
            background: rgba(255, 255, 255, 0.13);
        }

        .current-profile-close:active {
            transform: scale(0.94);
        }

        .current-profile-hero {
            max-width: 820px;
            margin: 0 auto 30px;
            text-align: center;
        }

        .current-profile-avatar-wrap {
            position: relative;
            width: 154px;
            height: 154px;
            margin: 0 auto 20px;
        }

        .current-profile-avatar {
            width: 154px;
            height: 154px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(135deg, #4f8cff, #29d3b2);
            background-size: cover;
            background-position: center;
            color: #fff;
            font-size: 42px;
            font-weight: 850;
            border: 2px solid rgba(71, 160, 255, 0.74);
            box-shadow: 0 18px 50px rgba(47, 128, 237, 0.22);
        }

        .current-profile-avatar-camera {
            position: absolute;
            right: 5px;
            bottom: 8px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 0;
            background: #3b8dff;
            color: #fff;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 10px 26px rgba(47, 128, 237, 0.34);
        }

        .current-profile-title {
            margin: 0 0 7px;
            color: #f8fbff;
            font-size: clamp(28px, 3.2vw, 38px);
            line-height: 1.12;
            font-weight: 850;
            letter-spacing: -0.04em;
        }

        .current-profile-login {
            color: #4a9dff;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .current-profile-status {
            color: #b7c3d2;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin-bottom: 20px;
        }

        .current-profile-status::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
        }

        .current-profile-bio {
            max-width: 560px;
            margin: 0 auto;
            color: #b8c4d3;
            font-size: 16px;
            line-height: 1.52;
        }

        .current-profile-grid {
            max-width: 880px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }

        .current-profile-card,
        .current-profile-wide-card {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.045);
            border-radius: 18px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
        }

        .current-profile-card {
            min-height: 118px;
            padding: 18px;
        }

        .current-profile-card-icon {
            color: #9aa8bc;
            font-size: 24px;
            margin-bottom: 14px;
        }

        .current-profile-card-label {
            color: #94a3b8;
            font-size: 13px;
            margin-bottom: 5px;
        }

        .current-profile-card-value {
            color: #f1f5fb;
            font-size: 16px;
            font-weight: 650;
            line-height: 1.35;
            word-break: break-word;
        }

        .current-profile-wide-card {
            max-width: 880px;
            margin: 16px auto 0;
            overflow: hidden;
        }

        .current-profile-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 16px;
            align-items: center;
            padding: 16px 18px;
        }

        .current-profile-row+.current-profile-row {
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }

        .current-profile-row-label {
            color: #94a3b8;
            font-size: 13px;
            margin-bottom: 5px;
        }

        .current-profile-row-value {
            color: #f1f5fb;
            font-size: 16px;
            font-weight: 650;
            word-break: break-word;
        }

        .current-profile-edit-btn {
            min-width: 112px;
            height: 42px;
            padding: 0 16px;
            border: 0;
            border-radius: 12px;
            background: rgba(47, 128, 237, 0.18);
            color: #70b0ff;
            font-weight: 800;
            cursor: pointer;
        }

        .current-profile-edit-btn:hover {
            background: rgba(47, 128, 237, 0.25);
        }

        @media (max-width: 920px) {
            .right-panel.profile-fullscreen {
                left: 10px !important;
                right: 10px !important;
                top: 10px !important;
                bottom: 10px !important;
                border-radius: 22px !important;
            }

            .current-profile-shell {
                grid-template-columns: 1fr;
            }

            .current-profile-menu {
                padding: 12px;
                flex-direction: row;
                overflow-x: auto;
                border-right: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .current-profile-menu-btn {
                width: auto;
                min-width: max-content;
            }

            .current-profile-menu-separator {
                display: none;
            }

            .current-profile-main {
                padding: 58px 18px 24px;
            }

            .current-profile-grid {
                grid-template-columns: 1fr;
            }
        }



        /* === Patch: fullscreen profile edit mode, no legacy side edit panel === */
        .current-profile-main.is-editing .current-profile-card {
            min-height: 132px;
        }

        .current-profile-form-grid {
            max-width: 880px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }

        .current-profile-form-card {
            border: 1px solid rgba(255, 255, 255, 0.09);
            background: rgba(255, 255, 255, 0.052);
            border-radius: 18px;
            padding: 18px;
            min-height: 118px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026);
        }

        .current-profile-form-card.wide {
            grid-column: span 3;
        }

        .current-profile-form-label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #94a3b8;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .current-profile-input,
        .current-profile-textarea {
            width: 100%;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 13px;
            background: rgba(6, 12, 22, 0.48);
            color: #f7fbff;
            outline: none;
            font: inherit;
            font-size: 15px;
            font-weight: 650;
            transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
        }

        .current-profile-input {
            height: 44px;
            padding: 0 13px;
        }

        .current-profile-textarea {
            min-height: 104px;
            resize: vertical;
            padding: 12px 13px;
            line-height: 1.45;
        }

        .current-profile-input:focus,
        .current-profile-textarea:focus {
            border-color: rgba(74, 157, 255, 0.78);
            box-shadow: 0 0 0 3px rgba(59, 141, 255, 0.16);
            background: rgba(8, 16, 29, 0.78);
        }

        .current-profile-form-hint {
            margin-top: 8px;
            color: #728197;
            font-size: 12px;
            line-height: 1.35;
        }

        .current-profile-actions-bar {
            max-width: 880px;
            margin: 18px auto 0;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.045);
        }

        .current-profile-action-primary,
        .current-profile-action-secondary {
            min-width: 128px;
            height: 44px;
            border: 0;
            border-radius: 13px;
            font: inherit;
            font-weight: 850;
            cursor: pointer;
            transition: transform 120ms ease, background 150ms ease, opacity 150ms ease;
        }

        .current-profile-action-primary {
            color: #fff;
            background: linear-gradient(135deg, #3b8dff, #24c6a8);
            box-shadow: 0 12px 30px rgba(47, 128, 237, 0.22);
        }

        .current-profile-action-secondary {
            color: #dbeafe;
            background: rgba(148, 163, 184, 0.14);
        }

        .current-profile-action-primary:hover,
        .current-profile-action-secondary:hover {
            opacity: 0.92;
        }

        .current-profile-action-primary:active,
        .current-profile-action-secondary:active {
            transform: scale(0.975);
        }

        .current-profile-action-primary:disabled {
            opacity: 0.58;
            cursor: wait;
        }

        .current-profile-avatar-camera.editing {
            background: #24c6a8;
        }

        .current-profile-edit-file {
            display: none !important;
        }

        body.light-theme .right-panel.profile-fullscreen {
            background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(231, 238, 248, 0.98)) !important;
            border-color: rgba(30, 41, 59, 0.14) !important;
        }

        body.light-theme .current-profile-shell {
            color: #132033;
            background:
                radial-gradient(circle at 62% 18%, rgba(59, 130, 246, 0.14), transparent 34%),
                linear-gradient(135deg, rgba(245, 248, 252, 0.98), rgba(226, 234, 246, 0.98));
        }

        body.light-theme .current-profile-menu {
            background: rgba(237, 242, 250, 0.84);
            border-right-color: rgba(30, 41, 59, 0.12);
        }

        body.light-theme .current-profile-menu-btn {
            color: #334155;
        }

        body.light-theme .current-profile-menu-btn:hover,
        body.light-theme .current-profile-menu-btn.active {
            color: #0f172a;
            background: rgba(59, 130, 246, 0.13);
        }

        body.light-theme .current-profile-title,
        body.light-theme .current-profile-card-value,
        body.light-theme .current-profile-row-value {
            color: #0f172a;
        }

        body.light-theme .current-profile-bio,
        body.light-theme .current-profile-status,
        body.light-theme .current-profile-card-label,
        body.light-theme .current-profile-row-label,
        body.light-theme .current-profile-form-label {
            color: #475569;
        }

        body.light-theme .current-profile-card,
        body.light-theme .current-profile-wide-card,
        body.light-theme .current-profile-form-card,
        body.light-theme .current-profile-actions-bar {
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(30, 41, 59, 0.12);
        }

        body.light-theme .current-profile-input,
        body.light-theme .current-profile-textarea {
            color: #0f172a;
            background: rgba(255, 255, 255, 0.86);
            border-color: rgba(100, 116, 139, 0.26);
        }

        body.light-theme .current-profile-action-secondary {
            color: #1e293b;
            background: rgba(148, 163, 184, 0.22);
        }

        @media (max-width: 980px) {
            .current-profile-form-grid {
                grid-template-columns: 1fr;
            }

            .current-profile-form-card.wide {
                grid-column: auto;
            }

            .current-profile-actions-bar {
                flex-direction: column-reverse;
            }

            .current-profile-action-primary,
            .current-profile-action-secondary {
                width: 100%;
            }
        }



        /* === Patch: profile rail/avatar, fullscreen profile menu collapse/pin, status selector === */
        #brand-home {
            display: none !important;
        }

        .desktop-nav-rail {
            padding-top: 12px !important;
        }

        .rail-profile-button {
            order: 0 !important;
        }

        .rail-profile-avatar {
            background-size: cover !important;
            background-position: center !important;
        }

        .rail-profile-button[data-presence="online"]::after,
        .rail-profile-button[data-presence="free"]::after {
            background: #22c55e !important;
        }

        .rail-profile-button[data-presence="away"]::after {
            background: #fbbf24 !important;
        }

        .rail-profile-button[data-presence="busy"]::after {
            background: #ef4444 !important;
        }

        .rail-profile-button[data-presence="offline"]::after {
            background: #94a3b8 !important;
        }

        .current-profile-shell {
            grid-template-columns: 82px minmax(0, 1fr) !important;
            transition: grid-template-columns 180ms ease !important;
        }

        .current-profile-shell.menu-pinned {
            grid-template-columns: 280px minmax(0, 1fr) !important;
        }

        .current-profile-menu {
            width: 82px !important;
            overflow: hidden !important;
            transition: width 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
            z-index: 5 !important;
        }

        .current-profile-menu:hover,
        .current-profile-shell.menu-pinned .current-profile-menu,
        .current-profile-menu:focus-within {
            width: 280px !important;
            box-shadow: 18px 0 34px rgba(0, 0, 0, 0.26) !important;
        }

        .current-profile-menu-btn,
        .current-profile-menu-pin {
            justify-content: flex-start !important;
            white-space: nowrap !important;
        }

        .current-profile-menu-btn>span:first-child,
        .current-profile-menu-pin>span:first-child {
            min-width: 22px !important;
            width: 22px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .current-profile-menu-btn>span:last-child,
        .current-profile-menu-pin>span:last-child {
            opacity: 0 !important;
            max-width: 0 !important;
            overflow: hidden !important;
            transition: opacity 140ms ease, max-width 160ms ease !important;
        }

        .current-profile-menu:hover .current-profile-menu-btn>span:last-child,
        .current-profile-menu:focus-within .current-profile-menu-btn>span:last-child,
        .current-profile-shell.menu-pinned .current-profile-menu-btn>span:last-child,
        .current-profile-menu:hover .current-profile-menu-pin>span:last-child,
        .current-profile-menu:focus-within .current-profile-menu-pin>span:last-child,
        .current-profile-shell.menu-pinned .current-profile-menu-pin>span:last-child {
            opacity: 1 !important;
            max-width: 210px !important;
        }

        .current-profile-menu-pin {
            width: 100%;
            height: 42px;
            margin: 0 0 10px;
            padding: 0 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.04);
            color: #9fb2cb;
            font: inherit;
            font-size: 13px;
            font-weight: 750;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
        }

        .current-profile-shell.menu-pinned .current-profile-menu-pin {
            color: #eaf2ff;
            background: rgba(47, 128, 237, 0.16);
        }

        .current-profile-status-line {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
        }

        .profile-presence-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            display: inline-block;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
        }

        .profile-presence-dot.online,
        .profile-presence-dot.free {
            background: #22c55e;
        }

        .profile-presence-dot.away {
            background: #fbbf24;
        }

        .profile-presence-dot.busy {
            background: #ef4444;
        }

        .profile-presence-dot.offline {
            background: #94a3b8;
        }

        .profile-status-picker {
            display: grid;
            grid-template-columns: repeat(4, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }

        .profile-status-option {
            min-height: 44px;
            padding: 9px 10px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.045);
            color: #d9e6f7;
            font: inherit;
            font-size: 13px;
            font-weight: 750;
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
        }

        .profile-status-option.active {
            border-color: rgba(47, 141, 247, 0.6);
            background: rgba(47, 141, 247, 0.16);
            color: #ffffff;
        }

        .current-profile-main-edit-hidden {
            display: none !important;
        }

        body.light-theme .current-profile-menu-pin,
        body.light-theme .profile-status-option {
            color: #334155;
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(30, 41, 59, 0.12);
        }

        body.light-theme .current-profile-shell.menu-pinned .current-profile-menu-pin,
        body.light-theme .profile-status-option.active {
            color: #0f172a;
            background: rgba(59, 130, 246, 0.13);
        }

        @media (max-width: 980px) {

            .current-profile-shell,
            .current-profile-shell.menu-pinned {
                grid-template-columns: 1fr !important;
            }

            .current-profile-menu {
                width: 100% !important;
                min-height: auto !important;
                flex-direction: row !important;
                overflow-x: auto !important;
                padding: 12px !important;
                border-right: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            }

            .current-profile-menu-btn,
            .current-profile-menu-pin {
                width: auto !important;
                min-width: 48px !important;
            }

            .current-profile-menu-btn>span:last-child,
            .current-profile-menu-pin>span:last-child {
                opacity: 1 !important;
                max-width: 180px !important;
            }

            .profile-status-picker {
                grid-template-columns: 1fr 1fr;
            }
        }



        /* === Final patch: clean rail avatar + autohide navigation rail === */
        .desktop-nav-user-avatar {
            display: none !important;
        }

        .desktop-nav-pin {
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            margin-top: auto !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 14px !important;
            background: rgba(47, 141, 247, 0.14) !important;
            color: #eaf2ff !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            font-size: 18px !important;
            transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease !important;
        }

        .desktop-nav-pin:hover,
        .desktop-nav-pin.active {
            background: rgba(47, 141, 247, 0.28) !important;
            box-shadow: 0 10px 24px rgba(47, 141, 247, 0.18) !important;
        }

        .desktop-nav-pin:active {
            transform: scale(0.95) !important;
        }

        .rail-profile-button {
            margin-bottom: 12px !important;
        }

        .rail-profile-button .rail-profile-avatar {
            background-size: cover !important;
            background-position: center !important;
        }

        @media (min-width: 769px) {
            body.desktop-nav-autohide #sidebar {
                width: calc(var(--mock-list) + 12px) !important;
                min-width: calc(var(--mock-list) + 12px) !important;
                max-width: calc(var(--mock-list) + 12px) !important;
                grid-template-columns: 12px var(--mock-list) !important;
                overflow: visible !important;
            }

            body.desktop-nav-autohide .desktop-nav-rail {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                bottom: 0 !important;
                z-index: 90 !important;
                transform: translateX(calc(-1 * (var(--mock-rail) - 12px))) !important;
                transition: transform 190ms ease, box-shadow 190ms ease !important;
                will-change: transform !important;
            }

            body.desktop-nav-autohide .desktop-nav-rail:hover,
            body.desktop-nav-autohide .desktop-nav-rail:focus-within {
                transform: translateX(0) !important;
                box-shadow: 18px 0 36px rgba(0, 0, 0, 0.34) !important;
            }

            body.desktop-nav-pinned #sidebar {
                width: var(--sidebar-width) !important;
                min-width: var(--sidebar-width) !important;
                max-width: var(--sidebar-width) !important;
                grid-template-columns: var(--mock-rail) var(--mock-list) !important;
                overflow: hidden !important;
            }

            body.desktop-nav-pinned .desktop-nav-rail {
                position: relative !important;
                transform: translateX(0) !important;
                z-index: 1 !important;
                box-shadow: none !important;
            }

        }

        /* Profile window menu is always clean: no pin item inside profile */
        .current-profile-menu-pin {
            display: none !important;
        }

        .current-profile-shell,
        .current-profile-shell.menu-pinned {
            grid-template-columns: 244px minmax(0, 1fr) !important;
        }

        .current-profile-menu,
        .current-profile-shell.menu-pinned .current-profile-menu,
        .current-profile-menu:hover,
        .current-profile-menu:focus-within {
            width: 244px !important;
            overflow: visible !important;
            box-shadow: none !important;
        }

        .current-profile-menu-btn>span:last-child,
        .current-profile-menu:hover .current-profile-menu-btn>span:last-child,
        .current-profile-menu:focus-within .current-profile-menu-btn>span:last-child,
        .current-profile-shell.menu-pinned .current-profile-menu-btn>span:last-child {
            opacity: 1 !important;
            max-width: 190px !important;
        }

        .current-profile-status-line::before {
            display: none !important;
        }

        @media (max-width: 980px) {

            .current-profile-shell,
            .current-profile-shell.menu-pinned {
                grid-template-columns: 1fr !important;
            }
        }

/* ===== /static/css/modules/16-right-panel-auth-video-groups.css ===== */
        /* =========================================================
   FINAL RIGHT CHAT SIDE PANEL: attachments <-> profile
   Replaces old attachment/profile right panel visuals.
   ========================================================= */
        #right-panel.sm-chat-side-panel {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: auto !important;
            width: min(440px, 31vw) !important;
            min-width: 390px !important;
            max-width: 460px !important;
            border-radius: 24px 0 0 24px !important;
            border-left: 1px solid rgba(148, 163, 184, 0.16) !important;
            background:
                radial-gradient(circle at 30% 0%, rgba(42, 139, 242, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(15, 28, 43, 0.98), rgba(10, 20, 32, 0.99)) !important;
            box-shadow: -24px 0 70px rgba(0, 0, 0, 0.38) !important;
            backdrop-filter: blur(18px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
            transform: translateX(106%) !important;
            transition: transform 220ms ease, opacity 220ms ease !important;
            opacity: 0;
            resize: none !important;
            overflow: hidden !important;
            z-index: 120 !important;
        }

        #right-panel.sm-chat-side-panel.open {
            transform: translateX(0) !important;
            opacity: 1;
        }

        #right-panel.sm-chat-side-panel .right-panel-header {
            display: none !important;
        }

        #right-panel.sm-chat-side-panel #panel-content {
            height: 100%;
            padding: 0 !important;
            overflow: hidden !important;
            color: #eaf2ff;
        }

        .sm-side-shell {
            height: 100%;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .sm-side-header {
            min-height: 64px;
            padding: 20px 22px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex: 0 0 auto;
        }

        .sm-side-title-row {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 10px;
        }

        .sm-side-title {
            margin: 0;
            color: #f8fbff;
            font-size: 21px;
            line-height: 1.15;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .sm-side-icon-btn {
            width: 36px;
            height: 36px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.05);
            color: #c7d2e4;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 150ms ease, color 150ms ease, transform 120ms ease;
        }

        .sm-side-icon-btn:hover {
            background: rgba(255, 255, 255, 0.10);
            color: #ffffff;
        }

        .sm-side-icon-btn:active {
            transform: scale(0.96);
        }

        .sm-side-content {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 0 18px 18px;
        }

        .sm-side-card {
            border: 1px solid rgba(148, 163, 184, 0.13);
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(29, 45, 64, 0.76), rgba(17, 31, 47, 0.82));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 34px rgba(0, 0, 0, 0.12);
        }

        .sm-side-peer-card {
            width: 100%;
            border: 1px solid rgba(148, 163, 184, 0.13);
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(31, 48, 69, 0.78), rgba(18, 33, 50, 0.90));
            padding: 14px;
            display: flex;
            align-items: center;
            gap: 14px;
            color: inherit;
            cursor: pointer;
            text-align: left;
            transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
        }

        .sm-side-peer-card:hover {
            background: linear-gradient(180deg, rgba(42, 64, 91, 0.82), rgba(22, 40, 60, 0.92));
            border-color: rgba(59, 130, 246, 0.42);
        }

        .sm-side-peer-card:active {
            transform: translateY(1px);
        }

        .sm-side-peer-avatar {
            width: 56px;
            height: 56px;
            flex: 0 0 56px;
            border-radius: 18px;
            object-fit: cover;
            background-size: cover;
            background-position: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            font-size: 18px;
            overflow: hidden;
        }

        .sm-side-peer-main {
            min-width: 0;
            flex: 1;
        }

        .sm-side-peer-name {
            color: #f8fbff;
            font-size: 17px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-side-peer-meta {
            color: #9eb2c9;
            font-size: 13px;
            margin-top: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-side-peer-chevron {
            color: #9badc4;
            font-size: 24px;
            line-height: 1;
        }

        .sm-side-tabs {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
            padding: 4px;
            margin: 14px 0 14px;
            border-radius: 17px;
            background: rgba(12, 25, 40, 0.72);
            border: 1px solid rgba(148, 163, 184, 0.12);
        }

        .sm-side-tab {
            min-height: 38px;
            border: 0;
            border-radius: 13px;
            background: transparent;
            color: #a8b7ca;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
        }

        .sm-side-tab.active {
            color: #eaf4ff;
            background: linear-gradient(180deg, rgba(42, 139, 242, 0.42), rgba(26, 94, 173, 0.45));
            box-shadow: 0 8px 22px rgba(35, 128, 245, 0.20);
        }

        .sm-side-tools {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 16px;
        }

        .sm-side-search {
            flex: 1;
            min-width: 0;
            height: 38px;
            border-radius: 13px;
            border: 1px solid rgba(148, 163, 184, 0.13);
            background: rgba(7, 17, 29, 0.50);
            color: #eaf2ff;
            padding: 0 12px;
            outline: none;
        }

        .sm-side-period {
            min-width: 112px;
            height: 38px;
            border-radius: 13px;
            border: 1px solid rgba(148, 163, 184, 0.13);
            background: rgba(7, 17, 29, 0.50);
            color: #b5c3d6;
            padding: 0 10px;
            outline: none;
        }

        .sm-side-section {
            margin: 18px 0 0;
        }

        .sm-side-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 0 0 10px;
        }

        .sm-side-section-title {
            color: #dbeafe;
            font-size: 15px;
            font-weight: 800;
        }

        .sm-side-link-btn {
            border: 0;
            background: transparent;
            color: #3b94ff;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }

        .sm-side-attachments-panel .media-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 8px !important;
        }

        .sm-side-attachments-panel .media-grid-item {
            border: 0 !important;
            border-radius: 10px !important;
            background: rgba(255, 255, 255, 0.06) !important;
            aspect-ratio: 1.08 / 0.82 !important;
            overflow: hidden !important;
        }

        .sm-side-attachments-panel .attachment-list,
        .sm-side-attachments-panel .links-list {
            gap: 8px !important;
        }

        .sm-side-attachments-panel .attachment-row,
        .sm-side-attachments-panel .link-item {
            border-radius: 14px !important;
            background: rgba(255, 255, 255, 0.055) !important;
            border: 1px solid rgba(148, 163, 184, 0.11) !important;
        }

        .sm-side-profile-hero {
            padding: 28px 18px 22px;
            text-align: center;
        }

        .sm-side-profile-avatar {
            width: 132px;
            height: 132px;
            margin: 0 auto 18px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: 900;
            color: #fff;
            clip-path: polygon(26% 2%, 74% 2%, 98% 28%, 92% 76%, 64% 98%, 25% 92%, 2% 62%, 8% 24%);
            border: 2px solid rgba(226, 232, 240, 0.36);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(59, 130, 246, 0.12);
        }

        .sm-side-profile-name {
            color: #ffffff;
            font-size: 28px;
            font-weight: 900;
            line-height: 1.12;
            letter-spacing: -0.03em;
        }

        .sm-side-profile-login {
            color: #61a7ff;
            margin-top: 6px;
            font-size: 16px;
            font-weight: 700;
        }

        .sm-side-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #7dd87f;
            margin-top: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .sm-side-status::before {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
        }

        .sm-side-profile-about {
            color: #bdc8d8;
            max-width: 310px;
            margin: 24px auto 0;
            line-height: 1.45;
            font-size: 14px;
        }

        .sm-side-actions {
            display: grid;
            gap: 10px;
            margin-top: 16px;
        }

        .sm-side-action {
            height: 42px;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.14);
            background: rgba(255, 255, 255, 0.04);
            color: #dbeafe;
            font-weight: 800;
            cursor: pointer;
        }

        .sm-side-action.primary {
            color: #fff;
            background: linear-gradient(180deg, #2f9bff, #1676df);
            border-color: rgba(69, 149, 255, 0.60);
            box-shadow: 0 12px 26px rgba(34, 139, 255, 0.24);
        }

        .sm-side-action.danger {
            color: #ff7777;
            border-color: rgba(248, 113, 113, 0.32);
        }

        .sm-side-info-list {
            display: grid;
            gap: 0;
            overflow: hidden;
        }

        .sm-side-info-row {
            display: grid;
            grid-template-columns: 30px 1fr auto;
            align-items: center;
            gap: 10px;
            min-height: 48px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.10);
        }

        .sm-side-info-row:last-child {
            border-bottom: 0;
        }

        .sm-side-info-icon {
            color: #9fb0c5;
            font-size: 17px;
        }

        .sm-side-info-label {
            color: #9fb0c5;
            font-size: 13px;
        }

        .sm-side-info-value {
            color: #dce8f8;
            font-size: 13px;
            text-align: right;
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-side-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sm-side-chip {
            padding: 8px 11px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.06);
            color: #dce8f8;
            font-size: 13px;
        }


        .sm-common-groups-list {
            display: grid;
            gap: 8px;
        }

        .sm-common-group-row {
            width: 100%;
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto;
            align-items: center;
            gap: 11px;
            min-height: 58px;
            padding: 8px 10px;
            border: 1px solid rgba(148, 163, 184, 0.12);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.045);
            color: inherit;
            text-align: left;
            cursor: pointer;
            transition: background .16s ease, border-color .16s ease, transform .16s ease;
        }

        .sm-common-group-row:hover {
            background: rgba(59, 148, 255, 0.10);
            border-color: rgba(59, 148, 255, 0.32);
            transform: translateY(-1px);
        }

        .sm-common-group-avatar {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            background-size: cover;
            background-position: center;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        }

        .sm-common-group-main {
            min-width: 0;
            display: grid;
            gap: 3px;
        }

        .sm-common-group-title {
            color: #edf5ff;
            font-size: 14px;
            line-height: 1.25;
            font-weight: 800;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sm-common-group-login {
            color: #68aaff;
            font-size: 12px;
            line-height: 1.2;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sm-common-group-meta {
            color: #8999ad;
            font-size: 11px;
            line-height: 1.2;
        }

        .sm-common-group-chevron {
            color: #7f91a8;
            font-size: 22px;
            line-height: 1;
        }

        .sm-common-groups-state {
            padding: 11px 4px;
            color: #91a1b5;
            font-size: 13px;
            line-height: 1.4;
        }

        body.light-theme .sm-common-group-row {
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(15, 23, 42, 0.10);
        }

        body.light-theme .sm-common-group-title {
            color: #142033;
        }

        body.light-theme .sm-common-group-meta,
        body.light-theme .sm-common-groups-state {
            color: #64748b;
        }

        body.light-theme #right-panel.sm-chat-side-panel {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(238, 244, 251, 0.99)) !important;
            color: #142033 !important;
            border-left-color: rgba(15, 23, 42, 0.12) !important;
        }

        body.light-theme #right-panel.sm-chat-side-panel #panel-content,
        body.light-theme .sm-side-title,
        body.light-theme .sm-side-peer-name,
        body.light-theme .sm-side-section-title,
        body.light-theme .sm-side-profile-name {
            color: #142033 !important;
        }

        body.light-theme .sm-side-card,
        body.light-theme .sm-side-peer-card {
            background: rgba(255, 255, 255, 0.78) !important;
            border-color: rgba(15, 23, 42, 0.10) !important;
        }

        body.light-theme .sm-side-peer-meta,
        body.light-theme .sm-side-profile-about,
        body.light-theme .sm-side-info-label {
            color: #526172 !important;
        }

        @media (max-width: 980px) {
            #right-panel.sm-chat-side-panel {
                width: min(420px, 92vw) !important;
                min-width: min(360px, 92vw) !important;
                max-width: 92vw !important;
            }
        }

        @media (max-width: 768px) {
            #right-panel.sm-chat-side-panel {
                width: 100vw !important;
                min-width: 0 !important;
                max-width: none !important;
                border-radius: 0 !important;
            }
        }
    

        /* ===== SmChat minimal auth redesign ===== */
        #auth-screen {
            position: fixed !important;
            inset: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 32px 18px !important;
            background:
                radial-gradient(circle at 50% 18%, rgba(42, 171, 238, 0.075), transparent 28%),
                radial-gradient(circle at 50% 92%, rgba(59, 130, 246, 0.045), transparent 34%),
                linear-gradient(135deg, #101923 0%, #0d1620 48%, #09131d 100%) !important;
            overflow: auto !important;
        }

        #auth-screen .auth-bg {
            position: fixed !important;
            inset: 0 !important;
            z-index: -1 !important;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,0.012) 1px, transparent 1px) !important;
            background-size: 72px 72px !important;
            opacity: 0.22 !important;
            animation: none !important;
        }

        #auth-card.sm-auth-card {
            width: min(100%, 455px) !important;
            max-width: 455px !important;
            min-height: auto !important;
            margin: auto !important;
            padding: 34px 34px 30px !important;
            border-radius: 22px !important;
            background: linear-gradient(180deg, rgba(19, 31, 44, 0.92), rgba(14, 25, 36, 0.9)) !important;
            border: 1px solid rgba(71, 124, 166, 0.34) !important;
            box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important;
            backdrop-filter: blur(18px) saturate(118%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
            text-align: left !important;
        }

        .sm-auth-title {
            text-align: center;
            margin-bottom: 28px;
        }

        #auth-card.sm-auth-card h1 {
            margin: 0 !important;
            font-size: 2rem !important;
            line-height: 1.05 !important;
            font-weight: 800 !important;
            color: #f8fafc !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: currentColor !important;
            letter-spacing: -0.04em;
        }

        .sm-auth-title p {
            margin: 12px 0 0;
            color: #9eabb9;
            font-size: 1rem;
            font-weight: 500;
        }

        .sm-auth-section-title {
            margin: -6px 0 20px;
            text-align: center;
            color: #a8b5c5;
            font-size: 0.92rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        #auth-card.sm-auth-card .input-group {
            margin-bottom: 15px !important;
        }

        #auth-card.sm-auth-card .input-group label {
            display: block;
            margin: 0 0 8px !important;
            color: #9aa7b6 !important;
            font-size: 0.74rem !important;
            font-weight: 800 !important;
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        #auth-card.sm-auth-card .input-group input {
            width: 100% !important;
            height: 44px !important;
            padding: 0 15px !important;
            border-radius: 11px !important;
            border: 1px solid rgba(108, 133, 158, 0.16) !important;
            background: rgba(28, 45, 64, 0.78) !important;
            color: #edf4fb !important;
            outline: none !important;
            font-size: 0.94rem !important;
            box-shadow: none !important;
            transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
        }

        #auth-card.sm-auth-card .input-group input::placeholder {
            color: rgba(195, 207, 220, 0.48) !important;
        }

        #auth-card.sm-auth-card .input-group input:focus {
            border-color: rgba(51, 144, 236, 0.66) !important;
            background: rgba(25, 42, 60, 0.92) !important;
            box-shadow: 0 0 0 4px rgba(51, 144, 236, 0.11) !important;
        }

        #auth-card.sm-auth-card .password-show-check {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            margin-top: 9px !important;
            color: #aab6c4 !important;
            font-size: 0.78rem !important;
            font-weight: 700 !important;
            text-transform: uppercase;
            cursor: pointer;
        }

        #auth-card.sm-auth-card .password-show-check input {
            width: 16px !important;
            height: 16px !important;
            accent-color: #3390ec;
        }

        #register-form .input-group.password-toggle-wrap .password-show-check {
            display: none !important;
        }

        #register-form .input-group.password-toggle-wrap:nth-of-type(5) .password-show-check {
            display: inline-flex !important;
        }

        .sm-auth-primary {
            height: 46px !important;
            border-radius: 11px !important;
            background: linear-gradient(180deg, #3b9cff, #1e7ee8) !important;
            color: #fff !important;
            font-size: 0.94rem !important;
            font-weight: 800 !important;
            box-shadow: 0 14px 28px rgba(30, 126, 232, 0.24) !important;
        }

        .sm-auth-secondary {
            height: 44px !important;
            border-radius: 11px !important;
            border: 1px solid rgba(112, 137, 164, 0.16) !important;
            background: rgba(28, 45, 64, 0.56) !important;
            color: #edf4fb !important;
            font-weight: 800 !important;
            box-shadow: none !important;
        }

        .sm-auth-secondary:hover,
        .sm-auth-primary:hover {
            transform: translateY(-1px) !important;
            opacity: 0.94 !important;
        }

        .sm-auth-btn-icon {
            opacity: 0.9;
            font-size: 1rem;
        }

        .sm-auth-divider {
            height: 1px;
            margin: 22px 0 16px;
            background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.2), transparent);
        }

        #auth-card.sm-auth-card .toggle-link,
        .sm-auth-link {
            margin: 0 !important;
            text-align: center !important;
            color: #9aa9ba !important;
            text-decoration: none !important;
            font-size: 0.88rem !important;
        }

        #auth-card.sm-auth-card .toggle-link span,
        #auth-card.sm-auth-card .toggle-link:hover {
            color: #3b9cff !important;
            text-decoration: none !important;
        }

        #auth-card.sm-auth-card .error-msg {
            min-height: 18px;
            margin-top: 10px !important;
            color: #ffb4b4 !important;
            text-align: center;
            font-size: 0.82rem;
        }

        #auth-card.sm-auth-card .version {
            right: 18px !important;
            bottom: 14px !important;
            color: rgba(154, 169, 186, 0.54) !important;
            font-size: 0.72rem !important;
        }

        @media (max-width: 520px) {
            #auth-screen {
                align-items: flex-start !important;
                padding-top: 18px !important;
            }

            #auth-card.sm-auth-card {
                padding: 28px 20px 26px !important;
                border-radius: 20px !important;
            }

            #auth-card.sm-auth-card h1 {
                font-size: 1.8rem !important;
            }
        }


        /* ===== SmChat auth v2 final: closer to approved mockup ===== */
        #auth-screen.sm-auth-minimal-screen,
        #auth-screen {
            position: fixed !important;
            inset: 0 !important;
            min-height: 100dvh !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 32px 16px !important;
            overflow: auto !important;
            background:
                radial-gradient(circle at 50% 26%, rgba(43, 103, 160, 0.14), transparent 34%),
                radial-gradient(circle at 50% 78%, rgba(12, 23, 36, 0.42), transparent 42%),
                linear-gradient(135deg, #121d28 0%, #0d1722 48%, #09131d 100%) !important;
        }

        #auth-screen .auth-bg {
            position: fixed !important;
            inset: 0 !important;
            z-index: -1 !important;
            background:
                radial-gradient(circle at 48% 50%, rgba(255,255,255,0.035), transparent 22%),
                linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,0.01) 1px, transparent 1px) !important;
            background-size: auto, 82px 82px, 82px 82px !important;
            opacity: 0.42 !important;
            animation: none !important;
        }

        #auth-card.sm-auth-card.sm-auth-v2,
        #auth-card.sm-auth-card {
            width: min(100%, 548px) !important;
            max-width: 548px !important;
            min-height: auto !important;
            margin: auto !important;
            padding: 48px 56px 42px !important;
            border-radius: 22px !important;
            background: linear-gradient(180deg, rgba(19, 31, 44, 0.88), rgba(14, 25, 36, 0.86)) !important;
            border: 1px solid rgba(74, 128, 170, 0.38) !important;
            box-shadow: 0 30px 110px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important;
            backdrop-filter: blur(18px) saturate(112%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
            text-align: left !important;
            position: relative !important;
        }

        #auth-card.sm-auth-card .sm-auth-title {
            text-align: center !important;
            margin: 0 0 34px !important;
        }

        .sm-auth-logo {
            width: 78px !important;
            height: 78px !important;
            margin: 0 auto 22px !important;
            border-radius: 23px !important;
            display: grid !important;
            place-items: center !important;
            color: #fff !important;
            font-size: 1.78rem !important;
            font-weight: 850 !important;
            letter-spacing: -0.04em !important;
            background: linear-gradient(145deg, #2aa6ff 0%, #1d66dc 100%) !important;
            box-shadow: 0 18px 38px rgba(31, 120, 242, 0.24) !important;
        }

        #auth-card.sm-auth-card h1 {
            margin: 0 !important;
            font-size: 2.18rem !important;
            line-height: 1.05 !important;
            font-weight: 850 !important;
            color: #f8fafc !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: currentColor !important;
            letter-spacing: -0.045em !important;
            text-align: center !important;
        }

        #auth-card.sm-auth-card .sm-auth-title p {
            margin: 14px 0 0 !important;
            color: #a4b1c1 !important;
            font-size: 1.05rem !important;
            font-weight: 500 !important;
        }

        #register-form .sm-auth-section-title,
        #auth-card.sm-auth-card .sm-auth-section-title {
            margin: -18px 0 24px !important;
            text-align: center !important;
            color: #a8b5c5 !important;
            font-size: 0.96rem !important;
            font-weight: 850 !important;
            letter-spacing: 0.035em !important;
            text-transform: uppercase !important;
        }

        #auth-card.sm-auth-card .input-group.sm-auth-field,
        #auth-card.sm-auth-card .input-group {
            margin-bottom: 18px !important;
        }

        #auth-card.sm-auth-card .input-group label {
            display: block !important;
            margin: 0 0 8px !important;
            color: #9aa7b6 !important;
            font-size: 0.76rem !important;
            font-weight: 850 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.025em !important;
        }

        .sm-auth-input-wrap {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
        }

        .sm-auth-input-icon {
            position: absolute !important;
            left: 16px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: rgba(201, 213, 227, 0.7) !important;
            font-size: 1rem !important;
            pointer-events: none !important;
            z-index: 1 !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap input,
        #auth-card.sm-auth-card .input-group input {
            width: 100% !important;
            height: 50px !important;
            padding: 0 16px !important;
            border-radius: 10px !important;
            border: 1px solid rgba(113, 141, 169, 0.28) !important;
            background: rgba(17, 32, 47, 0.58) !important;
            color: #edf4fb !important;
            outline: none !important;
            font-size: 0.96rem !important;
            box-shadow: none !important;
            transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
        }

        #login-form .sm-auth-input-wrap input {
            padding-left: 46px !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap input::placeholder,
        #auth-card.sm-auth-card .input-group input::placeholder {
            color: rgba(200, 212, 226, 0.58) !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap input:focus,
        #auth-card.sm-auth-card .input-group input:focus {
            border-color: rgba(64, 150, 239, 0.7) !important;
            background: rgba(18, 34, 50, 0.78) !important;
            box-shadow: 0 0 0 4px rgba(51, 144, 236, 0.12) !important;
        }

        .sm-auth-eye {
            position: absolute !important;
            right: 12px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 34px !important;
            height: 34px !important;
            border: 0 !important;
            border-radius: 10px !important;
            background: transparent !important;
            color: #aab7c7 !important;
            cursor: pointer !important;
            font-size: 1rem !important;
        }

        .sm-auth-eye:hover {
            background: rgba(255,255,255,0.055) !important;
            color: #e8f1fb !important;
        }

        #auth-card.sm-auth-card .sm-auth-manual-check,
        #auth-card.sm-auth-card .password-show-check {
            display: inline-flex !important;
            align-items: center !important;
            gap: 9px !important;
            margin: -2px 0 24px !important;
            color: #aab6c4 !important;
            font-size: 0.82rem !important;
            font-weight: 700 !important;
            text-transform: none !important;
            cursor: pointer !important;
        }

        #auth-card.sm-auth-card .password-show-check input {
            width: 18px !important;
            height: 18px !important;
            accent-color: #3390ec !important;
        }

        #auth-card.sm-auth-card .password-toggle-wrap > .password-show-check:not(.sm-auth-manual-check) {
            display: none !important;
        }

        #auth-card.sm-auth-card .sm-auth-primary {
            height: 50px !important;
            border-radius: 11px !important;
            background: linear-gradient(180deg, #3b9cff, #1e7ee8) !important;
            color: #fff !important;
            font-size: 0.96rem !important;
            font-weight: 850 !important;
            box-shadow: 0 14px 28px rgba(30, 126, 232, 0.23) !important;
        }

        #auth-card.sm-auth-card .sm-auth-secondary {
            height: 48px !important;
            border-radius: 11px !important;
            border: 1px solid rgba(112, 137, 164, 0.25) !important;
            background: rgba(18, 34, 50, 0.5) !important;
            color: #edf4fb !important;
            font-weight: 800 !important;
            box-shadow: none !important;
        }

        #auth-card.sm-auth-card .sm-auth-secondary:hover,
        #auth-card.sm-auth-card .sm-auth-primary:hover {
            transform: translateY(-1px) !important;
            opacity: 0.96 !important;
        }

        #auth-card.sm-auth-card .sm-auth-divider {
            height: 1px !important;
            margin: 26px 0 18px !important;
            background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.22), transparent) !important;
        }

        #auth-card.sm-auth-card .toggle-link,
        #auth-card.sm-auth-card .sm-auth-link {
            margin: 0 !important;
            text-align: center !important;
            color: #9aa9ba !important;
            text-decoration: none !important;
            font-size: 0.92rem !important;
        }

        #auth-card.sm-auth-card .toggle-link span,
        #auth-card.sm-auth-card .toggle-link:hover {
            color: #3b9cff !important;
            text-decoration: none !important;
        }

        #auth-card.sm-auth-card .error-msg {
            min-height: 18px !important;
            margin-top: 10px !important;
            color: #ffb4b4 !important;
            text-align: center !important;
            font-size: 0.82rem !important;
        }

        #auth-card.sm-auth-card .version {
            position: absolute !important;
            right: 18px !important;
            bottom: 14px !important;
            color: rgba(154, 169, 186, 0.54) !important;
            font-size: 0.72rem !important;
        }

        #register-form.sm-auth-register-form {
            margin-top: 0 !important;
        }

        #register-form.sm-auth-register-form .input-group {
            margin-bottom: 15px !important;
        }

        #register-form.sm-auth-register-form .sm-auth-manual-check {
            margin: -4px 0 16px !important;
        }

        #register-form.sm-auth-register-form #reg-captcha-box {
            margin-bottom: 16px !important;
        }

        @media (max-width: 620px) {
            #auth-screen {
                align-items: flex-start !important;
                padding-top: 18px !important;
            }

            #auth-card.sm-auth-card.sm-auth-v2,
            #auth-card.sm-auth-card {
                width: min(100%, 430px) !important;
                padding: 34px 22px 30px !important;
                border-radius: 20px !important;
            }

            .sm-auth-logo {
                width: 66px !important;
                height: 66px !important;
                border-radius: 20px !important;
                font-size: 1.48rem !important;
            }

            #auth-card.sm-auth-card h1 {
                font-size: 1.96rem !important;
            }
        }


        /* ===== Auth icon/input polish final ===== */
        #auth-card.sm-auth-card.sm-auth-v2 {
            padding-top: 46px !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap {
            position: relative !important;
            min-height: 50px !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap.sm-auth-has-icon input {
            padding-left: 58px !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap input[type="password"] {
            padding-right: 56px !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap.sm-auth-has-icon input[type="password"] {
            padding-left: 58px !important;
            padding-right: 56px !important;
        }

        #auth-card.sm-auth-card .sm-auth-input-wrap input::placeholder {
            color: rgba(194, 207, 222, 0.52) !important;
        }

        .sm-auth-svg-icon {
            width: 22px !important;
            height: 22px !important;
            left: 18px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: rgba(173, 190, 208, 0.78) !important;
            opacity: 0.95 !important;
        }

        .sm-auth-svg-icon svg,
        .sm-auth-eye svg,
        .sm-auth-btn-svg svg {
            width: 19px !important;
            height: 19px !important;
            display: block !important;
            stroke: currentColor !important;
            fill: none !important;
            stroke-width: 1.8 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }

        .sm-auth-eye {
            right: 10px !important;
            width: 40px !important;
            height: 40px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 12px !important;
            color: rgba(186, 201, 218, 0.76) !important;
        }

        .sm-auth-eye:hover {
            background: rgba(51, 144, 236, 0.12) !important;
            color: #dcecff !important;
        }

        #auth-card.sm-auth-card .sm-auth-manual-check {
            width: fit-content !important;
            min-height: 28px !important;
            padding: 0 !important;
            gap: 10px !important;
            user-select: none !important;
        }

        #auth-card.sm-auth-card .sm-auth-manual-check input {
            appearance: none !important;
            -webkit-appearance: none !important;
            width: 19px !important;
            height: 19px !important;
            margin: 0 !important;
            border-radius: 6px !important;
            border: 1px solid rgba(162, 181, 202, 0.45) !important;
            background: rgba(11, 21, 33, 0.58) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
            position: relative !important;
            flex: 0 0 19px !important;
            cursor: pointer !important;
        }

        #auth-card.sm-auth-card .sm-auth-manual-check input:checked {
            background: linear-gradient(180deg, #3b9cff, #1f7ee7) !important;
            border-color: rgba(71, 161, 255, 0.8) !important;
        }

        #auth-card.sm-auth-card .sm-auth-manual-check input:checked::after {
            content: "" !important;
            position: absolute !important;
            left: 5px !important;
            top: 2px !important;
            width: 5px !important;
            height: 10px !important;
            border: solid #fff !important;
            border-width: 0 2px 2px 0 !important;
            transform: rotate(45deg) !important;
        }

        #auth-card.sm-auth-card .sm-auth-manual-check span {
            color: #aebccd !important;
            font-size: 0.83rem !important;
            font-weight: 750 !important;
            line-height: 1 !important;
        }

        #auth-card.sm-auth-card .sm-auth-secondary {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
        }

        .sm-auth-btn-svg {
            width: 22px !important;
            height: 22px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: rgba(226, 239, 252, 0.92) !important;
            flex: 0 0 22px !important;
        }

        #auth-card.sm-auth-card .sm-auth-secondary:hover .sm-auth-btn-svg {
            color: #ffffff !important;
        }


        /* === SmChat fullscreen video viewer final === */
        .media-viewer.sm-video-fullscreen-viewer {
            position: fixed !important;
            inset: 0 !important;
            z-index: 10050 !important;
            display: block !important;
            overflow: auto !important;
            padding: clamp(14px, 2.5vh, 28px) clamp(12px, 3vw, 36px) !important;
            background:
                radial-gradient(circle at 50% 10%, rgba(31, 93, 155, 0.18), transparent 34%),
                linear-gradient(135deg, #06101b 0%, #081827 52%, #06101b 100%) !important;
            opacity: 0;
            animation: mediaViewerIn 180ms ease forwards;
        }

        .sm-video-viewer-shell {
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sm-video-viewer-card {
            position: relative;
            width: min(1120px, 94vw);
            aspect-ratio: 16 / 9;
            max-height: min(78vh, 720px);
            border-radius: 24px;
            overflow: hidden;
            background: #000;
            box-shadow:
                0 28px 90px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        .sm-video-viewer-video {
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            display: block !important;
            object-fit: cover !important;
            background: #000 !important;
            transform: none !important;
            cursor: pointer;
        }

        .sm-video-viewer-card::before,
        .sm-video-viewer-card::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            pointer-events: none;
            z-index: 1;
        }

        .sm-video-viewer-card::before {
            top: 0;
            height: 28%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent);
        }

        .sm-video-viewer-card::after {
            bottom: 0;
            height: 34%;
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
        }

        .sm-video-viewer-topbar {
            position: absolute;
            top: 22px;
            left: 22px;
            right: 22px;
            z-index: 3;
            display: grid;
            grid-template-columns: 42px 1fr 42px 42px;
            gap: 10px;
            align-items: center;
            color: #fff;
        }

        .sm-video-viewer-back,
        .sm-video-viewer-share,
        .sm-video-viewer-menu,
        .sm-video-viewer-play,
        .sm-video-viewer-volume,
        .sm-video-viewer-quality-btn,
        .sm-video-viewer-fullscreen {
            border: 0;
            color: #fff;
            cursor: pointer;
            background: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .sm-video-viewer-back,
        .sm-video-viewer-share,
        .sm-video-viewer-menu {
            width: 42px;
            height: 42px;
            border-radius: 14px;
        }

        .sm-video-viewer-back:hover,
        .sm-video-viewer-share:hover,
        .sm-video-viewer-menu:hover,
        .sm-video-viewer-play:hover,
        .sm-video-viewer-volume:hover,
        .sm-video-viewer-quality-btn:hover,
        .sm-video-viewer-fullscreen:hover {
            background: rgba(255, 255, 255, 0.12);
        }

        .sm-video-viewer-back svg,
        .sm-video-viewer-share svg,
        .sm-video-viewer-menu svg,
        .sm-video-viewer-volume svg,
        .sm-video-viewer-quality-btn svg,
        .sm-video-viewer-fullscreen svg {
            width: 24px;
            height: 24px;
        }

        .sm-video-viewer-titlebox {
            min-width: 0;
            padding-left: 2px;
        }

        .sm-video-viewer-title {
            font-size: 18px;
            line-height: 1.15;
            font-weight: 900;
            letter-spacing: -0.02em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
        }

        .sm-video-viewer-subtitle {
            margin-top: 3px;
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.76);
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
        }

        .sm-video-viewer-center-play {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 3;
            width: 78px;
            height: 78px;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(255, 255, 255, 0.26);
            border-radius: 999px;
            background: rgba(18, 18, 18, 0.48);
            color: #fff;
            box-shadow: 0 20px 55px rgba(0, 0, 0, 0.36);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .sm-video-viewer-center-play svg {
            width: 36px;
            height: 36px;
        }

        .sm-video-viewer-card.is-playing .sm-video-viewer-center-play {
            opacity: 0;
            pointer-events: none;
        }

        .sm-video-icon-pause,
        .sm-video-icon-muted {
            display: none;
        }

        .sm-video-viewer-card.is-playing .sm-video-icon-play {
            display: none;
        }

        .sm-video-viewer-card.is-playing .sm-video-icon-pause {
            display: block;
        }

        .sm-video-viewer-card.is-muted .sm-video-icon-volume {
            display: none;
        }

        .sm-video-viewer-card.is-muted .sm-video-icon-muted {
            display: block;
        }

        .sm-video-viewer-controls {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 20px;
            z-index: 3;
            min-height: 58px;
            padding: 10px 14px;
            display: grid;
            grid-template-columns: 38px auto minmax(120px, 1fr) auto 38px 38px auto 38px;
            gap: 12px;
            align-items: center;
            border-radius: 18px;
            background: rgba(9, 9, 10, 0.72);
            color: #fff;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }

        .sm-video-viewer-play,
        .sm-video-viewer-volume,
        .sm-video-viewer-quality-btn,
        .sm-video-viewer-fullscreen {
            width: 38px;
            height: 38px;
            border-radius: 12px;
        }

        .sm-video-viewer-play svg {
            width: 25px;
            height: 25px;
        }

        .sm-video-viewer-current,
        .sm-video-viewer-duration,
        .sm-video-viewer-quality {
            font-size: 15px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.92);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .sm-video-viewer-quality {
            opacity: 0.86;
        }

        .sm-video-viewer-seek {
            --sm-video-progress: 0%;
            width: 100%;
            height: 22px;
            margin: 0;
            cursor: pointer;
            appearance: none;
            background:
                linear-gradient(to right, #2f8fff 0 var(--sm-video-progress), rgba(255, 255, 255, 0.26) var(--sm-video-progress) 100%);
            border-radius: 999px;
            outline: none;
        }

        .sm-video-viewer-seek::-webkit-slider-runnable-track {
            height: 4px;
            border-radius: 999px;
            background: transparent;
        }

        .sm-video-viewer-seek::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            margin-top: -6px;
            border-radius: 999px;
            background: #2f8fff;
            box-shadow: 0 0 0 4px rgba(47, 143, 255, 0.18);
        }

        .sm-video-viewer-seek::-moz-range-track {
            height: 4px;
            border-radius: 999px;
            background: transparent;
        }

        .sm-video-viewer-seek::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border: 0;
            border-radius: 999px;
            background: #2f8fff;
            box-shadow: 0 0 0 4px rgba(47, 143, 255, 0.18);
        }

        .sm-video-fullscreen-viewer .media-viewer-nav {
            background: rgba(255, 255, 255, 0.11) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .sm-video-fullscreen-viewer .media-viewer-prev {
            left: -58px;
        }

        .sm-video-fullscreen-viewer .media-viewer-next {
            right: -58px;
        }

        @media (max-width: 900px) {
            .media-viewer.sm-video-fullscreen-viewer {
                padding: 10px;
            }

            .sm-video-viewer-card {
                width: 96vw;
                max-height: 72vh;
                border-radius: 20px;
            }

            .sm-video-viewer-topbar {
                top: 12px;
                left: 12px;
                right: 12px;
            }

            .sm-video-viewer-controls {
                left: 10px;
                right: 10px;
                bottom: 10px;
                min-height: 52px;
                grid-template-columns: 34px auto minmax(80px, 1fr) auto 34px 34px;
                gap: 7px;
                padding: 8px 9px;
            }

            .sm-video-viewer-quality,
            .sm-video-viewer-quality-btn {
                display: none;
            }

            .sm-video-viewer-current,
            .sm-video-viewer-duration {
                font-size: 13px;
            }

            .sm-video-viewer-center-play {
                width: 64px;
                height: 64px;
            }

            .sm-video-fullscreen-viewer .media-viewer-prev {
                left: 8px;
            }

            .sm-video-fullscreen-viewer .media-viewer-next {
                right: 8px;
            }
        }

        @media (max-width: 560px) {
            .sm-video-viewer-card {
                width: 100%;
                max-height: 68vh;
            }

            .sm-video-viewer-title {
                font-size: 15px;
            }

            .sm-video-viewer-subtitle {
                font-size: 12px;
            }

            .sm-video-viewer-topbar {
                grid-template-columns: 36px 1fr 36px 36px;
                gap: 6px;
            }

            .sm-video-viewer-back,
            .sm-video-viewer-share,
            .sm-video-viewer-menu {
                width: 36px;
                height: 36px;
            }

            .sm-video-viewer-controls {
                grid-template-columns: 32px minmax(70px, 1fr) 32px 32px;
            }

            .sm-video-viewer-current,
            .sm-video-viewer-duration {
                display: none;
            }
        }


        /* === Final mini video player redesign: no wrong blue frame, seek does not open fullscreen === */
        .message-media-wrap.has-video,
        .message-row.mine .message-media-wrap.has-video,
        .message-row.theirs .message-media-wrap.has-video,
        .message-media-wrap.has-video.has-caption,
        body.light-theme .message-row.mine .message-media-wrap.has-video,
        body.light-theme .message-row.theirs .message-media-wrap.has-video {
            width: min(430px, 72vw) !important;
            max-width: min(430px, 72vw) !important;
            padding: 0 !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            overflow: visible !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 6px !important;
        }

        .message-media-wrap.has-video .custom-video-player.sm-mini-video-player,
        .message-row.mine .message-media-wrap.has-video .custom-video-player.sm-mini-video-player,
        .message-row.theirs .message-media-wrap.has-video .custom-video-player.sm-mini-video-player,
        .message-row.mine .message-media-wrap.has-video.has-caption .custom-video-player.sm-mini-video-player,
        .message-row.mine .message-media-wrap.has-video:not(.has-caption) .custom-video-player.sm-mini-video-player {
            position: relative !important;
            width: 100% !important;
            aspect-ratio: 16 / 9 !important;
            min-height: 0 !important;
            max-height: none !important;
            padding: 0 !important;
            border: 0 !important;
            outline: 0 !important;
            border-radius: 17px !important;
            overflow: hidden !important;
            background: #000 !important;
            box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28) !important;
        }

        .message-media-wrap.has-video .custom-video-player.sm-mini-video-player video {
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            max-height: none !important;
            display: block !important;
            object-fit: cover !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
            border-radius: inherit !important;
            background: #000 !important;
            cursor: pointer !important;
        }

        .message-media-wrap.has-video .custom-video-player.sm-mini-video-player::after {
            content: "" !important;
            position: absolute !important;
            inset: auto 0 0 0 !important;
            height: 46% !important;
            pointer-events: none !important;
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62)) !important;
            z-index: 1 !important;
        }

        .message-media-wrap.has-video .video-play {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            width: 66px !important;
            height: 66px !important;
            transform: translate(-50%, -50%) !important;
            border: 1px solid rgba(255, 255, 255, 0.26) !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(16, 14, 12, 0.52) !important;
            color: #fff !important;
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36) !important;
            backdrop-filter: blur(14px) !important;
            -webkit-backdrop-filter: blur(14px) !important;
            z-index: 4 !important;
            cursor: pointer !important;
        }

        .message-media-wrap.has-video .video-play svg {
            width: 30px !important;
            height: 30px !important;
        }

        .message-media-wrap.has-video .video-icon-pause {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.playing .video-icon-play {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.playing .video-icon-pause {
            display: block !important;
        }

        .message-media-wrap.has-video .video-controls {
            position: absolute !important;
            left: 12px !important;
            right: 12px !important;
            bottom: 12px !important;
            min-height: 42px !important;
            padding: 8px 10px !important;
            border-radius: 15px !important;
            display: grid !important;
            grid-template-columns: auto minmax(90px, 1fr) auto 34px 34px !important;
            align-items: center !important;
            gap: 10px !important;
            background: rgba(12, 8, 8, 0.66) !important;
            color: #fff !important;
            box-shadow: 0 13px 32px rgba(0, 0, 0, 0.36) !important;
            backdrop-filter: blur(16px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
            z-index: 3 !important;
            font-size: 13px !important;
            line-height: 1 !important;
        }

        .message-media-wrap.has-video .video-current,
        .message-media-wrap.has-video .video-duration {
            min-width: 34px !important;
            font-weight: 800 !important;
            color: rgba(255, 255, 255, 0.96) !important;
            font-variant-numeric: tabular-nums !important;
        }

        .message-media-wrap.has-video .video-seek {
            width: 100% !important;
            height: 18px !important;
            margin: 0 !important;
            accent-color: #2f8fff !important;
            cursor: pointer !important;
            touch-action: none !important;
        }

        .message-media-wrap.has-video .video-open,
        .message-media-wrap.has-video .video-volume {
            position: static !important;
            width: 34px !important;
            height: 34px !important;
            border: 0 !important;
            border-radius: 11px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: transparent !important;
            color: rgba(255, 255, 255, 0.94) !important;
            box-shadow: none !important;
            cursor: pointer !important;
            z-index: 4 !important;
        }

        .message-media-wrap.has-video .video-open:hover,
        .message-media-wrap.has-video .video-volume:hover {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .message-media-wrap.has-video .video-open svg,
        .message-media-wrap.has-video .video-volume svg {
            width: 20px !important;
            height: 20px !important;
        }

        .message-media-wrap.has-video .video-icon-muted {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.is-muted .video-icon-volume {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.is-muted .video-icon-muted {
            display: block !important;
        }

        .message-media-wrap.has-video .media-inline-caption {
            width: fit-content !important;
            max-width: 100% !important;
            margin: 0 0 0 auto !important;
            padding: 9px 15px 10px !important;
            border-radius: 14px !important;
            font-size: 16px !important;
            line-height: 1.25 !important;
            font-weight: 500 !important;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
        }

        .message-row.mine .message-media-wrap.has-video .media-inline-caption {
            background: linear-gradient(135deg, #2f9dff, #247ce8) !important;
            color: #fff !important;
        }

        .message-row.theirs .message-media-wrap.has-video .media-inline-caption {
            margin-left: 0 !important;
            margin-right: auto !important;
            background: linear-gradient(135deg, rgba(30, 43, 58, 0.98), rgba(24, 36, 50, 0.98)) !important;
            color: var(--text, #f8fafc) !important;
        }

        body.light-theme .message-row.theirs .message-media-wrap.has-video .media-inline-caption {
            background: #ffffff !important;
            color: #17202c !important;
        }

        @media (max-width: 680px) {
            .message-media-wrap.has-video {
                width: min(340px, 86vw) !important;
                max-width: min(340px, 86vw) !important;
            }

            .message-media-wrap.has-video .video-play {
                width: 56px !important;
                height: 56px !important;
            }

            .message-media-wrap.has-video .video-controls {
                left: 9px !important;
                right: 9px !important;
                bottom: 9px !important;
                min-height: 38px !important;
                grid-template-columns: auto minmax(70px, 1fr) auto 30px 30px !important;
                gap: 6px !important;
                padding: 6px 7px !important;
                font-size: 12px !important;
            }

            .message-media-wrap.has-video .video-open,
            .message-media-wrap.has-video .video-volume {
                width: 30px !important;
                height: 30px !important;
            }

            .message-media-wrap.has-video .media-inline-caption {
                font-size: 14px !important;
            }
        }



        /* === Group discovery and join requests === */
        .sidebar-search-result.has-group-action {
            grid-template-columns: 42px minmax(0, 1fr) auto;
        }

        .sidebar-search-add.pending,
        .sidebar-search-add.member {
            background: var(--surface2);
            color: var(--text2);
            border: 1px solid var(--border);
        }

        .sidebar-search-add.requesting {
            opacity: 0.7;
            pointer-events: none;
        }

        .group-join-requests-list {
            display: grid;
            gap: 8px;
            max-height: min(320px, 38vh);
            overflow: auto;
        }

        .group-join-request-row {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--surface);
        }

        .group-join-request-main {
            min-width: 0;
        }

        .group-join-request-title {
            font-weight: 800;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .group-join-request-message,
        .group-join-request-meta {
            margin-top: 2px;
            color: var(--text3);
            font-size: 0.78rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .group-join-request-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        @media (max-width: 768px) {
            .group-join-request-row {
                grid-template-columns: 42px minmax(0, 1fr);
            }

            .group-join-request-actions {
                grid-column: 2;
                justify-content: stretch;
            }

            .group-join-request-actions .btn {
                flex: 1;
            }
        }

    
/* Blocking keeps history visible, but disables composing for direct blocked chats. */
#input-area.direct-chat-blocked textarea {
    opacity: 0.72;
}
#input-area.direct-chat-blocked .send-btn,
#input-area.direct-chat-blocked #btn-voice,
#input-area.direct-chat-blocked #btn-schedule-send {
    opacity: 0.5;
}

    
/* === FULLSCREEN CREATE GROUP FLOW === */
.sidebar-create-group-action {
    margin: 10px 12px 14px;
    min-height: 54px;
    border: 1px solid rgba(74, 158, 255, 0.34);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.62));
    color: #dbeafe;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.sidebar-create-group-action:hover {
    transform: translateY(-1px);
    border-color: rgba(74, 158, 255, 0.68);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.26), rgba(15, 23, 42, 0.7));
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.18);
}
.sidebar-create-group-action .sidebar-create-group-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.22);
    flex: 0 0 auto;
}
.sidebar-create-group-action .sidebar-create-group-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
}
.sidebar-create-group-action strong {
    color: #f8fafc;
    font-size: 0.88rem;
}
.sidebar-create-group-action small {
    margin-top: 3px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.72rem;
}

#group-modal.group-create-screen {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(42, 171, 238, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(7, 16, 28, 0.98), rgba(10, 22, 35, 0.98));
    color: var(--text);
    overflow: hidden;
}
#group-modal.group-create-screen.show {
    display: flex !important;
}
.group-create-page {
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}
.group-create-topbar {
    height: 74px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(8, 18, 31, 0.66);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.group-create-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}
.group-create-back {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.45);
    color: #e5eefb;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.group-create-back:hover {
    transform: translateX(-1px);
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.32);
}
.group-create-heading {
    min-width: 0;
}
.group-create-heading h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.15vw, 2.05rem);
    letter-spacing: -0.03em;
    color: #f8fafc;
}
.group-create-heading p {
    margin: 5px 0 0;
    color: rgba(203, 213, 225, 0.76);
    font-size: 0.86rem;
}
.group-create-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.group-create-window-actions .chat-header-icon {
    width: 42px;
    height: 42px;
}

.group-create-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 26px 28px 116px;
}
.group-create-layout {
    width: min(1420px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(520px, 1.25fr) minmax(360px, 0.9fr);
    gap: 18px;
    align-items: stretch;
}
.group-create-card,
.group-create-members-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(22, 38, 58, 0.74), rgba(13, 27, 43, 0.76));
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.group-create-main-grid {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    padding: 26px;
    align-items: center;
}
#group-avatar-picker.group-avatar-picker {
    width: 180px;
    height: 180px;
    border-radius: 999px;
    border: 1.5px dashed rgba(96, 165, 250, 0.72);
    background:
        radial-gradient(circle at 50% 20%, rgba(96, 165, 250, 0.18), transparent 50%),
        rgba(15, 23, 42, 0.5);
    color: #cfe6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    font-size: 0;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
#group-avatar-picker.group-avatar-picker:hover {
    transform: translateY(-1px);
    border-color: rgba(147, 197, 253, 0.96);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.08);
}
#group-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    height: 100%;
    font-size: 0.84rem;
    color: rgba(219, 234, 254, 0.82);
}
#group-avatar-placeholder::before {
    content: "📷";
    font-size: 2.1rem;
}
#group-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.group-create-fields {
    display: grid;
    gap: 18px;
}
.group-create-field {
    display: grid;
    gap: 8px;
}
.group-create-field label,
.group-section-label {
    color: rgba(226, 232, 240, 0.92);
    font-weight: 700;
    font-size: 0.86rem;
}
.group-create-input-wrap {
    position: relative;
}
.group-create-field input,
.group-create-field textarea,
.group-members-search {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 13px;
    background: rgba(4, 12, 22, 0.54);
    color: #e5eefb;
    outline: none;
    padding: 13px 58px 13px 14px;
    font-size: 0.92rem;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.group-create-field textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.35;
}
.group-create-field input:focus,
.group-create-field textarea:focus,
.group-members-search:focus {
    border-color: rgba(42, 171, 238, 0.72);
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.13);
    background: rgba(5, 16, 29, 0.76);
}
.group-counter {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.78);
    font-size: 0.78rem;
}
.group-create-field textarea + .group-counter {
    top: auto;
    bottom: 13px;
    transform: none;
}
.group-create-section {
    padding: 24px 26px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.group-section-note {
    margin: 5px 0 0;
    color: rgba(203, 213, 225, 0.66);
    font-size: 0.8rem;
}
.group-type-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.group-type-card {
    position: relative;
    min-height: 106px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.36);
    color: #e5eefb;
    cursor: pointer;
    padding: 17px 50px 16px 18px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    text-align: left;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.group-type-card:hover {
    border-color: rgba(96, 165, 250, 0.48);
    background: rgba(30, 64, 111, 0.22);
}
.group-type-card.active {
    border-color: rgba(59, 130, 246, 0.9);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.24), rgba(15, 23, 42, 0.45));
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.group-type-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.group-type-title {
    font-weight: 800;
    color: #f8fafc;
}
.group-type-desc {
    margin-top: 4px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.79rem;
    line-height: 1.35;
}
.group-type-radio {
    position: absolute;
    right: 16px;
    top: 17px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 163, 184, 0.54);
}
.group-type-card.active .group-type-radio {
    border-color: #60a5fa;
    background: radial-gradient(circle, #60a5fa 0 42%, transparent 45%);
}
.group-approval-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}
.group-approval-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 1.32rem;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.18);
}
.group-switch {
    position: relative;
    width: 56px;
    height: 31px;
}
.group-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.group-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(51, 65, 85, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.22);
    cursor: pointer;
    transition: background 0.16s ease;
}
.group-switch span::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    top: 2px;
    left: 3px;
    border-radius: 50%;
    background: #e5eefb;
    transition: transform 0.16s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.group-switch input:checked + span {
    background: #3b82f6;
}
.group-switch input:checked + span::after {
    transform: translateX(24px);
}
.group-link-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 13px;
    background: rgba(4, 12, 22, 0.54);
    overflow: hidden;
}
.group-link-prefix {
    padding: 0 13px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    color: #dbeafe;
    white-space: nowrap;
}
.group-link-row input {
    border: 0;
    background: transparent;
    height: 46px;
    padding: 0 56px 0 12px;
}
.group-create-members-card {
    display: flex;
    flex-direction: column;
    min-height: 680px;
}
.group-members-head {
    padding: 24px 24px 14px;
}
.group-members-head h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1.15rem;
}
.group-members-head p {
    margin: 5px 0 15px;
    color: rgba(203, 213, 225, 0.68);
    font-size: 0.8rem;
}
.group-members-search-wrap {
    position: relative;
}
.group-members-search {
    padding-left: 42px;
    padding-right: 14px;
}
.group-members-search-wrap::before {
    content: "🔍";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.75);
    z-index: 1;
}
#group-members-list.group-members-select {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: 4px 18px 12px;
    background: transparent;
}
.group-create-screen .member-checkbox {
    min-height: 58px;
    display: grid;
    grid-template-columns: 28px 42px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    border-radius: 14px;
    padding: 8px 7px;
    cursor: pointer;
    transition: background 0.14s ease;
}
.group-create-screen .member-checkbox:hover {
    background: rgba(96, 165, 250, 0.08);
}
.group-create-screen .member-checkbox input {
    width: 22px;
    height: 22px;
    accent-color: #3b82f6;
    cursor: pointer;
}
.group-create-screen .member-checkbox .avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
}
.group-member-name {
    color: #f8fafc;
    font-weight: 750;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-member-status {
    margin-top: 2px;
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-member-status.online {
    color: #60a5fa;
}
.group-selected-members {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 0;
    margin-top: 0;
}
.group-selected-chip {
    max-width: 180px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 6px 8px 6px 10px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(37, 99, 235, 0.13);
    color: #dbeafe;
    font-size: 0.76rem;
}
.group-selected-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-selected-chip button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.5);
    color: #cbd5e1;
    cursor: pointer;
}
.group-members-footer {
    min-height: 58px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(226, 232, 240, 0.86);
}
.group-members-footer button {
    border: 0;
    background: transparent;
    color: #60a5fa;
    cursor: pointer;
    font-weight: 700;
}
.group-create-actions {
    position: fixed;
    z-index: 211;
    left: calc(var(--sidebar-width, 320px) + 76px);
    right: 0;
    bottom: 0;
    min-height: 88px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(8, 18, 31, 0.86);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
}
.group-create-actions .btn {
    min-width: 128px;
    height: 48px;
    border-radius: 14px;
}
.group-create-actions .btn-accent {
    min-width: 190px;
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.28);
}
.group-empty-hint {
    padding: 18px 12px;
    color: rgba(203, 213, 225, 0.66);
    font-size: 0.86rem;
    text-align: center;
}
.group-form-error {
    color: #fca5a5;
    font-size: 0.78rem;
    margin-top: 8px;
    display: none;
}
.group-form-error.show {
    display: block;
}

body.light-theme #group-modal.group-create-screen {
    background: linear-gradient(135deg, rgba(224, 232, 241, 0.98), rgba(241, 245, 249, 0.98));
}
body.light-theme .group-create-card,
body.light-theme .group-create-members-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(30, 41, 59, 0.12);
}
body.light-theme .group-create-heading h2,
body.light-theme .group-create-field label,
body.light-theme .group-section-label,
body.light-theme .group-members-head h3,
body.light-theme .group-member-name,
body.light-theme .group-type-title {
    color: #0f172a;
}
body.light-theme .group-create-heading p,
body.light-theme .group-section-note,
body.light-theme .group-type-desc,
body.light-theme .group-member-status,
body.light-theme .group-members-head p {
    color: #64748b;
}
body.light-theme .group-create-field input,
body.light-theme .group-create-field textarea,
body.light-theme .group-members-search,
body.light-theme .group-link-row {
    background: rgba(248,250,252,0.88);
    color: #0f172a;
}

@media (max-width: 980px) {
    .group-create-layout {
        grid-template-columns: 1fr;
    }
    .group-create-members-card {
        min-height: 560px;
    }
    .group-create-actions {
        left: 0;
    }
}
@media (max-width: 640px) {
    .group-create-topbar {
        height: auto;
        padding: 14px;
    }
    .group-create-content {
        padding: 16px 12px 112px;
    }
    .group-create-main-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 18px;
    }
    .group-create-fields {
        width: 100%;
    }
    .group-type-grid {
        grid-template-columns: 1fr;
    }
    .group-create-actions {
        padding: 12px;
        justify-content: stretch;
    }
    .group-create-actions .btn,
    .group-create-actions .btn-accent {
        flex: 1;
        min-width: 0;
    }
}



/* === Create group/sidebar/login final fixes === */
.desktop-nav-item.create-group-rail-item .desktop-nav-icon {
    color: #72b7ff;
    filter: drop-shadow(0 0 8px rgba(47, 145, 255, .28));
}

.desktop-nav-item.create-group-rail-item.active,
.desktop-nav-item.create-group-rail-item:hover {
    background: linear-gradient(180deg, rgba(38, 104, 171, .34), rgba(20, 62, 104, .28));
    border-color: rgba(73, 158, 255, .30);
}

.group-login-field label span {
    margin-left: 6px;
    color: rgba(148, 163, 184, .78);
    font-size: .72rem;
    font-weight: 500;
}

.group-login-row {
    display: flex;
    align-items: center;
}

.group-login-row .group-login-prefix {
    flex: 0 0 auto;
    padding-left: 14px;
    color: #6fb7ff;
    font-size: 1rem;
    font-weight: 800;
}

.group-login-row input {
    padding-left: 8px !important;
}

.group-link-preview {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    border: 1px solid rgba(92, 132, 171, .28);
    border-radius: 12px;
    background: rgba(5, 17, 30, .55);
    color: #dcecff;
    overflow: hidden;
}

.group-link-preview .group-link-prefix {
    flex: 0 0 auto;
    color: #65aefb;
    font-weight: 700;
}

.group-link-preview strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

body.light-theme .group-link-preview {
    background: rgba(241, 245, 249, .94);
    border-color: rgba(71, 85, 105, .22);
    color: #172033;
}

/* ===== /static/css/split/02-sm-rail-avatar-v6.css ===== */

/* === Rail avatar V6: real user avatar instead of initials/gradient === */
.rail-profile-button .rail-profile-avatar {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.rail-profile-button .rail-profile-avatar.has-avatar,
.rail-profile-button .rail-profile-avatar[data-has-avatar="1"] {
    background: transparent !important;
    background-image: none !important;
    color: transparent !important;
    font-size: 0 !important;
}

.rail-profile-button .rail-profile-avatar > img,
.rail-profile-button .rail-profile-avatar > .rail-profile-avatar-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
}

.rail-profile-button .rail-profile-avatar.has-avatar::before,
.rail-profile-button .rail-profile-avatar[data-has-avatar="1"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: var(--rail-avatar-image) center / cover no-repeat !important;
}

/* ===== /static/css/split/03-sm-rail-profile-click-v7.css ===== */

/* === V7: keep avatar visible but make whole profile button clickable === */
#rail-profile-button,
.rail-profile-button {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 20 !important;
}

#rail-profile-avatar,
.rail-profile-avatar,
#rail-profile-avatar *,
.rail-profile-avatar * {
    pointer-events: none !important;
}

/* ===== /static/css/split/04-sm-auth-no-flicker-v8.css ===== */

/* === V8: no auth-screen flicker on page refresh when token exists === */
html.sm-session-restore,
html.sm-session-restore body,
body.auth-bootstrapping {
    background: #0b1724 !important;
}

html.sm-session-restore #auth-screen,
body.auth-bootstrapping #auth-screen,
body.auth-bootstrapping #auth-screen:not(.hidden),
body.auth-bootstrapping #auth-screen.sm-auth-minimal-screen {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
}

html.sm-session-restore #auth-card,
body.auth-bootstrapping #auth-card {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.sm-session-restore #messenger {
    opacity: 1 !important;
}

body.auth-bootstrapping #messenger {
    opacity: 0 !important;
    pointer-events: none !important;
}

#auth-screen.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===== /static/css/split/07-sm-quiet-updates-stable-v12.css ===== */

/* === SmChat V12: safe quiet updates without cloning/wrapping the whole UI === */
#messages-container.is-silent-refresh,
#chat-header.is-silent-refresh,
#input-area.is-silent-refresh,
.desktop-nav-rail.is-silent-refresh {
    overflow-anchor: none !important;
}

#messages-container.is-silent-refresh .message-row,
#chat-header.is-silent-refresh *,
#input-area.is-silent-refresh *,
.desktop-nav-rail.is-silent-refresh * {
    animation: none !important;
    transition: none !important;
}

#messages-container {
    overflow-anchor: none !important;
}

/* ===== /static/css/split/08-sm-light-telegram-soft-v13.css ===== */

/* === SmChat Light Theme V13: мягкая светлая тема в стиле Telegram === */
/* Только стиль. JS/логика не менялись. */

body.light-theme {
    --accent: #2a8fe8;
    --accent-hover: #1f7ed0;
    --accent-glow: rgba(42, 143, 232, .18);

    --bg: #edf3f8;
    --bg2: #f5f8fc;
    --bg3: #ffffff;

    --surface: rgba(255, 255, 255, .92);
    --surface2: #dcecff;

    --text: #172233;
    --text2: #66758a;
    --text3: #8a98aa;

    --border: rgba(92, 110, 133, .18);
    --divider: rgba(92, 110, 133, .18);

    --shadow: 0 18px 44px rgba(46, 62, 82, .10);
    --shadow-sm: 0 5px 14px rgba(46, 62, 82, .08);

    --header-bg: rgba(248, 251, 254, .86);

    --message-meta-bg: rgba(255, 255, 255, .82);
    --message-meta-text: #526174;
    --system-bubble-bg: rgba(255, 255, 255, .74);
    --system-bubble-text: #66758a;
    --floating-date-bg: rgba(255, 255, 255, .86);
    --floating-date-text: #66758a;

    background: var(--bg) !important;
    color: var(--text) !important;
}

body.light-theme #messenger {
    background: #edf3f8 !important;
}

/* Левая навигационная рейка */
body.light-theme .desktop-nav-rail {
    background:
        linear-gradient(180deg, rgba(229, 239, 249, .92), rgba(219, 232, 245, .96)) !important;
    border-right: 1px solid rgba(92, 110, 133, .20) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .65) !important;
}

body.light-theme .desktop-nav-rail .rail-nav-item,
body.light-theme .desktop-nav-rail .rail-profile-button,
body.light-theme .desktop-nav-rail .rail-pin-button {
    background: transparent !important;
    color: #5f7085 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body.light-theme .desktop-nav-rail .rail-nav-item:hover,
body.light-theme .desktop-nav-rail .rail-profile-button:hover,
body.light-theme .desktop-nav-rail .rail-pin-button:hover {
    background: rgba(255, 255, 255, .72) !important;
    border-color: rgba(92, 110, 133, .16) !important;
}

body.light-theme .desktop-nav-rail .rail-nav-item.active,
body.light-theme .desktop-nav-rail .rail-profile-button.active {
    background: rgba(218, 235, 255, .95) !important;
    color: #1f7ed0 !important;
    border-color: rgba(42, 143, 232, .22) !important;
    box-shadow: 0 8px 20px rgba(42, 143, 232, .10) !important;
}

/* Список чатов */
body.light-theme #sidebar {
    background: #f5f8fc !important;
    border-right: 1px solid rgba(92, 110, 133, .20) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .76) !important;
}

body.light-theme .brand-panel,
body.light-theme .sidebar-header,
body.light-theme .chat-list-header {
    background: rgba(245, 248, 252, .92) !important;
    border-color: rgba(92, 110, 133, .16) !important;
}

body.light-theme .search-box,
body.light-theme #search-input,
body.light-theme .search-input {
    background: rgba(255, 255, 255, .96) !important;
    color: #172233 !important;
    border: 1px solid rgba(92, 110, 133, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(46, 62, 82, .045) !important;
}

body.light-theme .search-box:focus-within,
body.light-theme #search-input:focus {
    border-color: rgba(42, 143, 232, .42) !important;
    box-shadow: 0 0 0 3px rgba(42, 143, 232, .12) !important;
}

body.light-theme .tabs,
body.light-theme .chat-tabs {
    border-bottom: 1px solid rgba(92, 110, 133, .12) !important;
}

body.light-theme .tab,
body.light-theme .filter-tab {
    color: #66758a !important;
}

body.light-theme .tab.active,
body.light-theme .filter-tab.active {
    color: #1f7ed0 !important;
    background: rgba(218, 235, 255, .72) !important;
    box-shadow: inset 0 -2px 0 #2a8fe8 !important;
}

body.light-theme .contact-section-title {
    color: #748398 !important;
    border-color: rgba(92, 110, 133, .14) !important;
}

body.light-theme .chat-subtitle {
    color: #66758a !important;
}

/* Центральный чат — не белый, а мягкий Telegram-like фон с еле заметными линиями */
body.light-theme #chat-area {
    background-color: #eef4f9 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23a9b9ca' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M22 34c12-10 31-5 33 9 2 14-14 24-31 18l-11 7 4-12c-8-7-5-17 5-22z'/%3E%3Cpath d='M118 25c18 2 30 14 28 29-2 15-18 24-35 19l-14 8 5-14c-11-10-4-40 16-42z'/%3E%3Cpath d='M37 123h39M37 136h27M116 120c10 0 18 8 18 18s-8 18-18 18-18-8-18-18 8-18 18-18z'/%3E%3Cpath d='M109 137l6 6 12-14M72 75c9-7 25-6 32 2M70 90c11 10 27 10 38 0M149 91c7 0 13 6 13 13s-6 13-13 13-13-6-13-13 6-13 13-13z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: auto, 180px 180px !important;
    background-position: 0 0, center center !important;
}

body.light-theme .chat-content {
    background: transparent !important;
}

body.light-theme #chat-header {
    background: rgba(248, 251, 254, .88) !important;
    border-bottom: 1px solid rgba(92, 110, 133, .18) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.78) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

body.light-theme #chat-user-info:hover {
    background: rgba(222, 236, 251, .62) !important;
}

body.light-theme #chat-partner-name,
body.light-theme .chat-title,
body.light-theme .brand-title {
    color: #172233 !important;
}

body.light-theme #chat-partner-status,
body.light-theme .chat-status {
    color: #66758a !important;
}

body.light-theme .chat-header-actions button,
body.light-theme .icon-btn,
body.light-theme .chat-action-btn,
body.light-theme .chat-settings-btn {
    color: #5f7085 !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.light-theme .chat-header-actions button:hover,
body.light-theme .icon-btn:hover,
body.light-theme .chat-action-btn:hover,
body.light-theme .chat-settings-btn:hover {
    color: #1f7ed0 !important;
    background: rgba(218, 235, 255, .70) !important;
    border-color: rgba(42, 143, 232, .16) !important;
}

/* Сообщения */
body.light-theme .message-row.theirs .message-bubble {
    background: rgba(255, 255, 255, .96) !important;
    color: #172233 !important;
    border: 1px solid rgba(92, 110, 133, .12) !important;
    box-shadow: 0 4px 12px rgba(46, 62, 82, .07) !important;
}

body.light-theme .message-row.mine .message-bubble {
    background: #d9edff !important;
    color: #14304a !important;
    border: 1px solid rgba(42, 143, 232, .16) !important;
    box-shadow: 0 5px 14px rgba(42, 143, 232, .12) !important;
}

body.light-theme .message-row.mine .message-bubble a,
body.light-theme .message-row.mine .message-bubble .reply-author {
    color: #116ec2 !important;
}

body.light-theme .message-meta,
body.light-theme .message-time,
body.light-theme .message-status {
    color: #6f8094 !important;
}

body.light-theme .message-row.mine .message-meta,
body.light-theme .message-row.mine .message-time,
body.light-theme .message-row.mine .message-status {
    color: #4e799e !important;
}

body.light-theme .message-status.read,
body.light-theme .message-status.read::before,
body.light-theme .message-row.mine .message-status.read,
body.light-theme .message-row.mine .message-status.read::before {
    color: #2a8fe8 !important;
}

body.light-theme .system-message,
body.light-theme .floating-date,
body.light-theme .date-separator {
    background: rgba(255, 255, 255, .82) !important;
    color: #66758a !important;
    border: 1px solid rgba(92, 110, 133, .12) !important;
    box-shadow: 0 4px 12px rgba(46, 62, 82, .05) !important;
}

/* Медиа и видео в светлой теме */
body.light-theme .message-media,
body.light-theme .message-video,
body.light-theme .sm-chat-video-card,
body.light-theme .sm-video-mini-card {
    box-shadow: 0 10px 28px rgba(46, 62, 82, .14) !important;
}

body.light-theme .message-row.mine .sm-chat-video-caption,
body.light-theme .message-row.mine .media-caption {
    background: #d9edff !important;
    color: #14304a !important;
}

body.light-theme .message-attachment-row {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(92,110,133,.14) !important;
}

body.light-theme .message-attachment-name {
    color: #172233 !important;
}

body.light-theme .message-attachment-size {
    color: #748398 !important;
}

/* Нижняя строка ввода */
body.light-theme #input-area {
    background: rgba(248, 251, 254, .88) !important;
    border-top: 1px solid rgba(92, 110, 133, .18) !important;
    box-shadow: 0 -10px 30px rgba(46, 62, 82, .06) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

body.light-theme #input-area textarea,
body.light-theme #message-input {
    background: rgba(255, 255, 255, .98) !important;
    color: #172233 !important;
    border: 1px solid rgba(92, 110, 133, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 14px rgba(46, 62, 82, .045) !important;
}

body.light-theme #input-area textarea::placeholder,
body.light-theme #message-input::placeholder {
    color: #a3afbe !important;
}

body.light-theme #input-area textarea:focus,
body.light-theme #message-input:focus {
    border-color: rgba(42, 143, 232, .48) !important;
    box-shadow: 0 0 0 3px rgba(42, 143, 232, .12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.light-theme .emoji-btn,
body.light-theme .send-btn,
body.light-theme .composer-btn,
body.light-theme .attachment-button,
body.light-theme .voice-btn,
body.light-theme .schedule-btn {
    background: rgba(230, 238, 248, .96) !important;
    color: #607086 !important;
    border: 1px solid rgba(92, 110, 133, .18) !important;
    box-shadow: 0 4px 12px rgba(46, 62, 82, .06) !important;
}

body.light-theme .send-btn,
body.light-theme .send-button,
body.light-theme button[title*="Отправить"] {
    background: linear-gradient(135deg, #3b9cf2, #257fd8) !important;
    color: #ffffff !important;
    border-color: rgba(37, 127, 216, .18) !important;
    box-shadow: 0 8px 20px rgba(42, 143, 232, .18) !important;
}

body.light-theme .emoji-btn:hover,
body.light-theme .composer-btn:hover,
body.light-theme .attachment-button:hover,
body.light-theme .voice-btn:hover,
body.light-theme .schedule-btn:hover {
    background: rgba(218, 235, 255, .92) !important;
    color: #1f7ed0 !important;
}

/* Правые панели / меню */
body.light-theme .right-panel,
body.light-theme #right-panel,
body.light-theme .context-menu,
body.light-theme .modal-content,
body.light-theme .vc-modal-card,
body.light-theme .format-toolbar,
body.light-theme .send-action-menu,
body.light-theme .attachments-panel,
body.light-theme .profile-side-panel {
    background: rgba(248, 251, 254, .96) !important;
    color: #172233 !important;
    border-color: rgba(92, 110, 133, .18) !important;
    box-shadow: -12px 0 32px rgba(46, 62, 82, .10) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

body.light-theme .right-panel .card,
body.light-theme .profile-card,
body.light-theme .attachment-card,
body.light-theme .settings-card {
    background: rgba(255, 255, 255, .86) !important;
    border-color: rgba(92, 110, 133, .14) !important;
    box-shadow: 0 6px 18px rgba(46, 62, 82, .06) !important;
}

body.light-theme .toast,
body.light-theme .notification {
    background: rgba(255, 255, 255, .96) !important;
    color: #172233 !important;
    border-color: rgba(92, 110, 133, .18) !important;
    box-shadow: 0 14px 34px rgba(46, 62, 82, .12) !important;
}

/* Скроллы — мягче и заметнее на светлом фоне */
body.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(112, 130, 152, .38) !important;
    border: 3px solid rgba(245, 248, 252, .9) !important;
    border-radius: 999px !important;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(112, 130, 152, .55) !important;
}

/* Чтобы светлая тема не была слепяще-белой на пустых местах */
body.light-theme .empty-state,
body.light-theme .empty-chat,
body.light-theme .placeholder {
    color: #748398 !important;
}

/* Мобильная нижняя навигация */
body.light-theme #mobile-nav {
    background: rgba(248, 251, 254, .92) !important;
    border-top: 1px solid rgba(92, 110, 133, .18) !important;
}

body.light-theme .nav-item {
    color: #66758a !important;
}

body.light-theme .nav-item.active {
    color: #1f7ed0 !important;
    background: rgba(218, 235, 255, .78) !important;
}

/* ===== /static/css/split/09-sm-light-group-fix-v14.css ===== */

/* === SmChat Light Theme V14: фиксы группы, даты и иконок шапки === */
/* Только CSS. Логика не менялась. */

/* 1) Правая панель "О группе" в светлой теме: больше не тёмная и текст читаемый */
body.light-theme .group-info-panel,
body.light-theme .group-about-panel,
body.light-theme .group-details-panel,
body.light-theme .group-view-panel,
body.light-theme .group-profile-panel,
body.light-theme .group-side-panel,
body.light-theme .right-panel.group-panel,
body.light-theme #group-info-panel,
body.light-theme #group-details-panel,
body.light-theme #group-profile-panel {
    background: rgba(248, 251, 254, .97) !important;
    color: #172233 !important;
    border-left: 1px solid rgba(92, 110, 133, .18) !important;
    box-shadow: -16px 0 36px rgba(46, 62, 82, .10) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

body.light-theme .group-info-panel *,
body.light-theme .group-about-panel *,
body.light-theme .group-details-panel *,
body.light-theme .group-view-panel *,
body.light-theme .group-profile-panel *,
body.light-theme .group-side-panel *,
body.light-theme .right-panel.group-panel *,
body.light-theme #group-info-panel *,
body.light-theme #group-details-panel *,
body.light-theme #group-profile-panel * {
    text-shadow: none !important;
}

body.light-theme .group-info-panel h1,
body.light-theme .group-info-panel h2,
body.light-theme .group-info-panel h3,
body.light-theme .group-about-panel h1,
body.light-theme .group-about-panel h2,
body.light-theme .group-about-panel h3,
body.light-theme .group-details-panel h1,
body.light-theme .group-details-panel h2,
body.light-theme .group-details-panel h3,
body.light-theme .group-view-panel h1,
body.light-theme .group-view-panel h2,
body.light-theme .group-view-panel h3,
body.light-theme .group-profile-panel h1,
body.light-theme .group-profile-panel h2,
body.light-theme .group-profile-panel h3,
body.light-theme .group-side-panel h1,
body.light-theme .group-side-panel h2,
body.light-theme .group-side-panel h3,
body.light-theme #group-info-panel h1,
body.light-theme #group-info-panel h2,
body.light-theme #group-info-panel h3,
body.light-theme #group-details-panel h1,
body.light-theme #group-details-panel h2,
body.light-theme #group-details-panel h3,
body.light-theme #group-profile-panel h1,
body.light-theme #group-profile-panel h2,
body.light-theme #group-profile-panel h3 {
    color: #172233 !important;
}

body.light-theme .group-info-panel .panel-title,
body.light-theme .group-about-panel .panel-title,
body.light-theme .group-details-panel .panel-title,
body.light-theme .group-view-panel .panel-title,
body.light-theme .group-profile-panel .panel-title,
body.light-theme .group-side-panel .panel-title,
body.light-theme #group-info-panel .panel-title,
body.light-theme #group-details-panel .panel-title,
body.light-theme #group-profile-panel .panel-title {
    color: #172233 !important;
}

body.light-theme .group-info-panel .close-btn,
body.light-theme .group-about-panel .close-btn,
body.light-theme .group-details-panel .close-btn,
body.light-theme .group-view-panel .close-btn,
body.light-theme .group-profile-panel .close-btn,
body.light-theme .group-side-panel .close-btn,
body.light-theme #group-info-panel .close-btn,
body.light-theme #group-details-panel .close-btn,
body.light-theme #group-profile-panel .close-btn {
    color: #6b7a8d !important;
    background: rgba(231, 239, 248, .74) !important;
    border: 1px solid rgba(92, 110, 133, .16) !important;
}

body.light-theme .group-info-panel .close-btn:hover,
body.light-theme .group-about-panel .close-btn:hover,
body.light-theme .group-details-panel .close-btn:hover,
body.light-theme .group-view-panel .close-btn:hover,
body.light-theme .group-profile-panel .close-btn:hover,
body.light-theme .group-side-panel .close-btn:hover,
body.light-theme #group-info-panel .close-btn:hover,
body.light-theme #group-details-panel .close-btn:hover,
body.light-theme #group-profile-panel .close-btn:hover {
    color: #1f7ed0 !important;
    background: rgba(218, 235, 255, .96) !important;
}

body.light-theme .group-avatar-large,
body.light-theme .group-main-avatar,
body.light-theme .group-info-avatar,
body.light-theme .group-profile-avatar {
    box-shadow: 0 14px 30px rgba(46, 62, 82, .16) !important;
    border: 4px solid rgba(255, 255, 255, .92) !important;
}

body.light-theme .group-title,
body.light-theme .group-name,
body.light-theme .group-info-title,
body.light-theme .group-profile-title {
    color: #172233 !important;
}

body.light-theme .group-subtitle,
body.light-theme .group-members-count,
body.light-theme .group-info-subtitle,
body.light-theme .group-profile-subtitle {
    color: #66758a !important;
}

/* Карточки внутри панели группы */
body.light-theme .group-info-panel .card,
body.light-theme .group-info-panel .group-info-card,
body.light-theme .group-info-panel .group-section,
body.light-theme .group-info-panel .group-info-row,
body.light-theme .group-about-panel .card,
body.light-theme .group-about-panel .group-info-card,
body.light-theme .group-about-panel .group-section,
body.light-theme .group-about-panel .group-info-row,
body.light-theme .group-details-panel .card,
body.light-theme .group-details-panel .group-info-card,
body.light-theme .group-details-panel .group-section,
body.light-theme .group-details-panel .group-info-row,
body.light-theme .group-view-panel .card,
body.light-theme .group-view-panel .group-info-card,
body.light-theme .group-view-panel .group-section,
body.light-theme .group-view-panel .group-info-row,
body.light-theme .group-profile-panel .card,
body.light-theme .group-profile-panel .group-info-card,
body.light-theme .group-profile-panel .group-section,
body.light-theme .group-profile-panel .group-info-row,
body.light-theme .group-side-panel .card,
body.light-theme .group-side-panel .group-info-card,
body.light-theme .group-side-panel .group-section,
body.light-theme .group-side-panel .group-info-row,
body.light-theme #group-info-panel .card,
body.light-theme #group-info-panel .group-info-card,
body.light-theme #group-info-panel .group-section,
body.light-theme #group-info-panel .group-info-row,
body.light-theme #group-details-panel .card,
body.light-theme #group-details-panel .group-info-card,
body.light-theme #group-details-panel .group-section,
body.light-theme #group-details-panel .group-info-row,
body.light-theme #group-profile-panel .card,
body.light-theme #group-profile-panel .group-info-card,
body.light-theme #group-profile-panel .group-section,
body.light-theme #group-profile-panel .group-info-row {
    background: rgba(255, 255, 255, .88) !important;
    color: #172233 !important;
    border: 1px solid rgba(92, 110, 133, .15) !important;
    box-shadow: 0 8px 20px rgba(46, 62, 82, .07) !important;
}

body.light-theme .group-info-panel .card-title,
body.light-theme .group-info-panel .section-title,
body.light-theme .group-info-panel .group-section-title,
body.light-theme .group-about-panel .card-title,
body.light-theme .group-about-panel .section-title,
body.light-theme .group-about-panel .group-section-title,
body.light-theme .group-details-panel .card-title,
body.light-theme .group-details-panel .section-title,
body.light-theme .group-details-panel .group-section-title,
body.light-theme .group-view-panel .card-title,
body.light-theme .group-view-panel .section-title,
body.light-theme .group-view-panel .group-section-title,
body.light-theme .group-profile-panel .card-title,
body.light-theme .group-profile-panel .section-title,
body.light-theme .group-profile-panel .group-section-title,
body.light-theme .group-side-panel .card-title,
body.light-theme .group-side-panel .section-title,
body.light-theme .group-side-panel .group-section-title,
body.light-theme #group-info-panel .card-title,
body.light-theme #group-info-panel .section-title,
body.light-theme #group-info-panel .group-section-title,
body.light-theme #group-details-panel .card-title,
body.light-theme #group-details-panel .section-title,
body.light-theme #group-details-panel .group-section-title,
body.light-theme #group-profile-panel .card-title,
body.light-theme #group-profile-panel .section-title,
body.light-theme #group-profile-panel .group-section-title {
    color: #526174 !important;
}

body.light-theme .group-info-panel .muted,
body.light-theme .group-info-panel .secondary,
body.light-theme .group-info-panel small,
body.light-theme .group-about-panel .muted,
body.light-theme .group-about-panel .secondary,
body.light-theme .group-about-panel small,
body.light-theme .group-details-panel .muted,
body.light-theme .group-details-panel .secondary,
body.light-theme .group-details-panel small,
body.light-theme .group-view-panel .muted,
body.light-theme .group-view-panel .secondary,
body.light-theme .group-view-panel small,
body.light-theme .group-profile-panel .muted,
body.light-theme .group-profile-panel .secondary,
body.light-theme .group-profile-panel small,
body.light-theme .group-side-panel .muted,
body.light-theme .group-side-panel .secondary,
body.light-theme .group-side-panel small,
body.light-theme #group-info-panel .muted,
body.light-theme #group-info-panel .secondary,
body.light-theme #group-info-panel small,
body.light-theme #group-details-panel .muted,
body.light-theme #group-details-panel .secondary,
body.light-theme #group-details-panel small,
body.light-theme #group-profile-panel .muted,
body.light-theme #group-profile-panel .secondary,
body.light-theme #group-profile-panel small {
    color: #66758a !important;
}

body.light-theme .group-info-panel .role,
body.light-theme .group-info-panel .member-role,
body.light-theme .group-about-panel .role,
body.light-theme .group-about-panel .member-role,
body.light-theme .group-details-panel .role,
body.light-theme .group-details-panel .member-role,
body.light-theme .group-view-panel .role,
body.light-theme .group-view-panel .member-role,
body.light-theme .group-profile-panel .role,
body.light-theme .group-profile-panel .member-role,
body.light-theme .group-side-panel .role,
body.light-theme .group-side-panel .member-role,
body.light-theme #group-info-panel .role,
body.light-theme #group-info-panel .member-role,
body.light-theme #group-details-panel .role,
body.light-theme #group-details-panel .member-role,
body.light-theme #group-profile-panel .role,
body.light-theme #group-profile-panel .member-role {
    color: #1f7ed0 !important;
}

/* 2) Полноэкранные настройки группы тоже учитывают светлую тему */
body.light-theme .group-settings-screen,
body.light-theme .group-settings-page,
body.light-theme .group-settings-fullscreen,
body.light-theme .group-management-screen,
body.light-theme #group-settings-screen,
body.light-theme #group-settings-page,
body.light-theme #group-management-screen {
    background: #edf3f8 !important;
    color: #172233 !important;
}

body.light-theme .group-settings-screen .group-settings-header,
body.light-theme .group-settings-page .group-settings-header,
body.light-theme .group-settings-fullscreen .group-settings-header,
body.light-theme .group-management-screen .group-settings-header,
body.light-theme #group-settings-screen .group-settings-header,
body.light-theme #group-settings-page .group-settings-header,
body.light-theme #group-management-screen .group-settings-header {
    background: rgba(248, 251, 254, .92) !important;
    color: #172233 !important;
    border-bottom: 1px solid rgba(92, 110, 133, .18) !important;
}

body.light-theme .group-settings-screen .settings-card,
body.light-theme .group-settings-screen .group-settings-card,
body.light-theme .group-settings-screen .card,
body.light-theme .group-settings-page .settings-card,
body.light-theme .group-settings-page .group-settings-card,
body.light-theme .group-settings-page .card,
body.light-theme .group-settings-fullscreen .settings-card,
body.light-theme .group-settings-fullscreen .group-settings-card,
body.light-theme .group-settings-fullscreen .card,
body.light-theme .group-management-screen .settings-card,
body.light-theme .group-management-screen .group-settings-card,
body.light-theme .group-management-screen .card,
body.light-theme #group-settings-screen .settings-card,
body.light-theme #group-settings-screen .group-settings-card,
body.light-theme #group-settings-screen .card,
body.light-theme #group-settings-page .settings-card,
body.light-theme #group-settings-page .group-settings-card,
body.light-theme #group-settings-page .card,
body.light-theme #group-management-screen .settings-card,
body.light-theme #group-management-screen .group-settings-card,
body.light-theme #group-management-screen .card {
    background: rgba(255, 255, 255, .88) !important;
    color: #172233 !important;
    border: 1px solid rgba(92, 110, 133, .16) !important;
    box-shadow: 0 10px 26px rgba(46, 62, 82, .07) !important;
}

body.light-theme .group-settings-screen input,
body.light-theme .group-settings-screen textarea,
body.light-theme .group-settings-screen select,
body.light-theme .group-settings-page input,
body.light-theme .group-settings-page textarea,
body.light-theme .group-settings-page select,
body.light-theme .group-settings-fullscreen input,
body.light-theme .group-settings-fullscreen textarea,
body.light-theme .group-settings-fullscreen select,
body.light-theme .group-management-screen input,
body.light-theme .group-management-screen textarea,
body.light-theme .group-management-screen select,
body.light-theme #group-settings-screen input,
body.light-theme #group-settings-screen textarea,
body.light-theme #group-settings-screen select,
body.light-theme #group-settings-page input,
body.light-theme #group-settings-page textarea,
body.light-theme #group-settings-page select,
body.light-theme #group-management-screen input,
body.light-theme #group-management-screen textarea,
body.light-theme #group-management-screen select {
    background: rgba(255, 255, 255, .96) !important;
    color: #172233 !important;
    border: 1px solid rgba(92, 110, 133, .22) !important;
}

body.light-theme .group-settings-screen input::placeholder,
body.light-theme .group-settings-screen textarea::placeholder,
body.light-theme .group-settings-page input::placeholder,
body.light-theme .group-settings-page textarea::placeholder,
body.light-theme .group-settings-fullscreen input::placeholder,
body.light-theme .group-settings-fullscreen textarea::placeholder,
body.light-theme .group-management-screen input::placeholder,
body.light-theme .group-management-screen textarea::placeholder,
body.light-theme #group-settings-screen input::placeholder,
body.light-theme #group-settings-screen textarea::placeholder,
body.light-theme #group-settings-page input::placeholder,
body.light-theme #group-settings-page textarea::placeholder,
body.light-theme #group-management-screen input::placeholder,
body.light-theme #group-management-screen textarea::placeholder {
    color: #9aa8b9 !important;
}

/* 3) Дата в чате: убираем длинную полоску, остаётся только компактная плашка даты */
body.light-theme .date-separator,
body.light-theme .floating-date,
body.light-theme .messages-date,
body.light-theme .chat-date-separator {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
    margin: 14px auto !important;
    padding: 5px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #526174 !important;
    border: 1px solid rgba(92, 110, 133, .14) !important;
    box-shadow: 0 8px 20px rgba(46, 62, 82, .11) !important;
}

body.light-theme .date-separator::before,
body.light-theme .date-separator::after,
body.light-theme .floating-date::before,
body.light-theme .floating-date::after,
body.light-theme .messages-date::before,
body.light-theme .messages-date::after,
body.light-theme .chat-date-separator::before,
body.light-theme .chat-date-separator::after {
    content: none !important;
    display: none !important;
}

body.light-theme .date-separator span,
body.light-theme .floating-date span,
body.light-theme .messages-date span,
body.light-theme .chat-date-separator span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit !important;
}

/* На случай если полоска отрисована отдельным hr/div внутри даты */
body.light-theme .date-separator hr,
body.light-theme .floating-date hr,
body.light-theme .messages-date hr,
body.light-theme .chat-date-separator hr,
body.light-theme .date-line,
body.light-theme .message-date-line {
    display: none !important;
}

/* 4) Иконки в верхней шапке чата на светлой теме заметнее */
body.light-theme #chat-header .chat-header-actions button,
body.light-theme #chat-header .chat-action-btn,
body.light-theme #chat-header .icon-btn,
body.light-theme #chat-header button,
body.light-theme .chat-header-actions .icon-btn,
body.light-theme .chat-header-actions button {
    color: #526174 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    opacity: 1 !important;
}

body.light-theme #chat-header .chat-header-actions button svg,
body.light-theme #chat-header .chat-action-btn svg,
body.light-theme #chat-header .icon-btn svg,
body.light-theme .chat-header-actions button svg,
body.light-theme .chat-header-actions .icon-btn svg {
    color: #526174 !important;
    stroke: #526174 !important;
    fill: none !important;
    opacity: 1 !important;
}

body.light-theme #chat-header .chat-header-actions button:hover,
body.light-theme #chat-header .chat-action-btn:hover,
body.light-theme #chat-header .icon-btn:hover,
body.light-theme #chat-header button:hover,
body.light-theme .chat-header-actions .icon-btn:hover,
body.light-theme .chat-header-actions button:hover {
    color: #1f7ed0 !important;
    background: rgba(218, 235, 255, .86) !important;
    border-color: rgba(42, 143, 232, .20) !important;
}

body.light-theme #chat-header .chat-header-actions button:hover svg,
body.light-theme #chat-header .chat-action-btn:hover svg,
body.light-theme #chat-header .icon-btn:hover svg,
body.light-theme .chat-header-actions button:hover svg,
body.light-theme .chat-header-actions .icon-btn:hover svg {
    color: #1f7ed0 !important;
    stroke: #1f7ed0 !important;
}

/* Если иконки сделаны символами/emoji/inline, повышаем контраст */
body.light-theme #chat-header .chat-header-actions,
body.light-theme #chat-header .chat-header-actions *,
body.light-theme #chat-header .header-actions,
body.light-theme #chat-header .header-actions * {
    text-shadow: none !important;
}

body.light-theme #chat-header [title*="Поиск"],
body.light-theme #chat-header [aria-label*="Поиск"],
body.light-theme #chat-header [title*="Настройки"],
body.light-theme #chat-header [aria-label*="Настройки"],
body.light-theme #chat-header [title*="Меню"],
body.light-theme #chat-header [aria-label*="Меню"],
body.light-theme #chat-header [title*="Вложения"],
body.light-theme #chat-header [aria-label*="Вложения"] {
    color: #526174 !important;
    opacity: 1 !important;
}

body.light-theme #chat-header [title*="Поиск"]:hover,
body.light-theme #chat-header [aria-label*="Поиск"]:hover,
body.light-theme #chat-header [title*="Настройки"]:hover,
body.light-theme #chat-header [aria-label*="Настройки"]:hover,
body.light-theme #chat-header [title*="Меню"]:hover,
body.light-theme #chat-header [aria-label*="Меню"]:hover,
body.light-theme #chat-header [title*="Вложения"]:hover,
body.light-theme #chat-header [aria-label*="Вложения"]:hover {
    color: #1f7ed0 !important;
}

/* 5) Для карточек, которые старый CSS красил в тёмно-серый прямо в светлой теме */
body.light-theme .right-panel .dark-card,
body.light-theme .right-panel .info-block,
body.light-theme .right-panel .member-list,
body.light-theme .right-panel .member-row,
body.light-theme .right-panel .media-link-row {
    background: rgba(255, 255, 255, .86) !important;
    color: #172233 !important;
    border-color: rgba(92, 110, 133, .14) !important;
}

body.light-theme .right-panel .member-name,
body.light-theme .right-panel .info-title,
body.light-theme .right-panel .row-title {
    color: #172233 !important;
}

body.light-theme .right-panel .member-status,
body.light-theme .right-panel .info-subtitle,
body.light-theme .right-panel .row-subtitle {
    color: #66758a !important;
}

/* ===== /static/css/split/11-video-share.css ===== */


        /* ===== Полноценное окно «Поделиться видео» ===== */
        .sm-video-share-backdrop {
            position: fixed;
            inset: 0;
            z-index: 30050;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(2, 9, 18, 0.72);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .sm-video-share-dialog {
            width: min(680px, calc(100vw - 32px));
            max-height: min(820px, calc(100vh - 40px));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            color: var(--text, #f4f7fb);
            background: linear-gradient(180deg, rgba(20, 38, 58, 0.99), rgba(8, 23, 38, 0.99));
            border: 1px solid rgba(117, 160, 201, 0.24);
            border-radius: 24px;
            box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
        }

        .sm-video-share-head,
        .sm-video-share-footer {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 20px;
        }

        .sm-video-share-head {
            border-bottom: 1px solid rgba(117, 160, 201, 0.16);
        }

        .sm-video-share-titlebox {
            min-width: 0;
            flex: 1;
        }

        .sm-video-share-title {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 800;
        }

        .sm-video-share-subtitle {
            margin-top: 4px;
            color: var(--text3, #91a5bb);
            font-size: 0.78rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-video-share-close {
            width: 38px;
            height: 38px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border: 1px solid rgba(117, 160, 201, 0.22);
            border-radius: 12px;
            background: rgba(31, 54, 77, 0.72);
            color: inherit;
            cursor: pointer;
            font-size: 1.35rem;
        }

        .sm-video-share-tools {
            flex: 0 0 auto;
            padding: 14px 20px 10px;
        }

        .sm-video-share-search {
            width: 100%;
            min-height: 44px;
            padding: 0 14px;
            color: inherit;
            background: rgba(4, 17, 30, 0.72);
            border: 1px solid rgba(117, 160, 201, 0.2);
            border-radius: 13px;
            outline: none;
        }

        .sm-video-share-search:focus,
        .sm-video-share-comment:focus {
            border-color: rgba(46, 139, 255, 0.8);
            box-shadow: 0 0 0 3px rgba(46, 139, 255, 0.14);
        }

        .sm-video-share-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 10px;
            color: var(--text3, #91a5bb);
            font-size: 0.75rem;
        }

        .sm-video-share-select-all {
            border: 0;
            padding: 4px 0;
            background: transparent;
            color: var(--accent, #3b91ff);
            cursor: pointer;
            font: inherit;
            font-weight: 700;
        }

        .sm-video-share-list {
            min-height: 180px;
            max-height: 390px;
            overflow: auto;
            padding: 4px 12px 12px;
            overscroll-behavior: contain;
        }

        .sm-video-share-empty {
            display: grid;
            place-items: center;
            min-height: 170px;
            color: var(--text3, #91a5bb);
            text-align: center;
        }

        .sm-video-share-chat {
            width: 100%;
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) 28px;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid transparent;
            border-radius: 15px;
            background: transparent;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }

        .sm-video-share-chat:hover {
            background: rgba(69, 112, 151, 0.13);
        }

        .sm-video-share-chat.is-selected {
            background: rgba(41, 125, 232, 0.14);
            border-color: rgba(55, 145, 255, 0.36);
        }

        .sm-video-share-avatar {
            position: relative;
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 50%;
            color: #fff;
            font-size: 0.78rem;
            font-weight: 800;
            background-position: center;
            background-size: cover;
            isolation: isolate;
        }

        .sm-video-share-avatar-fallback {
            position: relative;
            z-index: 0;
            max-width: 34px;
            overflow: hidden;
            text-align: center;
            white-space: nowrap;
        }

        .sm-video-share-avatar img {
            position: absolute;
            z-index: 1;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            object-fit: cover;
            object-position: center;
        }

        .sm-video-share-chat-info {
            min-width: 0;
        }

        .sm-video-share-chat-title {
            overflow: hidden;
            color: var(--text, #f4f7fb);
            font-size: 0.92rem;
            font-weight: 750;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .sm-video-share-chat-meta {
            margin-top: 3px;
            overflow: hidden;
            color: var(--text3, #91a5bb);
            font-size: 0.72rem;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .sm-video-share-check {
            width: 22px;
            height: 22px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(141, 172, 201, 0.45);
            border-radius: 7px;
            color: transparent;
            background: rgba(7, 19, 32, 0.75);
            font-size: 0.82rem;
            font-weight: 900;
        }

        .sm-video-share-chat.is-selected .sm-video-share-check {
            color: #fff;
            background: var(--accent, #318cff);
            border-color: var(--accent, #318cff);
        }

        .sm-video-share-comment-wrap {
            flex: 0 0 auto;
            padding: 0 20px 16px;
        }

        .sm-video-share-comment {
            width: 100%;
            min-height: 84px;
            max-height: 150px;
            resize: vertical;
            padding: 12px 14px;
            color: inherit;
            background: rgba(4, 17, 30, 0.72);
            border: 1px solid rgba(117, 160, 201, 0.2);
            border-radius: 14px;
            outline: none;
            font: inherit;
        }

        .sm-video-share-comment-counter {
            margin-top: 6px;
            color: var(--text3, #91a5bb);
            font-size: 0.68rem;
            text-align: right;
        }

        .sm-video-share-footer {
            justify-content: flex-end;
            border-top: 1px solid rgba(117, 160, 201, 0.16);
            background: rgba(3, 14, 26, 0.45);
        }

        .sm-video-share-footer .btn {
            min-width: 116px;
        }

        .sm-video-share-send:disabled {
            opacity: 0.48;
            cursor: not-allowed;
        }

        .sm-video-action-menu {
            position: fixed;
            z-index: 30060;
            min-width: 210px;
            padding: 7px;
            border: 1px solid rgba(117, 160, 201, 0.24);
            border-radius: 14px;
            background: rgba(12, 29, 46, 0.98);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
        }

        .sm-video-action-menu button {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--text, #f4f7fb);
            cursor: pointer;
            font: inherit;
            text-align: left;
        }

        .sm-video-action-menu button:hover {
            background: rgba(65, 119, 168, 0.17);
        }

        .sm-video-action-menu button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        @media (max-width: 620px) {
            .sm-video-share-backdrop { padding: 0; }
            .sm-video-share-dialog {
                width: 100vw;
                max-height: 100vh;
                height: 100vh;
                border-radius: 0;
            }
            .sm-video-share-list { max-height: none; flex: 1 1 auto; }
            .sm-video-share-footer .btn { min-width: 0; flex: 1; }
        }

/* SMCHAT_UNIFIED_FORWARD_MODAL_05A_R1 */

.sm-forward-share-dialog {
    width: min(720px, calc(100vw - 32px));
}

.sm-forward-share-preview {
    flex: 0 0 auto;
    display: grid;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 14px 20px 4px;
    overscroll-behavior: contain;
}

.sm-forward-share-preview .forward-item-preview {
    background: rgba(7, 22, 37, 0.58);
}

.sm-forward-share-comment-wrap {
    padding-top: 12px;
    padding-bottom: 4px;
}

.sm-forward-share-comment {
    min-height: 70px;
    max-height: 120px;
}

.sm-forward-share-list {
    max-height: 330px;
    padding-top: 2px;
}

.sm-forward-share-section {
    display: grid;
    gap: 4px;
}

.sm-forward-share-section +
.sm-forward-share-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid
        rgba(117, 160, 201, 0.14);
}

.sm-forward-share-section-title {
    position: sticky;
    z-index: 2;
    top: 0;
    margin: 0;
    padding: 7px 10px;
    color: var(--text3, #91a5bb);
    background: rgba(8, 23, 38, 0.96);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sm-forward-share-section-items {
    display: grid;
    gap: 2px;
}

.sm-forward-share-recipient {
    grid-template-columns:
        42px minmax(0, 1fr) 28px;
}

.sm-forward-share-selected {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.light-theme
.sm-forward-share-preview
.forward-item-preview {
    background: rgba(232, 239, 247, 0.82);
}

body.light-theme
.sm-forward-share-section-title {
    background: rgba(248, 251, 254, 0.97);
}

@media (max-width: 620px) {
    .sm-forward-share-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
    }

    .sm-forward-share-preview {
        max-height: 150px;
        padding-inline: 14px;
    }

    .sm-forward-share-comment-wrap {
        padding-inline: 14px;
    }

    .sm-forward-share-list {
        max-height: none;
        flex: 1 1 auto;
    }
}

/* SMCHAT_MULTI_RECIPIENT_FORWARD_05A_R2 */

.sm-forward-share-dialog {
    width: min(600px, calc(100vw - 28px));
    max-height: min(720px, calc(100dvh - 28px));
    border-radius: 19px;
}

.sm-forward-share-dialog .sm-video-share-head {
    padding: 12px 14px;
}

.sm-forward-share-dialog .sm-video-share-title {
    font-size: 1.02rem;
}

.sm-forward-share-dialog .sm-video-share-subtitle {
    margin-top: 2px;
    font-size: 0.72rem;
}

.sm-forward-share-dialog .sm-video-share-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1.12rem;
}

.sm-forward-share-preview {
    max-height: 112px;
    gap: 5px;
    padding: 9px 14px 3px;
}

.sm-forward-share-preview .forward-item-preview {
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
}

.sm-forward-share-preview .forward-preview-text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.78rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sm-forward-share-comment-wrap {
    padding: 8px 14px 2px;
}

.sm-forward-share-comment {
    min-height: 48px;
    max-height: 82px;
    padding: 9px 11px;
    border-radius: 11px;
    resize: none;
}

.sm-forward-share-comment-counter {
    margin-top: 3px;
}

.sm-forward-share-dialog .sm-video-share-tools {
    padding: 8px 14px 5px;
}

.sm-forward-share-dialog .sm-video-share-search {
    min-height: 38px;
    padding-inline: 11px;
    border-radius: 11px;
}

.sm-forward-share-dialog .sm-video-share-toolbar {
    margin-top: 6px;
}

.sm-forward-share-list {
    min-height: 130px;
    max-height: 270px;
    padding: 2px 8px 8px;
}

.sm-forward-share-section {
    gap: 2px;
}

.sm-forward-share-section +
.sm-forward-share-section {
    margin-top: 7px;
    padding-top: 7px;
}

.sm-forward-share-section-title {
    position: static;
    padding: 5px 8px 3px;
    background: transparent;
    font-size: 0.66rem;
}

.sm-forward-share-section-items {
    gap: 1px;
}

.sm-forward-share-dialog
.sm-video-share-chat {
    grid-template-columns:
        36px minmax(0, 1fr) 22px;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 11px;
}

.sm-forward-share-dialog
.sm-video-share-avatar {
    width: 36px;
    height: 36px;
}

.sm-forward-share-dialog
.sm-video-share-chat-title {
    font-size: 0.84rem;
}

.sm-forward-share-dialog
.sm-video-share-chat-meta {
    margin-top: 1px;
    font-size: 0.67rem;
}

.sm-forward-share-dialog
.sm-video-share-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 0.72rem;
}

.sm-forward-share-dialog
.sm-video-share-footer {
    padding: 10px 14px;
}

.sm-forward-share-dialog
.sm-video-share-footer .btn {
    min-width: 94px;
    min-height: 36px;
}

@media (max-width: 620px) {
    .sm-forward-share-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .sm-forward-share-preview {
        max-height: 96px;
    }

    .sm-forward-share-list {
        max-height: none;
        flex: 1 1 auto;
    }
}

/* SMCHAT_FORWARD_MODAL_ACTIVITY_ORDER_05A_R2 */

.sm-forward-share-dialog {
    width: min(590px, calc(100vw - 28px));
    max-height: min(710px, calc(100dvh - 28px));
    border-radius: 18px;
}

.sm-forward-share-dialog .sm-video-share-head {
    padding: 12px 14px;
}

.sm-forward-share-dialog .sm-video-share-title {
    font-size: 1.02rem;
}

.sm-forward-share-dialog .sm-video-share-subtitle {
    margin-top: 2px;
    font-size: 0.7rem;
}

.sm-forward-share-dialog .sm-video-share-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1.1rem;
}

.sm-forward-share-preview {
    max-height: 105px;
    gap: 5px;
    overflow-y: auto;
    padding: 8px 14px 2px;
}

.sm-forward-share-preview .forward-item-preview {
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
}

.sm-forward-share-preview .forward-preview-text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.77rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sm-forward-share-comment-wrap {
    padding: 8px 14px 2px;
}

.sm-forward-share-comment {
    min-height: 46px;
    max-height: 78px;
    padding: 9px 11px;
    border-radius: 11px;
    resize: none;
}

.sm-forward-share-comment-counter {
    margin-top: 3px;
}

.sm-forward-share-dialog .sm-video-share-tools {
    padding: 7px 14px 5px;
}

.sm-forward-share-dialog .sm-video-share-search {
    min-height: 38px;
    padding-inline: 11px;
    border-radius: 11px;
}

.sm-forward-share-dialog .sm-video-share-toolbar {
    margin-top: 6px;
}

.sm-forward-share-list {
    min-height: 140px;
    max-height: 300px;
    padding: 2px 8px 8px;
}

.sm-forward-share-dialog .sm-video-share-chat {
    grid-template-columns:
        36px minmax(0, 1fr) 22px;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 11px;
}

.sm-forward-share-dialog .sm-video-share-avatar {
    width: 36px;
    height: 36px;
}

.sm-forward-share-dialog .sm-video-share-chat-title {
    font-size: 0.84rem;
}

.sm-forward-share-dialog .sm-video-share-chat-meta {
    margin-top: 1px;
    font-size: 0.66rem;
}

.sm-forward-share-dialog .sm-video-share-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 0.72rem;
}

.sm-forward-share-dialog .sm-video-share-footer {
    padding: 10px 14px;
}

.sm-forward-share-dialog
.sm-video-share-footer .btn {
    min-width: 94px;
    min-height: 36px;
}

@media (max-width: 620px) {
    .sm-forward-share-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .sm-forward-share-preview {
        max-height: 92px;
    }

    .sm-forward-share-list {
        max-height: none;
        flex: 1 1 auto;
    }
}

/* SMCHAT_SELECTION_BAR_AND_COMMENT_FOCUS_05A_R3 */

/*
 * Панель выбора является обычным самостоятельным блоком
 * над composer, а не наложенным слоем.
 */
#input-area > #selection-bar.selection-bar {
    position: relative !important;
    inset: auto !important;
    z-index: 3;

    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;

    display: grid !important;
    grid-template-columns:
        minmax(120px, 1fr)
        max-content !important;
    align-items: center !important;
    gap: 14px !important;

    margin: 0 0 8px !important;
    padding: 10px 12px !important;

    border: 1px solid
        rgba(105, 157, 207, 0.20);
    border-radius: 14px;

    background:
        rgba(18, 36, 54, 0.96);

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.16);

    transform: none !important;
}

#selection-bar #selection-count {
    display: block;
    min-width: 0;

    color: var(--text, #eef6ff);
    font-size: 0.82rem;
    font-weight: 750;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#selection-bar .selection-actions {
    position: static !important;

    display: grid !important;
    grid-template-columns:
        repeat(3, max-content) !important;
    align-items: center !important;
    justify-content: end !important;

    width: auto !important;
    min-width: max-content !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

#selection-bar .selection-actions > .btn {
    position: static !important;
    inset: auto !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    min-height: 38px;

    margin: 0 !important;
    padding: 7px 13px !important;

    border: 1px solid
        rgba(121, 165, 207, 0.24);
    border-radius: 11px;

    background:
        rgba(35, 59, 82, 0.92);

    color: var(--text, #eef6ff);

    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1;

    white-space: nowrap;

    transform: none !important;
}

#selection-bar #selection-reply {
    background:
        rgba(55, 128, 210, 0.18);
}

#selection-bar #selection-forward {
    border-color:
        rgba(65, 150, 255, 0.50);

    background:
        var(--accent, #318cff);

    color: #ffffff;
}

#selection-bar #selection-cancel {
    border-color:
        rgba(239, 92, 92, 0.28);

    background:
        rgba(200, 58, 68, 0.14);

    color: #ffaaaa;
}

#selection-bar .selection-actions > .btn:hover {
    filter: brightness(1.08);
}

body.light-theme
#input-area > #selection-bar.selection-bar {
    background:
        rgba(246, 250, 254, 0.98);

    border-color:
        rgba(83, 112, 143, 0.18);
}

body.light-theme
#selection-bar #selection-count {
    color: #172233;
}

body.light-theme
#selection-bar .selection-actions > .btn {
    color: #172233;
    background: #e9f0f7;
}

body.light-theme
#selection-bar #selection-forward {
    color: #ffffff;
    background:
        var(--accent, #318cff);
}

body.light-theme
#selection-bar #selection-cancel {
    color: #c53b45;
    background: #fff0f1;
}

@media (max-width: 720px) {
    #input-area > #selection-bar.selection-bar {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #selection-bar .selection-actions {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    #selection-bar .selection-actions > .btn {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 8px !important;
    }
}

/* SMCHAT_MULTISELECT_SELECTION_BAR_05A_R4 */

/*
 * Универсальная раскладка панели выбора сообщений.
 * Должна работать и при single-select, и при multi-select.
 */
#selection-bar,
.selection-bar,
#input-area #selection-bar,
#input-area .selection-bar {
    position: relative !important;
    inset: auto !important;
    z-index: 6 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    gap: 10px 12px !important;

    margin: 0 0 8px 0 !important;
    padding: 10px 12px !important;

    border-radius: 14px !important;
    overflow: hidden !important;
}

#selection-bar #selection-count,
.selection-bar #selection-count {
    flex: 1 1 160px !important;
    min-width: 0 !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#selection-bar .selection-actions,
.selection-bar .selection-actions {
    position: static !important;
    inset: auto !important;

    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;

    transform: none !important;
}

#selection-bar .selection-actions > *,
.selection-bar .selection-actions > *,
#selection-bar .selection-actions > .btn,
.selection-bar .selection-actions > .btn,
#selection-bar .selection-actions > button,
.selection-bar .selection-actions > button {
    position: static !important;
    inset: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 7px 12px !important;

    white-space: nowrap !important;
    flex: 0 0 auto !important;

    transform: none !important;
}

@media (max-width: 780px) {
    #selection-bar,
    .selection-bar,
    #input-area #selection-bar,
    #input-area .selection-bar {
        align-items: stretch !important;
    }

    #selection-bar #selection-count,
    .selection-bar #selection-count {
        flex: 1 1 100% !important;
    }

    #selection-bar .selection-actions,
    .selection-bar .selection-actions {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    #selection-bar .selection-actions > *,
    .selection-bar .selection-actions > *,
    #selection-bar .selection-actions > .btn,
    .selection-bar .selection-actions > .btn,
    #selection-bar .selection-actions > button,
    .selection-bar .selection-actions > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* SMCHAT_NESTED_FORWARD_CHAIN_05B_R1 */
.message-forward-chain {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.message-forward-level {
    position: relative;
    min-width: 0;
    margin-inline-start: calc(var(--forward-depth, 0) * 10px);
    padding: 7px 10px 7px 12px;
    border-inline-start: 2px solid rgba(93, 168, 255, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.message-forward-level .message-reply-title,
.message-forward-level .message-reply-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.message-forward-level .message-reply-title {
    margin: 0 0 3px;
    font-weight: 600;
}

.message-forward-level .message-reply-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .message-forward-chain {
        gap: 5px;
    }

    .message-forward-level {
        margin-inline-start: calc(var(--forward-depth, 0) * 6px);
        padding: 6px 8px 6px 10px;
    }
}

/* ===== /static/css/split/12-smchat-links-group-tabs-esc-css.css ===== */

        .message-auto-link {
            color: var(--accent);
            text-decoration: none;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .message-auto-link:hover {
            text-decoration: underline;
        }

        .sm-group-admin-tabs {
            display: flex;
            align-items: end;
            gap: 8px;
            padding: 0 28px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.10);
            background: rgba(8, 20, 34, 0.78);
        }

        .sm-group-admin-tab {
            height: 50px;
            padding: 0 18px;
            border: 0;
            border-bottom: 2px solid transparent;
            background: transparent;
            color: #8fa3bc;
            font: inherit;
            font-weight: 750;
            cursor: pointer;
        }

        .sm-group-admin-tab:hover {
            color: #dbeafe;
            background: rgba(255, 255, 255, 0.025);
        }

        .sm-group-admin-tab.active {
            color: #f8fbff;
            border-bottom-color: var(--accent);
        }

        body.light-theme .sm-group-admin-tabs {
            background: rgba(245, 249, 255, 0.94);
            border-bottom-color: rgba(15, 23, 42, 0.10);
        }

        body.light-theme .sm-group-admin-tab {
            color: #64748b;
        }

        body.light-theme .sm-group-admin-tab.active,
        body.light-theme .sm-group-admin-tab:hover {
            color: #0f172a;
        }

        @media (max-width: 700px) {
            .sm-group-admin-tabs {
                padding: 0 12px;
                overflow-x: auto;
            }

            .sm-group-admin-tab {
                flex: 0 0 auto;
            }
        }

/* ===== /static/css/split/13-smchat-white-links-and-theme-fix.css ===== */

        /* Ссылки внутри сообщений не выбиваются синим цветом из текста. */
        .message-row .message-bubble .message-auto-link,
        .message-row .message-text .message-auto-link,
        .message-row .media-inline-caption .message-auto-link,
        .message-row .message-caption .message-auto-link,
        .message-row .message-bubble a.message-auto-link {
            color: #ffffff !important;
            text-decoration-color: rgba(255, 255, 255, 0.55);
            text-underline-offset: 2px;
        }

        .message-row .message-auto-link:hover {
            color: #ffffff !important;
            text-decoration: underline;
            text-decoration-thickness: 1px;
        }

        /* В светлой теме белая ссылка в белом входящем пузыре была бы нечитаемой. */
        body.light-theme .message-row.theirs .message-auto-link {
            color: #17202c !important;
            text-decoration-color: rgba(23, 32, 44, 0.45);
        }

        body.light-theme .message-row.mine .message-auto-link {
            color: #ffffff !important;
            text-decoration-color: rgba(255, 255, 255, 0.58);
        }

        /* Финальный слой цветовых тем для старых и новых компонентов. */
        input[type="checkbox"],
        input[type="radio"],
        input[type="range"] {
            accent-color: var(--accent) !important;
        }

        .btn-accent,
        #btn-send,
        .settings-nav-item.active,
        .settings-appearance-btn.active,
        .theme-btn.active,
        .group-type-card.active,
        .sm-group-choice.active,
        .sm-group-admin-tab.active,
        .emoji-tab.active,
        .attachment-tab.active {
            border-color: var(--accent) !important;
        }

        .btn-accent,
        #btn-send,
        .theme-btn.active,
        .group-switch input:checked + span,
        .toggle input:checked + .toggle-slider,
        .switch input:checked + .slider {
            background-color: var(--accent) !important;
            background-image: none !important;
            box-shadow: 0 4px 14px var(--accent-glow) !important;
        }

        .btn-accent:hover,
        #btn-send:hover {
            background-color: var(--accent-hover) !important;
        }

        .settings-nav-item.active,
        .settings-appearance-btn.active,
        .group-type-card.active,
        .sm-group-choice.active,
        .sm-group-admin-tab.active {
            box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px var(--accent-glow) !important;
        }

        .settings-nav-item.active,
        .theme-btn.active,
        .sm-group-admin-tab.active,
        .toggle-link,
        .search-highlight {
            color: var(--accent) !important;
        }

        .theme-btn {
            position: relative;
            transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
        }

        .theme-btn.active {
            transform: translateY(-2px);
            outline: 2px solid #ffffff;
            outline-offset: 2px;
        }

        body.light-theme .theme-btn.active {
            outline-color: #17202c;
        }

/* ===== /static/css/split/14-smchat-theme-depth-and-photo-delete-fix.css ===== */

        /* Производные оттенки темы задаются applyTheme(). */
        body {
            --theme-accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
            --theme-accent-medium: color-mix(in srgb, var(--accent) 24%, transparent);
            --theme-accent-strong: color-mix(in srgb, var(--accent) 44%, transparent);
            --theme-accent-shadow: color-mix(in srgb, var(--accent) 30%, transparent);
            --theme-accent-surface: color-mix(in srgb, var(--accent) 16%, var(--surface));
            --theme-accent-surface-strong: color-mix(in srgb, var(--accent) 28%, var(--surface2));
            --chat-my-bubble: color-mix(in srgb, var(--accent) 92%, #ffffff 8%);
            --chat-their-bubble: color-mix(in srgb, var(--accent) 8%, var(--surface2));
        }

        /* Левая навигационная панель теперь заметно отражает выбранный цвет. */
        body:not(.light-theme) .desktop-nav-rail {
            background:
                radial-gradient(circle at 50% 8%, var(--theme-accent-medium), transparent 34%),
                linear-gradient(180deg,
                    color-mix(in srgb, var(--accent) 11%, #0b131d) 0%,
                    color-mix(in srgb, var(--accent) 5%, #0f1823) 58%,
                    #0d1721 100%) !important;
            border-right-color: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.07)) !important;
            box-shadow: 10px 0 34px color-mix(in srgb, var(--accent) 13%, transparent) !important;
        }

        .desktop-nav-item:hover,
        .desktop-nav-item.active,
        .create-group-rail-item:hover {
            background: var(--theme-accent-soft) !important;
            color: color-mix(in srgb, var(--accent) 30%, #ffffff) !important;
            box-shadow:
                inset 0 0 0 1px var(--theme-accent-medium),
                0 8px 22px var(--theme-accent-shadow) !important;
        }

        .desktop-nav-item.active .desktop-nav-icon,
        .create-group-rail-item:hover .desktop-nav-icon {
            filter: drop-shadow(0 0 8px var(--theme-accent-shadow)) saturate(1.15) !important;
        }

        /* Сообщения: выбранная тема сильнее заметна в пузырях и подписях. */
        .message-row.mine .message-bubble:not(:has(.media-preview)):not(:has(.custom-video-player)):not(:has(.multi-attachment-collage)):not(:has(.sticker)),
        .message-row.mine .media-caption-bubble,
        .message-row.mine .media-inline-caption {
            background:
                linear-gradient(145deg,
                    color-mix(in srgb, var(--accent) 94%, #ffffff 6%),
                    color-mix(in srgb, var(--accent-hover) 92%, #0b355f 8%)) !important;
            border-color: color-mix(in srgb, #ffffff 18%, var(--accent)) !important;
            box-shadow:
                0 10px 28px var(--theme-accent-shadow),
                inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
        }

        .message-row.theirs .message-bubble:not(:has(.media-preview)):not(:has(.custom-video-player)):not(:has(.multi-attachment-collage)):not(:has(.sticker)),
        .message-row.theirs .media-caption-bubble,
        .message-row.theirs .media-inline-caption {
            background:
                linear-gradient(145deg,
                    color-mix(in srgb, var(--accent) 11%, var(--surface2)),
                    color-mix(in srgb, var(--accent) 5%, var(--surface))) !important;
            border: 1px solid color-mix(in srgb, var(--accent) 21%, transparent) !important;
            box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 10%, rgba(0, 0, 0, 0.26)) !important;
        }

        .message-row.mine .message-meta-outside,
        .message-row.mine .message-status.read,
        .message-row.mine .message-status.read::before {
            color: color-mix(in srgb, var(--accent) 34%, #dceeff) !important;
        }

        /* Панели, карточки профиля и настройки получают мягкую цветную подсветку. */
        .current-profile-card,
        .sm-final-current-photos-card,
        .settings-block,
        .settings-section,
        .right-panel .profile-info-item {
            border-color: color-mix(in srgb, var(--accent) 17%, rgba(255, 255, 255, 0.08)) !important;
            box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 7%, rgba(0, 0, 0, 0.20)) !important;
        }

        .current-profile-card:hover,
        .sm-final-current-photos-card:hover {
            border-color: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.10)) !important;
            box-shadow: 0 13px 34px color-mix(in srgb, var(--accent) 13%, rgba(0, 0, 0, 0.23)) !important;
        }

        #input-area:focus-within,
        .settings-window-content:focus-within {
            border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
            box-shadow: 0 0 0 3px var(--theme-accent-soft), 0 12px 28px var(--theme-accent-shadow) !important;
        }

        /* Светлая тема сохраняет цветовой акцент, но остаётся читаемой. */
        body.light-theme {
            --chat-my-bubble: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
            --chat-their-bubble: color-mix(in srgb, var(--accent) 5%, #ffffff);
        }

        body.light-theme .desktop-nav-rail {
            background:
                radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
                linear-gradient(180deg,
                    color-mix(in srgb, var(--accent) 8%, #ffffff),
                    color-mix(in srgb, var(--accent) 3%, #f3f6fa)) !important;
            border-right-color: color-mix(in srgb, var(--accent) 22%, #d9e1ea) !important;
            box-shadow: 10px 0 28px color-mix(in srgb, var(--accent) 9%, transparent) !important;
        }

        body.light-theme .message-row.theirs .message-bubble:not(:has(.media-preview)):not(:has(.custom-video-player)):not(:has(.multi-attachment-collage)):not(:has(.sticker)),
        body.light-theme .message-row.theirs .media-caption-bubble,
        body.light-theme .message-row.theirs .media-inline-caption {
            background: linear-gradient(145deg,
                color-mix(in srgb, var(--accent) 7%, #ffffff),
                #ffffff) !important;
            border-color: color-mix(in srgb, var(--accent) 18%, #dbe4ee) !important;
        }

        /* Удаление фотографий профиля — отдельная заметная кнопка. */
        .sm-final-current-photo {
            border-color: color-mix(in srgb, var(--accent) 22%, rgba(148, 163, 184, 0.16)) !important;
            box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 9%, rgba(0, 0, 0, 0.22));
        }

        .sm-final-current-photo-delete {
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 4;
            width: 30px;
            height: 30px;
            padding: 0;
            border: 1px solid rgba(255, 116, 116, 0.45);
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: rgba(52, 12, 20, 0.82);
            color: #ff9a9a;
            font-size: 15px;
            cursor: pointer;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
            transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
        }

        .sm-final-current-photo-delete:hover {
            transform: translateY(-1px) scale(1.05);
            background: rgba(150, 28, 44, 0.92);
            border-color: rgba(255, 148, 148, 0.78);
            color: #ffffff;
        }

        .sm-final-current-photo-delete:disabled {
            opacity: 0.55;
            cursor: wait;
        }

        .sm-final-current-photo-actions {
            padding-right: 0 !important;
        }

        .sm-profile-photo-delete-dialog {
            width: min(430px, calc(100vw - 32px));
            text-align: center;
            padding: 8px 4px 2px;
        }

        .sm-profile-photo-delete-dialog h3 {
            margin: 8px 0 6px;
            color: var(--text);
            font-size: 20px;
        }

        .sm-profile-photo-delete-dialog p {
            margin: 0 auto 18px;
            color: var(--text2);
            line-height: 1.5;
            max-width: 360px;
        }

        .sm-profile-photo-delete-icon {
            width: 54px;
            height: 54px;
            margin: 0 auto;
            border-radius: 17px;
            display: grid;
            place-items: center;
            background: rgba(255, 77, 94, 0.14);
            border: 1px solid rgba(255, 99, 115, 0.30);
            font-size: 25px;
        }

/* ===== /static/css/split/15-smchat-voice-message-redesign-css.css ===== */

    .voice-message-stack {
        display: grid;
        gap: 8px;
        width: min(390px, 78vw);
        max-width: 100%;
    }

    .message-media-wrap:has(.voice-player) {
        width: auto !important;
        max-width: min(390px, 78vw) !important;
        overflow: visible !important;
        background: transparent !important;
        border-radius: 22px !important;
    }

    .message-media-wrap:has(.voice-player) .media-inline-caption {
        margin-top: 6px;
        border-radius: 14px;
    }

    .message-row .voice-player {
        --voice-wave-muted: rgba(154, 171, 194, 0.44);
        --voice-wave-active: var(--accent, #2f91f5);
        width: min(390px, 78vw) !important;
        min-width: min(270px, 72vw) !important;
        height: auto !important;
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(129, 155, 190, 0.16) !important;
        border-radius: 20px !important;
        background:
            linear-gradient(145deg, rgba(25, 39, 57, 0.96), rgba(14, 27, 43, 0.98)) !important;
        box-shadow:
            0 13px 32px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
        color: var(--text, #f7fbff) !important;
        overflow: hidden;
        isolation: isolate;
        position: relative;
    }

    .message-row .voice-player::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        background: radial-gradient(circle at 16% 0%, rgba(58, 151, 255, 0.22), transparent 42%);
        transition: opacity 180ms ease;
    }

    .message-row .voice-player.playing::before {
        opacity: 1;
    }

    .message-row.mine .voice-player {
        --voice-wave-muted: rgba(255, 255, 255, 0.42);
        --voice-wave-active: #ffffff;
        border-color: rgba(255, 255, 255, 0.15) !important;
        background:
            linear-gradient(145deg,
                color-mix(in srgb, var(--accent, #2f91f5) 92%, #1f5fc3),
                color-mix(in srgb, var(--accent, #2f91f5) 74%, #143a87)) !important;
        box-shadow:
            0 14px 32px color-mix(in srgb, var(--accent, #2f91f5) 25%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    }

    .message-row .voice-play {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
        display: inline-grid !important;
        place-items: center;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: linear-gradient(145deg, var(--accent, #2f91f5), #176ddf) !important;
        color: #ffffff !important;
        box-shadow:
            0 8px 18px color-mix(in srgb, var(--accent, #2f91f5) 34%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
        cursor: pointer;
        transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
    }

    .message-row.mine .voice-play {
        background: rgba(255, 255, 255, 0.95) !important;
        color: var(--accent, #2f91f5) !important;
        box-shadow: 0 8px 20px rgba(7, 38, 86, 0.24) !important;
    }

    .voice-play:hover {
        transform: scale(1.045);
        filter: brightness(1.06);
    }

    .voice-play:active {
        transform: scale(0.96);
    }

    .voice-icon {
        width: 23px;
        height: 23px;
        display: block;
    }

    .voice-icon-pause {
        display: none;
    }

    .voice-player.playing .voice-icon-play {
        display: none;
    }

    .voice-player.playing .voice-icon-pause {
        display: block;
    }

    .voice-player .voice-main {
        min-width: 0;
        display: grid !important;
        gap: 6px !important;
    }

    .voice-wave-shell {
        position: relative;
        min-width: 0;
        height: 30px;
        overflow: hidden;
        cursor: pointer;
    }

    .voice-wave-layer {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        gap: 2px;
        color: var(--voice-wave-muted);
        pointer-events: none;
    }

    .voice-wave-bar {
        width: 3px;
        min-width: 2px;
        max-width: 4px;
        flex: 1 1 3px;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition: background-color 150ms ease, opacity 150ms ease;
    }

    .voice-wave-active {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--voice-progress, 0%);
        overflow: hidden;
        pointer-events: none;
    }

    .voice-wave-active .voice-wave-layer {
        width: calc(min(390px, 78vw) - 48px - 12px - 14px - 14px - 44px);
        min-width: 170px;
        color: var(--voice-wave-active);
    }

    .voice-player.playing .voice-wave-active .voice-wave-bar:nth-child(3n + 1) {
        animation: smchat-voice-pulse 720ms ease-in-out infinite alternate;
    }

    .voice-player.playing .voice-wave-active .voice-wave-bar:nth-child(3n + 2) {
        animation: smchat-voice-pulse 920ms ease-in-out 90ms infinite alternate;
    }

    .voice-player.playing .voice-wave-active .voice-wave-bar:nth-child(3n) {
        animation: smchat-voice-pulse 820ms ease-in-out 180ms infinite alternate;
    }

    @keyframes smchat-voice-pulse {
        from { opacity: 0.72; filter: brightness(0.92); }
        to { opacity: 1; filter: brightness(1.25); }
    }

    .voice-player .voice-seek {
        position: absolute !important;
        inset: 0 !important;
        z-index: 5;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        opacity: 0 !important;
        cursor: pointer;
    }

    .voice-info-row {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: rgba(206, 218, 234, 0.68);
        font-size: 11px;
        line-height: 1;
    }

    .message-row.mine .voice-info-row {
        color: rgba(255, 255, 255, 0.72);
    }

    .voice-speed {
        min-width: 30px;
        height: 21px;
        padding: 0 7px;
        border: 1px solid rgba(145, 165, 190, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.055);
        color: inherit;
        font: 700 10px/1 inherit;
        cursor: pointer;
        transition: background 150ms ease, transform 150ms ease;
    }

    .voice-speed:hover,
    .voice-speed.active {
        background: color-mix(in srgb, var(--accent, #2f91f5) 28%, transparent);
        color: #ffffff;
    }

    .voice-speed:active {
        transform: scale(0.95);
    }

    .message-row.mine .voice-speed {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.12);
    }

    .voice-player > .voice-duration {
        min-width: 38px;
        text-align: right;
        color: rgba(224, 234, 246, 0.92);
        font-size: 14px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .message-row.mine .voice-player > .voice-duration {
        color: #ffffff;
    }

    .voice-player audio,
    .voice-player audio[controls] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.light-theme .message-row.theirs .voice-player {
        --voice-wave-muted: rgba(73, 91, 116, 0.35);
        background: linear-gradient(145deg, #ffffff, #f1f5fb) !important;
        border-color: rgba(91, 116, 149, 0.16) !important;
        color: #172235 !important;
        box-shadow: 0 12px 28px rgba(38, 62, 92, 0.12) !important;
    }

    body.light-theme .message-row.theirs .voice-info-row,
    body.light-theme .message-row.theirs .voice-player > .voice-duration {
        color: #65748a;
    }

    @media (max-width: 640px) {
        .voice-message-stack,
        .message-row .voice-player,
        .message-media-wrap:has(.voice-player) {
            width: min(330px, 82vw) !important;
            max-width: 82vw !important;
        }

        .message-row .voice-player {
            grid-template-columns: 42px minmax(0, 1fr) auto !important;
            gap: 9px !important;
            padding: 10px 11px !important;
            border-radius: 18px !important;
        }

        .message-row .voice-play {
            width: 42px !important;
            height: 42px !important;
            min-width: 42px;
        }

        .voice-icon {
            width: 20px;
            height: 20px;
        }

        .voice-wave-layer {
            gap: 1.5px;
        }

        .voice-wave-bar {
            width: 2px;
            min-width: 2px;
        }

        .voice-wave-active .voice-wave-layer {
            width: calc(82vw - 42px - 9px - 22px - 38px);
            min-width: 135px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .voice-player.playing .voice-wave-active .voice-wave-bar {
            animation: none !important;
        }
    }

/* ===== /static/css/split/32-smchat-chat-pagination-stage21.css ===== */
/* SMCHAT STAGE21: chat-list pagination status. */
.smchat-chat-pagination-stage21 {
    min-height: 38px;
    padding: 10px 14px 14px;
    color: var(--text3);
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
    user-select: none;
}

.smchat-chat-pagination-stage21.is-loading::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: smchat-stage21-spin 0.75s linear infinite;
}

.smchat-chat-pagination-stage21.is-error {
    color: #ef8d8d;
}

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

/* ===== /static/css/split/33-smchat-lazy-stage22.css ===== */
/* SMCHAT STAGE22: lightweight feedback for on-demand feature loading. */
.smchat-lazy-pending {
    pointer-events: none !important;
    opacity: 0.72 !important;
}

html[data-smchat-lazy-loading="true"] .smchat-stage22-lazy-status {
    display: block;
}

.smchat-stage22-lazy-status {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 2147483000;
    display: none;
    padding: 8px 11px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: rgba(9, 20, 34, 0.92);
    color: #cbd5e1;
    font: 600 12px/1.2 system-ui, sans-serif;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

/* ===== /static/css/split/37-smchat-media-previews-stage23.css ===== */
/* SMCHAT STAGE23: one lightweight chat-media shape on every device. */
#messages-container .message-media-wrap > img.media-preview,
#messages-container .message-media-wrap .media-preview,
#messages-container .attachment-collage-item,
#messages-container .attachment-collage-item > img,
#messages-container .attachment-collage-item > video,
#messages-container .custom-video-player,
#messages-container .custom-video-player > video {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

#messages-container img[data-stage23-ready="1"] {
    background: rgba(255, 255, 255, 0.035);
}

#messages-container video[data-stage23-ready="1"] {
    background-position: center;
    background-size: cover;
}

@media (max-width: 420px) {
    #messages-container .message-media-wrap > img.media-preview,
    #messages-container .message-media-wrap .media-preview,
    #messages-container .attachment-collage-item,
    #messages-container .attachment-collage-item > img,
    #messages-container .attachment-collage-item > video,
    #messages-container .custom-video-player,
    #messages-container .custom-video-player > video {
        width: min(200px, calc(100vw - 112px)) !important;
        height: min(200px, calc(100vw - 112px)) !important;
    }
}

/* ===== /static/css/split/39-smchat-stage231-stabilization.css ===== */
/* SMCHAT STAGE 23.1: authoritative UI stabilization. */
:root {
    --sm231-media-size: 200px;
    --sm231-media-radius: 16px;
    --sm231-bubble-max: 420px;
    --sm231-card-bg: rgba(18, 38, 58, .96);
    --sm231-card-border: rgba(118, 164, 205, .20);
}

/* Media message architecture: media surface + full-width caption + independent meta. */
#messages-container .message-row.sm231-has-media .message-stack {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(var(--sm231-bubble-max), calc(100vw - 110px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

#messages-container .message-row.mine.sm231-has-media .message-stack {
    align-items: flex-end !important;
}

#messages-container .message-media-wrap.sm231-media-card {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: var(--sm231-media-size) !important;
    min-width: var(--sm231-media-size) !important;
    max-width: var(--sm231-media-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--sm231-media-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
}

#messages-container .message-media-wrap.sm231-media-card.sm231-album {
    width: min(404px, calc(100vw - 110px)) !important;
    min-width: min(280px, calc(100vw - 110px)) !important;
    max-width: min(404px, calc(100vw - 110px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    border-radius: var(--sm231-media-radius) !important;
}

#messages-container .message-media-wrap.sm231-media-card > :not(.media-inline-caption) {
    min-width: 0 !important;
    max-width: 100% !important;
}

#messages-container .message-media-wrap.sm231-single-media img.media-preview,
#messages-container .message-media-wrap.sm231-single-media > img,
#messages-container .message-media-wrap.sm231-single-media .attachment-collage-item,
#messages-container .message-media-wrap.sm231-single-media .attachment-collage-item img {
    display: block !important;
    width: var(--sm231-media-size) !important;
    height: var(--sm231-media-size) !important;
    min-width: var(--sm231-media-size) !important;
    min-height: var(--sm231-media-size) !important;
    max-width: var(--sm231-media-size) !important;
    max-height: var(--sm231-media-size) !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: var(--sm231-media-radius) var(--sm231-media-radius) 0 0 !important;
    box-shadow: none !important;
}

#messages-container .message-media-wrap.sm231-media-card:not(.has-caption) img.media-preview,
#messages-container .message-media-wrap.sm231-media-card:not(.has-caption) > img {
    border-radius: var(--sm231-media-radius) !important;
}

#messages-container .message-media-wrap.sm231-video .custom-video-player,
#messages-container .message-media-wrap.sm231-video .sm-mini-video-player,
#messages-container .message-media-wrap.sm231-video video {
    box-sizing: border-box !important;
    width: var(--sm231-media-size) !important;
    height: var(--sm231-media-size) !important;
    min-width: var(--sm231-media-size) !important;
    min-height: var(--sm231-media-size) !important;
    max-width: var(--sm231-media-size) !important;
    max-height: var(--sm231-media-size) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #000 !important;
    border: 0 !important;
    border-radius: var(--sm231-media-radius) var(--sm231-media-radius) 0 0 !important;
    box-shadow: none !important;
}

#messages-container .message-media-wrap.sm231-video:not(.has-caption) .custom-video-player,
#messages-container .message-media-wrap.sm231-video:not(.has-caption) video {
    border-radius: var(--sm231-media-radius) !important;
}

#messages-container .message-media-wrap.sm231-media-card .media-inline-caption {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px 11px !important;
    border: 0 !important;
    border-radius: 0 0 var(--sm231-media-radius) var(--sm231-media-radius) !important;
    background: var(--sm231-card-bg) !important;
    color: var(--text1, #f4f8ff) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-shadow: none !important;
}

#messages-container .message-row.mine .message-media-wrap.sm231-media-card .media-inline-caption {
    background: var(--accent, #3392ea) !important;
    color: #fff !important;
}

#messages-container .message-row.sm231-has-media .message-meta-outside {
    position: static !important;
    width: auto !important;
    margin: 4px 4px 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
    background: transparent !important;
    border: 0 !important;
}

#messages-container .message-row.mine.sm231-has-media .message-meta-outside {
    align-self: flex-end !important;
}

/* Text bubbles are bounded but never stretched by unrelated media. */
#messages-container .message-row:not(.sm231-has-media) .message-bubble {
    width: fit-content !important;
    min-width: 48px !important;
    max-width: min(var(--sm231-bubble-max), calc(100vw - 110px)) !important;
}

/* Component isolation: icon, text and action zones cannot overlap. */
#sidebar .desktop-nav-item,
.sm-group-row,
.sm-group-member-row,
.group-member-item,
.settings-row,
.profile-info-row,
.message-reply-block {
    min-width: 0 !important;
}

.sm-group-row > *,
.sm-group-member-row > *,
.group-member-item > *,
.settings-row > * {
    min-width: 0;
}

.sm-group-row img,
.sm-group-row svg,
.sm-group-member-row img,
.group-member-item img,
.settings-row svg,
.settings-row .icon {
    flex: 0 0 auto !important;
}

.sm-group-row-title,
.sm-group-row-sub,
.group-member-name,
.settings-row-title,
.settings-row-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stage 23.1 background studio. */
.sm231-studio-open {
    overflow: hidden !important;
}

#sm231-background-studio {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(3, 13, 24, .82);
    backdrop-filter: blur(12px);
}

.sm231-studio-dialog {
    width: min(980px, 100%);
    max-height: min(880px, calc(100vh - 36px));
    display: grid;
    grid-template-columns: minmax(300px, 1.2fr) minmax(280px, .8fr);
    overflow: hidden;
    border: 1px solid var(--sm231-card-border);
    border-radius: 22px;
    background: #0c1b2b;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
}

.sm231-studio-preview-column,
.sm231-studio-controls {
    min-width: 0;
    padding: 20px;
}

.sm231-studio-preview-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #071523;
}

.sm231-studio-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sm231-studio-titlebar h2 {
    margin: 0;
    font-size: 20px;
}

.sm231-studio-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #dcecff;
    background: #18304a;
    cursor: pointer;
}

.sm231-studio-viewport {
    position: relative;
    flex: 1 1 420px;
    min-height: 300px;
    overflow: hidden;
    border-radius: 18px;
    background: #02070d;
    touch-action: none;
    user-select: none;
}

.sm231-studio-viewport img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    transform-origin: center;
    pointer-events: none;
    will-change: transform, filter;
}

.sm231-studio-frame {
    position: absolute;
    inset: 10%;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.38);
    pointer-events: none;
}

.sm231-studio-controls {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sm231-control-group {
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--sm231-card-border);
    border-radius: 16px;
    background: rgba(20, 42, 64, .72);
}

.sm231-control-group label,
.sm231-control-title {
    font-weight: 700;
}

.sm231-control-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 8px;
}

.sm231-control-row input[type="range"] {
    min-width: 0;
    width: 100%;
}

.sm231-aspect-grid,
.sm231-studio-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sm231-aspect-button,
.sm231-studio-actions button {
    min-height: 42px;
    border: 1px solid var(--sm231-card-border);
    border-radius: 12px;
    background: #172d44;
    color: #edf6ff;
    cursor: pointer;
}

.sm231-aspect-button.is-active,
.sm231-studio-actions .is-primary {
    border-color: #3d9fff;
    background: #2f91ee;
    color: #fff;
}

.sm231-studio-status {
    min-height: 20px;
    color: #9fb4c9;
    font-size: 13px;
}

.sm231-studio-status.is-error {
    color: #ff7f89;
}

@media (max-width: 720px) {
    :root { --sm231-media-size: 190px; }
    #sm231-background-studio { padding: 0; }
    .sm231-studio-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(300px, 48vh) minmax(0, 1fr);
        border-radius: 0;
    }
    .sm231-studio-preview-column,
    .sm231-studio-controls { padding: 14px; }
    .sm231-studio-viewport { min-height: 240px; }
    .sm231-control-row { grid-template-columns: 76px minmax(0, 1fr) 48px; }
}

/* ===== /static/css/split/44-smchat-stage2311e-vk-caption-final.css ===== */
/* SMCHAT STAGE 23.1.1E: authoritative VK-like single media cards and image viewer. */
:root {
    --sm2311e-card-min: 200px;
    --sm2311e-card-max: 280px;
    --sm2311e-frame-max-height: 500px;
    --sm2311e-radius: 16px;
    --sm2311e-caption-theirs: rgba(28, 45, 62, .98);
}

/* The row and stack follow the calculated media width instead of old album dimensions. */
#messages-container .message-row.sm2311e-vk-media {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(300px, calc(100% - 12px)) !important;
    overflow: visible !important;
}

#messages-container .message-row.sm2311e-vk-media .message-stack,
#messages-container .message-row.sm2311e-vk-media .media-message-stack {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: var(--sm2311e-card-width, 320px) !important;
    min-width: min(var(--sm2311e-card-width, var(--sm2311e-card-min)), calc(100vw - 92px)) !important;
    max-width: min(var(--sm2311e-card-max), calc(100vw - 92px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: var(--sm2311e-card-width, 320px) !important;
    min-width: min(var(--sm2311e-card-width, var(--sm2311e-card-min)), calc(100vw - 92px)) !important;
    max-width: min(var(--sm2311e-card-max), calc(100vw - 92px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--sm2311e-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

/* Single image rendered through the legacy album wrapper. */
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-album > .multi-attachment-album[data-media-count="1"],
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-album .multi-attachment-collage.count-1,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-album .multi-attachment-collage.count-1 > .attachment-collage-item {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--sm2311e-frame-height, 360px) !important;
    min-height: var(--sm2311e-frame-height, 360px) !important;
    max-height: var(--sm2311e-frame-height, 360px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
}

#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-album .multi-attachment-collage.count-1 > .attachment-collage-item img,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-album .multi-attachment-collage.count-1 > .attachment-collage-item video {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-album .multi-attachment-collage.count-1 > .attachment-collage-item video {
    object-fit: contain !important;
}

/* Standalone video player and old direct image/video variants. */
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-video > .custom-video-player,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-video > .sm-mini-video-player,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > img,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > video,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > a {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--sm2311e-frame-height, 214px) !important;
    min-height: var(--sm2311e-frame-height, 214px) !important;
    max-height: var(--sm2311e-frame-height, 214px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
}

#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-video .custom-video-player video,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-video .sm-mini-video-player video,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > img,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > video,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > a > img,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > a > video {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
}

#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > img,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-single-direct > a > img {
    object-fit: cover !important;
}

/* Caption is an isolated lower shell. JS creates a dedicated text layer and moves metadata into it. */
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card .sm2311e-caption-shell {
    position: relative !important;
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9px 11px 25px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 0 0 var(--sm2311e-radius) var(--sm2311e-radius) !important;
    background: linear-gradient(180deg, rgba(31, 50, 69, .99), rgba(24, 41, 58, .99)) !important;
    color: var(--text, #f3f7fb) !important;
    text-align: left !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14) !important;
    isolation: isolate !important;
}

#messages-container .message-row.mine.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card .sm2311e-caption-shell {
    background: linear-gradient(180deg, #3f9cf0 0%, #328fe4 100%) !important;
    color: #fff !important;
}

#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-shell > .sm2311e-caption-text {
    position: relative !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.38 !important;
    text-align: left !important;
    white-space: pre-wrap !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-shell > .sm2311e-caption-text,
#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-shell > .sm2311e-caption-text * {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    place-content: start !important;
    place-items: start !important;
}

#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-shell > .sm2311e-caption-text > * {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Metadata sits in the caption's bottom-right corner, below the text baseline. */
#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-shell > .message-meta-outside.sm2311e-card-meta {
    position: absolute !important;
    right: 9px !important;
    bottom: 7px !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 70px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 11px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#messages-container .message-row.theirs.sm2311e-vk-media .sm2311e-caption-shell > .message-meta-outside.sm2311e-card-meta {
    color: rgba(225, 235, 245, .68) !important;
}

/* Media-only messages keep metadata as a small overlay on the image/video. */
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-no-caption > .message-meta-outside.sm2311e-card-meta {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 12 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 70px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 2px 5px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(5, 10, 15, .62) !important;
    color: rgba(255, 255, 255, .95) !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Card corners are owned by the card, not by nested legacy album blocks. */
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card:not(.has-caption) > :first-child,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card:not(.has-caption) .multi-attachment-collage.count-1,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card:not(.has-caption) .attachment-collage-item {
    border-radius: var(--sm2311e-radius) !important;
}

#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.has-caption > :first-child,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.has-caption .multi-attachment-collage.count-1,
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.has-caption .attachment-collage-item {
    border-radius: var(--sm2311e-radius) var(--sm2311e-radius) 0 0 !important;
}

/* The general album layout remains untouched for 2-10 media items. */
#messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card.sm2311e-album-many {
    width: min(404px, calc(100vw - 92px)) !important;
    max-width: min(404px, calc(100vw - 92px)) !important;
    overflow: visible !important;
}

/* VK-like full-screen image viewer: start fitted, centered and never stretched. */
#media-viewer.sm2311e-vk-viewer,
.media-viewer.sm2311e-vk-viewer {
    background: rgba(2, 6, 11, .94) !important;
}

#media-viewer.sm2311e-vk-viewer .media-viewer-body,
.media-viewer.sm2311e-vk-viewer .media-viewer-body {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 64px !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 56px 0 0 !important;
    overflow: hidden !important;
}

#media-viewer.sm2311e-vk-viewer .media-viewer-stage,
.media-viewer.sm2311e-vk-viewer .media-viewer-stage {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 18px 28px !important;
    overflow: hidden !important;
    background: transparent !important;
}

#media-viewer.sm2311e-vk-viewer .media-viewer-media.media-viewer-image,
#media-viewer.sm2311e-vk-viewer img.media-viewer-image,
.media-viewer.sm2311e-vk-viewer .media-viewer-media.media-viewer-image,
.media-viewer.sm2311e-vk-viewer img.media-viewer-image {
    box-sizing: border-box !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(calc(100vw - 176px), 1280px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 112px) !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform-origin: center center !important;
}

#media-viewer.sm2311e-vk-viewer .media-viewer-nav,
.media-viewer.sm2311e-vk-viewer .media-viewer-nav {
    position: static !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
}

@media (max-width: 700px) {
    :root {
        --sm2311e-card-min: 180px;
        --sm2311e-card-max: 270px;
        --sm2311e-frame-max-height: 460px;
    }

    #messages-container .message-row.sm2311e-vk-media .message-stack,
    #messages-container .message-row.sm2311e-vk-media .media-message-stack,
    #messages-container .message-row.sm2311e-vk-media .message-media-wrap.sm2311e-vk-card {
        min-width: min(var(--sm2311e-card-width, var(--sm2311e-card-min)), calc(100vw - 70px)) !important;
        max-width: min(var(--sm2311e-card-max), calc(100vw - 70px)) !important;
    }

    #media-viewer.sm2311e-vk-viewer .media-viewer-body,
    .media-viewer.sm2311e-vk-viewer .media-viewer-body {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        padding-top: 50px !important;
    }

    #media-viewer.sm2311e-vk-viewer .media-viewer-stage,
    .media-viewer.sm2311e-vk-viewer .media-viewer-stage {
        padding: 8px 0 20px !important;
    }

    #media-viewer.sm2311e-vk-viewer .media-viewer-media.media-viewer-image,
    #media-viewer.sm2311e-vk-viewer img.media-viewer-image,
    .media-viewer.sm2311e-vk-viewer .media-viewer-media.media-viewer-image,
    .media-viewer.sm2311e-vk-viewer img.media-viewer-image {
        max-width: calc(100vw - 88px) !important;
        max-height: calc(100vh - 90px) !important;
    }
}


/* Stage 23.1.1E: neutralize legacy caption wrappers that may remain in existing DOM. */
#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-text > .sm2311d-caption-text,
#messages-container .message-row.sm2311e-vk-media .sm2311e-caption-text > .sm2311c-caption-text {
    display: contents !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: inherit !important;
    white-space: inherit !important;
}

/* SMCHAT_MEDIA_VIEWER_MINIMAL_GRID_06C5A3
   Keep the photo stage in the center column without overriding image sizing/positioning. */
#media-viewer.sm2311e-vk-viewer .media-viewer-prev,
.media-viewer.sm2311e-vk-viewer .media-viewer-prev {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#media-viewer.sm2311e-vk-viewer .media-viewer-stage,
.media-viewer.sm2311e-vk-viewer .media-viewer-stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

#media-viewer.sm2311e-vk-viewer .media-viewer-next,
.media-viewer.sm2311e-vk-viewer .media-viewer-next {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

/* ===== /static/css/split/17-smchat-final-member-profile-photos-css.css ===== */

        /* Final patch: member profile side panel + square animated profile photo viewer */
        .sm-final-profile-gallery {
            margin-top: 14px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        .sm-final-profile-photo-btn {
            aspect-ratio: 1 / 1;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 14px;
            padding: 0;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.04);
            cursor: pointer;
        }

        .sm-final-profile-photo-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 160ms ease;
        }

        .sm-final-profile-photo-btn:hover img {
            transform: scale(1.04);
        }

        .sm-final-profile-photo-viewer {
            position: fixed;
            inset: 0;
            z-index: 2600;
            display: grid;
            place-items: center;
            background: rgba(3, 8, 15, 0.76);
            backdrop-filter: blur(14px) saturate(130%);
            -webkit-backdrop-filter: blur(14px) saturate(130%);
            animation: smFinalViewerFade 160ms ease-out;
        }

        .sm-final-profile-photo-card {
            width: min(720px, calc(100vw - 40px));
            border: 1px solid rgba(148, 163, 184, 0.20);
            border-radius: 28px;
            background: linear-gradient(180deg, rgba(20, 34, 52, 0.96), rgba(9, 18, 31, 0.98));
            box-shadow: 0 32px 100px rgba(0, 0, 0, 0.54);
            overflow: hidden;
            transform-origin: center;
            animation: smFinalViewerZoom 180ms cubic-bezier(.2, .9, .2, 1.05);
        }

        .sm-final-profile-photo-head {
            height: 58px;
            padding: 0 14px 0 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(148, 163, 184, 0.12);
            color: #f8fbff;
            font-weight: 850;
        }

        .sm-final-profile-photo-close,
        .sm-final-profile-photo-nav {
            border: 0;
            color: #d7e4f6;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 999px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .sm-final-profile-photo-close {
            width: 38px;
            height: 38px;
            font-size: 22px;
        }

        .sm-final-profile-photo-body {
            position: relative;
            padding: 20px;
        }

        .sm-final-profile-photo-square {
            width: min(620px, calc(100vw - 82px));
            aspect-ratio: 1 / 1;
            margin: 0 auto;
            border-radius: 18px;
            background: #07111f;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .sm-final-profile-photo-square img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: #050b14;
        }

        .sm-final-profile-photo-nav {
            position: absolute;
            top: 50%;
            width: 42px;
            height: 42px;
            transform: translateY(-50%);
            font-size: 26px;
        }

        .sm-final-profile-photo-nav.prev {
            left: 28px;
        }

        .sm-final-profile-photo-nav.next {
            right: 28px;
        }

        .sm-final-profile-photo-thumbs {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 0 20px 18px;
            overflow-x: auto;
        }

        .sm-final-profile-photo-thumb {
            width: 54px;
            height: 54px;
            border-radius: 12px;
            padding: 0;
            overflow: hidden;
            border: 2px solid transparent;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            flex: 0 0 auto;
        }

        .sm-final-profile-photo-thumb.active {
            border-color: #3b8dff;
        }

        .sm-final-profile-photo-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .sm-final-current-photos-card {
            max-width: 880px;
            margin: 16px auto 0;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.045);
            padding: 16px;
        }

        .sm-final-current-photos-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .sm-final-current-photos-title {
            color: #eef5ff;
            font-weight: 850;
        }

        .sm-final-current-photos-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sm-final-current-photos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
            gap: 10px;
        }

        .sm-final-current-photo {
            position: relative;
            aspect-ratio: 1 / 1;
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 14px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.04);
        }

        .sm-final-current-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .sm-final-current-photo-actions {
            position: absolute;
            left: 6px;
            right: 6px;
            bottom: 6px;
            display: flex;
            gap: 5px;
        }

        .sm-final-current-photo-actions button {
            flex: 1;
            border: 0;
            border-radius: 8px;
            padding: 5px;
            background: rgba(4, 12, 24, 0.72);
            color: #fff;
            font-size: 11px;
            cursor: pointer;
        }

        .sm-final-current-photo-actions button.danger {
            color: #ff7373;
        }

        .sm-final-current-photo.drag-over {
            border-color: rgba(42, 171, 238, 0.9);
            box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.18);
        }

        .sm-final-current-photo-index {
            position: absolute;
            top: 6px;
            left: 6px;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            border-radius: 999px;
            background: rgba(4, 12, 24, 0.72);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes smFinalViewerFade {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes smFinalViewerZoom {
            from {
                transform: scale(.94);
                opacity: .6;
            }

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


        /* === Smchat custom chat/header icons from uploaded assets === */
        :root {
            --sm-icon-send: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAOz0lEQVR42u2ce7QVZRnGf7NnAxpqqZW0sg/SSlZaZo5gqbUyUswyrSS1vIGUl+yPQREv3bM0ZFxLTdRMM9PKjFBLkcTKrABHVwWYJLVktKUuW5loCZy9Z/pj3s/zno/Z13PhnMN8a+0FZ19n3svzPu/zvTNQrnKVq1zlKle5ylWucpWrXOUa0uWVJhiYFcWJB1SUTdMwMGlpmcE1eiWKk2oUJ5VGr5cZMHhRXg8Dk6nXXgN8AHgr8D/gzjAwSRQnnn5f6YDujU4YmLp93gfmx8lkMfrhwFRggvrov4Bjw8D8JoqTSiM4Kh3QGDoqQKaNHsXJ9sB7gEOAQ+X/Y9RHU/UYCyTAZGBjoywoHdAb5TbS+xTPKE52BgLgY8ARwB7Ox2vqs9qedfl7ahiYOIoTXzvTrmoJLXhhYGpAJpFLFCcGmCaPQ4HdCqLcfr7aBN4rwKuaHUd1GzW6xfO6gpy3S4R/EDgI2KHA6BX1aLbse58G/qSe2/YcoPDcQos1+njgfVJADwX2dgxr4aLI6NYhfgMYtw74SRiYDY3gZ1Q6QON5GJiaGN1Cy+vF2BZeJjbBc189b+EpE5tph/Q4hdiSpDpwjfr86IWgAmjJgHSs73HJivXvBD4kjwOAXRpAi+fYwzW6dsga4DfA3cC1wO7yPk8M7wOL5gRmbbPoH9EOaAItY4F9JcKPFgbjQkvWAloqThbUgOXAL8Twj4SB6Yni5Agxfl2910LS1dlo0oIcquh2obsBU4QqHgK8rU2qmKlId/H8P8CDwBLg/nMD89d632PxgWVSR+oKdnzgIekRslZ6UHUkQoufv/YW4MPAdOlCdykwejvQ4qksWAcsBe4D/hAG5lm2NLon370fcLBynl4Lw8DUozipNmI/w9YBBV2oporvAj4ihXQqsF0T+Cgyui2Q1mCbgVXALwVeVoWB2dgE5mqC6VkUJzPlNeto+9sJcKs4rD4iIEidqAsttgu1Rt9nAKDlJSAGFgNLzj9w0tpNtVQfS9V+1pUP5DgzacxWq6yzWVEFvhQG5uutiu9WzYBGVFGgZXdhLNNE6HpDE6NXGxjdhZZ/Ci4vBpadG5in6n2Px0JFJl1xo1UJA1OL4uQsYFdl9Ewc/RJwUyvquVUyoJGqOK5a4VvLn9gLOFKK6LubdKGec8ypOlGXt68B7heq+IcwMC8W4HnbmybyGYDxEv1GsSnriJvDwJzUbvQPegY0oYrbAe8UaDlSoGVsAVX0W3Sh+vmNwF8Ey+8UPE+b4XmHp+NL9B8rDZymnr4c79XKUQx5BrRQFXcD3ivQcjiwZwd4niqH6NeeBP4oVPF3500x63pSWuK5cgaN8L7BuVWBhyVgUkU9K3IcB4u41/ZWZHUAoaWPquj1qoqHAR8HDgR27pIqanh5VFjL3cDDGlrawXO1OZK6kZg1PkdfaOVBwDsKqKcHXCXsyG9FPfvtAIkgr0BV9CU6DpfHAcCOTbpQ1+hWQ9dUsS6sZakY/mFtWPlNz2ZcsyIaxUlVYGRP4ERgJ1ErbxEDey0y4QuO2GYdsQ64q13q2RUEFWCofX4X6UIttLhUUauKXoFqmBbg/HOS0vcCD8ybOnH15nrWFlVscvxjRD54P/BzJxuXiGyxWYIqK6CeE6Wwb19APeeFgbnUOrgTB1TbPHhb1a2qOEnw/GNCFV/XharoFtinxRD3AsvCwPyrE2hpBZFi/FOAK4Vl9SjkmQ4cEQZmsWSUjmIvDEwaxcmp5JsrLvX8j6KeHY+hVNuJfEnPvSXKPyzF5lUdqIpF0IKwlntEU1kZBuaFRhnXaWRpvPegHsXJ14GL1PGOUXJynd4Ndc9xXhrFyeuAM5XRbWZXgdvDwDzTCfVs2wGq+JwHfBUY18aGRdZEFtgoLEIbPXXwHAVzXQ82qWMfD1wHnEDfrUScTHykIIot9TwdeG0B9awDCzulnm3VAHUCZwNXOJHcjCq6Tn1GGqL7gN/OPcD8o5bRLzzvwPg7Sff7gYKNk1Q1dnPmBCZaoMZHlFHHSeO1hyIQ1hHL5k6ZOO3bK9dXup2CqzbCTTmBCcBXVFQ024D2VUqvEqMvBeIwMM8XdKHW6DUGcCmmsxfwM/KtxppjfGvAjcCsMDC3FszuWOi1PUuqMsc6Z2EtzVCMiIGCIOvlySI4pTTeiE7Jh5BWCze/54L37PHoxp4ajahiF11oW6m8oNf404EfCDmoO+dpi+hTwClhYJY1YC82G892/raZ8yhwhwRr1+fTDgvKWry2CfgucHEYmJeV0cfJyde7KU7ddOBi/KOBH4lUXXeKvjX+GuCYMDCPFxlfQdgU4P1O8bUwdJ38XrU/AVVtYfRnlcrYKPC2By4ETo3iZBlwC3BfGJhN9mSiOGGwnGB5+jk5VZwLXKoi1XeU0qoQgOPUtEIz450pn3Gp5/OdaP7dFuHKuQdMTOc/tH4RcIw0KdUCRdKeoH7uYeB7wI8t/nejQHZQbMcCC4GZSpvxHMXUB+bPmzpp7uZ6SqN5TdsNC/VcC7ymoPG6KgzM2d1Sz7YhaP5D6z3gLGEA+xZoOBVHSrEnv788Lozi5G7gpnlTJv5+c5rVNN3sz8GrYrszcAf5XnDNOSddu84IA3ONzZgmQeDL98yWbrmuSIMt3Nd2ovl3LUWoaNhBePSJ5JvNfguZIXVwE5EWfgDcHQYmcWhovRMKqmSF/YBbhSzUGhTbl4Tp3NbqtxT1HAM8BrxZOdF+3x1hYI4eiOhvSwvSAtXYisclK9fvC3wGmCGbEo2yQnfBWkZ+QTT7m84/cNKv7HagEvjSFgayzdEx4tAdmhTbx4GTwsAsb0enUVl1MvB953utIz4kTWRlSBzg4Pcr0RPFyY7AR4FTyEczxjnR305WLAduB24LA/Okq/s4XbJVX7MoTs6Q5rDaxPjLgRlhYJ5sVyRTV7T8XuRz+92Weq6SHbsBaxq9LrC3It6vKf49GTgeOI6+MzmNssKVBDYAvxJRa6liUH1kb/n7UuAchb+ek21VybBPhoHZ1C5UKB3/EPLhq0wdn3XESWFgbu5G9RzwHTG1EZOp9n17URZPln9bZUW9QL54THD9x2FgHle/t5P0GzPEsb5jfPv9lwNzBUoqHez5WkZ1E3CSyiQLPU+J1L7Blay3igOaZYU8t5dkxQnk1011mhUvi5RxM/mszTWS/kWajv3MmWFgFmq46qSXIB8zXK02kTT1vDgMzEUDGf0D5oAWWbEd+dz9qeTbk+3UirQBRXYlEQsNG4Rm3mqhpENWZYvv+cA3HUZlg2Nv4G90uOc7pA5oIytsrTi+i6xwjW+N9LTICissPe0iaJCG68/0Tjpr1fO2OYH51IIOIG1Ad8S6WVbPd7LiMeDLUZxcAhwFzBKpuFrAlDyH3bijKVXy/dyjFNPp6eJQ9bjJm9hy0jkDvpMNUsAO6WiimxUV4LJ8p+1Y4BP03U8uygoNQ4uA08LAPN+fpkgCZAywknxWSY+b+EI997Ny80AV363igIJakaq+wiffYz6d/DqtSoHOZI2/5oKpk/bZ2ETTaZf5yHdOFyk9LaCeM8PA3DjQxXfQIagFPFnO7mbFImBRFCf7iuxxtGyGZEoEzIAJ31zxxJuB9f08lGxOYLIFcfIFR/W1jnhC1F36q3oOqwzogEHtJhsfOxfQwq+Fgflyt5FpMyeKk31EvR1T8BtfDAPzjcGKfmh9ueWQZkUYmLoYpRLFyTi5QGIRvdde2WPOgJlRnIyXAur1I/g+Sz6XWlcZ5gMv0o9xkxHngAIGZQ17g3OslpLuLoUbtrxCpZ1sS0XPOtb5fuuIRcKu/MG87cywdIDVfsQQy636WIDDZ1hjdkE9MxESJ9C7j2GdWaOLSedR5QALE2KoyxzYsDA0FdhfYKuTLKhHcTIG+JzzvdbBD4SBWSm/X99mHWAHZoFfk28PVlR3bDNkZofwUxWnHibygjtu4pGPLw4JSRnuGWDhYpOIcrog2og/QdhS2iZkpL7nQb7hDluOm6wDlnQJbaPSAdYIt4hC6tP3qvRXA5+WqPbboZ7zH1o/WTLAHTfxgMvlSkl/oLveEekAS0vDwDwB3CVGSh2tZrZMRrTCa5sh59Cr9aPEt+eAnw7EuMloygBtuMvou1Nli7G9dZjdzmwU/fUoTt5IvkeRFVDPG8LAPCedeVY6oG8xrkjHutJhLK+MEIrR0hbnOot8mCx1Gq+XgRsl+rOhOreRkgFIVKbSmOlia2vCtChO3m4hq6DxqsuW6SkNqOe9YWDWMsAbLqPJAZaS3k4+8l5RkVon32mb3eC8LKRMp++sj32vB1yhrvKkdECBViTM5N/kw7e6UFomc2IUJ7sU6EOZ/PF5+qqeFvsfIb8zCoPdeI3kDEBx/auB/xZQ0l3JtztfcYp0yNmCONmffH7J1Y488knnnk41pW3OAYLNlTAw68innIvo4ufsCKKTPbPoHeSy/YVPh3c32dYzQBfV651zsNnwDuAgmaCrStbsCnzSabxsof2hXOztDxX1HOkOsIb7NfkQl27MbASf5hTf0+i9WkZTz83k86UMhezQrMEZaRnQaI7H1oMN0pw9I5z/EfKRyX7f3aTMgL7F+Aby69N0Ma6R34JgtkT/EcBeDvW0mv+3nWaudECHxfhZ4KcODNn+4ERpyGY4BrYw9ODcKRNXR4MwbLUtZIAuxjfQd0fLNlZ7AiH5lf1ewbleqy4xpXRAF/oQwHlTJ8UF+pBd36D37lueop7rgcVbi3qOmgwA/J56CnBVAaHw6HtrBY31V4rmX9ka1HM0OcDqQ3eR35jPvVlS5tBXn1zzv35rUs9R4wCJ3oo0UjcXGNUr6B9uDwPzgr3/Z+mA/q9MdcabFCV1oacir183nA5+xDvAUtI5gfk7+fyQR34VjV49cq73h4H509ZsvEZFJ1xARy32H0R+gZ2uBVbjf4n8EtMVDPGmy2iHoFem6MLAPEh+37q/0HttgSdGnxYGZvlwMv6oyQCVCXbiuUp+q4TxwIZ5B06KN9f6dy1BuTqDo0LnDMfj9UapE9z7wmXDgXKWq1zlKle5ylWucpWrXOUqV7mGwfo/8HDBuJS+MmoAAAAASUVORK5CYII=");
            --sm-icon-search: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAJ50lEQVR42u2de4wdVR3HPzNzl5aq6cOWYgJnW2utUazWzLZSq0QssUBiAsRqMBIfYBQlyuy2kBoiCY8+9/qqMVoI0CgEtVGUFLVoaYMBtldTMLZRpHQn2pLWlFYt3XbvveMf53fY03Hv3d25z7mdX3Jzs3vvzpzz+57f+/ebhYwyyiijjDLKKKOMMuocyhdCJ+PC2OSMwUA34XXLga8iCwS33RkR+KrUMah6GkDXq4ZwRqNLgHVqJwF3Ae8AiuPkpSPfnQ1cAByRn08AUZvyoAjcH/jqiXwhdAJfRa0GIBf4qpgvhF8DvnmOHMTTwFsDXx1qNgi5UX5nbr4MGJbFdSUEN2pzxkeyzknADOBQs9edq/LZL4DrEjI/bXQMOCrqt7UqyNgB8WJuAD44ARuQRht4Engw8NULrbABmR/f4v06YyzqXPEky4GvyplTnFFGGWWUUUYZZZS5oXVMN6Qy1dxJgVg772WsVMQK4G2kMxURoXNdg4GvfpUaAPKF0At8VcoXwmuBbR0iBLcEvtps9tZOC6uWDf0UtaWj24FKsvbrgM3tuMBqAOwBrqUz0tF/GY/T0S4AlMVofQtdVpxISbIdbcABYI3sqXMK7xk1OA6osS2l3ajcNoWWjDLKKKMU2IBOpHhKoh3sgtPhDHdljw4V6r5WwjFqhbF2OvSUu+gsaLmKBDhrLp1bHhouVQKtKWA44zxBbe8WOo5D/57Bs3I9+UJ4EbBEXu8Guq39OMAZ4EXgBeAZYG/gqyO2dDQ6d1QtDnDT0qphrzVfCM8DrgE+DXwIeNMELnUMeBrYCjwmPbIO4DSKF2OloxXwXkba9WqRhkhUw2lgh2Rca+5Es7K3DvBZ4FbgEusrJaBM9ZZDB91Vbweee4F7V/eonxajxkmDU0HtRMBS4HFgWgOA/wk625q4IcoB+kc6uRcC3wEus5gexZg7FhmgnNjf/Aa4NfDVftM53mgAzIl6FFgJDFE9azpRKTAbnBP46h9JVJ0xtLLOm4BvA+ejk4bmANlMPwrsB14CDgMh8EZgPjBP7MPsGBiGPPR8w5cCXz0iXlPdbFiuCiihvE9ugAQMiSpK6uU4vZr59wBrLKYZp8FFN91uBx4Gdvf66lhU+ZozROKvBj4BTDfOglx3KvBwvhCqwFfr84XQyxfCuoBQbUJmNvAjYJElmvWgU8D6vp7uzZv2DCY5/V6fr0qbCmE/EFiML1un/j5gXeCrl2Kq1a3gkZWt710M9AJflgMav/7aXl+t6a+TOqrKVA/YqE9HvVxGFxgKfHWyRoP7deBudMUuZzHneeCrga92WUHWmG6vFTs4hqn5QrhEgLxEVJsn711AX+Cr/nrYhKrp6EYFIgn1vmH+UnEVS8KUkoDwCHBT4KuTwvgoiYEXMDwx7lOB+9ElTSMJ5n6XBb7aXat35IxzQXWliQJr9L749M+iq3RleeWAn/X56uPlOgZP5jpdLqwfCB8APiPMN9LyMuADxwXsqCEAtEmgZdzNO4FvWN6OC+wGrhSjHtUzYBK7we1L5pTXPXdwB7Dc8pA84AeBr75YC+hOCphv3Mo3iys5w3JnjwELA18dblTkbt3/LUBBnBNz/9PAOwNfHUx6/zSUHF0R768AMy2HwAXuEObnGpUqkOt6ga8OidflWi7q+cAttRxmp81Pv0mJTAH+Dlwo6ieHbpu5tFmZy3wh9FYt7i5tHBh8SiLuYfGIjgLzAl/9J4nj0u4SYNa3VFRAZAVb35XT2azJRqdUjpCoG8sjmgVcbtmFjlJBRkJXWNGuh34EwvZR0gaNJHOf7cCg5QIDXFXrCWtXMnp9YeznnYGvjon30ZQKlqhCL/DVaWBn7ONFOc9LdBjaFgDRp+V8IewC5sYkYpcVG7RCInfGfp6z4bmXp8ce0ZN6CTAbmSX6304e/klOfrlFEvlHyxkAnbKflsSxSYMbOg14g7XeU2IDoPkPAzH3+xc6o2szO1ETcxoAMNUss/mTEoC1koqMpNNNC7zqVAlox3W/Bvw3JhVep0qAY71AF0dmtjiQnC62Ccsd/WcStdjOANj69nhM3LtbBIDh11xJQ5hC1VBStdi2AFj+/avoOq7tZy9qlRsq9zUpEFOMOSwpiY6SAJOTLwL7Yh+t6OtpjRvaqw/GFTFm7w18NZwkMExLKuJpa70RsGzTnnABEJmcfRMOgwtE/bpmvCzGv0JSlZiWVMQTjJQCS8B5wPVy2pq1B5MWvx6YYgViReC3SeOStBRkAHYBH7A2fhRYAPxbbEa5CWuYge4jtdPiA6sXd79/w8BgRxdkysD3GKnHltETnHfJZ26T1rBO0iLmng7w/aJOUydaQxokwHg7k4AB4F2WavKAKwJfPdmItkG5v6lHfwx4zPLEXOCvwHvQxZlEAx9peKh2hC66nAJuY2SYwrw/lC+E3cKkXIOYvwB4iLMb1ByRwDOWfeg8CbBdUumI24ae4LdbRF4EVgS+OiAglGqpE4jU5cS1nC9Gdo6Vl/KAHwM3yOFIXBTKkR4qb9LG8EZ0t9rbGelong/8IV8IP2l1xU0YCLspCxjOF8KrgS0xvW+Yvd+qVzSuMavdPCLZ9EL0RMuUmCQMA3cC+cBXQ0ZyLBcxqsADM9JUkr+ZCtwuL2IBn2uBcVvgqw35Qpjr7ekuRlHU2QBY0XEpXwiXA7/k7LZ0Y9P2oZ/8vi3w1asTuPYFot560c9JiqyXZ4FhJMGzQUii+lI5pGcZx48ADwIXMfpswCHgd8CvgT+jCzknhIldooLnomfIlgMfRjeAYUmWaX/cJ0m39/H/faKJJSG1U5IWCBcKCB+Vj4rW3uI5+hPyOoOusrmcPZhhGB/F/v5xdG9oEfi9gGA6pmsCIdVjqkYdTcq5rH324M2isy+2VIVhpjuGwzEcY7pRZX8D7lndo7YWo9fvORM9tmSDUI6ro/HGJKmfEzZdCNKRMAv4vJzWBbGvmuxp3KCONor7PPBD9GPtX7P/GZHYn3GBMB6b0ElPRvQsL2ay6POV6BbyeWKsK9Fx0fFPAU8Cu6yx1/jssXECpksscCUjgyJGHd0R+Oru8cyTddSkfMyPB2ByV457nzkwF13KnI0uZ9oJvVeAV1b56kgpBmgl5lkgTAV+LmDHJWHtqh61ZuOe0Li4UccDEAPCFdVUmgh4jPOZEVZM0gU8ih4ONw27BuAtqxd3f2HDwKBTKVd0TjwtxUonx8uYr/v5SVIX1uyAh559vsZivgFjC3AzFWais/+zVh9wxwLhc4GvHhhtksbNWFgbmRZ5McArxSYY5pfk/fJKBz4DoHEgdKGH3LuAHZbKywBoJAjiga0E+sQ437h68Zyt0u2dPbe0WYFhx+eC0hCPGJWTnfyMMsooo4wyyiijjDLKyKb/AbhhpkZkU3+hAAAAAElFTkSuQmCC");
            --sm-icon-calendar: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAHoElEQVR42u2dWYjdVBjHf7n3tp3Ruq8opi4FURR9yEytW6EWqqK44INaH9we3F7M+CCCIKigWKMPPgguIAii4FIrrq2idW2D4o4F0QbFKharttPOTJP4cL44mTs5ubkzd7bb7wdDMvfec/LP2XLyfWcBRVGUuU8QRk4QRrW94D5rQRg5s05U0Xk34Ughyxe42ZYJRwZhdHw3l/6auc/FQRj1dDJjJ5Podd9z4yCMLgWeBvYFHgDuARzfc5NuaFrltBd4HlgJ/ABcAvw02fvsVHNxE3AQMB+4FejxPTeZddV0gmnke24KLAEukkJ7CrBKPp9UGjY6JHIISOV8cLI1a5YyD0iAWBL9wE5E2qkMcHKJ3q09oay0O3KMO/VcmXDb6HtuvGBeHeCYvbDn7cxoBvwfgeMALNA3oZl9CCdN54km7XRlQDruWbI/cEAnq6lmQAG+56ZBGNWG98QAv+WyoyE9BmU6aoD0PYdzJf4vYNvYr5Wp6gUlvfMbAMd1unegGVCtCXJGTBO0rSnOuibt9DRBteE4Adiaa3J6xG6iTMuLWKMOsCjX/OwEdmjSTteLWM1BSn2RWaLbTBFl/0+IRgcFxl3e86kzaoyLO5V2k30I14dGYoBfRGAdY5LuxjfhfyS9euU+/5gNNSBN0hTgLolrH+Ax33N3B2FU6waHjDicHGAj8CCwAvgWeFw+j2eN2K73yAPzOvx060h0OUd8ivEgxd2Y+EEYZc+BGpCIR0xRFEVRFEVRFEVRFEVRFEVRFEVRFEVRFEVRFEVRlP9pa2iiDEa1TT+KqwzVk2GMRcNIkyqDebtFw4zQavWU6VhdZTZoaLsGyHSkNAijXuBKzDD0NBfHTuB533N3Zb8tieMMwMMM63YknjoQ+p77aYXwPcBVBRoGgedkaPx0aLgSsz5Smgv/J/Cy77lDtjiaqTo/wAnCCOApufki+h2HWyhYSSQbVRyEUT/wAcUTuYeDMFoCfGmZW5DXcLVFw4ogjK7JJWqRhj7gfcxEkmaGgjDygG9tGuo1JwWeBFZZNDzuOM7NVFxRpVax9GdDsldgJmUPArvlb1A+u+DhTWbiXkE1zkrDUkn8HZg1hnbLcYckyJlFiyC1oWE5Znh8UqLhTLlWkYYFwLIyDQ9t3NJKw4UPb9pSs6RD+xmQLUmAGRe/QcTvg5mY1yPn84G1A31m2lJB1csS5CNprhbKzfbIcSHwL/Ce/C4p0fBGiYaX7uhbFFs0pLmZLrssGnZU0JC20LB2oG9RYtEw4SYoFQHXABdjlifLqlfW9r1qZiuNnx+WlUjfc0Nphs5qaiIc4CPfc7/PlXabhhuBtcChBRrWyJSpIg2xxP1JEEZLgX6Lhu8qanjNouHV1KJBe0FztRdUof+bUnHKTof64LUC7XNKg6IoiqIoiqLMIDPhD6hbrjud/gCbhrTKMgvqD9jb3oRzdvCDgSuAEzGGq5+lJIxg/AFVbPHnAScAexg1GzeAryra4g/BmMRPwKzf/6+E3wm8WGaLz8WxXMLXgSOACGNI+0psRa3C7wdcjrHs5n0SI8ALZX6RZtr1BzyDWUO/iHNqjnMjFn+AGMOWA+ss4YeCMDoL+LyFP+BZ4HxLHMsraOgH1lvC7xZ/wHctNDwDXGaJY1nNca6nwCdRRLv+gH6MzXsX4+3gK1fb7eDZ/6fKsdkWvxNjEq7iDzhdwuyS646xxa/etKXeQsOSnIbhJg09wNIWGhyMX8PqDxANyVT4A9ZLVe1lvB385QFz0UJbvBw/FbHNtvh9MUuCvZM9kEs0vCtheuW6eQ1ryvwBcvyMUX/A/CYNfwDrK/gD1mH3B7yA8X9MiT/gWuAlufmFkoE1aYvfSAsST8RntvjPpIqfm8v8WNrgH33P/aGCLf46YI1o+BOzaq+TaajgD9gobsmzMQvOHi5atmJ8wj9X0HAD8DpwmDzLsrT8FeMTToMwUn9A1/SCmsRNhS0+ldLVri0+zWmZiIbm8Okk30XUH6AoiqIoiqLMBdp9D6iVhKnah66XmD3iqdaQe4+YMQ3KXKsBmWk2CKOTgbsZO7w8mx9wn++5m23L1ufeHm/HWBObx+ZvAB6VUpiWaDgHuK3pTTTTcL/Yk8ZpyJkY5mH2Oz6JUZ9EIp9vuKPPDVZvsvoDMg0eMFCQDoPAvWXp0HYG5IQ7wMeMmnOb2QAso2CD45wt/hLglZLLXeB77pvZ7y0avgZOtoT/EGPoK9LQ8D13jxjSnizRsNL33LdLNAB8AZxmCf8OZtPnShs9V1ryX0qDA7jy0QijW3lkm7gdk120xBZ/lByHcuHzcRxtKxg5DfuXaHBLNGQsbqHhoAoaDinRcGIFDdUzILODD/QtioHVwN9S/TODVgOze959vt0fkIl5TUpPg9F9eZ1cE7SmaFeKbLsU0fAIsL1Aw3ap/q00PAF8I81HXkMDeAtYW67BTYAAY8quN4Xf3iIdJtcLkqp4pJSAMePifc/9vWL4BsYfm7dGxncuOXbzcJxQxZdq0bDN99ytFTUsAI5nrD83vvOM4zYP74mrajgU40tIJqJhQuR2ymjrO0s72vb33aJhsjWgaJ+wtKoN3BK+E3HMKQ2KoiizgP8AADTaOJOqMT8AAAAASUVORK5CYII=");
            --sm-icon-scheduled: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAADyElEQVR42u2cO4gVVxjHfzP37kYlvpIUJiujIlaChc6aBNJaBGurWApWFhkttBMUfLCOJJAqBAIpUlmbKk0C0eyR2ITFFdzdAzYSCPhYH/cxFvcMLut9zL7uzJ35/2AZ7s7ZnZnvO9/5zvc/5w4IIYQQQgghhBBCCCGEEEIIIYQQYkPw+p2MjfUBvwJ2aEdh0C7UHcXGelXqiXk976AImAT2A0lJ7Z4+l4nC4FFsrBeFQZKrA2Jja1EYtGJjzwDfVyQAngHHgT8BPwqD1rAuXO/TK04CTeB1j3ZloQFsBb6MwuCPYQ9F9T5RMQ0cLbnxAT5wx4fLOmBuQ1D6u63AaeBToDUoX4xwDqgD/wI/AQw7B4ii1gEuEmoVsUMyzMQrhBBCZE3CSYmetaVppshciG0DLgITI16IJS6S/wG+A14WqeDqJjP4ToybAk6VqLOdAJ5GYfBDbGydjs5VSAekPeOQ6/lvGH09qAFsAYKi3Vg/Me4X4AiwuQS9fwx4DvzuPhdm9WvQgsxB4JOS5ICFKAzmR+auy7gk6da4R6MOWHLDZXFEUriFdyGEKHAOWEsyTivN9UjmldRvYmP9tRhvPWdRsbFebGytqhGwfUk7H3h64Yt9zSt35nbSXSn1gMbZMHg+VvO5end+R5c2aV1RB164SnW7O/fazdvrrl3jXBi8bFdlCIqN9aMwaMfGHgVuAAd4J0vXgP+cPPFZj4rSA14Bj4FNrt17DnLHceB/136Xu8aiM/44Hb1m0V3z13OTe25OTS/4ZZpO9pMiLgNfdTn/Ucb/PZGx3c5lnz/u0mYfMDk1vXArCgObdpIyOMDvUbqn+sko3G/pIiDlEp3NWb3G+qFVsC4X/AyUqvcPTMJ1D65P23HyVQ89Ovv3q7Vvp2jCVZWnoYUQ4/IuxlJhUjvo8jG+Jyvk74S9sbGTY/XaujrFl2kH58HY2MPAfeDva3fmfnTGlwOGWHccc1JJAnwN1Jxa4MkBw6uXEtfrF1VZ5lMMehthMzmgIGOckAPkAJFTdhcrx0trgdjYgY37yShywCpmROc/39t402qns6MsBV3Pd1DIAasYNa7end/Nu3Xtfk7wgGYUBk+UA9anFmjS2eI+A8wCD9yx188MMBsb+62LhJoiYPWTFc85YAz4MOPfNZ2NvwFudosWRUB/0pXA23S+X7CJlb09IO3gfy0ZkhQBWUkFtygM7sXGHgEOO6dkEeHSbTzPgN+WOVSshI1ckNFKT3YnrPYFhgmdTQX6frIQQgghhBBCCCGEEEIIIYQQQggxTN4CWoo4BkhlZRUAAAAASUVORK5CYII=");
            --sm-icon-voice: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAOfUlEQVR42u2ce3AV1R3HP7v3JoJURIvUaj08BB8dFS2bgDpTrWKnLVRtFV/tVOtjHB91OhsSrLa2tfUBgbWtSCu21o7jjDiIVq0Oxceo9QFZZVSsdKSaHGu1IogoKsm9u/1jf4d7WHOTewOYm7C/mTs32bt7dvf7e//O7xzIKKOMMsooo4wyyiijjDLKKKOMMspoZyFnoD54EOqtnt33VJwxYMcD7sozF9OAy+85IPY9VcwYsH3Bz9mg5h2Y06bzwK5AEdg8q0EVuuKtmTUQGOEMBKn3PVUMQu0CU4FvAx4wChgqDOgE1gJPA/e0NKgnCzHINXEtmyenlsE3wAWh/ibwa+ArFV7+KDDH99TS9FgZA6oAPwh1PTAfuEB+6pLvujKXdoqfyMv/vwFmigbVJBOcGjU7joC4WExOEYgs4P8NvACsAnYBDgQOAcZbjMjJ5z5gBlCoRXOUr0EFcJsbVLG1Td8h4HfKc9YBS4FW4CnfU5+kGDcEOB64EjgSiEVjTgTuaPbUjNZQ54SZmQb0FO0Eob4IWCAA5sSsNLc0qLmFUqSTs55/S+gpjrcZuFZ+KwrzLvE9tSAdUWUMKIHvitQq4CUJMWOR/nN9T/1ZQAeIyuQBJuqJglBfCtxoMXGjmKq1tZS4ubVkegSUy4DdxGbngVsE/HoBvtgdeL6njBbEQajrfU/NBxaJ9HcBI4SRsTAk04Buop464BVgnPy0XqT2PQE5qlKb9hNt+pwI24uSQxR8b3ScnJJpgC0IBwCjJeJxgDt8T60T7YgqHUzOzfme0qIFrviCQ4AJCbM73AFpgoJQO+lC2HZ8jsPE7Biwl8i94r5qFvCA5Yxd4KAdIXx9xcWt8iau2Np4BzABYJiVaH0ArBabHfVhLOOoXxXwjd3fc0eZUMGlKkyrygMkuhgFrNtBodxY6+/CNsbsRmvWCjNHWJqwXUmAzwF7+J56t5qsO1+hGruzJo8pzl7efhPwfWB1EOppwLrtHNIN/QwCBGd7Sr78uQ9wLzA+CPWtzQ2qqdJ8oxJ1cX1PFWcvb/8FcLFEFI3AtB0Q0kUMLMoJBidJdDUc8FvbdIsklLltYoDY/GIQ6iOBq1JmYU1K1XdGMu/+smXeCsCvglB7Vhm97xoQhDovGaWJRuqAuc2NY56qtbT+syYj5c0Nox8HbhZsIqAeuLESh5zvCXjfU4Ug1DOASVIUqwfagJbWFe0OEMlNnHIlgmpVutZBt0oeRgOi1rYOF7hUcPIEqynAab6n7jRYVuuEjfrMtLSlCFxkef2omgSpAtowAKQ+tiMpUz4XYb0MeNLUpICZQajv6inycstw2TiXo4WjXcKsJb6nnhPwTdx7eBDqe4NQ3xSEekQqOhg0ZN4pCPWIINQLglAvCkI9XnCKBbNngCWCVUE04mhLYCvWAAPgmSmHM9+aMImDUA+XG5r4/QPgcjElhT6854hajnjknWYBF8mxI4JQTwI2ASYTng+cal13pmiFU5EGSBJREOc71cpM/0Uy6W3XW64W8DcJg/bYxpccCA79S/Kum4AJwJWChfF9TwtWZvZuquVPnUpMkDlpgoBrQLlPHEmdDLYPyVxtBAwhqVjOHaDxfDU5yhzR9CFy7KIg1CMlGjTO9q+WQI0lqeh2mwS6PWjFoWKiDAOWpQY5nWTSxEx43OB76lWxhYOOAVKGyfmeegm4wjJJw4HTUtj9zWJanlI3h1tNHnCwZX4+FrUCKAgHplu/rwUWiIoNRunfogUSGd4GvCXvHgPTHMexTeiroiXGxx7Yl0TsC5bEvwm8Lf6hOC/Uu5PU1mMZ437fU+spzWoN1sQrlpBzE/CwYOMAB89r66iz7PxawcxYiz2qYYCR4DHWsfWzGlWXNeBIkrKuATu0oqPBTibaWWXhNcoW2FmNo4uiAYbGlvONboVVw9e6oq0y1YjSrBXAGyYe3hnqP/KuayychsgHINcVxZD0LvVKboW/7Z1zHZuDbopBu+5EJSDz3ntbxzrlAxDlE6y+WEnFoacw9EPr2Mi8sxUD3pWw09CkncgEGdrPwmsd8I5hgJMYAtvuv1tNGGpO6rCOjbpuefsIa8ptY8rJnNDS0Oepw4EYCeWBb1jH3gA6zZTt7BV6N/GThv5TDQPsQZFYdy+SbgUk2YiBxyi1/02c06aPN7HyYEXeynGOBw63zM7DctyYmnFigkw5Rldjgowjfd763wEaUmbmLutvFwiCUO8qEjJYi3GRvONsKwTvAu5OnddAaf4kBlamsK0oDF0ldt7UNE5qSiS/EITabZk8ZjnwkJWoHUbSf9nrNGUQ6lwQare/tcVxnGqexVSIfwpMBD6hVCF+Qa4vNJWmKE2Sup7SjNmnTHS+u2QjCHWuyVPr5oX6cRksBo6bF2olpik3Z3l7DPjAsZQm0w+vMKEpVhD6sp2cultunDiO8T1VrLLxaH/5Hgp8BPzSsgzRvFDvDRxjhekrmhrUBvEPFecBTry1mSlIqHmBFe+7vqdWAz8Qh/0KMK+nYlwQatdNpO6MINSPBqH+mfR8GoA+SZnCbamO2uHicGusLR3VQah3CUI9d16oH5eZP3qYRjTvdD2wQsoN5/meeoVSU3BM0riwm5gmB1gSx+WxLncz87APSLRj5jovDkL9eWPbhKuLpW400ffU86Zw1Z0N9T0VzW3r2B1YCHyNpJw9yfeUWfnyunX/YVYk4WwDA0Ya6bRidqOFU4Em4KvAwiDUu0kg4XRXjJPvlc2emgwcJNONjoXHnsAllBaTvEWyyIRywuSWq3lIDfsD4C/yAl1SfrheHsaVh3V9T33se6qrwq6wvIBQlI9d8mi3HrZezFtv0VpvDDgudfxV6+9x1nN0UVmflFssVUdN7cu15kf2lLFc4FbfUxsEy7jaTNhIwk3iSOrEFJ0fhPpkKTzljMQYCe+lkGUSvA2UlhCNt6KHFyTHMI7/PKvTuS/xugN8J1W1XW1J+HjrOd4G3k89K+U0wbyvYFAIQn2aSH+Xda/fyb2qmxO2buT6nvovSf3bFdWKgdtlPrRo94tWEsrN9NRmKzFBQjaA/ExPrSWZvjOmohGYLvepqyJkrJPn/yHwZSteX+Z7agOQE2AmWZe93iRSXWllVM6NglAfCtxq4eMCV/meeqe3CrHbW7QShDo3a/KYm4H7xSx8TNIdN7UP5iEnKvKcFSM3BKEeBhTltwVWmTcCfhuEel8xcXUVhJV1cu44cZiRFZPfbJm4URJOGtBWxtW/jwF3qvisTwSj+1saR/+hkr6pSppzo9nL213gbODvJF0SHwJP9RTxlKskyvdSCWELEqUc43vqQQF4mYx9tEjuGGBxEOozfE91iNS53dzXJdnCoCsI9YHAg5LBm36mJU2eekJWz3QGof6WCJIxGY+XS5YqMHPLxOTsBYTA2XNWdLiVYONWomoSYr0nKfipQIPvqZd6s/s9hHLPSIRgkp8mqbYiEdG5Uk+vF4CmAM8GoT7riiljI99TBd9TUepTENNyjjBwnFxbLwnlzHklk5EnWQplhPBNkoazqgTKioxWAUcJNscLVhWZZacKu7pVy3VfFz5bKyFvkpjZSOBxvqcesyR0OknLS50lxQD/AO6Q9N5UbIdJtPM9kpk6rGsKwIm+px6yxp4hOY45p9X3VEtPHWw7Chun2htZSUefKp8mIxTHtdKKmZ/9yZSxR1737Os5Sp1mJwJ3StZZoNSb2hPZq+nXAef4nnpApN6sunxecpcisFkc9Rty3z6/l/Fb1QhmvxTNLC1YSNLaYiSx2ffUXPEFkZwzEQiseD62skzHOhZbWgLJfhEX+p5aI+A74h/mkKwj3kyyyv4G31N+fzUa9xcDTGw/EvinJC9mGdFJIrFbmFDnwOw2PZ2kAfZYAa47+gh4Arjt8smjF3UWY7Og2xXwzxLzZZIuLfWrjfTTNgb9Vja2tOB0MTOdYjY2AjN8Ty2zVsMXrZ1T9pfwcd9UfacDWOV7qt26R16ALQahPlPAN/PZeeAE31OP9Gebfb/W7a2WvetIekqNKYrEdt9uAWkYEVWgXaZ5uCCbO/kkXXux+JJ64Oe+p67uq+MdLAxwgFxL4+jCnBUdJioym3O4wB+Ba4xUi0bkUnmFY71LDBSscsEE4AZgmjDV7BuxYNbkMZfMXt6ep5vtz3YaBlhMcJobVNTatiU0tc3E+8DvgT/5nlrT23jiLw4GzpfP8FQYO7+5Qf2ota02dtOqma0KAHemp4pzQz0TuM6qmhrgPgYeESf7DKXGgKEkTVH7AkdIWaDRus6M8RHwY99Tt1iLS/q9j6mWdksxK02iINRTSHa7mmzF9vlunvc9AXdYNxm3PUm+jGTnrBeDULtNDaOjOK6NHrJa3DErZy3xPF1KBpO7ATidB0R8ei76UWDhrEa1qCv69O6LGQN6yZYB6nMu1y9vPwo4Gfg6SXvMiFThzLzHepIu7qXAgy0Nqk12T3S2Jcvd6Rhg+wVbYofkc1z77Ot7SwV1vlRMTX3IB3Szp/5X7GGMjAF9NEumPmQdWwycIv/e7XvqVDu0Zfuv4Nx5GZBO3sTe30OyIR8kOyN+N82kgUAuA4/i1KI4c6zIAGyPH4gMGFRUq1FQrsyzmXp+kaQf0zZBp4jtL/agOTXnjGtx41Z6AcrsD9ppHdsstr+QacD2CT+/RtLsO5xS18IayYgPIJkvvoCkLA2wGrjdEqjNJLV+Bbwm179P0kaebV1cLroRKb6AUvtIrw5Zvg8Crqng/AtJWhDztRIt1aITtifVI6vM0N0iwPSyqMj6YF3XmRo704BuyIB2O8ki8H0EuIL1nK6Yn00kFVCHpCr6Hsk05SiLIelez5dlbPtemQ8oY46GkTQ5RWUY8JEF9kaSXtNd5JotEzPWdQ7w5kBL0voLfHcgjj3YNKCnJa/pCmhc4fvEg3kbhYwyyiijjDLKKKOMMsooo4wyyiijjGqf/g9uNPI7eFWC2wAAAABJRU5ErkJggg==");
            --sm-icon-stickers: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAN6klEQVR42u2daZBcVRXHf+91d4gQQJYESMglCZsWKBTcsAWhpAAFIVE2+QCiRZUVZQsvCVHjB0uUrNMYNkULULTYRYwghQilgpLlUSWyGkgyeYSQAIlJSCDMTPfzwzs3OfMyvcxM92Qyeaeqa5Ke7tev//+z33PvQCaZZJJJJplkkkkmmWSSSSaZZJJJJruKeH35YcUw8tTnekAZILAmzghoLui+AF2q8Jqc/LO8q5HhNRl8P7CmrP6fB/YFRgI5YAWwObBmkyajElEZAd0DPxdYU9ot7zNjQetZwKXAycAIYC952YfABuBfwB+BJwJrNhTDyAfiXcEavGaCXwyjk4CZwOmpl8QVPr8VmBZY85BzXwOdhIYS4HnQsngr+NcDs4G8BNuS+syc/Cy5QCxxwsWCecDUwJr2gU6C1yTN/yFwo2i6AzhX4+0llRnlgceBi4G2geyO/CaAf5mA36F+nQM2Aw8D3wSOAz4PTABaxPXk1GvbgfOA26eMNeVG3ueAtAAXNIHhwCsqyMYC6JPApMCaJRXevxdwPfAjsQDnnvLAhMCa+QM1O/IarP23AVeJ9vvy+D1wSWBNWdLQOBWEvcCaDrnO9UBRxQsfeAv4nLiiAVe0eQ0A3wusiYthtA/wBjBUae+rwInAR4BfpRDzgLwE3dnAVBUTfGB8YM2fBqIVNMK3Ot99BjBMXIi7bhBYsxmoCpxodUkq4h8Dy+S6HWIt5++I1slOFYQlqMaiub5o/zPFMPIni4upJlIxe1IVP6BiiAccI3GmlBGwvTifPEalkQD/EK33u+G0Y3FHT8l18/L8AeKiYtXQywhISTnlJpb2ACmX7y8DPlHubcD2hvwmXMspvN/Sc23dHyikquSMgBrSlrKA00Sby925H3Exx4r2O81vV8RmBFRIZV9OXfP0YhgNV4VaXSKkXaDcWgy8ISlqbqDVAY0gwGn4X8UK8pI+7glcK9lNvo56ohBY01EMo9OAL8t1XdPuhSwNrZI+FsPIn2LNK8DfU8RcUwyjswNr2ophlO/KEoph5An47WIxvxT/H8v9bQZ+myJ7wEi+QdfxBJnZwFnq+d2Bx4ph9I3AmkdU1euIcEuQ7cUwOlry/yOV68kBdwbWrMx6QbVdiD917CHlOYtXPAB8XQJnXn3Gr4HbfnDy6Be3tCc4FjyYtTgaDlwBTAf2SIH/rgTkD1Sx1lBJKURMH7e+G0qAfIH9geeBIxQJ+rNCyfMBDgaOAvZOBd2cxJNzAmuebYb2y/16XV1XWiJ9MiDQ6AUZX2KCAeYDx6j2RDWX16HuJwd8TNJBfbxZ4DtrKobRUOAzJC30ViAKrPkw/bqdgoAUCUOAnwFXql+X6LwM6QDXxITAxMCaF5sEvmudHwcEwDkkkxrOBb0DPATMCKz5oNmxp1mL8lrDxgFXA2eKe+pKSsBzkgE9KAQ2A/y8pLpnA3+QJCHt+py8CVwWWLOomSQ0cyzFLbY4IoYBxwNHi8aVxc+/Crw+xZpXy10Q2ATwJ5AsjRYkRrmFI09coWsoFiT4Hx9YEzXLHfXFZFzFYFchG2l48FPgfxu4XTQ9TtVCHcoVuriVB14CxklcaniG1GeVpQK4q88sNyvYKfCvBm5VwLtK+z/AdZLynkIyUDAi5ZYenGLNpXOTJdVSI0kYcKV9inC3zOnAd4tFTrufAi5KjUYeD/xTXJAeDpgeWHOTq9ozAuqwNsl2qoH/1cCaLTIsUBbC2ophdDlwr7gl15XNSVC+z1lVRkCV4D/FmvLczgv8GvwngQsE/O0GiMVlTQd+okiIJWk4tZEpsj8QNX/qWFOeG0Z3VAB/PsmUxZYKmU2pGEb5qWPNT4EH5T0O6MHAQ8UwGibW5e90FuA0VD3VkMxiK/jWlOYk4H9HtUIc+LdK8VXSKXKFzA3pTT0nFb0jISfu63xxW73K2voyC8oJ2OWuMpXeZBdK80tzFm8FX/vvPDBvsjWT3DJprc9SFf2RJG32Axzgcr07JltzVUsv44HXR+Dryni46np6wAqXVfSk2HFNwCnWxHPDiuDfMtma61q62WRT8eBM4Am5pi/XL5CMW87rTVD2+sLdiCZ9CbgG+IK0ABwIb0llenNgzfruBDelpQXgFmBiV5o/xZpJc3vY4VSLRROBnyu35qzhjMCa53salJvZivCB+IaxJp69OJoJTKvxljekA/pyPV9Ggb8H8Jj0mhz4rshybqdX7eViGOUnW9PREkb3kEx369nX9wHb03ZFU5txxTAaBNxPssheUmW+r0xZ915WA6cH1iyp9mVS4M8nGYvU6aIP3DTZmuktDejtqyq+ADwjFbOeXX1FLHtjd5MKvwng50gm3AaRTEZfoDQGMV9fmXJOZSoHAk8Xw2ikW2vuJvhuLnVi0CDwVcCOA2u2AOPpvJ+hJA3G30w74ZAykOvO9J7faPDFdRSAR0k2WbSn3MKjJFMPR4nPXse2fcMdgAHul8xI7y1216+m+TkB/06JCw1r7KkW+VohYZPCsAMYP2vRihslGOf63AWphY5hJOu/53Thk2+edoIJ2sud3ne8mPXeqTTv7u+dNPrKmQuWO+twrYVKmq/Bb1iroEpmdJEkD+mgf0lgzcP13kOjN2iMAJ4GPtvFjQWBNTerTdmx6r2cKiQUVGu4AMwLrJlUDKNB8rqhJJMTOwT8Gu0K5002AWcH1iysJ5nwGgj+wcBfUuC7z3DgF4AO7RbUl7kCuEc1vtLEHQb8GTg8FQDpS/CVW8xNHWs65iyO7gUuT93TO8AJgTWramVGXoM0QYNfUj69TQC8oxo4Kte+AZjF9tMUE4FJJIvnOgVsA64OrPlVX4HfRUtlEPAsySZ0vYawCDhNvkvFzMhvEvgOnK/VAt+5nGIYFaZYMxu4TdxPSSnILwR8ncJuIhlb6XPwdStDMqMLRev10uYJwEzRfr+hFqDAPwW4DzgkBf4nAv6T9S5gKI3ySRbMz0u5I18RsAk4P7DmbzsC/AouWMexWD2OCax5rZIr8nsB/jjxyWnwNyvw8/WuHrlcW651IclArtsz7CkS+g34ct8luY/ngWt1l1fc6IXVsPZ7Af4TkjrqLaXrgHEK/I4emLUXWNMGXEJymkpBrp3vb+Cr++6Q+7mTZLHHrT/EkjT0vhCrAL4+hmC15MAv9QYcVfCsBM6VL7RE0tuz+xv4WuPFjXakXPyaam/KdxP8M4FHFPgu4r8NnBVY899GgONWmwJrXgPO1fm0PN/fwAeIJ1sTt4TRfqnnl/WKAAX+t4C7VPOsKeCnLMFXhHQa9OpPIpvVy8Uw2p3kuAZUHdSqYkL3CBDNc+DfrYB34P8buFTAzzVaM9UijqeCdH+WPDBEuZ9Y4mL3LUClV+MF/PTi9nPAeYE1G5s9wLoT7AtzYB8o7tkp6CZgpbymXHcQFnMvF8NoTymMoPNZPn0G/k4irp4aJpWxA3uzPLptAc71fIXkgD2X5+dIFqgnAJuk59/VKSjxLnb6oSNgjPx0BeSqaWPN+mqnftUKwmeo4qgAvC6p5gb5fVudla0uTrYSNQBJOiIVcNeW4k4uqtsE5BSIHnAQsLAYRquBVZJitZOs5y4lOQFxI/DeVGu2lDofWVYx1qRaIjszSfulCFhR3ubqyz0lQLuWT8tjVJX3bAbWzQmjFSQj3UulUbWM5JjKVilONn3/xFEf1bP4rrqr/ZWkstzc4SmX1FpP2tRlUSE/HyXZwVhQKWgp9RpPxQefZOZnD4kd0HnbqpN1wMczFrauJhkLXy5th1UkmyLeJZk2+N9ka9pqodsfSJKBr0+lCHizRwSoSnS+9Oins20nY7X1zpL6GaeyLU2U25M1osq11gPrWsJoJbBWSFovFvW2WNFq4OM6u61+hXhEb0hSRdgeJOvZGqOV1Yqwqi5ILuoF1swphtHvxLz2AUZLvjtSANyfZGxvPzqffFiNJB0b0pbkzg917m5Mhet0CDHri2G0SqxnjVjPO/Ll1wCrp58yZqMUdeUmkrQ72/aceRIbP6xFgFeP5lQq/31gUCHPTS8s21fIGCqV4BghZZRoxUjR+sHUNzHgXF05dfNpd1dLHEnOWpYIMEuFsFZJHNYAbd2wJO3uXKv8WOBFto3GbAAODaxZWy0N9eo1M/WF9XtqDtT6wNxky+oQsZahQowL5kOFsN2FxMFKk6oGPvVIk+SrRy3ZIq5to8ShJSSHDC4RklZKYrG6GknFMDqfZFqjXWLma0JKRzWMGjUV4XWhFU6Ta87mFDzwczlmLFg+VCrJkeLmRgGHCllGrOggCfKD67i1Uqp/pa1IH6FcL0kbVPq9VoLseyTzrReTnHvaJt/hxRussbNrHL3ckMM6ajXKuvjDDelspRxYEwfWvC/PvdOVJRXyOWYsWL6fWNNIRdRosa7RYlHDhKRcDZcXVyEJ5eoGy+ccSHKYyBdrGD3A0pK39f+lphLQjWZa3ENL2uruZDJtrbiL7YqWOWG0m1jM/iTLpaPFkg5Qj30kaaiHpHTi4IhKx6NOVg9sjuPaXqZPCGiUJdXp7j6RoLqGZBN4Z3fne8xatMLFpIOFhDFCyGESh0aKH3d/66DexMGtA3skfw+hptIN1E16ldxdXfuRB+U8Zi5c4QspB4lFuSzvYHnOiKsbLhYwRPXH7rrhxFHfnb2wtebR+wN2n3CzSZLsLieuzhdXNxhYKeP1df3dg12SgB6SVHcK3p2NGhkBjSFJZz9xf1y3ziSTTDLJJJNMMskkk0wyySSTTDLJZMfL/wGla57lPMed0QAAAABJRU5ErkJggg==");
            --sm-icon-emoji: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAKw0lEQVR42u2df4xcVRXHP29mWgqICpRfArdbUWohgOKdVqKgKU0A+RGNQYxiotZQg8qPu+22JgTEP4S28PghNrSKBIMJPyREBIHUKFJjgT4gDQhBCW6fhWAbUFAo7c7M8493Lr3cvtmdnV+729xvsunszsx959c995x7zz2FgICAgICAgICAgICAgICAgICAgICAgJ4j6tZAcZJGzngRkMnrzGiVTUXheDy56BpPURcILAtB9VE+V5aXjcmuDOGpBNACTxFQ74SnqBMiXQLjJN0XmAVUgEOAbcDbwLDRaqdL+GiMTbDwyx5PJeAjwAygIYqpAZuNVm95ymjLuKI2iCwZrRryen/gHOAsYD5wuLUewQiQAk8CdwK/M1q9Y6e2HWcSCL5k3UqcpDOALwlPJwAfFaOyaAAvA48D64B7jFav+bLpiQKshcRJOg34HmCAIwo+2vAUYfE8cO1QVd1Sy9ojuBfCN1o1KhGs3JguAgaBueMY4mXgJiA2Wu0c7wyP2hD+ccAtQFXeqjtj+YtW5vwg6wXAg8BFRqsXJ9IlOTwp4GbgjHHylDmzYyOwyGj1zHh4isZJ6KnAr8TH10SgkWf5ljC7mPnvN4TobcCZRquNE6EEh6cq8BvgMOGp5M3ezOErcvhy368B04CtwLeMVg+0ylPU6hSNk1QDG0R4dcearcVETdyOdTHuezUZ53VggdFqUz/dkcPTCcAfgAMcmlrlKSuQQVn+PcNota4VJUStLE5CYAIMeMK31m6J3AK8AGwGjpYI4lCHaHc6W4ZfAD4jyqDXShCeEJ7+DMzxhO/z9CrwIvA3ifLmOOte5smxLt/bBpwEDI/FU2ksgpdUVSb+ccBxO3hu5l7gTOBYo9VCo9WiJVqdLIvZWcB6xx1Zoisy3hzgeiEy6sMEsNHX9U2Eb3n6vdA+d4lWJxutFhmtFgLHAgskqos8nuwMOBi4aWl1bGOKWvCRpwB/KrD8CNgJfGeJVrc23mthkRsXy9++D6wApnvZshV81Wj1VC9dkeN6TpRFM/MMIxOeli+bN+uGkUbmJ2eZS1ucpF8GfgrMdGTiuqNTjFbrR3NFlRa0c4kXyVih1YBzjVa/jZO0Yv/uEegSfkOcpM/LgucroSwh7fk9ngV2bOMkVZHjIsvAV41W9xZk73WPp8hodVecpH8XVzajwKgvq5RLpzmya20GOJYyC3gO2Nv5vNXucqPVijhJp7uZ7iiZ8zSJk38IXOGMYy3nTWCu0eqVXswCh6dDxJ+/33m2pSU2Wg3GSTp9sDprZ5ZlY405XXi6AFhT4CUawAlGq78246k0xtrwaWAfx01YK9kEXC+WPzIW82JBI+KKVsriVHbGrYtAFnR7k7DA2ObLs3yehoHLhMaRsYRvM/04ScvL5g+slSCl7OQQdtyTRpP1WItw1VvtrQZXG612OMKlRSVERqu3gdu88ayLO7oPCjjRsU6XhtuNVttlj2s8PDFSbwCs8lyNfa2931tSgP3wEd4XrYY3iVtptOEKIsmE3elqhfOx0Yjt4bqQARuEtvE+237+SSdKdMc4cLQvjzUDbDJSE1djM9nNbW7B2n30fzjj1ZzFsNIHgU93eKo768AWoa1dBWwD3vB4slly2wpYI//OkFS7DNy8dN6sV9tZKGURtInK3TJeBdgL2AHcKFbYCzRk7PvlWTOc598LPNsmT5mEmW8Cq0Wm02T8CPjluBUg8X9ktPojsFCSjoeBZUPzZl206onNUQduwn7v27Lz+KAo43Sj1SOyTnR9X8gK1mj1F+BzwK3AQ0LDeV6oPd6x63GSlobmDVwBfEOUfBdwltHqQZHl+HnqoTWOtU3Qy2f0m6eo082492S/g1rVs+4R5oai9GtH1MnWbSZc79ZRqSMv+slTQEBAQEBAQEBAQEBAQEBAQEBAQEBAQMDkRVdOh5xDCFuS2NgThSUHObZgeXIcthQdufX72G8q81nplKjBvCrgi+TV0S8DdxqtnpOD6GxPEb5UPxxDfoB/OPDrQa0e6pTPqJPpKGUmVwHLnbe2AycDT+HdpJyiwrfn1p8EHmVXnSzACqPV8k5qWUsdWEQjTtJDgYuFwBHyepu9gauH5g9ke4r7WZJb+JXC2w52FZUNxkmqnHqn/ijAmTkHCVEldhVY1YCFKx8fPk/qZcpT2fqNVvVrkvRs4PPC217Cq+X5g32PgpzFZwb5vbHj2VUNbMtM/gkcB/yPKdiuwGlT8D7gaWA2u8pYLI9bhPc3JCrK+jID5EElqSa+ylOkJVAB14hvrEzBCVAR2q8EPsx77z7betLYaPUfoNyugbW9CEdRxLUbN9u4OCG/Ve5WPNvXXzda3R4nacVoVZsi1l8xWtXiJP0Ced2oy5e1/hfIS8+3dzLD2y4FlAsMkQj1kiZjN4DVcZKeKAyVp5Dwjye/kO7f+rfWb6RfREdhaEe1mHaRlaLan4mV1LzZtR9wf5ykh032RVl4qcVJejB5ce0BHi+2/v/uwbzotuML5lEXiLaL1b7AY8AxTVzR0+QV0FsnoztyboUeTF4J/vEC11MCXpGcYKsYYUfbLh1XIztXj/4LLALeofju7CeAh+MknS1WVplkbqceJ+mHmgjflq7XgK8ZrV6lS91eoh74zkXAzyVZmeZ8xDL0L1mY19nkZaI272yVtAh/HnAP+bUsvxWDvcz9XaPV6m7O4KgHllSLk/RyCd+aKaEBXLhUqzV1+R5dLBFv0W2WjVa1EnBNki4GYvIbob7wLQ83Gq0u7rb7jHrB2LL5A7UVjw+vAS5g9yYYbs+I+4BLjVYv0QdFuIKX3wfIr82e6/l5X/hrh+YNLF75xHDX6Yt6xGS0tKoaqzamVgm2iUXk+FSbOb8GXAesNVptczbAoAs95op6wMVJOhNYDFxKfotxNPrWLq2qxas27uqq1U15RT20NKuEZcDVngui4PdXyC+5vasIRxn2Smw2WsrvbJG4LRLcHnAHAd8ELiTvfNKMJquMnwxV1UUreyT8ninAVYLsFJ5PfuNyH3Zv9ORaG+TtYe4B7gCeKGqD4JxMuclR4WyJk3Qf8svZXyHvBXdogaD9xbYmrvGmThryTagCCuJrDfxCNuiKLM9XBOQ9HR4j34d/Ujb4Xi8SRgmYPq3Cjze8dCBwpMTqpwCfday9meDdvz0j0c76Xgu/LwrwoqN9gcvJzxD2orjzVOYox6fv3+SnblvJmyjZPhP7AUfJDDsS2N/fOWkypv/81cCQ0eqtfrVR69vZrdfusiq7qKd6gmjWYy7ylNQK6s6YRT3gcMZ8BPiR3Ivua2/TibgzWzZa1SrAyiQ9g/yi9KmeHy5q+OdmpEWXqiOKuxy6Qs+8kHgTcN0PPjX7th21Ov1wOROqAG8RzYxWmfTrPJ385vw5BYlbViDcbBTafSVFBVHOo+Q35e8wWo0UdQLeoxXghZhua7NjgLOB08j32vcb5euue8qarBkW22Uz8D7ggaVaPVv3goSJksGkqN8RRbzbjy0Crk3SI8j7FZ0kkdNR5M3wPjDGcJks1M/Jz9PAo0NVNVzLdkvOJryZ+KQqoHLi+93SfdmmmEneNHZEop2DnNg9law6I28Y/nbR+sMkq9ybtBVsTj+HtsodvWRt0pZLTpkSQm+bAZr3dIYp/J9GBAQEBAQEBAQEBAQEBAQEBAQEBAQEBPQA/wf0qF5TaBzuRwAAAABJRU5ErkJggg==");
        }

        #btn-header-search,
        #btn-header-calendar,
        #btn-scheduled-messages,
        #btn-emoji,
        #btn-stickers,
        #btn-voice,
        #btn-schedule-send,
        #btn-send {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 0 !important;
            overflow: hidden !important;
        }

        #btn-header-calendar,
        #btn-scheduled-messages {
            display: inline-flex !important;
        }

        #btn-header-search .vc-icon,
        #btn-scheduled-messages .vc-icon,
        #btn-emoji .vc-icon,
        #btn-voice .vc-icon,
        #btn-schedule-send .vc-icon,
        #btn-send .vc-icon {
            display: none !important;
        }

        #btn-header-search::before,
        #btn-header-calendar::before,
        #btn-scheduled-messages::before,
        #btn-emoji::before,
        #btn-stickers::before,
        #btn-voice::before,
        #btn-schedule-send::before,
        #btn-send::before {
            content: "" !important;
            display: block !important;
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: contain !important;
            filter: drop-shadow(0 0 5px rgba(142, 204, 226, 0.18)) !important;
            opacity: 0.96 !important;
            transform: none !important;
        }

        #btn-header-search::before {
            background-image: var(--sm-icon-search) !important;
        }

        #btn-header-calendar::before {
            background-image: var(--sm-icon-calendar) !important;
        }

        #btn-scheduled-messages::before,
        #btn-schedule-send::before {
            background-image: var(--sm-icon-scheduled) !important;
        }

        #btn-voice::before {
            background-image: var(--sm-icon-voice) !important;
        }

        #btn-stickers::before {
            background-image: var(--sm-icon-stickers) !important;
        }

        #btn-emoji::before {
            background-image: var(--sm-icon-emoji) !important;
        }

        #btn-send::before {
            background-image: var(--sm-icon-send) !important;
        }

        #btn-header-search:hover::before,
        #btn-header-calendar:hover::before,
        #btn-scheduled-messages:hover::before,
        #btn-emoji:hover::before,
        #btn-stickers:hover::before,
        #btn-voice:hover::before,
        #btn-schedule-send:hover::before,
        #btn-send:hover::before {
            opacity: 1 !important;
            filter: drop-shadow(0 0 8px rgba(142, 204, 226, 0.35)) !important;
        }

        #btn-header-calendar,
        #btn-scheduled-messages {
            width: 42px !important;
            height: 42px !important;
            border-radius: 50% !important;
            background: transparent !important;
            border: 0 !important;
            color: #b4c0cf !important;
            box-shadow: none !important;
        }

        #btn-header-calendar:hover,
        #btn-scheduled-messages:hover {
            background: rgba(255, 255, 255, 0.07) !important;
        }

        #input-area #btn-send.send-btn,
        #input-area #btn-send {
            background: linear-gradient(135deg, rgba(47, 141, 247, 0.96), rgba(29, 115, 209, 0.96)) !important;
        }

        #input-area #btn-send::before {
            width: 25px !important;
            height: 25px !important;
        }

        #input-area #btn-voice.recording::before {
            filter: drop-shadow(0 0 8px rgba(255, 90, 90, 0.55)) !important;
        }

/* ===== /static/css/split/38-smchat-authoritative-group-settings.css ===== */
/* SMCHAT STAGE23: one authoritative full-screen group settings interface. */
body.sm-group-settings-open {
    overflow: hidden !important;
}

#right-panel.sm-unified-group-editor,
#right-panel.sm-fullscreen-group-editor {
    display: none !important;
}

.sm-authoritative-group-settings .sm-group-admin-window {
    min-width: 0;
}

.sm-group-tool-button {
    width: 100%;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.sm-group-background-block {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.sm-group-background-preview {
    min-height: 128px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    display: grid;
    place-items: center;
    color: #91a4bb;
    font-weight: 700;
}

.sm-group-background-preview.is-empty {
    background-image: linear-gradient(135deg, rgba(35, 53, 72, 0.72), rgba(17, 31, 47, 0.82));
}

.sm-group-background-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sm-group-bg-upload {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.sm-group-restrictions-grid {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.sm-group-restrictions-grid label {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    color: #e8f1fb;
    font-weight: 650;
}

.sm-group-embedded-attachments {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 22px 28px 36px;
}

.sm-group-attachments-loading {
    min-height: 240px;
    display: grid;
    place-items: center;
    color: #91a4bb;
    font-weight: 700;
}

.sm-group-embedded-attachments > .attachments-profile,
.sm-group-embedded-attachments > .sm-side-shell,
.sm-group-attachments-loading > .attachments-profile,
.sm-group-attachments-loading > .sm-side-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.sm-authoritative-group-settings[data-sm-group-view="attachments"] .attachments-hero,
.sm-authoritative-group-settings[data-sm-group-view="attachments"] .attachments-sticky,
.sm-authoritative-group-settings[data-sm-group-view="attachments"] .sm-side-header,
.sm-authoritative-group-settings[data-sm-group-view="attachments"] .sm-side-peer-card {
    display: none !important;
}

.sm-authoritative-group-settings[data-sm-group-view="attachments"] .attachments-profile-main,
.sm-authoritative-group-settings[data-sm-group-view="attachments"] .sm-side-content {
    padding-top: 0 !important;
}

@media (max-width: 760px) {
    .sm-group-background-buttons {
        grid-template-columns: 1fr;
    }

    .sm-group-embedded-attachments {
        padding: 14px 12px 28px;
    }
}

/* ===== /static/css/split/49-smchat-stage231c-r5-calibration.css ===== */
/* SMCHAT Stage 23.1C-r5: calibrated final pre-Stage24 UI stabilization. */
:root {
    --sm-r5-calibrated: 1;
    --sm-r5-compact-width: 112px;
    --sm-r3-rail-width: 84px;
    --sm-r3-panel: rgba(15, 32, 50, .92);
    --sm-r3-panel-soft: rgba(17, 38, 58, .72);
    --sm-r3-border: rgba(127, 174, 215, .16);
    --sm-r3-divider: rgba(135, 177, 214, .12);
    --sm-r3-muted: #8fa5bc;
}

/* Rail icons: one theme, one stroke language. */
.desktop-nav-icon .sm-r3-rail-svg,
.desktop-nav-pin .sm-r3-pin-svg,
.desktop-nav-pin svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.desktop-nav-item .desktop-nav-icon { color: #9bb0c7 !important; }
.desktop-nav-item:hover .desktop-nav-icon,
.desktop-nav-item.active .desktop-nav-icon { color: #65b6ff !important; }
.desktop-nav-pin { position: sticky !important; bottom: 10px !important; }

/* Calibrated sidebar: full list or avatar-only list, never an empty intermediate strip. */
@media (min-width: 769px) {
    #sidebar {
        width: var(--sidebar-width, 420px) !important;
        min-width: 300px !important;
        max-width: 560px !important;
        grid-template-columns: var(--sm-r3-rail-width) minmax(0, calc(var(--sidebar-width, 420px) - var(--sm-r3-rail-width))) !important;
        transition: width 140ms ease, min-width 140ms ease, max-width 140ms ease !important;
    }

    #sidebar .desktop-nav-rail {
        width: var(--sm-r3-rail-width) !important;
        min-width: var(--sm-r3-rail-width) !important;
    }

    #sidebar-resizer {
        position: absolute !important;
        top: 0 !important;
        right: -5px !important;
        width: 10px !important;
        height: 100% !important;
        z-index: 120 !important;
        cursor: col-resize !important;
        touch-action: none !important;
    }

    #sidebar-resizer::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 4px;
        width: 2px;
        background: transparent;
        transition: background 120ms ease;
    }

    #sidebar-resizer:hover::after,
    body.sidebar-resizing #sidebar-resizer::after {
        background: #3aa2f4;
    }

    body.sidebar-resizing * {
        cursor: col-resize !important;
    }
}

/* No glow/shadow on dates and times. */
.date-separator,
.date-separator span,
.chat-date-separator,
.chat-date-separator span,
.system-date-separator,
.message-date-line,
[data-date-separator] {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Compact, aligned mini video controls slightly lower. */
#messages-container .sm-mini-video-player .video-controls,
#messages-container .custom-video-player .video-controls {
    left: 9px !important;
    right: 9px !important;
    bottom: 7px !important;
    min-height: 34px !important;
    padding: 5px 7px !important;
    grid-template-columns: 36px minmax(72px, 1fr) 36px 30px 30px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    align-items: center !important;
}
#messages-container .video-current,
#messages-container .video-duration {
    min-width: 36px !important;
    width: 36px !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
#messages-container .video-seek { min-width: 0 !important; height: 16px !important; }
#messages-container .video-open,
#messages-container .video-volume { width: 30px !important; height: 30px !important; }

/* Uniform full chat background; system text always has a readable shell. */
#chat-area { overflow: hidden !important; background: #071421 !important; }
#chat-bg {
    inset: -14px !important;
    width: auto !important;
    height: auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}
.chat-content { isolation: isolate; background: transparent !important; }
#messages-container .system-message,
#messages-container .system-date-separator,
#messages-container .service-message {
    width: fit-content;
    max-width: min(620px, 92%);
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 5px 10px !important;
    color: #eaf3fc !important;
    border: 1px solid rgba(139, 181, 219, .16) !important;
    border-radius: 999px !important;
    background: rgba(7, 20, 33, .78) !important;
    backdrop-filter: blur(8px) !important;
}

/* Actual group settings cards. */
.sm-group-admin-main,
.sm-group-admin-aside { min-width: 0 !important; }
.sm-r3-group-card { display: grid !important; gap: 11px !important; }
.sm-r3-card-description { color: var(--sm-r3-muted); font-size: 12px; line-height: 1.4; }
.sm-r3-setting-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 8px 11px !important;
    color: #eef7ff !important;
    text-align: left !important;
    border: 1px solid var(--sm-r3-border) !important;
    border-radius: 12px !important;
    background: rgba(11, 29, 46, .76) !important;
}
.sm-r3-setting-row:hover { background: rgba(25, 58, 87, .82) !important; }
.sm-r3-setting-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(51, 151, 234, .14); }
.sm-r3-setting-content { display: grid; gap: 2px; min-width: 0; }
.sm-r3-setting-content strong { color: #eef7ff; font-size: 13px; }
.sm-r3-setting-content small { color: var(--sm-r3-muted); font-size: 11px; }
.sm-r3-setting-chevron { color: #8cb4d8; font-size: 22px; text-align: center; }
.sm-r3-background-preview {
    display: grid;
    place-items: center;
    min-height: 116px;
    color: var(--sm-r3-muted);
    font-size: 12px;
    overflow: hidden;
    border: 1px dashed rgba(129, 177, 218, .24);
    border-radius: 13px;
    background: rgba(4, 14, 24, .45) center/cover no-repeat;
}
.sm-r3-background-preview:not(.is-empty) { color: #fff; text-shadow: 0 1px 4px #000; }
.sm-r3-background-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-r3-background-actions .btn { min-width: 0 !important; margin: 0 !important; }
.sm-r3-restriction-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 58px !important;
    padding: 10px 2px !important;
    border-top: 1px solid var(--sm-r3-divider) !important;
}
.sm-r3-restriction-row > span { display: grid; gap: 3px; min-width: 0; text-align: left; }
.sm-r3-restriction-row strong { color: #edf6ff; font-size: 13px; }
.sm-r3-restriction-row small { color: var(--sm-r3-muted); font-size: 11px; line-height: 1.35; }
.sm-r3-restriction-row .sm-switch { margin: 0 !important; flex: 0 0 auto !important; }
.sm-r3-participant-settings-card > .sm-group-section-title { margin-bottom: 2px; }
.sm-r3-participant-settings-card .sm-group-row { grid-template-columns: 36px minmax(0, 1fr) auto !important; }
.sm-group-row > span:nth-child(2),
.sm-group-row-title,
.sm-group-row-sub { min-width: 0 !important; text-align: left !important; }
.sm-group-row-title,
.sm-group-row-sub { display: block !important; }
.sm-group-row-sub { margin-top: 2px !important; }
.sm-group-danger > span:first-child {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    color: #ff7a7a !important;
    border: 1px solid rgba(255, 83, 83, .28) !important;
    border-radius: 9px !important;
    background: rgba(239, 68, 68, .14) !important;
}

/* Permission and other group dialogs keep a solid surface across full content. */
.vc-modal-overlay,
.vc-modal-backdrop { background: rgba(1, 7, 13, .78) !important; backdrop-filter: blur(9px) !important; }
.vc-modal,
.vc-modal-content,
.sm-group-setting-dialog,
.sm-r3-admin-dialog {
    color: #edf6ff !important;
    background: #0d2032 !important;
    border-color: rgba(132, 179, 220, .18) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46) !important;
}
.sm-group-setting-options { padding: 2px 5px 2px 0 !important; }
.sm-group-permission-option,
.sm-group-setting-option { background: #10283e !important; }
.sm-group-permission-option > span,
.sm-group-setting-option > span { min-width: 0; }

/* Administrator chooser uses current group members only. */
.sm-r3-admin-dialog { width: min(560px, 90vw); }
.sm-r3-admin-dialog > p { color: var(--sm-r3-muted); line-height: 1.45; }
.sm-r3-admin-candidates { display: grid; gap: 8px; max-height: 52vh; overflow: auto; }
.sm-r3-admin-candidate {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--sm-r3-border);
    border-radius: 12px;
    background: rgba(16, 40, 62, .78);
}
.sm-r3-admin-candidate .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background-size: cover; background-position: center; }
.sm-r3-admin-candidate > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.sm-r3-admin-candidate small { color: var(--sm-r3-muted); }

/* Missing old upload is bounded instead of breaking the message flow. */
.sm-r3-missing-media { min-height: 110px !important; display: grid !important; place-items: center !important; background: rgba(10, 26, 42, .88) !important; }
.sm-r3-missing-media::after { content: 'Изображение недоступно'; color: var(--sm-r3-muted); font-size: 12px; }

/* Full-screen background editor. */
#sm-r3-background-editor { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px; overflow: auto; background: rgba(2, 8, 14, .88); backdrop-filter: blur(10px); }
body.sm-r3-editor-open { overflow: hidden !important; }
.sm-r3-editor-dialog { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); width: min(1120px, 96vw); max-height: 92vh; overflow: hidden; color: #edf6ff; border: 1px solid var(--sm-r3-border); border-radius: 20px; background: #0d1e2e; box-shadow: 0 28px 90px rgba(0, 0, 0, .5); }
.sm-r3-editor-main { display: grid; grid-template-rows: auto minmax(360px, 1fr) auto; min-width: 0; min-height: 680px; padding: 17px; border-right: 1px solid var(--sm-r3-divider); }
.sm-r3-editor-main header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-bottom: 13px; }
.sm-r3-editor-main h2, .sm-r3-editor-main p { margin: 0; }
.sm-r3-editor-main p { margin-top: 4px; color: var(--sm-r3-muted); font-size: 12px; }
.sm-r3-editor-main header button { width: 36px; height: 36px; color: #fff; font-size: 22px; border: 1px solid var(--sm-r3-border); border-radius: 50%; background: #142c42; }
.sm-r3-editor-viewport { display: grid; place-items: center; min-width: 0; min-height: 360px; overflow: hidden; touch-action: none; cursor: grab; border: 1px solid var(--sm-r3-border); border-radius: 15px; background: #06121d; }
.sm-r3-editor-viewport img { width: 100%; height: 100%; max-width: none; max-height: none; user-select: none; pointer-events: none; transform-origin: center; }
.sm-r3-editor-status { min-height: 22px; padding-top: 10px; color: var(--sm-r3-muted); font-size: 12px; }
.sm-r3-editor-status.error { color: #ff9696; }
.sm-r3-editor-sidebar { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 17px; overflow: auto; }
.sm-r3-editor-sidebar section { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--sm-r3-border); border-radius: 12px; background: rgba(5, 18, 30, .58); }
.sm-r3-mode-buttons { display: grid; gap: 6px; }
.sm-r3-mode-buttons button, .sm-r3-editor-sidebar footer button { min-height: 38px; color: #e2effb; border: 1px solid var(--sm-r3-border); border-radius: 9px; background: #153149; }
.sm-r3-mode-buttons button.active, .sm-r3-editor-sidebar footer button.primary { background: #2f94e7; border-color: #62b6f5; color: #fff; }
.sm-r3-editor-sidebar label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: 12px; }
.sm-r3-editor-sidebar input[type=range] { grid-column: 1/-1; width: 100%; }
.sm-r3-editor-sidebar output { color: #8bcaff; }
.sm-r3-editor-sidebar footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

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

@media (max-width: 820px) {
    .sm-r3-editor-dialog { grid-template-columns: minmax(0, 1fr); width: min(680px, 96vw); max-height: none; }
    .sm-r3-editor-main { min-height: 54vh; border-right: 0; border-bottom: 1px solid var(--sm-r3-divider); }
}
@media (max-width: 620px) {
    .sm-r3-background-actions { grid-template-columns: minmax(0, 1fr); }
    #sm-r3-background-editor { padding: 0; place-items: stretch; }
    .sm-r3-editor-dialog { width: 100%; min-height: 100%; border: 0; border-radius: 0; }
    .sm-r3-editor-sidebar footer { grid-template-columns: minmax(0, 1fr); }
}

/* ===== /static/css/split/50-smchat-mobile-composer-stage24.css ===== */
/* SMCHAT STAGE24: mobile composer, bottom alignment and compact action tray. */
:root {
    --sm-mobile-composer-gap: 0px;
}

#btn-mobile-composer-more {
    display: none !important;
}

#mobile-composer-tools {
    display: contents;
}

#mobile-composer-tools #btn-emoji { order: 1; }
#mobile-composer-tools #btn-file { order: 2; }
#mobile-composer-tools #btn-stickers { order: 3; }
#mobile-composer-tools #btn-voice { order: 4; }
#msg-input { order: 5; }
#msg-char-counter { order: 5; }
#mobile-composer-tools #btn-schedule-send { order: 6; }
#btn-send { order: 7; }

@keyframes sm-mobile-tools-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sm-own-message-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.message-row.mine.message-enter {
    animation: sm-own-message-fade-in 0.16s ease-out both !important;
}

@media (max-width: 768px) {
    html,
    body,
    #messenger,
    #chat-area,
    .chat-content {
        height: 100dvh;
        min-height: 0;
    }

    .chat-content {
        overflow: hidden;
    }

    body.mobile-chat-open #input-area,
    #input-area {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--mobile-keyboard-offset, 0px) !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 6px 8px max(6px, env(safe-area-inset-bottom)) !important;
        gap: 7px !important;
        border-radius: 16px 16px 0 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-sizing: border-box;
        z-index: 55 !important;
    }

    #btn-mobile-composer-more {
        display: inline-flex !important;
        order: 1;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
    }

    #btn-mobile-composer-more .composer-icon {
        transition: transform 0.22s ease;
    }

    #input-area.mobile-tools-open #btn-mobile-composer-more .composer-icon {
        transform: rotate(45deg);
    }

    #msg-input {
        order: 2;
        min-width: 0 !important;
        width: auto !important;
        flex: 1 1 auto !important;
    }

    #msg-char-counter {
        order: 2;
    }

    #btn-send {
        order: 3;
        flex: 0 0 44px;
    }

    #mobile-composer-tools {
        position: absolute;
        left: 8px;
        bottom: calc(100% + 8px);
        display: flex;
        align-items: center;
        gap: 6px;
        width: max-content;
        max-width: calc(100vw - 16px);
        padding: 7px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--header-bg);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        transform-origin: left bottom;
        pointer-events: none;
        visibility: hidden;
        z-index: 3;
    }

    #input-area.mobile-tools-open #mobile-composer-tools {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
        animation: sm-mobile-tools-in 0.2s ease-out both;
    }

    #mobile-composer-tools .composer-icon-btn {
        display: inline-flex !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    body.mobile-chat-open #messages-container,
    #messages-container {
        min-height: 0 !important;
        padding-bottom: var(--mobile-input-height, 58px) !important;
        scroll-padding-bottom: var(--mobile-input-height, 58px);
        box-sizing: border-box;
    }

    .attachment-preview-area {
        bottom: calc(var(--mobile-input-height, 58px) + var(--mobile-keyboard-offset, 0px) + 8px) !important;
    }

    #emoji-picker,
    #sticker-picker,
    .attachment-menu {
        bottom: calc(var(--mobile-input-height, 58px) + var(--mobile-keyboard-offset, 0px) + 8px) !important;
    }

    #scroll-bottom-btn {
        bottom: calc(var(--mobile-input-height, 58px) + var(--mobile-keyboard-offset, 0px) + 12px) !important;
    }

    .message-row.mine.message-enter {
        animation-duration: 0.12s !important;
    }
}

@media (max-width: 390px) {
    #mobile-composer-tools {
        gap: 4px;
        padding: 6px;
    }

    #mobile-composer-tools .composer-icon-btn {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}


/* SMCHAT_DESKTOP_PLUS_AND_VOICE_WAVE_05B_R3 */

/* Кнопка + существует только в мобильной версии. */
@media (min-width: 769px) {
    html body #input-area #btn-mobile-composer-more {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
}

/*
 * Базовый и активный слои голосовой волны должны иметь
 * одинаковую геометрию полосок.
 */
.voice-wave-shell .voice-wave-layer {
    gap: 2px !important;
}

.voice-wave-shell .voice-wave-bar {
    flex: 0 0 2px !important;
    width: 2px !important;
    min-width: 2px !important;
    max-width: 2px !important;
}

/* SMCHAT_CONTEXT_MENU_MOBILE_STABILITY_1_01_B5 */
.context-menu[data-sm-viewport-placed="1"] {
    box-sizing: border-box;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: manipulation;
}

.context-menu[data-sm-viewport-placed="1"] .context-menu-item,
.context-menu[data-sm-viewport-placed="1"] .menu-item {
    min-height: 42px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    html body #input-area {
        max-width: 100vw !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
    }

    html body #input-area #btn-mobile-composer-more {
        display: inline-flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body #input-area #mobile-composer-tools {
        left: max(8px, env(safe-area-inset-left));
        right: auto;
        max-width: calc(
            100vw
            - max(8px, env(safe-area-inset-left))
            - max(8px, env(safe-area-inset-right))
        );
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    html body #input-area #mobile-composer-tools::-webkit-scrollbar {
        display: none;
    }

    .context-menu[data-sm-viewport-placed="1"] .context-menu-item,
    .context-menu[data-sm-viewport-placed="1"] .menu-item {
        min-height: 44px;
    }
}

/* ===== /static/css/split/52-smchat-release-identity-1_01_c4.css ===== */
/* Smchat 1.01-C-4: release notes and persistent release identity. */
body.sm-release-notes-open {
    overflow: hidden;
}

.sm-release-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: color-mix(in srgb, #05070d 72%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sm-release-dialog {
    width: min(720px, 100%);
    max-height: min(820px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text, #f5f7fb);
    background: var(--sm-theme-card, var(--surface, #202a36));
    border: 1px solid var(--sm-theme-border, rgba(255, 255, 255, 0.12));
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.sm-release-header {
    position: relative;
    padding: 28px 64px 20px 28px;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent, #2aabee) 36%, transparent), transparent 42%),
        var(--sm-theme-panel, var(--surface2, #17212b));
    border-bottom: 1px solid var(--sm-theme-border, rgba(255, 255, 255, 0.1));
}

.sm-release-badge,
.sm-release-settings-version {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    color: var(--accent-contrast, #fff);
    background: var(--accent, #2aabee);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sm-release-header h2 {
    margin: 15px 0 8px;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.12;
}

.sm-release-header p,
.sm-release-list p {
    margin: 0;
    color: var(--text2, #b7c2ce);
    line-height: 1.5;
}

.sm-release-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--text, #fff);
    background: color-mix(in srgb, var(--sm-theme-card, #202a36) 78%, transparent);
    border: 1px solid var(--sm-theme-border, rgba(255, 255, 255, 0.12));
    border-radius: 50%;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.sm-release-close:hover,
.sm-release-close:focus-visible {
    color: var(--accent-contrast, #fff);
    background: var(--accent, #2aabee);
}

.sm-release-content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 22px 28px;
}

.sm-release-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-release-list li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    background: var(--sm-theme-panel, var(--surface2, #17212b));
    border: 1px solid var(--sm-theme-border, rgba(255, 255, 255, 0.09));
    border-radius: 16px;
}

.sm-release-list li > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--accent, #2aabee) 16%, transparent);
    border-radius: 12px;
    font-size: 19px;
}

.sm-release-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text, #fff);
    font-size: 14px;
}

.sm-release-list p {
    font-size: 13px;
}

.sm-release-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 28px max(16px, env(safe-area-inset-bottom));
    color: var(--text3, var(--text2, #9aa7b5));
    background: var(--sm-theme-panel, var(--surface2, #17212b));
    border-top: 1px solid var(--sm-theme-border, rgba(255, 255, 255, 0.1));
    font-size: 13px;
}

.sm-release-primary {
    min-width: 120px;
}

.sm-release-settings-nav {
    margin-top: auto;
}

.sm-release-settings-section {
    width: 100%;
}

.sm-release-settings-card {
    position: relative;
    overflow: hidden;
}

.sm-release-settings-card .sm-release-settings-version {
    margin-bottom: 12px;
}

@media (max-width: 680px) {
    .sm-release-overlay {
        align-items: end;
        padding: max(10px, env(safe-area-inset-top)) 0 0;
    }

    .sm-release-dialog {
        width: 100%;
        max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
    }

    .sm-release-header {
        padding: 22px 54px 17px 18px;
    }

    .sm-release-close {
        top: 14px;
        right: 14px;
    }

    .sm-release-content {
        padding: 15px 18px;
    }

    .sm-release-list {
        grid-template-columns: 1fr;
    }

    .sm-release-footer {
        padding: 14px 18px max(14px, env(safe-area-inset-bottom));
    }

    .sm-release-footer span {
        display: none;
    }

    .sm-release-primary {
        width: 100%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sm-release-overlay {
        animation: sm-release-fade 160ms ease-out;
    }

    .sm-release-dialog {
        animation: sm-release-rise 220ms cubic-bezier(.2, .8, .2, 1);
    }
}

@keyframes sm-release-fade {
    from { opacity: 0; }
}

@keyframes sm-release-rise {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
}

/* ===== /static/css/split/18-smchat-rail-avatar-fix-css.css ===== */

        #rail-profile-avatar,
        .rail-profile-avatar {
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        #rail-profile-avatar img,
        .rail-profile-avatar img {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            object-fit: cover !important;
            border-radius: inherit !important;
        }
    

        /* === Patch: centered multi-file composer preview === */
        .chat-content.has-attachment-preview #messages-container {
            padding-bottom: 360px !important;
        }

        .attachment-preview-area.has-items {
            display: flex !important;
            justify-content: center !important;
            align-items: flex-end !important;
            left: 50% !important;
            right: auto !important;
            bottom: 94px !important;
            width: min(920px, calc(100% - 72px)) !important;
            max-width: calc(100% - 72px) !important;
            transform: translateX(-50%) !important;
            z-index: 14 !important;
            pointer-events: auto !important;
        }

        #pending-attachment-preview.sm-centered-attachment-preview {
            width: 100% !important;
            max-width: 920px !important;
            max-height: none !important;
            padding: 0 !important;
            margin: 0 auto !important;
            overflow: visible !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .sm-centered-attachment-preview .sm-attach-card {
            width: 100%;
            padding: 14px;
            border-radius: 22px;
            background: rgba(18, 32, 47, 0.92);
            border: 1px solid rgba(140, 164, 190, 0.20);
            box-shadow: 0 22px 62px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
        }

        .sm-centered-attachment-preview .sm-attach-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 6px 12px;
        }

        .sm-centered-attachment-preview .sm-attach-summary {
            display: inline-flex;
            align-items: baseline;
            gap: 12px;
            min-width: 0;
        }

        .sm-centered-attachment-preview .sm-attach-summary strong {
            color: #f4f8ff;
            font-size: 16px;
            font-weight: 800;
        }

        .sm-centered-attachment-preview .sm-attach-summary span {
            color: #93a4b8;
            font-size: 13px;
            font-weight: 650;
        }

        .sm-centered-attachment-preview .sm-attach-clear,
        .sm-centered-attachment-preview .sm-attach-remove {
            border: 0;
            cursor: pointer;
            color: #aeb9c7;
            background: rgba(255, 255, 255, 0.06);
            transition: background 150ms ease, color 150ms ease, transform 120ms ease;
        }

        .sm-centered-attachment-preview .sm-attach-clear:hover,
        .sm-centered-attachment-preview .sm-attach-remove:hover {
            color: #fff;
            background: rgba(239, 68, 68, 0.28);
        }

        .sm-centered-attachment-preview .sm-attach-clear {
            width: 32px;
            height: 32px;
            border-radius: 12px;
            font-size: 22px;
            line-height: 1;
        }

        .sm-centered-attachment-preview .sm-attach-list {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
            gap: 10px !important;
            max-height: 178px;
            overflow-y: auto;
            padding: 1px 2px 2px;
        }

        .sm-centered-attachment-preview .sm-attach-list[data-count="1"] {
            grid-template-columns: minmax(260px, 1fr) !important;
        }

        .sm-centered-attachment-preview .sm-attach-list[data-count="2"] {
            grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
        }

        .sm-centered-attachment-preview .sm-attach-list[data-count="3"] {
            grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
        }

        .sm-centered-attachment-preview .sm-attach-item {
            position: relative !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            min-height: 86px !important;
            display: grid !important;
            grid-template-columns: 74px minmax(0, 1fr) 40px !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 10px 38px 10px 10px !important;
            border-radius: 16px !important;
            background: rgba(28, 43, 61, 0.80) !important;
            border: 1px solid rgba(148, 163, 184, 0.14) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
        }

        .sm-centered-attachment-preview .sm-attach-thumb {
            width: 74px !important;
            height: 64px !important;
            min-width: 74px !important;
            border-radius: 13px !important;
            overflow: hidden !important;
            display: grid !important;
            place-items: center !important;
            background: rgba(8, 17, 30, 0.62) !important;
            color: #dbe7f5 !important;
            font-size: 26px !important;
        }

        .sm-centered-attachment-preview .sm-attach-thumb img,
        .sm-centered-attachment-preview .sm-attach-thumb video {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

        .sm-centered-attachment-preview .sm-attach-info {
            min-width: 0;
        }

        .sm-centered-attachment-preview .sm-attach-title {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #f3f7ff;
            font-size: 14px;
            font-weight: 750;
            line-height: 1.25;
        }

        .sm-centered-attachment-preview .sm-attach-sub {
            display: flex !important;
            align-items: center;
            gap: 6px;
            min-width: 0;
            margin-top: 6px;
            color: #8fa1b5;
            font-size: 12px;
            font-weight: 650;
            overflow: hidden;
            white-space: nowrap;
        }

        .sm-centered-attachment-preview .sm-attach-sub span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sm-centered-attachment-preview .pending-upload-progress {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            border-radius: 14px !important;
        }

        .sm-centered-attachment-preview .sm-attach-remove {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            border-radius: 9px;
            font-size: 18px;
            line-height: 1;
        }

        .sm-centered-attachment-preview .sm-attach-caption-row {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            min-height: 48px;
            padding: 0 12px;
            border-radius: 16px;
            background: rgba(8, 17, 30, 0.54);
            border: 1px solid rgba(148, 163, 184, 0.14);
        }

        .sm-centered-attachment-preview .sm-attach-caption-icon {
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            color: #9eb0c4;
            font-size: 18px;
        }

        .sm-centered-attachment-preview #pending-attachment-caption {
            width: 100%;
            min-height: 42px;
            height: 42px;
            max-height: 90px;
            padding: 11px 0;
            border: 0;
            outline: 0;
            resize: none;
            color: #eef5ff;
            background: transparent;
            font-size: 15px;
            line-height: 1.35;
            font-family: inherit;
        }

        .sm-centered-attachment-preview #pending-attachment-caption::placeholder {
            color: #8997a8;
        }

        .sm-centered-attachment-preview .sm-attach-caption-count {
            color: #77889d;
            font-size: 12px;
            font-weight: 650;
        }

        .sm-centered-attachment-preview .sm-attach-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            margin-top: 12px;
        }

        .sm-centered-attachment-preview .sm-attach-secondary,
        .sm-centered-attachment-preview .sm-attach-send {
            height: 42px;
            padding: 0 16px;
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.14);
            cursor: pointer;
            font-weight: 800;
            font-size: 14px;
            transition: transform 120ms ease, background 150ms ease, opacity 150ms ease;
        }

        .sm-centered-attachment-preview .sm-attach-secondary {
            color: #c8d4e3;
            background: rgba(255, 255, 255, 0.055);
        }

        .sm-centered-attachment-preview .sm-attach-secondary:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.09);
        }

        .sm-centered-attachment-preview .sm-attach-send {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            background: linear-gradient(135deg, #2f8df7, #1c74d6);
            box-shadow: 0 10px 24px rgba(47, 141, 247, 0.24);
        }

        .sm-centered-attachment-preview .sm-attach-send:disabled {
            cursor: default;
            opacity: 0.56;
            box-shadow: none;
        }

        .sm-centered-attachment-preview .sm-attach-secondary:active,
        .sm-centered-attachment-preview .sm-attach-send:not(:disabled):active {
            transform: scale(0.98);
        }

        body.light-theme .sm-centered-attachment-preview .sm-attach-card {
            background: rgba(248, 250, 252, 0.96);
            border-color: rgba(30, 41, 59, 0.12);
            box-shadow: 0 20px 52px rgba(15, 23, 42, 0.15);
        }

        body.light-theme .sm-centered-attachment-preview .sm-attach-summary strong,
        body.light-theme .sm-centered-attachment-preview .sm-attach-title,
        body.light-theme .sm-centered-attachment-preview #pending-attachment-caption {
            color: #152033;
        }

        body.light-theme .sm-centered-attachment-preview .sm-attach-item,
        body.light-theme .sm-centered-attachment-preview .sm-attach-caption-row {
            background: rgba(226, 235, 246, 0.82) !important;
            border-color: rgba(30, 41, 59, 0.12) !important;
        }

        body.light-theme .sm-centered-attachment-preview .sm-attach-secondary {
            color: #243448;
            background: #e7eef7;
        }

        @media (max-width: 1120px) {
            .attachment-preview-area.has-items {
                width: min(760px, calc(100% - 40px)) !important;
                max-width: calc(100% - 40px) !important;
            }

            .sm-centered-attachment-preview .sm-attach-list {
                grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
            }
        }

        @media (max-width: 768px) {
            .chat-content.has-attachment-preview #messages-container {
                padding-bottom: 430px !important;
            }

            .attachment-preview-area.has-items {
                left: 10px !important;
                right: 10px !important;
                bottom: calc(108px + env(safe-area-inset-bottom)) !important;
                width: auto !important;
                max-width: none !important;
                transform: none !important;
            }

            .sm-centered-attachment-preview .sm-attach-card {
                padding: 12px;
                border-radius: 20px;
            }

            .sm-centered-attachment-preview .sm-attach-list,
            .sm-centered-attachment-preview .sm-attach-list[data-count] {
                grid-template-columns: 1fr !important;
                max-height: 220px;
            }

            .sm-centered-attachment-preview .sm-attach-item {
                grid-template-columns: 62px minmax(0, 1fr) 36px !important;
                min-height: 76px !important;
            }

            .sm-centered-attachment-preview .sm-attach-thumb {
                width: 62px !important;
                height: 56px !important;
                min-width: 62px !important;
            }

            .sm-centered-attachment-preview .sm-attach-actions {
                display: grid;
                grid-template-columns: 1fr;
            }
        }



        /* === Patch: attachment preview visual fix v2 ===
           Fixes tiny old-style chips inside the centered upload panel.
           The preview now uses real full-width cards for one file and a responsive grid for many files. */
        .chat-content.has-attachment-preview #messages-container {
            padding-bottom: 310px !important;
        }

        .attachment-preview-area.has-items {
            position: absolute !important;
            left: 50% !important;
            right: auto !important;
            bottom: 82px !important;
            z-index: 24 !important;
            width: min(940px, calc(100% - 64px)) !important;
            max-width: min(940px, calc(100% - 64px)) !important;
            transform: translateX(-50%) !important;
            pointer-events: none !important;
        }

        #pending-attachment-preview.sm-attach-v2 {
            display: block !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            pointer-events: auto !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
            width: 100% !important;
            max-width: none !important;
            padding: 18px !important;
            border-radius: 24px !important;
            background: linear-gradient(180deg, rgba(21, 34, 50, 0.96), rgba(14, 25, 38, 0.97)) !important;
            border: 1px solid rgba(126, 162, 205, 0.24) !important;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
            backdrop-filter: blur(20px) saturate(145%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-head {
            padding: 0 4px 14px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary strong {
            font-size: 17px !important;
            color: #f5f8ff !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary span {
            color: #9eb0c5 !important;
            font-size: 13px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-clear {
            width: 34px !important;
            height: 34px !important;
            border-radius: 50% !important;
            color: #aebbd0 !important;
            background: rgba(255, 255, 255, 0.075) !important;
            font-size: 22px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-grid {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)) !important;
            gap: 12px !important;
            max-height: 236px !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            padding: 2px !important;
            justify-content: stretch !important;
            align-items: stretch !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] {
            grid-template-columns: 1fr !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="2"] {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="3"] {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="4"] {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-item.pending-attachment-chip,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-item {
            position: relative !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            min-height: 96px !important;
            display: grid !important;
            grid-template-columns: 88px minmax(0, 1fr) !important;
            align-items: center !important;
            gap: 14px !important;
            padding: 12px 42px 12px 12px !important;
            border-radius: 18px !important;
            background: rgba(29, 45, 64, 0.84) !important;
            border: 1px solid rgba(148, 163, 184, 0.16) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
            overflow: hidden !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-item {
            min-height: 112px !important;
            grid-template-columns: 106px minmax(0, 1fr) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb.pending-attachment-thumb,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb {
            width: 88px !important;
            height: 72px !important;
            min-width: 88px !important;
            border-radius: 15px !important;
            overflow: hidden !important;
            display: grid !important;
            place-items: center !important;
            background: rgba(8, 17, 30, 0.70) !important;
            color: #d8e7f8 !important;
            font-size: 28px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-thumb {
            width: 106px !important;
            height: 86px !important;
            min-width: 106px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb img,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb video {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-attachment-icon {
            width: 100% !important;
            height: 100% !important;
            display: grid !important;
            place-items: center !important;
            font-size: 32px !important;
            background: linear-gradient(135deg, rgba(47, 141, 247, 0.26), rgba(34, 211, 238, 0.12)) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-info {
            min-width: 0 !important;
            padding-right: 4px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-title,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-title {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            color: #f4f8ff !important;
            font-size: 15px !important;
            font-weight: 800 !important;
            line-height: 1.22 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-sub,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-type {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            min-width: 0 !important;
            margin-top: 7px !important;
            color: #9aaec5 !important;
            font-size: 12px !important;
            font-weight: 650 !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-sub span {
            min-width: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress {
            position: absolute !important;
            left: 78px !important;
            bottom: 11px !important;
            width: 26px !important;
            height: 26px !important;
            min-width: 26px !important;
            border-radius: 50% !important;
            background: #2ecb71 !important;
            border: 2px solid rgba(14, 25, 38, 0.98) !important;
            box-shadow: 0 4px 12px rgba(46, 203, 113, 0.24) !important;
            display: grid !important;
            place-items: center !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .pending-upload-progress {
            left: 94px !important;
            bottom: 12px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress svg {
            display: none !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress span {
            position: static !important;
            transform: none !important;
            color: #fff !important;
            font-size: 14px !important;
            font-weight: 900 !important;
            line-height: 1 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress.uploading {
            background: rgba(47, 141, 247, 0.95) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress.error {
            background: #ef4444 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-remove {
            position: absolute !important;
            top: 10px !important;
            right: 10px !important;
            width: 26px !important;
            height: 26px !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.075) !important;
            color: #c4cfdd !important;
            font-size: 18px !important;
            line-height: 1 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-remove:hover {
            color: #fff !important;
            background: rgba(239, 68, 68, 0.32) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-caption-row {
            display: grid !important;
            grid-template-columns: 34px minmax(0, 1fr) auto !important;
            align-items: center !important;
            gap: 10px !important;
            margin-top: 14px !important;
            min-height: 50px !important;
            padding: 0 14px !important;
            border-radius: 17px !important;
            background: rgba(8, 17, 30, 0.58) !important;
            border: 1px solid rgba(148, 163, 184, 0.14) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-actions {
            margin-top: 13px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-secondary,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-send {
            height: 44px !important;
            border-radius: 15px !important;
        }

        body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
            background: rgba(248, 250, 252, 0.98) !important;
            border-color: rgba(30, 41, 59, 0.13) !important;
            box-shadow: 0 22px 55px rgba(15, 23, 42, 0.16) !important;
        }

        body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-item,
        body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-caption-row {
            background: rgba(230, 238, 248, 0.88) !important;
            border-color: rgba(30, 41, 59, 0.12) !important;
        }

        body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-title,
        body.light-theme #pending-attachment-preview.sm-attach-v2 #pending-attachment-caption,
        body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-summary strong {
            color: #162033 !important;
        }

        @media (max-width: 1120px) {
            .attachment-preview-area.has-items {
                width: min(820px, calc(100% - 42px)) !important;
                max-width: min(820px, calc(100% - 42px)) !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="3"],
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="4"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }

        @media (max-width: 768px) {
            .chat-content.has-attachment-preview #messages-container {
                padding-bottom: 430px !important;
            }

            .attachment-preview-area.has-items {
                left: 10px !important;
                right: 10px !important;
                bottom: calc(106px + env(safe-area-inset-bottom)) !important;
                width: auto !important;
                max-width: none !important;
                transform: none !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
                padding: 13px !important;
                border-radius: 21px !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count] {
                grid-template-columns: 1fr !important;
                max-height: 230px !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-item,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-item {
                grid-template-columns: 74px minmax(0, 1fr) !important;
                min-height: 84px !important;
                padding: 10px 40px 10px 10px !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-thumb {
                width: 74px !important;
                height: 62px !important;
                min-width: 74px !important;
            }

            #pending-attachment-preview.sm-attach-v2 .pending-upload-progress,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .pending-upload-progress {
                left: 62px !important;
                bottom: 10px !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-actions {
                display: grid !important;
                grid-template-columns: 1fr !important;
            }
        }


        /* === Patch: attachment preview edge-wide compact v3 ===
           Wider to chat edges and lower by height, based on approved mockup. */
        .chat-content.has-attachment-preview #messages-container {
            padding-bottom: 235px !important;
        }

        .attachment-preview-area.has-items {
            position: absolute !important;
            left: 24px !important;
            right: 24px !important;
            bottom: 76px !important;
            width: auto !important;
            max-width: none !important;
            transform: none !important;
            z-index: 26 !important;
            pointer-events: none !important;
            align-items: stretch !important;
            justify-content: stretch !important;
        }

        #pending-attachment-preview.sm-attach-v2,
        #pending-attachment-preview.sm-centered-attachment-preview {
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            pointer-events: auto !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
            width: 100% !important;
            padding: 12px 14px 12px !important;
            border-radius: 22px !important;
            background: linear-gradient(180deg, rgba(21, 34, 50, 0.94), rgba(13, 24, 37, 0.96)) !important;
            border: 1px solid rgba(126, 162, 205, 0.23) !important;
            box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
            backdrop-filter: blur(18px) saturate(145%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-head {
            padding: 0 4px 8px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary {
            gap: 10px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary strong {
            font-size: 16px !important;
            line-height: 1.1 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary span {
            font-size: 12px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-clear {
            width: 30px !important;
            height: 30px !important;
            border-radius: 50% !important;
            font-size: 20px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
            gap: 10px !important;
            max-height: 78px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding: 1px 2px !important;
            align-items: stretch !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="2"] {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="3"],
        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="4"] {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-item.pending-attachment-chip,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-item,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-item {
            min-height: 64px !important;
            height: 64px !important;
            grid-template-columns: 56px minmax(0, 1fr) !important;
            gap: 10px !important;
            padding: 8px 38px 8px 8px !important;
            border-radius: 15px !important;
            background: rgba(28, 43, 61, 0.76) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb.pending-attachment-thumb,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-thumb {
            width: 56px !important;
            height: 48px !important;
            min-width: 56px !important;
            border-radius: 12px !important;
            font-size: 22px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-title,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-title {
            font-size: 13px !important;
            line-height: 1.15 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-sub,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-type {
            margin-top: 4px !important;
            gap: 6px !important;
            font-size: 10.5px !important;
            line-height: 1.15 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .pending-upload-progress {
            left: 48px !important;
            bottom: 6px !important;
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            border-width: 2px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress span {
            font-size: 11px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-remove {
            top: 9px !important;
            right: 9px !important;
            width: 22px !important;
            height: 22px !important;
            font-size: 16px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-caption-row {
            margin-top: 9px !important;
            min-height: 40px !important;
            grid-template-columns: 28px minmax(0, 1fr) auto !important;
            gap: 8px !important;
            padding: 0 12px !important;
            border-radius: 15px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-caption-icon {
            width: 24px !important;
            height: 24px !important;
            font-size: 15px !important;
        }

        #pending-attachment-preview.sm-attach-v2 #pending-attachment-caption {
            min-height: 38px !important;
            height: 38px !important;
            max-height: 72px !important;
            padding: 9px 0 !important;
            font-size: 14px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-caption-count {
            font-size: 11px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-actions {
            margin-top: 8px !important;
            gap: 9px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-secondary,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-send {
            height: 38px !important;
            padding: 0 14px !important;
            border-radius: 13px !important;
            font-size: 13px !important;
        }

        body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
            background: rgba(248, 250, 252, 0.98) !important;
            border-color: rgba(30, 41, 59, 0.13) !important;
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
        }

        @media (max-width: 1120px) {
            .attachment-preview-area.has-items {
                left: 16px !important;
                right: 16px !important;
                width: auto !important;
                max-width: none !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="3"],
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="4"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                max-height: 146px !important;
            }
        }

        @media (max-width: 768px) {
            .chat-content.has-attachment-preview #messages-container {
                padding-bottom: 360px !important;
            }

            .attachment-preview-area.has-items {
                left: 10px !important;
                right: 10px !important;
                bottom: calc(104px + env(safe-area-inset-bottom)) !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count] {
                grid-template-columns: 1fr !important;
                max-height: 210px !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-actions {
                display: grid !important;
                grid-template-columns: 1fr !important;
            }
        }



        /* --- Compact edge-wide attachment preview: preview only, no duplicate caption/actions --- */
        .attachment-preview-area.has-items {
            left: clamp(18px, 2vw, 34px) !important;
            right: clamp(18px, 2vw, 34px) !important;
            bottom: 96px !important;
            width: auto !important;
            max-width: none !important;
            pointer-events: none !important;
            z-index: 80 !important;
        }

        #pending-attachment-preview.sm-attach-v2 {
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            pointer-events: auto !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
            width: 100% !important;
            min-height: 96px !important;
            max-height: 134px !important;
            padding: 14px 18px 16px !important;
            border-radius: 22px !important;
            background: linear-gradient(180deg, rgba(25, 42, 61, 0.90), rgba(15, 28, 43, 0.88)) !important;
            border: 1px solid rgba(132, 169, 204, 0.20) !important;
            box-shadow: 0 16px 42px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
            backdrop-filter: blur(18px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
            overflow: hidden !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-head {
            height: 22px !important;
            margin-bottom: 10px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary {
            display: inline-flex !important;
            align-items: baseline !important;
            gap: 12px !important;
            color: #f4f8ff !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary strong {
            font-size: 17px !important;
            line-height: 1 !important;
            font-weight: 800 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-summary span {
            color: #9fb0c4 !important;
            font-size: 13px !important;
            font-weight: 800 !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-clear {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            margin-top: -4px !important;
            border-radius: 50% !important;
            border: 0 !important;
            background: rgba(148, 163, 184, 0.16) !important;
            color: #cdd8e6 !important;
            font-size: 20px !important;
            line-height: 32px !important;
            cursor: pointer !important;
            transition: background .16s ease, color .16s ease, transform .16s ease !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-clear:hover {
            background: rgba(239, 68, 68, 0.20) !important;
            color: #fff !important;
            transform: scale(1.04) !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-list {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
            gap: 12px !important;
            max-height: 66px !important;
            overflow: hidden !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-item,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-chip {
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            min-height: 58px !important;
            height: 58px !important;
            padding: 8px 38px 8px 10px !important;
            display: grid !important;
            grid-template-columns: 44px minmax(0, 1fr) 30px !important;
            gap: 10px !important;
            align-items: center !important;
            border-radius: 14px !important;
            background: linear-gradient(180deg, rgba(28, 45, 65, 0.92), rgba(15, 29, 45, 0.90)) !important;
            border: 1px solid rgba(132, 169, 204, 0.18) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
            position: relative !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-thumb {
            width: 44px !important;
            height: 44px !important;
            border-radius: 11px !important;
            background: rgba(5, 14, 24, 0.72) !important;
            overflow: hidden !important;
            display: grid !important;
            place-items: center !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb img,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb video,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-thumb img,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-thumb video {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-attachment-icon {
            width: 44px !important;
            height: 44px !important;
            display: grid !important;
            place-items: center !important;
            font-size: 22px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-info,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-meta {
            min-width: 0 !important;
            overflow: hidden !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-title,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-title {
            color: #f4f8ff !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            line-height: 1.12 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            margin-bottom: 5px !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-sub,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-type {
            display: flex !important;
            align-items: center !important;
            gap: 7px !important;
            color: #93a4b8 !important;
            font-size: 11px !important;
            line-height: 1 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        #pending-attachment-preview.sm-attach-v2 .pending-upload-progress {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            grid-column: 3 !important;
            grid-row: 1 !important;
            align-self: center !important;
            justify-self: center !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-remove,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-chip-remove {
            position: absolute !important;
            right: 8px !important;
            top: 8px !important;
            width: 24px !important;
            height: 24px !important;
            border-radius: 50% !important;
            border: 0 !important;
            background: rgba(148, 163, 184, 0.18) !important;
            color: #cdd8e6 !important;
            font-size: 16px !important;
            line-height: 24px !important;
            display: grid !important;
            place-items: center !important;
            cursor: pointer !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-remove:hover,
        #pending-attachment-preview.sm-attach-v2 .pending-attachment-chip-remove:hover {
            background: rgba(239, 68, 68, 0.24) !important;
            color: #fff !important;
        }

        #pending-attachment-preview.sm-attach-v2 .sm-attach-caption-row,
        #pending-attachment-preview.sm-attach-v2 .sm-attach-actions {
            display: none !important;
        }

        @media (max-width: 920px) {
            #pending-attachment-preview.sm-attach-v2 .sm-attach-list {
                grid-template-columns: 1fr !important;
                max-height: 180px !important;
                overflow: auto !important;
            }

            #pending-attachment-preview.sm-attach-v2 .sm-attach-card {
                max-height: 238px !important;
            }
        }

        /* === SmChat mini video player final: chat-only, fullscreen viewer untouched === */
        .message-media-wrap.has-video,
        .message-row.mine .message-media-wrap.has-video,
        .message-row.theirs .message-media-wrap.has-video,
        .message-media-wrap.has-video.has-caption,
        body.light-theme .message-row.mine .message-media-wrap.has-video,
        body.light-theme .message-row.theirs .message-media-wrap.has-video {
            width: min(430px, 72vw) !important;
            max-width: min(430px, 72vw) !important;
            padding: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
            background: transparent !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 0 !important;
        }

        .message-media-wrap.has-video .custom-video-player.sm-mini-video-player {
            position: relative !important;
            width: 100% !important;
            aspect-ratio: 16 / 9 !important;
            min-height: 0 !important;
            max-height: none !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24) !important;
            background: #02070d !important;
            overflow: hidden !important;
            border-radius: 16px 16px 0 0 !important;
        }

        .message-media-wrap.has-video:not(.has-caption) .custom-video-player.sm-mini-video-player {
            border-radius: 16px !important;
        }

        .message-media-wrap.has-video .custom-video-player.sm-mini-video-player video {
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            max-height: none !important;
            display: block !important;
            object-fit: cover !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
            border-radius: inherit !important;
            background: #000 !important;
        }

        .message-media-wrap.has-video .custom-video-player.sm-mini-video-player::after {
            content: "" !important;
            position: absolute !important;
            inset: auto 0 0 0 !important;
            height: 48% !important;
            pointer-events: none !important;
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58)) !important;
            z-index: 1 !important;
        }

        .message-media-wrap.has-video .video-play {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            width: 62px !important;
            height: 62px !important;
            transform: translate(-50%, -50%) !important;
            border: 1px solid rgba(255, 255, 255, 0.28) !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(18, 18, 18, 0.52) !important;
            color: #fff !important;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36) !important;
            backdrop-filter: blur(14px) !important;
            -webkit-backdrop-filter: blur(14px) !important;
            z-index: 4 !important;
            cursor: pointer !important;
        }

        .message-media-wrap.has-video .video-play svg {
            width: 28px !important;
            height: 28px !important;
        }

        .message-media-wrap.has-video .video-icon-pause {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.playing .video-icon-play {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.playing .video-icon-pause {
            display: block !important;
        }

        .message-media-wrap.has-video .video-controls {
            position: absolute !important;
            left: 12px !important;
            right: 12px !important;
            bottom: 12px !important;
            min-height: 38px !important;
            padding: 7px 9px !important;
            border-radius: 14px !important;
            display: grid !important;
            grid-template-columns: auto minmax(80px, 1fr) auto 34px 34px !important;
            align-items: center !important;
            gap: 9px !important;
            background: rgba(12, 9, 8, 0.58) !important;
            color: #fff !important;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34) !important;
            backdrop-filter: blur(16px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
            z-index: 3 !important;
            font-size: 13px !important;
            line-height: 1 !important;
        }

        .message-media-wrap.has-video .video-current,
        .message-media-wrap.has-video .video-duration {
            min-width: 34px !important;
            font-weight: 700 !important;
            color: rgba(255, 255, 255, 0.94) !important;
            font-variant-numeric: tabular-nums !important;
        }

        .message-media-wrap.has-video .video-seek {
            width: 100% !important;
            height: 18px !important;
            margin: 0 !important;
            accent-color: #2f8fff !important;
            cursor: pointer !important;
        }

        .message-media-wrap.has-video .video-open,
        .message-media-wrap.has-video .video-volume {
            position: static !important;
            width: 34px !important;
            height: 34px !important;
            border: 0 !important;
            border-radius: 11px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: transparent !important;
            color: rgba(255, 255, 255, 0.92) !important;
            box-shadow: none !important;
            cursor: pointer !important;
            z-index: 4 !important;
        }

        .message-media-wrap.has-video .video-open:hover,
        .message-media-wrap.has-video .video-volume:hover {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .message-media-wrap.has-video .video-open svg,
        .message-media-wrap.has-video .video-volume svg {
            width: 20px !important;
            height: 20px !important;
        }

        .message-media-wrap.has-video .video-icon-muted {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.is-muted .video-icon-volume {
            display: none !important;
        }

        .message-media-wrap.has-video .custom-video-player.is-muted .video-icon-muted {
            display: block !important;
        }

        .message-media-wrap.has-video .media-inline-caption {
            margin: 0 !important;
            padding: 10px 14px 11px !important;
            border-radius: 0 0 16px 16px !important;
            font-size: 16px !important;
            line-height: 1.28 !important;
            font-weight: 500 !important;
            box-shadow: none !important;
        }

        .message-row.mine .message-media-wrap.has-video .media-inline-caption {
            background: linear-gradient(135deg, #2e9cff, #247ce8) !important;
            color: #fff !important;
        }

        .message-row.theirs .message-media-wrap.has-video .media-inline-caption {
            background: linear-gradient(135deg, rgba(30, 43, 58, 0.98), rgba(24, 36, 50, 0.98)) !important;
            color: var(--text, #f8fafc) !important;
        }

        body.light-theme .message-row.theirs .message-media-wrap.has-video .media-inline-caption {
            background: #ffffff !important;
            color: #17202c !important;
        }

        .message-row.mine .message-media-wrap.has-video:not(.has-caption) .custom-video-player.sm-mini-video-player {
            box-shadow:
                0 0 0 8px rgba(47, 143, 255, 0.96),
                0 14px 36px rgba(0, 0, 0, 0.24) !important;
        }

        .message-row.mine .message-media-wrap.has-video.has-caption .custom-video-player.sm-mini-video-player {
            box-shadow:
                0 -7px 0 7px rgba(47, 143, 255, 0.96),
                7px 0 0 7px rgba(47, 143, 255, 0.96),
                -7px 0 0 7px rgba(47, 143, 255, 0.96),
                0 14px 36px rgba(0, 0, 0, 0.24) !important;
        }

        @media (max-width: 680px) {
            .message-media-wrap.has-video {
                width: min(340px, 86vw) !important;
                max-width: min(340px, 86vw) !important;
            }

            .message-media-wrap.has-video .video-play {
                width: 54px !important;
                height: 54px !important;
            }

            .message-media-wrap.has-video .video-controls {
                left: 9px !important;
                right: 9px !important;
                bottom: 9px !important;
                grid-template-columns: auto minmax(70px, 1fr) auto 30px 30px !important;
                gap: 6px !important;
                padding: 6px 7px !important;
                font-size: 12px !important;
            }

            .message-media-wrap.has-video .video-open,
            .message-media-wrap.has-video .video-volume {
                width: 30px !important;
                height: 30px !important;
            }
        }

/* ===== /static/css/split/22-sm-attachment-pro-editor-v1.css ===== */

/* === SmChat attachment preview/editor PRO fix === */
.attachment-preview-area.has-items {
    left: clamp(18px, 2vw, 34px) !important;
    right: clamp(18px, 2vw, 34px) !important;
    bottom: 96px !important;
    width: auto !important;
    max-width: none !important;
    pointer-events: none !important;
    z-index: 90 !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-card {
    min-height: 118px !important;
    max-height: 206px !important;
    padding: 14px 18px 16px !important;
    overflow: hidden !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-list,
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count],
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"],
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="2"],
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="3"],
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="4"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)) !important;
    gap: 10px !important;
    max-height: 128px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 1px 2px !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-item.pending-attachment-chip,
#pending-attachment-preview.sm-attach-v2 .sm-attach-item,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-chip,
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-item {
    min-height: 74px !important;
    height: 74px !important;
    display: grid !important;
    grid-template-columns: 44px 58px minmax(170px, 1fr) 132px 58px 28px !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-drag-handle {
    grid-column: 1 !important;
    position: static !important;
    width: 44px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-thumb,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-thumb,
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count="1"] .sm-attach-thumb {
    grid-column: 2 !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 54px !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-thumb.is-editable:hover {
    box-shadow: 0 0 0 2px rgba(47, 143, 255, .55) !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-edit-badge {
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: rgba(47, 143, 255, .92) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-info,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-meta {
    grid-column: 3 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-right: 10px !important;
    justify-self: stretch !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-title,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-title {
    max-width: 100% !important;
    color: #f5f8ff !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.14 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 5px !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-sub,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-type {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
    color: #9fb0c4 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-upload-text {
    margin-top: 5px !important;
    color: rgba(202, 214, 230, .72) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear {
    grid-column: 4 !important;
    position: static !important;
    width: 132px !important;
    min-width: 0 !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-rows: auto 5px !important;
    gap: 7px !important;
    align-items: center !important;
    justify-self: stretch !important;
    padding: 0 !important;
}
#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear span {
    color: #dce9f8 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: left !important;
}
#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear em {
    display: block !important;
    width: 100% !important;
    height: 5px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(148, 163, 184, .22) !important;
}
#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear i {
    display: block !important;
    width: var(--progress, 0%) !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #2f8fff, #22d3ee) !important;
}
#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear.done i {
    background: linear-gradient(90deg, #22c55e, #67e8f9) !important;
}
#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear.error i {
    background: linear-gradient(90deg, #ef4444, #fb7185) !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-order-actions {
    grid-column: 5 !important;
    position: static !important;
    width: 58px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    align-items: center !important;
    justify-self: center !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-order-btn {
    width: 26px !important;
    height: 30px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
}
#pending-attachment-preview.sm-attach-v2 .sm-attach-remove,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-chip-remove {
    grid-column: 6 !important;
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    justify-self: end !important;
    align-self: center !important;
}
body.light-theme #pending-attachment-preview.sm-attach-v2 .sm-attach-upload-text {
    color: rgba(71, 85, 105, .82) !important;
}
@media (max-width: 1120px) {
    #pending-attachment-preview.sm-attach-v2 .sm-attach-list,
    #pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count] {
        grid-template-columns: 1fr !important;
        max-height: 188px !important;
    }
}
@media (max-width: 720px) {
    #pending-attachment-preview.sm-attach-v2 .sm-attach-item.pending-attachment-chip,
    #pending-attachment-preview.sm-attach-v2 .sm-attach-item,
    #pending-attachment-preview.sm-attach-v2 .pending-attachment-chip {
        height: auto !important;
        min-height: 94px !important;
        grid-template-columns: 40px 54px minmax(0, 1fr) 28px !important;
        grid-template-rows: auto auto !important;
        row-gap: 8px !important;
    }
    #pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }
    #pending-attachment-preview.sm-attach-v2 .sm-attach-order-actions {
        grid-column: 4 !important;
        grid-row: 2 !important;
    }
    #pending-attachment-preview.sm-attach-v2 .sm-attach-remove {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }
}
.sm-media-editor {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #eef5ff;
    background: radial-gradient(circle at 50% 12%, rgba(47, 143, 255, .20), transparent 34%), rgba(2, 8, 16, .78);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.sm-media-editor.open { display: flex; }
.sm-media-editor__dialog {
    width: min(1180px, calc(100vw - 34px));
    max-height: min(860px, calc(100vh - 34px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 26px;
    background: radial-gradient(circle at 18% 0%, rgba(47, 143, 255, .14), transparent 34%), linear-gradient(180deg, rgba(15, 27, 43, .99), rgba(8, 16, 29, .99));
    box-shadow: 0 30px 110px rgba(0,0,0,.58);
}
.sm-media-editor__topbar,
.sm-media-editor__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.sm-media-editor__footer { border-top: 1px solid rgba(148, 163, 184, .14); border-bottom: 0; }
.sm-media-editor__title { display: grid; gap: 4px; }
.sm-media-editor__title strong { font-size: 22px; line-height: 1.1; font-weight: 900; }
.sm-media-editor__title span { color: #9fb0c6; font-size: 13px; }
.sm-media-editor__close {
    width: 40px; height: 40px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 14px;
    background: rgba(255,255,255,.06); color: #eaf2ff; font-size: 24px; cursor: pointer;
}
.sm-media-editor__body { min-height: 0; display: grid; grid-template-columns: minmax(520px, 1fr) 360px; gap: 18px; padding: 18px 22px; overflow: auto; }
.sm-media-editor__body--video { grid-template-columns: minmax(560px, 1fr) 360px; }
.sm-media-editor__stage,
.sm-media-editor__video-stage,
.sm-media-editor__panel {
    border: 1px solid rgba(148, 163, 184, .14); border-radius: 22px; background: rgba(15, 27, 43, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sm-media-editor__stage { min-height: 560px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sm-media-editor__canvas { width: min(100%, 900px); max-height: 100%; border-radius: 18px; cursor: grab; background: #050d17; }
.sm-media-editor__canvas:active { cursor: grabbing; }
.sm-media-editor__hint {
    position: absolute; left: 18px; bottom: 16px; max-width: min(520px, calc(100% - 36px)); padding: 9px 12px;
    border-radius: 999px; background: rgba(0,0,0,.38); color: rgba(238,245,255,.82); font-size: 12px; pointer-events: none;
}
.sm-media-editor__panel { display: grid; align-content: start; gap: 16px; padding: 18px; }
.sm-media-editor__section { display: grid; gap: 8px; }
.sm-media-editor__section label { display: flex; justify-content: space-between; color: #c9d7e8; font-size: 13px; font-weight: 850; }
.sm-media-editor__section input[type="range"] { width: 100%; accent-color: #2f8fff; }
.sm-media-editor__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-media-editor__chips button,
.sm-media-editor__quick-actions button {
    border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; padding: 9px 11px; background: rgba(255,255,255,.06); color: #eaf2ff; cursor: pointer; font-weight: 800;
}
.sm-media-editor__chips button.active,
.sm-media-editor__chips button:hover,
.sm-media-editor__quick-actions button:hover { background: rgba(47,143,255,.22); border-color: rgba(47,143,255,.45); }
.sm-media-editor__quick-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.sm-media-editor-btn {
    min-height: 42px; padding: 0 16px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 14px;
    background: rgba(255,255,255,.07); color: #eaf2ff; font-weight: 850; cursor: pointer;
}
.sm-media-editor-btn.primary { border-color: rgba(47,143,255,.55); background: linear-gradient(135deg, #2f8fff, #2563eb); color: #fff; }
.sm-media-editor-btn:disabled { opacity: .6; cursor: wait; }
.sm-media-editor__video-stage { min-height: 560px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.sm-media-editor__video { width: 100%; height: 100%; max-height: 560px; background: #000; object-fit: contain; }
.sm-media-editor__video-status { padding: 12px 14px; color: #c9d7e8; border-top: 1px solid rgba(148,163,184,.14); font-weight: 750; }
.sm-media-editor__timeline { display: grid; gap: 9px; }
.sm-media-editor__timeline-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(148,163,184,.22); overflow: hidden; }
.sm-media-editor__timeline-bar span { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #2f8fff, #22d3ee); }
.sm-media-editor__timeline-meta { display: flex; justify-content: space-between; gap: 10px; color: #9fb0c6; font-size: 12px; font-weight: 750; }
.sm-media-editor__encode-progress { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(47,143,255,.12); border: 1px solid rgba(47,143,255,.22); }
.sm-media-editor__encode-progress[hidden] { display: none; }
.sm-media-editor__encode-progress strong { font-size: 13px; }
.sm-media-editor__encode-progress em { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,.22); }
.sm-media-editor__encode-progress i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #2f8fff, #22d3ee); }
.sm-media-editor__encode-progress span { color: #c9d7e8; font-size: 12px; font-weight: 850; }
@media (max-width: 900px) {
    .sm-media-editor { padding: 12px; }
    .sm-media-editor__body,
    .sm-media-editor__body--video { grid-template-columns: 1fr; }
    .sm-media-editor__stage,
    .sm-media-editor__video-stage { min-height: 380px; }
    .sm-media-editor__panel { padding: 14px; }
}


/* SMCHAT_FORWARD_MEDIA_UPLOAD_UI_05B_R2 */
#pending-attachment-preview.sm-attach-v2 .sm-attach-card {
    min-height: 0 !important;
    max-height: min(390px, calc(100vh - 150px)) !important;
    overflow: hidden !important;
}

#pending-attachment-preview.sm-attach-v2 .sm-attach-list,
#pending-attachment-preview.sm-attach-v2 .sm-attach-list[data-count] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: min(310px, 38vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#pending-attachment-preview.sm-attach-v2 .sm-attach-item.pending-attachment-chip {
    width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 62px minmax(160px, 1fr) minmax(120px, 180px) 30px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

#pending-attachment-preview.sm-attach-v2 .sm-attach-drag-handle,
#pending-attachment-preview.sm-attach-v2 .sm-attach-order-actions {
    display: none !important;
}

#pending-attachment-preview.sm-attach-v2 .sm-attach-thumb,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-thumb {
    grid-column: 1 !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 56px !important;
}

#pending-attachment-preview.sm-attach-v2 .sm-attach-info,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-meta {
    grid-column: 2 !important;
    padding-right: 0 !important;
}

#pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 110px !important;
}

#pending-attachment-preview.sm-attach-v2 .sm-attach-remove,
#pending-attachment-preview.sm-attach-v2 .pending-attachment-chip-remove {
    grid-column: 4 !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
}

@media (max-width: 720px) {
    #pending-attachment-preview.sm-attach-v2 .sm-attach-item.pending-attachment-chip {
        grid-template-columns: 54px minmax(0, 1fr) 28px !important;
        grid-template-rows: auto auto !important;
        min-height: 92px !important;
    }

    #pending-attachment-preview.sm-attach-v2 .sm-attach-thumb,
    #pending-attachment-preview.sm-attach-v2 .pending-attachment-thumb {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
    }

    #pending-attachment-preview.sm-attach-v2 .sm-attach-info,
    #pending-attachment-preview.sm-attach-v2 .pending-attachment-meta {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #pending-attachment-preview.sm-attach-v2 .pending-upload-progress.sm-upload-linear {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
    }

    #pending-attachment-preview.sm-attach-v2 .sm-attach-remove,
    #pending-attachment-preview.sm-attach-v2 .pending-attachment-chip-remove {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
    }
}

/* ===== /static/css/split/21-sm-light-exact-fix-v15.css ===== */

/* === SmChat Light Theme V15 EXACT FIX ===
   Патч вставлен в конец body, после старых style-блоков, чтобы точно перекрыть поздний CSS.
   Исправляет реальные классы: sm-group-info-panel, sm-side-*, sm-group-admin-*, floating-date, chat-header-icon.
*/

body.light-theme {
    --sm-light-panel-bg: #f7fbff;
    --sm-light-card-bg: rgba(255,255,255,.92);
    --sm-light-card-bg-2: rgba(240,247,255,.92);
    --sm-light-text: #172233;
    --sm-light-muted: #65758a;
    --sm-light-muted-2: #8796aa;
    --sm-light-line: rgba(91,111,135,.18);
    --sm-light-blue: #2488df;
}

/* =========================================================
   1) Правая панель "О группе" — реальные классы sm-side/sm-group
   ========================================================= */

body.light-theme #right-panel.sm-chat-side-panel.sm-group-info-panel,
body.light-theme #right-panel.sm-chat-side-panel.sm-group-profile-panel,
body.light-theme #right-panel.sm-chat-side-panel {
    background: rgba(247,251,255,.98) !important;
    color: var(--sm-light-text) !important;
    border-left: 1px solid var(--sm-light-line) !important;
    box-shadow: -16px 0 38px rgba(35,52,72,.12) !important;
}

body.light-theme #right-panel.sm-chat-side-panel #panel-content,
body.light-theme #right-panel.sm-chat-side-panel .right-panel-content,
body.light-theme #right-panel.sm-chat-side-panel.sm-group-info-panel #panel-content,
body.light-theme #right-panel.sm-chat-side-panel.sm-group-info-panel .right-panel-content {
    background: transparent !important;
    color: var(--sm-light-text) !important;
}

body.light-theme .sm-side-shell,
body.light-theme .sm-side-content,
body.light-theme .sm-group-info-panel .sm-side-shell,
body.light-theme .sm-group-info-panel .sm-side-content {
    background: transparent !important;
    color: var(--sm-light-text) !important;
}

body.light-theme .sm-side-header,
body.light-theme .sm-group-info-panel .sm-side-header {
    background: rgba(247,251,255,.96) !important;
    border-bottom: 1px solid rgba(91,111,135,.12) !important;
}

body.light-theme .sm-side-title,
body.light-theme .sm-group-info-panel .sm-side-title {
    color: var(--sm-light-text) !important;
}

body.light-theme .sm-side-icon-btn,
body.light-theme .sm-group-info-panel .sm-side-icon-btn {
    background: rgba(230,239,249,.9) !important;
    color: #5a6c82 !important;
    border: 1px solid rgba(91,111,135,.18) !important;
    box-shadow: none !important;
}

body.light-theme .sm-side-icon-btn:hover,
body.light-theme .sm-group-info-panel .sm-side-icon-btn:hover {
    background: rgba(218,235,255,.95) !important;
    color: var(--sm-light-blue) !important;
    border-color: rgba(36,136,223,.28) !important;
}

body.light-theme .sm-group-info-hero {
    background: transparent !important;
}

body.light-theme .sm-group-info-avatar {
    color: #fff !important;
    border: 4px solid rgba(255,255,255,.95) !important;
    box-shadow: 0 16px 34px rgba(35,52,72,.18) !important;
}

body.light-theme .sm-group-info-name {
    color: var(--sm-light-text) !important;
    text-shadow: none !important;
}

body.light-theme .sm-group-info-username {
    color: var(--sm-light-blue) !important;
    text-shadow: none !important;
}

body.light-theme .sm-group-info-meta {
    color: var(--sm-light-muted) !important;
    text-shadow: none !important;
}

body.light-theme .sm-group-info-card,
body.light-theme .sm-side-card,
body.light-theme .sm-side-section,
body.light-theme .sm-side-info-list,
body.light-theme .sm-group-info-panel .sm-group-info-card,
body.light-theme .sm-group-info-panel .sm-side-card,
body.light-theme .sm-group-info-panel .sm-side-section {
    background: var(--sm-light-card-bg) !important;
    color: var(--sm-light-text) !important;
    border: 1px solid rgba(91,111,135,.16) !important;
    box-shadow: 0 8px 22px rgba(35,52,72,.075) !important;
}

body.light-theme .sm-group-section-title,
body.light-theme .sm-side-info-label,
body.light-theme .sm-group-info-panel .sm-group-section-title,
body.light-theme .sm-group-info-panel .sm-side-info-label {
    color: var(--sm-light-muted) !important;
    text-shadow: none !important;
}

body.light-theme .sm-side-info-value,
body.light-theme .sm-group-info-card,
body.light-theme .sm-group-info-card p,
body.light-theme .sm-group-info-card div,
body.light-theme .sm-group-member-row,
body.light-theme .sm-group-member-row *,
body.light-theme .sm-group-info-panel .sm-group-info-card,
body.light-theme .sm-group-info-panel .sm-group-info-card p,
body.light-theme .sm-group-info-panel .sm-group-info-card div,
body.light-theme .sm-group-info-panel .sm-group-member-row,
body.light-theme .sm-group-info-panel .sm-group-member-row * {
    color: var(--sm-light-text) !important;
    text-shadow: none !important;
}

body.light-theme .sm-group-member-row {
    background: transparent !important;
    border: 1px solid transparent !important;
}

body.light-theme .sm-group-member-row:hover {
    background: rgba(230,239,249,.72) !important;
    border-color: rgba(91,111,135,.12) !important;
}

body.light-theme .sm-group-member-row .muted,
body.light-theme .sm-group-member-row small,
body.light-theme .sm-side-info-row small,
body.light-theme .sm-side-info-row .muted {
    color: var(--sm-light-muted-2) !important;
}

body.light-theme .sm-group-member-row .role,
body.light-theme .sm-group-member-row .member-role,
body.light-theme .sm-group-info-panel .role,
body.light-theme .sm-group-info-panel .member-role {
    color: var(--sm-light-blue) !important;
}

/* =========================================================
   2) Полноэкранные настройки группы — реальные классы sm-group-admin-*
   ========================================================= */

body.light-theme .sm-group-admin-overlay {
    background:
        radial-gradient(circle at 50% 0%, rgba(36,136,223,.10), transparent 32%),
        rgba(230,238,247,.76) !important;
    backdrop-filter: blur(12px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
}

body.light-theme .sm-group-admin-window {
    background: #edf3f8 !important;
    color: var(--sm-light-text) !important;
}

body.light-theme .sm-group-admin-top {
    background: rgba(247,251,255,.94) !important;
    border-bottom: 1px solid rgba(91,111,135,.18) !important;
    color: var(--sm-light-text) !important;
}

body.light-theme .sm-group-admin-title {
    color: var(--sm-light-text) !important;
    text-shadow: none !important;
}

body.light-theme .sm-group-admin-back,
body.light-theme .sm-group-admin-close {
    color: #526174 !important;
    background: rgba(230,239,249,.86) !important;
    border: 1px solid rgba(91,111,135,.17) !important;
}

body.light-theme .sm-group-admin-back:hover,
body.light-theme .sm-group-admin-close:hover {
    color: var(--sm-light-blue) !important;
    background: rgba(218,235,255,.96) !important;
}

body.light-theme .sm-group-card,
body.light-theme .sm-group-admin-main .sm-group-card,
body.light-theme .sm-group-admin-aside .sm-group-card,
body.light-theme .sm-group-admin-hero {
    background: rgba(255,255,255,.90) !important;
    color: var(--sm-light-text) !important;
    border: 1px solid rgba(91,111,135,.16) !important;
    box-shadow: 0 10px 26px rgba(35,52,72,.08) !important;
}

body.light-theme .sm-group-card *,
body.light-theme .sm-group-admin-window label,
body.light-theme .sm-group-admin-window .sm-group-admin-name,
body.light-theme .sm-group-admin-window .sm-group-admin-title {
    color: var(--sm-light-text) !important;
    text-shadow: none !important;
}

body.light-theme .sm-group-admin-meta,
body.light-theme .sm-group-card small,
body.light-theme .sm-group-card .muted,
body.light-theme .sm-group-card .hint,
body.light-theme .sm-group-person-sub,
body.light-theme .sm-group-admin-window .secondary {
    color: var(--sm-light-muted) !important;
}

body.light-theme .sm-group-admin-window input,
body.light-theme .sm-group-admin-window textarea,
body.light-theme .sm-group-admin-window select,
body.light-theme .sm-group-input,
body.light-theme .sm-group-textarea {
    background: rgba(255,255,255,.96) !important;
    color: var(--sm-light-text) !important;
    border: 1px solid rgba(91,111,135,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.light-theme .sm-group-admin-window input::placeholder,
body.light-theme .sm-group-admin-window textarea::placeholder,
body.light-theme .sm-group-input::placeholder,
body.light-theme .sm-group-textarea::placeholder {
    color: #98a6b7 !important;
}

body.light-theme .sm-group-choice,
body.light-theme .sm-group-person,
body.light-theme .sm-group-permission-row {
    background: rgba(247,251,255,.88) !important;
    color: var(--sm-light-text) !important;
    border: 1px solid rgba(91,111,135,.14) !important;
}

body.light-theme .sm-group-choice.active {
    background: #dcecff !important;
    border-color: rgba(36,136,223,.42) !important;
    box-shadow: 0 0 0 2px rgba(36,136,223,.10) !important;
}

body.light-theme .sm-group-person:hover,
body.light-theme .sm-group-permission-row:hover {
    background: rgba(230,239,249,.84) !important;
}

body.light-theme .sm-group-role,
body.light-theme .sm-group-person-role {
    color: var(--sm-light-blue) !important;
}

body.light-theme .sm-group-admin-window .btn:not(.btn-accent):not(.danger),
body.light-theme .sm-group-admin-window button:not(.btn-accent):not(.danger):not(.sm-group-admin-close):not(.sm-group-admin-back) {
    background: rgba(255,255,255,.96) !important;
    color: #25364a !important;
    border: 1px solid rgba(91,111,135,.18) !important;
}

body.light-theme .sm-group-admin-window .btn-accent,
body.light-theme .sm-group-admin-window .primary {
    background: linear-gradient(135deg, #3b9cf2, #247ed8) !important;
    color: #ffffff !important;
    border-color: rgba(36,136,223,.24) !important;
}

/* =========================================================
   3) Дата в чате: убираем белую полоску. Полоска была из-за background на .floating-date.
   ========================================================= */

body.light-theme #messages-container .floating-date,
body.light-theme .chat-content #messages-container .floating-date,
body.light-theme #messages-container .date-separator {
    position: sticky !important;
    top: 8px !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body.light-theme #messages-container .floating-date::before,
body.light-theme #messages-container .floating-date::after,
body.light-theme #messages-container .date-separator::before,
body.light-theme #messages-container .date-separator::after {
    content: none !important;
    display: none !important;
}

body.light-theme #messages-container .floating-date span,
body.light-theme .chat-content #messages-container .floating-date span,
body.light-theme #messages-container .date-separator span {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    margin: 0 auto !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    color: #526174 !important;
    border: 1px solid rgba(91,111,135,.14) !important;
    box-shadow: 0 8px 20px rgba(35,52,72,.12) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* =========================================================
   4) Иконки сверху чата: реальные id/classes, включая календарь.
   ========================================================= */

body.light-theme #chat-header .chat-header-icon,
body.light-theme #chat-header .chat-settings-btn,
body.light-theme #chat-header #btn-chat-settings,
body.light-theme #chat-header #btn-header-search,
body.light-theme #chat-header #btn-header-calendar,
body.light-theme #chat-header #btn-header-attachments,
body.light-theme #chat-header #btn-header-menu,
body.light-theme #chat-header button.chat-header-icon,
body.light-theme #chat-header button.icon-btn {
    color: #47586c !important;
    background: rgba(230,239,249,.58) !important;
    border: 1px solid rgba(91,111,135,.14) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

body.light-theme #chat-header .chat-header-icon svg,
body.light-theme #chat-header .chat-settings-btn svg,
body.light-theme #chat-header #btn-chat-settings svg,
body.light-theme #chat-header #btn-header-search svg,
body.light-theme #chat-header #btn-header-calendar svg,
body.light-theme #chat-header #btn-header-attachments svg,
body.light-theme #chat-header #btn-header-menu svg,
body.light-theme #chat-header button.chat-header-icon svg,
body.light-theme #chat-header button.icon-btn svg {
    color: #47586c !important;
    stroke: #47586c !important;
    fill: none !important;
    opacity: 1 !important;
}

body.light-theme #chat-header .chat-header-icon:hover,
body.light-theme #chat-header .chat-settings-btn:hover,
body.light-theme #chat-header #btn-chat-settings:hover,
body.light-theme #chat-header #btn-header-search:hover,
body.light-theme #chat-header #btn-header-calendar:hover,
body.light-theme #chat-header #btn-header-attachments:hover,
body.light-theme #chat-header #btn-header-menu:hover,
body.light-theme #chat-header button.chat-header-icon:hover,
body.light-theme #chat-header button.icon-btn:hover {
    color: var(--sm-light-blue) !important;
    background: rgba(218,235,255,.98) !important;
    border-color: rgba(36,136,223,.25) !important;
}

body.light-theme #chat-header .chat-header-icon:hover svg,
body.light-theme #chat-header .chat-settings-btn:hover svg,
body.light-theme #chat-header #btn-chat-settings:hover svg,
body.light-theme #chat-header #btn-header-search:hover svg,
body.light-theme #chat-header #btn-header-calendar:hover svg,
body.light-theme #chat-header #btn-header-attachments:hover svg,
body.light-theme #chat-header #btn-header-menu:hover svg,
body.light-theme #chat-header button.chat-header-icon:hover svg,
body.light-theme #chat-header button.icon-btn:hover svg {
    color: var(--sm-light-blue) !important;
    stroke: var(--sm-light-blue) !important;
}

/* Дополнительный fallback для inline-иконок, если кнопка без svg */
body.light-theme #chat-header button[title],
body.light-theme #chat-header button[aria-label] {
    color: #47586c !important;
    opacity: 1 !important;
}


/* === PATCH: visible message composer icons, 2026-06-12 ===
   Replaces low-contrast emoji/text icons with one consistent SVG set.
   IDs are preserved, so existing JS handlers keep working. */
#input-area {
    column-gap: 9px !important;
    row-gap: 8px !important;
}

#input-area .composer-icon-btn,
#input-area #btn-emoji,
#input-area #btn-file,
#input-area #btn-stickers,
#input-area #btn-voice,
#input-area #btn-schedule-send,
#input-area #btn-send {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 0 !important;
    overflow: visible !important;
    color: #9fd0ff !important;
    background: rgba(34, 52, 73, 0.96) !important;
    border: 1px solid rgba(132, 169, 205, 0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 5px 14px rgba(0, 0, 0, 0.16) !important;
}

#input-area .composer-icon-btn:hover,
#input-area #btn-emoji:hover,
#input-area #btn-file:hover,
#input-area #btn-stickers:hover,
#input-area #btn-voice:hover,
#input-area #btn-schedule-send:hover {
    color: #d8ecff !important;
    background: rgba(47, 141, 247, 0.20) !important;
    border-color: rgba(96, 165, 250, 0.46) !important;
    transform: translateY(-1px) !important;
}

#input-area .composer-icon-btn:active {
    transform: scale(0.95) !important;
}

#input-area .composer-icon {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    flex: 0 0 auto !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.24)) !important;
}

#input-area #btn-stickers .composer-icon,
#input-area #btn-schedule-send .composer-icon {
    width: 22px !important;
    height: 22px !important;
}

#input-area #btn-send {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b9cf2, #247de0) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 20px rgba(37, 127, 216, 0.28) !important;
}

#input-area #btn-send:hover {
    background: linear-gradient(135deg, #55adff, #2e8cf0) !important;
    transform: translateY(-1px) !important;
}

#input-area #btn-send .composer-icon {
    width: 22px !important;
    height: 22px !important;
    transform: translateX(1px) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) !important;
}

#input-area #btn-emoji::before,
#input-area #btn-file::before,
#input-area #btn-stickers::before,
#input-area #btn-voice::before,
#input-area #btn-schedule-send::before,
#input-area #btn-send::before {
    content: none !important;
    display: none !important;
}

#input-area #btn-emoji .vc-icon,
#input-area #btn-file .vc-icon,
#input-area #btn-stickers .vc-icon,
#input-area #btn-voice .vc-icon,
#input-area #btn-schedule-send .vc-icon {
    display: none !important;
}

body.light-theme #input-area .composer-icon-btn,
body.light-theme #input-area #btn-emoji,
body.light-theme #input-area #btn-file,
body.light-theme #input-area #btn-stickers,
body.light-theme #input-area #btn-voice,
body.light-theme #input-area #btn-schedule-send {
    color: #38526d !important;
    background: rgba(231, 239, 249, 0.98) !important;
    border-color: rgba(54, 78, 104, 0.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 5px 12px rgba(46, 62, 82, 0.07) !important;
}

body.light-theme #input-area .composer-icon-btn:hover,
body.light-theme #input-area #btn-emoji:hover,
body.light-theme #input-area #btn-file:hover,
body.light-theme #input-area #btn-stickers:hover,
body.light-theme #input-area #btn-voice:hover,
body.light-theme #input-area #btn-schedule-send:hover {
    color: #0f6fc5 !important;
    background: rgba(218, 235, 255, 0.96) !important;
    border-color: rgba(42, 143, 232, 0.26) !important;
}

body.light-theme #input-area #btn-send {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b9cf2, #257fd8) !important;
    border-color: rgba(37, 127, 216, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 8px 18px rgba(42, 143, 232, 0.20) !important;
}

@media (max-width: 768px) {
    #input-area .composer-icon-btn,
    #input-area #btn-emoji,
    #input-area #btn-file,
    #input-area #btn-stickers,
    #input-area #btn-voice,
    #input-area #btn-schedule-send,
    #input-area #btn-send {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 13px !important;
    }

    #input-area .composer-icon {
        width: 20px !important;
        height: 20px !important;
    }
}



/* === PATCH V2: stable composer/header icons + header search/calendar ===
   Fixes icons disappearing after chat switch when JS rewrites innerHTML/textContent.
   Keeps existing button IDs and JS handlers intact. */
:root {
    --sm-mask-attach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 12.9l5.9-5.9a3.2 3.2 0 014.5 4.5l-7.2 7.2a5 5 0 01-7.1-7.1l7.5-7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.2 15.1l7.1-7.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sm-mask-emoji: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8.7 14.2c.8 1.2 1.9 1.8 3.3 1.8s2.5-.6 3.3-1.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9 9.6h.1M15 9.6h.1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --sm-mask-stickers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 4.5h8.2l3.8 3.8v9.2a2 2 0 01-2 2h-10a2 2 0 01-2-2v-11a2 2 0 012-2z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14.5 4.8v3.7h3.7M8.5 11.2h.1M14.5 11.2h.1M8.8 15c.8.8 1.8 1.2 3.2 1.2s2.4-.4 3.2-1.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sm-mask-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3.5' width='6' height='10' rx='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M5.8 11.5a6.2 6.2 0 0012.4 0M12 17.7v3M8.7 20.5h6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sm-mask-schedule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 3.8v3.4M16 3.8v3.4M4.8 10h14.4M12 13v2.6l2.2 1.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sm-mask-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11.6l15.8-7.1-4.5 15.7-3.4-6.2-7.9-2.4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11.9 14L20 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sm-mask-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 6.5h8M4.5 10.5h5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='14.5' cy='14.5' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M17.5 17.5l2.7 2.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sm-mask-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 3.8v3.4M16 3.8v3.4M4.8 10h14.4M8.2 13.4h.1M12 13.4h.1M15.8 13.4h.1M8.2 16.4h.1M12 16.4h.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sm-mask-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='1.8' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='12' cy='18.5' r='1.8' fill='%23000'/%3E%3C/svg%3E");
}

/* Composer: icon must survive updateSendButtonState/updateVoiceButtonState. */
#input-area #btn-emoji,
#input-area #btn-file,
#input-area #btn-stickers,
#input-area #btn-voice,
#input-area #btn-schedule-send,
#input-area #btn-send {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    overflow: visible !important;
    font-size: 0 !important;
}

#input-area #btn-emoji > *,
#input-area #btn-file > *,
#input-area #btn-stickers > *,
#input-area #btn-voice > *,
#input-area #btn-schedule-send > *,
#input-area #btn-send > * {
    display: none !important;
}

#input-area #btn-emoji::before,
#input-area #btn-file::before,
#input-area #btn-stickers::before,
#input-area #btn-voice::before,
#input-area #btn-schedule-send::before,
#input-area #btn-send::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    background: currentColor !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px rgba(143, 205, 255, 0.22)) !important;
    transform: none !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

#input-area #btn-file::before { -webkit-mask-image: var(--sm-mask-attach) !important; mask-image: var(--sm-mask-attach) !important; }
#input-area #btn-emoji::before { -webkit-mask-image: var(--sm-mask-emoji) !important; mask-image: var(--sm-mask-emoji) !important; }
#input-area #btn-stickers::before { -webkit-mask-image: var(--sm-mask-stickers) !important; mask-image: var(--sm-mask-stickers) !important; }
#input-area #btn-voice::before { -webkit-mask-image: var(--sm-mask-mic) !important; mask-image: var(--sm-mask-mic) !important; }
#input-area #btn-schedule-send::before { -webkit-mask-image: var(--sm-mask-schedule) !important; mask-image: var(--sm-mask-schedule) !important; }
#input-area #btn-send::before { -webkit-mask-image: var(--sm-mask-send) !important; mask-image: var(--sm-mask-send) !important; width: 24px !important; height: 24px !important; }

#input-area #btn-send:disabled {
    opacity: 0.82 !important;
    cursor: default !important;
}

#input-area #btn-voice.recording::before {
    background: #ff6b6b !important;
    filter: drop-shadow(0 0 9px rgba(255, 91, 91, 0.58)) !important;
}

/* Header actions: distinct visible icons. */
#chat-header #btn-header-search,
#chat-header #btn-header-calendar,
#chat-header #btn-scheduled-messages,
#chat-header #btn-chat-settings {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    font-size: 0 !important;
    color: #9fd0ff !important;
    background: rgba(22, 38, 56, 0.55) !important;
    border: 1px solid rgba(132, 169, 205, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

#chat-header #btn-header-search:hover,
#chat-header #btn-header-calendar:hover,
#chat-header #btn-scheduled-messages:hover,
#chat-header #btn-chat-settings:hover {
    color: #d8ecff !important;
    background: rgba(47, 141, 247, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.42) !important;
}

#chat-header #btn-header-search > *,
#chat-header #btn-header-calendar > *,
#chat-header #btn-scheduled-messages > *,
#chat-header #btn-chat-settings > * {
    display: none !important;
}

#chat-header #btn-header-search::before,
#chat-header #btn-header-calendar::before,
#chat-header #btn-scheduled-messages::before,
#chat-header #btn-chat-settings::before {
    content: "" !important;
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    background: currentColor !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px rgba(143, 205, 255, 0.22)) !important;
    transform: none !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

#chat-header #btn-header-search::before { -webkit-mask-image: var(--sm-mask-search) !important; mask-image: var(--sm-mask-search) !important; }
#chat-header #btn-header-calendar::before { -webkit-mask-image: var(--sm-mask-calendar) !important; mask-image: var(--sm-mask-calendar) !important; }
#chat-header #btn-scheduled-messages::before { -webkit-mask-image: var(--sm-mask-schedule) !important; mask-image: var(--sm-mask-schedule) !important; }
#chat-header #btn-chat-settings::before { -webkit-mask-image: var(--sm-mask-dots) !important; mask-image: var(--sm-mask-dots) !important; width: 20px !important; height: 20px !important; }

#chat-header #btn-header-calendar {
    display: none !important;
}

#chat-header.search-open #btn-header-calendar {
    display: inline-flex !important;
}

#chat-header #header-chat-search {
    display: none !important;
    flex: 0 1 330px !important;
    width: min(330px, 32vw) !important;
    height: 40px !important;
    min-width: 180px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    outline: none !important;
    color: #eaf4ff !important;
    background: rgba(6, 15, 26, 0.78) !important;
    border: 1px solid rgba(96, 165, 250, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 141, 247, 0.06) !important;
}

#chat-header.search-open #header-chat-search {
    display: block !important;
}

#chat-header #header-chat-search::placeholder {
    color: rgba(207, 221, 238, 0.62) !important;
}

#chat-header #chat-date-picker {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.light-theme #chat-header #btn-header-search,
body.light-theme #chat-header #btn-header-calendar,
body.light-theme #chat-header #btn-scheduled-messages,
body.light-theme #chat-header #btn-chat-settings {
    color: #31506d !important;
    background: rgba(231, 239, 249, 0.88) !important;
    border-color: rgba(54, 78, 104, 0.16) !important;
}

body.light-theme #chat-header #btn-header-search:hover,
body.light-theme #chat-header #btn-header-calendar:hover,
body.light-theme #chat-header #btn-scheduled-messages:hover,
body.light-theme #chat-header #btn-chat-settings:hover {
    color: #0f6fc5 !important;
    background: rgba(218, 235, 255, 0.98) !important;
    border-color: rgba(42, 143, 232, 0.28) !important;
}

body.light-theme #chat-header #header-chat-search {
    color: #172033 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(42, 143, 232, 0.24) !important;
}

@media (max-width: 820px) {
    #chat-header.search-open #chat-user-info {
        display: none !important;
    }

    #chat-header #header-chat-search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ===== /static/css/split/28-smchat-history-scroll-anchor-fix.css ===== */

        #messages-container,
        #messages-container .message-row,
        #messages-container .multi-attachment-album,
        #messages-container .multi-attachment-collage {
            overflow-anchor: none !important;
        }

        #messages-container.is-loading-older {
            scroll-behavior: auto !important;
        }

/* ===== /static/css/split/30-smchat-chat-filters-authoritative-css.css ===== */
/* SMCHAT_CONTACT_CANONICAL_LAYER_20260627
   Final active source for sidebar contact-row geometry and states.
   Earlier theme/patch files no longer own these base values. */

#sidebar {
    --sm-contact-sidebar-bg: rgba(15, 26, 38, 0.96);
    --sm-contact-sidebar-text: #eaf1fb;
    --sm-contact-muted: #8391a5;
    --sm-contact-muted-strong: #7a8798;
    --sm-contact-row-bg: transparent;
    --sm-contact-row-hover-bg: rgba(255, 255, 255, 0.045);
    --sm-contact-row-active-bg: rgba(47, 141, 247, 0.20);
    --sm-contact-row-active-border: rgba(47, 141, 247, 0.12);
    --sm-contact-row-active-shadow: none;
    --sm-contact-row-border: transparent;
    --sm-contact-row-radius: 18px;
    --sm-contact-row-min-height: 78px;
    --sm-contact-row-padding: 10px;
    --sm-contact-row-gap: 12px;
    --sm-contact-avatar-size: 52px;
    --sm-contact-avatar-font-size: 16px;
    --sm-contact-badge-bg: #2f8df7;
    --sm-contact-badge-shadow: 0 4px 14px rgba(47, 141, 247, 0.28);
    --sm-contact-divider: #7b8798;
}

body.light-theme #sidebar {
    --sm-contact-sidebar-bg: #f3f7fc;
    --sm-contact-sidebar-text: #162235;
    --sm-contact-muted: #64748b;
    --sm-contact-muted-strong: #64748b;
    --sm-contact-row-hover-bg: rgba(255, 255, 255, 0.78);
    --sm-contact-row-active-bg: rgba(47, 141, 247, 0.20);
    --sm-contact-row-active-border: rgba(47, 141, 247, 0.12);
    --sm-contact-row-active-shadow: none;
    --sm-contact-divider: #748398;
}

body:not(.light-theme) #sidebar {
    --sm-contact-sidebar-bg:
        linear-gradient(
            180deg,
            rgba(15, 28, 42, 0.98),
            rgba(12, 22, 34, 0.98)
        );
}

#sidebar {
    color: var(--sm-contact-sidebar-text);
}

.sidebar-main-column {
    flex: 1;
    min-width: 0;
    width: var(--mock-list);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--mock-border);
    background: var(--sm-contact-sidebar-bg);
    opacity: 1;
    pointer-events: auto;
    transition: opacity 120ms ease;
}

@media (min-width: 769px) {
    #sidebar .sidebar-main-column {
        width: auto;
        min-width: 0;
    }
}

#sidebar .telegram-sidebar-header,
#sidebar-header {
    position: relative;
    min-height: 84px;
    height: 84px;
    padding: 18px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    background: var(--sm-contact-sidebar-bg);
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sidebar-global-search-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
}

#global-search {
    width: 100%;
    height: 50px;
    padding: 0 42px 0 46px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background: rgba(27, 42, 60, 0.94);
    color: #f2f7ff;
    font-size: 16px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#global-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

#global-search::placeholder {
    color: #8391a5;
}

.sidebar-global-search-wrap::before {
    content: "\2315";
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #8b98aa;
    font-size: 22px;
    pointer-events: none;
}

#global-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    display: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa6b6;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-50%);
}

.sidebar-global-search-wrap.has-value #global-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.light-theme #sidebar #global-search {
    background: #ffffff;
    color: #111827;
    border-color: rgba(30, 41, 59, 0.14);
}

body.desktop-nav-autohide #sidebar .sidebar-main-column {
    grid-column: 2;
}

body.desktop-nav-pinned #sidebar .sidebar-main-column {
    grid-column: 2;
}

.mockup-chat-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px 12px;
    background: var(--sm-contact-sidebar-bg);
}

.mockup-chat-tab {
    position: relative;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #8e9bae;
    cursor: pointer;
    font-size: 14px;
    font-weight: 750;
}

.mockup-chat-tab:hover,
.mockup-chat-tab.active {
    color: #47a0ff;
    background: rgba(47, 141, 247, 0.075);
}

.mockup-chat-tab.active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--sm-contact-badge-bg);
}

.mockup-chat-tab .tab-badge,
.desktop-nav-badge {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--sm-contact-badge-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
}

.mockup-chat-tab .tab-badge {
    margin-left: 4px;
    font-size: 12px;
}

.desktop-nav-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 0 0 2px #08111c;
}

.mockup-chat-tab .tab-badge[hidden],
.desktop-nav-badge[hidden] {
    display: none;
}

.sidebar-main-column > .section-divider:first-of-type,
.sidebar-main-column > .mockup-chat-tabs + .section-divider {
    display: none;
}

#contacts-list {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.52) transparent;
}

#contacts-list::-webkit-scrollbar {
    width: 6px;
}

#contacts-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
    border-radius: 999px;
}

#contacts-list .chat-filter-empty-state {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 28px 18px;
    color: var(--text2);
    text-align: center;
    line-height: 1.45;
}

#contacts-list .chat-filter-empty-state strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: .95rem;
}

#contacts-list > .contact-item[hidden],
#contacts-list > .section-divider[hidden],
#contacts-list > [data-chat-filter-hidden="true"] {
    display: none;
}

#contacts-list > [data-smchat-contact-key] {
    box-sizing: border-box;
    min-width: 0;
}

#contacts-list > .contact-item > * {
    min-width: 0;
}

#contacts-list > .section-divider,
#contacts-list .section-divider {
    padding: 14px 10px 8px;
    margin: 0;
    border: 0;
    color: var(--sm-contact-divider);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#contacts-list > .contact-item {
    display: flex;
    align-items: center;
    gap: var(--sm-contact-row-gap);
    width: 100%;
    min-width: 0;
    min-height: var(--sm-contact-row-min-height);
    padding: var(--sm-contact-row-padding);
    border: 1px solid var(--sm-contact-row-border);
    border-radius: var(--sm-contact-row-radius);
    background: var(--sm-contact-row-bg);
    color: var(--sm-contact-sidebar-text);
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
    transform: none;
    animation: none;
}

#contacts-list > .contact-item:hover {
    background: var(--sm-contact-row-hover-bg);
}

#contacts-list > .contact-item.active {
    background: var(--sm-contact-row-active-bg);
    border-color: var(--sm-contact-row-active-border);
    box-shadow: var(--sm-contact-row-active-shadow);
}

#contacts-list > .contact-item.pinned {
    border-left-color: var(--accent);
}

#contacts-list > .contact-item > .avatar,
#contacts-list .contact-item .avatar {
    flex: 0 0 auto;
    width: var(--sm-contact-avatar-size);
    min-width: var(--sm-contact-avatar-size);
    height: var(--sm-contact-avatar-size);
    border-radius: 50%;
    font-size: var(--sm-contact-avatar-font-size);
    box-shadow: none;
    background-size: cover;
    background-position: center;
}

#contacts-list .favorites-avatar {
    background: linear-gradient(135deg, #10b981, #3b82f6);
    color: #fff;
    font-size: 1.15rem;
}

#contacts-list .contact-info {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* SMCHAT_SIDEBAR_ELLIPSIS_20260627
 * The contact name contains a text node plus optional status/pin/mute spans.
 * A flex container does not reliably paint text-overflow for that text node,
 * so keep the name in a single inline formatting context and constrain the
 * entire information column instead of clipping the row or the time column.
 */
#contacts-list .contact-name {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #f1f6ff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.light-theme #contacts-list .contact-name {
    color: #172033;
}

#contacts-list .contact-preview,
#contacts-list .contact-subtitle,
#contacts-list .contact-last-message {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: var(--sm-contact-muted);
    font-size: 13px;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#contacts-list .contact-subtitle {
    font-size: .65rem;
}

#contacts-list .contact-name > .online-dot,
#contacts-list .contact-name > .contact-pin-indicator,
#contacts-list .contact-name > .contact-mute-indicator {
    display: inline-block;
    margin-inline-start: 6px;
    vertical-align: middle;
}

#contacts-list .contact-time {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--sm-contact-muted-strong);
    font-size: 12px;
    text-shadow: none;
    box-shadow: none;
    filter: none;
}

#contacts-list > .contact-item.active .contact-name,
#contacts-list > .contact-item.active .contact-preview,
#contacts-list > .contact-item.active .contact-subtitle,
#contacts-list > .contact-item.active .contact-last-message,
#contacts-list > .contact-item.active .contact-time {
    color: inherit;
}

#contacts-list .contact-meta {
    display: flex;
    position: static;
    flex: 0 0 auto;
    max-width: 42%;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}

#contacts-list .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--sm-contact-badge-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    box-shadow: var(--sm-contact-badge-shadow);
}

#contacts-list .online-indicator,
#contacts-list .online-dot {
    background: #31c76a;
    box-shadow: 0 0 0 2px var(--bg2);
}

#contacts-list .smchat-archive-tabs {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
}

#contacts-list .smchat-archive-tabs .archive-tab-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 8px;
}

#contacts-list .archive-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

#contacts-list .restore-archive-btn,
#contacts-list .force-clear-archive-btn,
#contacts-list .add-contact-btn {
    flex: 0 0 auto;
    padding: 6px 10px;
}

#contacts-list .add-contact-btn {
    font-size: .7rem;
    padding-block: 4px;
}

#contacts-list.is-silent-refresh .contact-item,
#contacts-list.is-silent-refresh .favorites-chat-item,
#contacts-list.is-silent-refresh .favorites-avatar {
    animation: none;
    transition: none;
}

body.sidebar-avatar-compact #sidebar {
    width: var(--sm-r5-compact-width);
    min-width: var(--sm-r5-compact-width);
    max-width: var(--sm-r5-compact-width);
    grid-template-columns: var(--sm-r5-compact-width);
    overflow: hidden;
}

body.sidebar-avatar-compact #sidebar .desktop-nav-rail {
    display: none;
}

body.sidebar-avatar-compact #sidebar .sidebar-main-column {
    display: flex;
    grid-column: 1;
    flex-direction: column;
    width: var(--sm-r5-compact-width);
    min-width: var(--sm-r5-compact-width);
    max-width: var(--sm-r5-compact-width);
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
}

body.sidebar-avatar-compact #sidebar .brand-panel,
body.sidebar-avatar-compact #sidebar .mockup-chat-tabs,
body.sidebar-avatar-compact #sidebar .section-divider,
body.sidebar-avatar-compact #sidebar #sidebar-menu-toggle,
body.sidebar-avatar-compact #sidebar #search-box,
body.sidebar-avatar-compact #sidebar .sidebar-search-tabs,
body.sidebar-avatar-compact #sidebar .sidebar-global-search-results {
    display: none;
}

body.sidebar-avatar-compact #sidebar-header {
    display: grid;
    place-items: center;
    flex: 0 0 82px;
    width: 100%;
    min-height: 82px;
    padding: 14px 0 10px;
    border-bottom: 1px solid rgba(135, 177, 214, .1);
}

body.sidebar-avatar-compact #sidebar .sidebar-global-search-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 66px;
    height: 52px;
    min-width: 66px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(117, 165, 207, .18);
    border-radius: 16px;
    background: rgba(18, 42, 63, .86);
}

body.sidebar-avatar-compact #sidebar .sidebar-global-search-wrap::before {
    content: "\2315";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    color: #9eb5ca;
    font-size: 25px;
    pointer-events: none;
}

body.sidebar-avatar-compact #global-search {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    color: transparent;
    caret-color: transparent;
    text-indent: -9999px;
    cursor: pointer;
    border: 0;
    background: transparent;
}

body.sidebar-avatar-compact #global-search::placeholder,
body.sidebar-avatar-compact #global-search-clear,
body.sidebar-avatar-compact #global-search-panel {
    display: none;
}

body.sidebar-avatar-compact #contacts-list {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 6px 0 14px;
    overflow-x: hidden;
    overflow-y: auto;
}

body.sidebar-avatar-compact #contacts-list > .contact-item {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    min-height: 72px;
    margin: 4px auto;
    padding: 10px;
    gap: 0;
    border-radius: 18px;
    overflow: visible;
}

body.sidebar-avatar-compact #contacts-list .contact-item .avatar {
    width: 52px;
    min-width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 50%;
}

body.sidebar-avatar-compact #contacts-list .contact-info,
body.sidebar-avatar-compact #contacts-list .contact-time,
body.sidebar-avatar-compact #contacts-list .archive-folder-chevron,
body.sidebar-avatar-compact #contacts-list .contact-pin-indicator,
body.sidebar-avatar-compact #contacts-list .restore-archive-btn,
body.sidebar-avatar-compact #contacts-list .force-clear-archive-btn,
body.sidebar-avatar-compact #contacts-list .add-contact-btn {
    display: none;
}

body.sidebar-avatar-compact #contacts-list .contact-meta {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    width: auto;
    height: auto;
}

body.sidebar-avatar-compact #contacts-list .contact-meta .badge,
body.sidebar-avatar-compact #contacts-list > .contact-item > .badge {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #0f2032;
    border-radius: 999px;
    font-size: 10px;
}

body.sidebar-avatar-compact #contacts-list > .contact-item.active {
    background: rgba(47, 141, 247, .22);
    box-shadow: inset 0 0 0 1px rgba(92, 178, 246, .2);
}

@media (max-width: 1024px) {
    #sidebar {
        --sm-contact-avatar-size: 48px;
    }
}

@media (max-width: 768px) {
    .sidebar-main-column {
        width: 100%;
    }
}


/* SMCHAT_COMPOSER_VISUAL_STABILITY_04A_R6
   Фокус поля сохраняется функционально, но больше не меняет
   цвет и толщину обводки при открытии чата или возврате
   на вкладку браузера. */
#input-area #msg-input:not(:disabled),
#input-area #msg-input:not(:disabled):focus,
#input-area #msg-input:not(:disabled):focus-visible {
    border-color: rgba(47, 141, 247, 0.25) !important;
    box-shadow:
        inset 0 0 0 1px
        rgba(47, 141, 247, 0.06) !important;
    outline: none !important;
    transition:
        background-color 120ms ease,
        color 120ms ease !important;
}

body.light-theme #input-area #msg-input:not(:disabled),
body.light-theme #input-area #msg-input:not(:disabled):focus,
body.light-theme #input-area #msg-input:not(:disabled):focus-visible {
    border-color:
        rgba(92, 110, 133, 0.22) !important;
    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.95),
        0 5px 14px
            rgba(46, 62, 82, 0.045) !important;
    outline: none !important;
}

/* SMCHAT_CHAT_SHELL_STABILITY_04A_R9
   Постоянная обводка composer использует текущий --accent.
   Focus, blur и возврат на вкладку не меняют оформление. */

#input-area,
#input-area:focus,
#input-area:focus-within {
    border: 1px solid var(--accent) !important;

    border-color:
        color-mix(
            in srgb,
            var(--accent) 72%,
            rgba(255, 255, 255, 0.16)
        ) !important;

    box-shadow:
        0 0 0 2px
            color-mix(
                in srgb,
                var(--accent) 23%,
                transparent
            ),
        0 14px 40px
            rgba(0, 0, 0, 0.30),
        inset 0 1px 0
            rgba(255, 255, 255, 0.045) !important;

    outline: none !important;
    animation: none !important;
    transition: none !important;
}

/*
 * Внутреннее поле тоже использует цвет темы,
 * но слабее внешнего контура.
 */
#input-area #msg-input,
#input-area #msg-input:focus,
#input-area #msg-input:focus-visible {
    border: 1px solid var(--accent) !important;

    border-color:
        color-mix(
            in srgb,
            var(--accent) 34%,
            rgba(255, 255, 255, 0.08)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
            color-mix(
                in srgb,
                var(--accent) 10%,
                transparent
            ) !important;

    outline: none !important;
    transition: none !important;
}

body.light-theme #input-area,
body.light-theme #input-area:focus,
body.light-theme #input-area:focus-within {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 66%,
            rgba(30, 41, 59, 0.12)
        ) !important;

    box-shadow:
        0 0 0 2px
            color-mix(
                in srgb,
                var(--accent) 18%,
                transparent
            ),
        0 10px 28px
            rgba(46, 62, 82, 0.09),
        inset 0 1px 0
            rgba(255, 255, 255, 0.95) !important;
}

body.light-theme #input-area #msg-input,
body.light-theme #input-area #msg-input:focus,
body.light-theme #input-area #msg-input:focus-visible {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 38%,
            rgba(30, 41, 59, 0.10)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
            color-mix(
                in srgb,
                var(--accent) 9%,
                transparent
            ) !important;
}

#messages-container,
#messages-container.is-silent-refresh {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

@media (min-width: 769px) {
    #chat-area,
    .chat-content,
    #chat-header {
        animation: none !important;
        transition: none !important;
    }
}

/* SMCHAT_STATUS_AND_CHAT_SWITCH_STABILITY_04B_R2
 *
 * Статусы сообщений не должны проигрывать fadeIn/glow
 * при повторном создании DOM после открытия другого чата.
 * Изменение sent/delivered/read остаётся мгновенным.
 */
.message-status,
.message-status.sent,
.message-status.delivered,
.message-status.read,
.message-status::before,
.message-status.sent::before,
.message-status.delivered::before,
.message-status.read::before {
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;

    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation: none !important;

    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transition: none !important;
}

/*
 * При открытии чата его оболочка должна появляться сразу.
 * Transform, заданный мобильной навигацией, сохраняется,
 * отключается только его анимированное движение.
 */
#chat-area {
    animation: none !important;
    transition: none !important;
}

/* ===== /static/css/split/51-smchat-theme-css-consistency-1_01_b6.css ===== */
/* SMCHAT_THEME_CSS_CONSISTENCY_1_01_B6
 * Final active theme contract. Older visual patches keep their layout rules,
 * while shared surfaces resolve color through this single token vocabulary.
 */

body {
    --sm-theme-page: var(--bg);
    --sm-theme-sidebar: var(--personal-sidebar-bg, var(--bg2));
    --sm-theme-panel: var(--personal-panel-bg, var(--surface));
    --sm-theme-card: var(--surface2);
    --sm-theme-header: var(--header-bg);
    --sm-theme-input: color-mix(in srgb, var(--surface2) 88%, var(--bg));
    --sm-theme-text: var(--text);
    --sm-theme-muted: var(--text2);
    --sm-theme-subtle: var(--text3);
    --sm-theme-line: var(--border);
    --sm-theme-divider: var(--divider);
    --sm-theme-accent: var(--accent);
    --sm-theme-accent-hover: var(--accent-hover);
    --sm-theme-focus: var(--accent-glow);
    --sm-theme-shadow: var(--shadow);
    --sm-theme-shadow-small: var(--shadow-sm);
    color-scheme: dark;
    background-color: var(--sm-theme-page);
    color: var(--sm-theme-text);
}

html[data-appearance="light"] body,
body.light-theme {
    color-scheme: light;
}

html[data-appearance="dark"] body,
body:not(.light-theme) {
    color-scheme: dark;
}

body,
#app,
#messenger,
#chat-area,
.chat-content {
    color: var(--sm-theme-text);
}

body #sidebar {
    background: var(--sm-theme-sidebar) !important;
    color: var(--sm-theme-text) !important;
    border-right-color: var(--sm-theme-line) !important;
}

body #chat-header,
body #input-area,
body:is(.light-theme, :not(.light-theme)) #chat-header,
body:is(.light-theme, :not(.light-theme)) #input-area {
    background: var(--sm-theme-header) !important;
    color: var(--sm-theme-text) !important;
    border-color: var(--sm-theme-line) !important;
}

body :is(
    #right-panel,
    .right-panel,
    .settings-window-shell,
    .settings-window-main,
    .settings-section,
    .support-inbox-layout,
    .support-inbox-chat,
    #auth-card,
    .modal-card,
    .vc-modal-card,
    .group-modal-card
) {
    background-color: var(--sm-theme-panel) !important;
    color: var(--sm-theme-text) !important;
    border-color: var(--sm-theme-line) !important;
}

body :is(
    .settings-block,
    .settings-card,
    .sm-side-card,
    .sm-side-section,
    .sm-group-info-card,
    .support-inbox-item,
    .support-report-card
) {
    background-color: var(--sm-theme-card) !important;
    color: var(--sm-theme-text) !important;
    border-color: var(--sm-theme-line) !important;
}

body :is(
    .context-menu,
    .attachment-menu,
    .quick-reaction-menu,
    #emoji-picker,
    #sticker-picker,
    .current-profile-menu
) {
    background: var(--sm-theme-card) !important;
    color: var(--sm-theme-text) !important;
    border-color: var(--sm-theme-line) !important;
    box-shadow: var(--sm-theme-shadow) !important;
}

body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select,
    #msg-input
) {
    background-color: var(--sm-theme-input) !important;
    color: var(--sm-theme-text) !important;
    border-color: var(--sm-theme-line) !important;
    caret-color: var(--sm-theme-accent);
}

body :is(input, textarea)::placeholder {
    color: var(--sm-theme-subtle) !important;
    opacity: 1;
}

body :is(
    .muted,
    .secondary,
    .settings-block-desc,
    .contact-last-message,
    .contact-time,
    .sm-side-info-label,
    .support-inbox-meta
) {
    color: var(--sm-theme-muted);
}

body :is(a, .link-button, .settings-link) {
    color: var(--sm-theme-accent);
}

body :is(
    button,
    [role="button"],
    input,
    textarea,
    select,
    a[href]
):focus-visible {
    outline: 2px solid var(--sm-theme-accent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sm-theme-focus);
}

body .sm-theme-contract-surface {
    background-color: var(--sm-theme-panel) !important;
    color: var(--sm-theme-text);
    border: 1px solid var(--sm-theme-line);
}

body .sm-theme-contract-card {
    background-color: var(--sm-theme-card) !important;
    color: var(--sm-theme-text);
}

body .sm-theme-contract-accent {
    background-color: var(--sm-theme-accent) !important;
    color: var(--sm-theme-page);
}

body :is(
    .sm-theme-contract-surface,
    .sm-theme-contract-card,
    .sm-theme-contract-accent
) {
    transition: none !important;
}

@media (forced-colors: active) {
    body :is(
        button,
        [role="button"],
        input,
        textarea,
        select,
        a[href]
    ):focus-visible {
        outline-color: Highlight !important;
        box-shadow: none;
    }
}