/* Extracted from group_chat.php during Phase 5. Keep page-specific styles here instead of inline <style> blocks. */


        /* استایل‌های موجود (همانند قبل) */
        html, body {
            overflow-x: hidden !important;
            overflow-y: auto !important;
            height: auto !important;
            min-height: 100vh !important;
            min-height: 100dvh !important;
        }

        .group-chat-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem;
            display: grid;
            grid-template-columns: 300px 1fr; /* راست: گروه‌ها (باریک)، چپ: چت (پهن) */
            gap: 1rem;
            height: auto;
            min-height: calc(100dvh - 120px);
            overflow: visible;
            transition: all 0.3s ease;
        }

        .group-chat-container.full-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100% !important;
            height: 100dvh !important;
            max-width: 100% !important;
            max-height: 100dvh !important;
            padding: 0 !important;
            margin: 0 !important;
            z-index: 10005;
            background: white;
            display: grid;
            grid-template-columns: 260px 1fr; /* راست: اعضا/گروه‌ها (باریک)، چپ: چت (پهن) */
            gap: 0 !important; /* بدون فاصله بین اعضا و چت */
            overflow: hidden !important;
        }

        /* ستون دوم: لیست گروه‌ها یا اعضا */
        .group-chat-sidebar-column {
            display: contents;
            flex-direction: column;
            min-width: 0;
            overflow: hidden;
        }

        /* ماژول لیست خوانندگان پیام */
        .readers-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(2px);
            z-index: 10030;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .readers-modal.active {
            display: flex;
        }

        .readers-modal-content {
            width: min(100%, 460px);
            max-height: min(85vh, 720px);
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(2, 6, 23, 0.25);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .readers-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.9rem 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .readers-modal-header h3 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
        }

        .readers-modal-close {
            border: none;
            background: #f3f4f6;
            color: #374151;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
        }

        .readers-modal-list {
            padding: 0.2rem 0.85rem 0.5rem;
            overflow-y: auto;
        }

        .readers-modal-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            padding: 0.8rem 0.15rem;
            border-bottom: 1px dashed #d7dce3;
            direction: ltr;
        }

        .readers-modal-item:last-child {
            border-bottom: none;
        }

        .readers-modal-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #e5e7eb;
            color: #475569;
            flex: 0 0 44px;
            border: 1px solid #e5e7eb;
        }

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

        .readers-modal-reaction {
            font-size: 1.25rem;
            line-height: 1;
            filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12));
            min-width: 1.35em;
            text-align: center;
            flex-shrink: 0;
        }

        .readers-modal-user {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            direction: rtl;
            min-width: 0;
            flex: 1;
            justify-content: flex-start;
            flex-direction: row;
        }

        .readers-modal-meta {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
            gap: 0.15rem;
        }

        .readers-modal-fullname {
            font-size: 1rem;
            color: #0f172a;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 220px;
        }

        .readers-modal-time {
            font-size: 0.88rem;
            color: #64748b;
            font-weight: 500;
            direction: rtl;
            unicode-bidi: plaintext;
        }

        @media (max-width: 560px) {
            .readers-modal-content {
                width: min(100%, 98vw);
            }

            .readers-modal-fullname {
                max-width: 180px;
            }
        }

        .group-chat-sidebar-column .groups-sidebar,
        .group-chat-sidebar-column .side-members-list {
            flex: 1;
            min-height: 0;
        }

        .side-members-list {
            background: #fff;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-left: 1px solid var(--border-color);
        }

        .side-members-header {
            padding: 1rem;
            background: #f8f9fa;
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }

        .side-toggle-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .side-toggle-btn:hover {
            background: var(--primary-dark);
        }

        .side-group-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0.5rem;
            border-radius: var(--radius-md);
            margin-bottom: 0.25rem;
            transition: background 0.2s;
            cursor: pointer;
        }

        .side-group-item:hover {
            background: #f0f0f0;
        }

        .side-group-item.active {
            background: rgba(76, 175, 80, 0.1);
            border-right: 3px solid var(--primary-color);
        }

        .side-group-name {
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .side-group-meta {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.2rem;
        }

        .side-members-body {
            flex: 1;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .side-member-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem;
            border-radius: var(--radius-md);
            margin-bottom: 0.25rem;
            transition: background 0.2s;
        }

        .side-member-item:hover {
            background: #f0f0f0;
        }

        .side-member-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        .side-member-avatar-wrapper {
            position: relative;
            flex-shrink: 0;
        }

        .side-member-avatar-wrapper .side-member-avatar {
            margin: 0;
        }

        .side-member-avatar-wrapper .verified-badge-avatar {
            position: absolute;
            bottom: -2px;
            right: -2px;
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .side-member-avatar-wrapper .verified-badge-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .member-status-dot {
            position: absolute;
            left: -1px;
            bottom: -1px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #fff;
            z-index: 4;
        }

        .member-status-online { background: #16a34a; }
        .member-status-in-chat { background: #facc15; }
        .member-status-site-only { background: #ef4444; }
        .member-status-offline { background: #9ca3af; }

        .side-member-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            content-visibility: auto;
            contain-intrinsic-size: 40px 40px;
        }

        .side-member-name {
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 1220px) and (min-width: 981px) {
            .group-chat-container {
                grid-template-columns: 260px minmax(0, 1fr);
                gap: 0.75rem;
                padding: 0.75rem;
            }

            .group-item {
                padding: 0.75rem;
            }

            .group-name {
                font-size: 1rem;
            }
        }

        @media (max-width: 980px) and (min-width: 771px) {
            .group-chat-container {
                grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
                gap: 0.6rem;
                padding: 0.6rem;
            }

            .chat-header-info h3 {
                font-size: 1.05rem;
            }

            .groups-header h2 {
                font-size: 1.05rem;
            }

            .chat-messages {
                padding: 1rem;
            }
        }

        @media (max-width: 992px) {
            .group-chat-container.full-screen {
                grid-template-columns: 1fr;
            }
            .side-members-list {
                display: none;
            }
        }

        @media (max-width: 770px) {
            .group-chat-container {
                grid-template-columns: 1fr;
                height: auto;
                min-height: calc(100dvh - 120px);
                padding: 0.5rem;
            }
            .group-chat-container:not(.full-screen) .chat-area {
                order: 1;
            }
            .group-chat-container:not(.full-screen) .group-chat-sidebar-column {
                order: 2;
            }
            
            .group-chat-container.full-screen {
                height: 100dvh !important;
                max-height: 100dvh !important;
                padding: 0 !important;
            }
            .group-chat-container.full-screen .chat-area,
            .group-chat-container.full-screen .group-chat-sidebar-column {
                order: unset;
            }
            
            .groups-sidebar {
                display: flex;
            }
            
            .groups-sidebar.hidden-mobile {
                display: none;
            }
            
            .chat-area {
                display: none;
            }
            
            .chat-area.active-mobile {
                display: flex;
            }

            .back-to-groups {
                display: block;
            }

            .chat-input-area {
                padding: 0.75rem;
                padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
                padding-bottom: calc(0.75rem + max(env(safe-area-inset-bottom), 10px));
                flex-shrink: 0;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;
                background: white;
                border-top: 1px solid var(--border-color);
                z-index: 100;
            }

            .chat-header {
                padding: 1rem;
                padding-top: calc(1rem + env(safe-area-inset-top));
                flex-shrink: 0;
            }

            .chat-messages {
                padding: 1rem;
                padding-bottom: 0.5rem;
                flex: 1;
                min-height: 0;
                overflow-y: auto;
            }

            .input-container {
                gap: 0.4rem;
                align-items: center;
            }

            .btn-icon {
                width: 36px;
                height: 36px;
                min-width: 36px;
                min-height: 36px;
            }

            .chat-textarea {
                min-height: 44px;
                padding: 0.6rem;
                font-size: 0.9rem;
            }

            .group-chat-container.full-screen .chat-area {
                height: 100%;
                max-height: 100%;
                display: flex;
                flex-direction: column;
            }
            
            .group-chat-container.full-screen .chat-messages {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 90px;
            }
        }

        .groups-sidebar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border-light);
            overflow-x: hidden;
            overflow-y: visible;
            display: flex;
            flex-direction: column;
            height: auto;
            max-height: none;
        }

        .groups-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            background: #292929;
            color: white;
            flex-shrink: 0;
        }

        .groups-header h2 {
            margin: 0 0 1rem 0;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .groups-header h2 i {
            color: white;
        }

        .group-search-box {
            position: relative;
            margin-bottom: 0.5rem;
        }

        .group-search-box input {
            width: 100%;
            padding: 0.6rem 2.5rem 0.6rem 0.75rem;
            border-radius: var(--radius-md);
            border: none;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 0.9rem;
        }

        .group-search-box input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .group-search-box i {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.7);
        }

        .groups-list {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0.75rem;
            min-height: 0;
        }

        .back-to-groups {
            display: none;
            background: none;
            border: none;
            color: #000000;
            font-size: 1.25rem;
            cursor: pointer;
            padding: 0 0.5rem;
        }

        .group-item {
            padding: 1rem;
            margin-bottom: 0.75rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-light);
            cursor: pointer;
            transition: var(--transition);
        }

        .group-item:hover {
            background: rgba(76, 175, 80, 0.1);
            border-color: var(--primary-color);
            transform: translateX(-5px);
        }

        .group-item.active {
            background: linear-gradient(135deg, rgb(255 255 255 / 15%), rgb(218 185 58 / 5%));
            border-color: antiquewhite;
            border-width: 2px;
        }

        .group-item.group-item-movie {
            background: linear-gradient(135deg, #fff7f7, #fff1f2);
            border-color: #fecdd3;
        }

        .group-item.group-item-movie:hover {
            background: linear-gradient(135deg, #ffeef0, #ffe4e6);
            border-color: #ef4444;
        }

        .group-item-header {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 0;
        }

        .group-item-text {
            flex: 1 1 auto;
            min-width: 0;
        }

        .group-list-avatar {
            flex: 0 0 52px;
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            overflow: hidden;
            color: #fff;
            font-weight: 800;
            font-size: 1.15rem;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        }

        .group-list-avatar.has-image {
            background: var(--bg-soft, rgba(15, 23, 42, 0.08));
        }

        .group-list-avatar.has-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
        }

        .group-list-avatar-initial,
        .group-list-avatar-icon {
            line-height: 1;
        }

        .group-list-avatar-icon {
            font-size: 1.35rem;
            opacity: 0.95;
        }

        .group-item-chevron {
            flex: 0 0 auto;
            color: var(--text-muted);
            opacity: 0.55;
            font-size: 0.85rem;
        }

        .group-name {
            font-weight: 700;
            font-size: 1.05rem;
            color: var(--text-primary);
            margin-bottom: 0.2rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
            line-height: 1.5;
        }

        .group-city {
            font-size: 0.84rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .side-group-item {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .side-group-item .group-list-avatar {
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            font-size: 0.95rem;
        }

        .group-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .group-invite-btn {
            background: #f57f05;
            color: white;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            white-space: nowrap;
        }

        .group-invite-btn:hover {
            background:rgb(217, 116, 7);
            transform: scale(1.05);
        }

        .group-invite-btn i {
            font-size: 0.7rem;
        }

        .group-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 600;
        }

        .badge-member {
            background: rgba(76, 175, 80, 0.1);
            color: var(--primary-dark);
        }

        .badge-admin {
            background: rgba(255, 152, 0, 0.1);
            color: #f57c00;
        }

        .chat-area {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
            max-height: 100%;
            min-height: 0;
        }

        .group-chat-container.full-screen .chat-area {
            border-radius: 0;
            border-right: none;
        }

        .chat-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            background: #f1f1f1;
            color: #000000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .chat-header-info h3 {
            margin: 0;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .chat-header-actions {
            display: flex;
            gap: 0.5rem;
        }

        .chat-e2ee-notice {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-size: 0.78rem;
            font-weight: 600;
            color: #166534;
            background: #f0fdf4;
            border-bottom: 1px solid #bbf7d0;
            padding: 0.55rem 0.9rem;
            white-space: nowrap;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transform: translateY(-8px);
            transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, padding 0.35s ease;
            pointer-events: none;
        }

        .chat-e2ee-notice.show {
            opacity: 1;
            max-height: 48px;
            transform: translateY(0);
            padding: 0.55rem 0.9rem;
        }

        .chat-e2ee-notice.hide {
            opacity: 0;
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            transform: translateY(-8px);
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 1.5rem;
            padding-inline-start: calc(1.5rem + 8px);
            background: #f8f9fa;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            direction: ltr;
        }

        .load-older-container {
            display: flex;
            justify-content: center;
            margin-bottom: 0.75rem;
        }

        .load-older-btn {
            border: 1px solid var(--border-color);
            background: #fff;
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.35rem 0.9rem;
            font-size: 0.85rem;
            cursor: pointer;
        }

        .load-older-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .group-chat-date-separator {
            display: flex;
            justify-content: center;
            margin: 0.55rem 0 0.95rem;
        }

        .group-chat-date-separator span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.28rem 0.82rem;
            border-radius: 999px;
            background: rgba(71, 85, 105, 0.88);
            color: #f8fafc;
            font-size: 0.78rem;
            font-weight: 700;
            box-shadow: 0 7px 18px rgba(15, 23, 42, 0.2);
        }

        .message-item {
            margin-bottom: 1rem;
            display: flex;
            gap: 0.75rem;
            animation: fadeIn 0.3s ease;
        }

        .message-item.media-no-avatar .message-avatar {
            display: none;
        }

        .message-item.media-no-avatar .message-content {
            width: 100%;
        }

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

        .message-avatar {
            --message-avatar-size: 40px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            flex-shrink: 0;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            position: relative;
            overflow: visible;
        }

        .message-avatar-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message-avatar-wrapper > img,
        .message-avatar-initials {
            width: var(--message-avatar-size);
            height: var(--message-avatar-size);
            border-radius: 50%;
            object-fit: cover;
            content-visibility: auto;
            contain-intrinsic-size: 40px 40px;
        }
        
        .message-avatar-initials {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-color);
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .message-avatar-wrapper .verified-badge-avatar {
            --message-verify-size: 9px;
            position: absolute;
            bottom: -2px;
            right: -1px;
            width: var(--message-verify-size);
            height: var(--message-verify-size);
            min-width: var(--message-verify-size);
            min-height: var(--message-verify-size);
            flex: 0 0 var(--message-verify-size);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            line-height: 0;
        }
        
        .message-avatar-wrapper .verified-badge-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .message-content {
            flex: 1;
            min-width: 0;
        }
        
        .message-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.25rem;
        }

        .message-sender {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9rem;
            flex: 1 1 auto;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .message-time {
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 0.25rem;
            white-space: nowrap;
            flex-wrap: nowrap;
        }
        
        .message-sent-tick {
            color: #10b981;
            font-size: 0.7rem;
            display: inline-flex;
            align-items: center;
            margin-right: 0.25rem;
        }

        .message-sent-tick i {
            font-size: 0.65rem;
        }

        .message-readers-preview {
            display: inline-flex;
            align-items: center;
            gap: 0;
            cursor: pointer;
            margin-right: 0.25rem;
            direction: ltr;
        }

        .message-readers-preview-avatar,
        .message-readers-preview-more {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #fff;
            box-shadow: 0 0 0 1px #d1d5db;
            background: #e5e7eb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #374151;
            font-size: 0.55rem;
            font-weight: 700;
            overflow: hidden;
            margin-left: -5px;
        }

        .message-readers-preview-avatar:first-child,
        .message-readers-preview-more:first-child {
            margin-left: 0;
        }

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

        .message-readers-preview-more {
            background: #dbeafe;
            color: #1d4ed8;
            min-width: 18px;
            padding: 0 2px;
        }

        .message-readers-preview:hover .message-readers-preview-avatar,
        .message-readers-preview:hover .message-readers-preview-more {
            box-shadow: 0 0 0 1px #93c5fd;
        }

        .message-avatar-link {
            display: block;
            border-radius: 50%;
        }

        .message-avatar-link.has-story {
            position: relative;
            padding: 2px;
            isolation: isolate;
        }

        .message-avatar-link.has-story::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #22c55e, #06b6d4, #2563eb, #4f46e5, #22c55e);
            z-index: -1;
        }
        .message-avatar-link.has-story.seen-story::before {
            background: linear-gradient(135deg, #94a3b8, #cbd5e1);
            animation: none;
        }

        .message-avatar-link.has-story .message-avatar-wrapper {
            background: #fff;
            border-radius: 50%;
        }

        @keyframes storyRingSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .message-avatar-link img,
        .message-avatar-link .message-avatar-wrapper {
            display: block;
        }

        .message-sender-link {
            color: var(--text-primary);
            text-decoration: none;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .message-sender-link:hover {
            text-decoration: underline;
        }

        .message-actions-trigger {
            margin-inline-start: 0.5rem;
            opacity: 0;
            transition: opacity 0.2s ease;
            display: flex;
            gap: 0.25rem;
        }

        .message-item:hover .message-actions-trigger {
            opacity: 1;
        }

        .btn-readers-msg {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0.15rem 0.3rem;
            color: var(--text-muted);
            font-size: 0.75rem;
        }
        .btn-readers-msg i {
            font-size: 0.75rem;
        }

        .message-body {
            background: white;
            padding: 0.75rem 1rem;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            word-wrap: break-word;
            line-height: 1.5;
            direction: rtl;
            text-align: justify;
            text-justify: inter-word;
            text-align-last: right;
        }

        .message-body a:not(.telegram-proxy-link),
        .message-body a:not(.telegram-proxy-link):visited,
        .message-body a:not(.telegram-proxy-link):hover,
        .message-body a:not(.telegram-proxy-link):active,
        .message-body a:not(.telegram-proxy-link):focus {
            color: #000 !important;
        }

        .message-body a:not(.telegram-proxy-link):hover,
        .message-body a:not(.telegram-proxy-link):focus {
            text-decoration: underline;
        }

        .message-reply {
            background: rgba(76, 175, 80, 0.1);
            padding: 0.5rem;
            border-right: 3px solid var(--primary-color);
            border-radius: var(--radius-sm);
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
        }

        .message-reply-author {
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 0.25rem;
        }

        .message-media {
            margin-top: 0.5rem;
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .message-image-block {
            margin-top: 0.5rem;
            width: min(100%, 520px);
            display: inline-flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .message-image-caption {
            font-size: 0.96rem;
            line-height: 1.9;
            text-align: justify;
            text-justify: inter-word;
        }

        .message-album-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.45rem;
            width: min(100%, 520px);
        }

        .message-album-thumb {
            position: relative;
            appearance: none;
            border: 0;
            padding: 0;
            margin: 0;
            cursor: pointer;
            border-radius: 18px;
            overflow: hidden;
            background: rgba(15, 23, 42, 0.72);
            aspect-ratio: 1 / 1;
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
        }

        .message-album-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 0;
            max-height: none;
        }

        .message-album-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(2, 6, 23, 0) 38%, rgba(2, 6, 23, 0.7) 100%);
            opacity: 0;
            transition: opacity 0.18s ease;
        }

        .message-album-thumb:hover::after {
            opacity: 1;
        }

        .message-album-count {
            position: absolute;
            left: 0.65rem;
            bottom: 0.65rem;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            padding: 0.28rem 0.6rem;
            border-radius: 999px;
            background: rgba(2, 6, 23, 0.76);
            color: #f8fafc;
            font-size: 0.78rem;
            font-weight: 700;
            box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
        }

        .image-modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 999px;
            border: 0;
            background: rgba(15, 23, 42, 0.72);
            color: #f8fafc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
            box-shadow: 0 14px 32px rgba(2, 6, 23, 0.28);
        }

        .image-modal-nav.prev { right: 0.75rem; }
        .image-modal-nav.next { left: 0.75rem; }

        .image-modal-nav[hidden] { display: none !important; }

        .image-modal-counter {
            position: absolute;
            top: 0.9rem;
            left: 0.9rem;
            z-index: 2;
            padding: 0.28rem 0.7rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.78);
            color: #f8fafc;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .message-system {
            justify-content: center;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
        }
        .message-system .message-body {
            background: transparent;
            box-shadow: none;
            padding: 0.25rem 0.5rem;
        }

        .message-media img {
            width: 100%;
            max-width: 100%;
            max-height: 420px;
            height: auto;
            object-fit: cover;
            display: block;
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: transform 0.2s ease;
            content-visibility: auto;
        }

        .message-media-image {
            width: 100%;
            margin-top: 0;
        }
        
        .message-media img:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .message-media audio,
        .message-media video {
            width: 100%;
            max-width: 400px;
        }

        .message-video-wrap {
            position: relative;
            width: min(100%, 420px);
            border-radius: 12px;
            overflow: hidden;
            background: #000;
            cursor: pointer;
        }

        .message-video-wrap video {
            max-width: 100%;
            display: block;
            background: #000;
        }

        .message-video-wrap .video-play-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 6, 23, 0.28);
            opacity: 0;
            transition: opacity 0.18s ease;
            pointer-events: none;
        }

        .message-video-wrap.is-paused .video-play-overlay {
            opacity: 1;
        }

        .message-video-wrap .video-play-overlay i {
            width: 56px;
            height: 56px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.05rem;
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .message-video-wrap.movie-pro {
            cursor: default;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            width: min(100%, 520px);
            max-width: 100%;
        }
        .message-video-wrap.movie-pro .video-play-overlay { display: none; }
        .movie-video-rotor {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            transform-origin: center center;
            transition: transform 0.2s ease;
        }
        .movie-video-stage {
            position: relative;
            width: 100%;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 180px;
        }
        .message-video-wrap.movie-pro video {
            width: 100%;
            max-width: 100%;
            max-height: 68vh;
            transform-origin: center center;
            transition: transform 0.2s ease, filter 0.2s ease;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }
        .message-video-wrap.movie-pro.has-video-cover video {
            object-fit: cover;
        }
        @media (min-width: 992px) {
            .message-video-wrap.movie-pro {
                width: min(100%, 440px);
            }
            .message-video-wrap.movie-pro.has-video-cover video {
                object-fit: cover;
                max-height: min(52vh, 460px);
            }
        }
        .movie-video-subtitle-layer {
            position: absolute;
            inset-inline: 0;
            bottom: 1.4rem;
            display: flex;
            justify-content: center;
            pointer-events: none;
            padding: 0 1rem;
            z-index: 4;
        }
        .movie-video-subtitle-text {
            color: #fff;
            font-size: clamp(12px, 2.2vw, 22px);
            line-height: 1.6;
            text-align: center;
            text-shadow: 0 2px 8px rgba(0,0,0,0.9);
            background: rgba(2, 6, 23, 0.45);
            border-radius: 10px;
            padding: 0.15rem 0.6rem;
            max-width: min(100%, 900px);
            white-space: pre-line;
        }
        .movie-video-controls {
            display: flex;
            flex-direction: column;
            gap: 0.42rem;
            padding: 0.45rem 0.55rem;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.97));
            border-top: 1px solid rgba(255,255,255,0.12);
            transform-origin: center center;
            transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
        }
        .message-video-wrap.movie-pro.movie-pro-fullscreen .movie-video-controls.movie-pro-controls-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .movie-video-controls-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            width: 100%;
            min-width: 0;
            direction: ltr;
        }
        .movie-video-controls-row-main {
            justify-content: flex-start;
        }
        .movie-video-main-left,
        .movie-video-main-right {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        .movie-video-main-right { margin-inline-start: auto; }
        .movie-video-controls .movie-advanced {
            display: none;
        }
        .movie-video-controls .movie-video-controls-row-secondary {
            display: none;
        }
        .message-video-wrap.movie-pro.movie-pro-fullscreen .movie-video-controls .movie-advanced {
            display: inline-flex;
        }
        .message-video-wrap.movie-pro.movie-pro-fullscreen .movie-video-controls .movie-video-seek {
            display: block;
        }
        .message-video-wrap.movie-pro.movie-pro-fullscreen .movie-video-controls.movie-pro-expanded .movie-video-controls-row-secondary {
            display: flex;
            flex-wrap: wrap;
        }
        .message-video-wrap.movie-pro:not(.movie-pro-fullscreen) .movie-video-controls .movie-video-time,
        .message-video-wrap.movie-pro:not(.movie-pro-fullscreen) .movie-video-controls .movie-video-seek {
            display: none !important;
        }
        .movie-video-btn {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.08);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex: 0 0 auto;
        }
        .movie-video-btn:hover {
            background: rgba(255,255,255,0.18);
        }
        .movie-video-btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: block;
        }
        .movie-video-btn.movie-video-btn-wide {
            width: auto;
            min-width: 56px;
            border-radius: 10px;
            padding: 0 0.45rem;
            font-size: 0.75rem;
        }
        .movie-video-seek {
            flex: 1 1 auto;
            accent-color: #22c55e;
            min-width: 0;
        }
        .movie-video-time {
            min-width: 84px;
            text-align: center;
            color: #e5e7eb;
            font-size: 0.76rem;
            direction: ltr;
        }
        .movie-video-volume {
            width: 86px;
            accent-color: #38bdf8;
        }
        .movie-video-select {
            background: rgba(255,255,255,0.08);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.22);
            border-radius: 8px;
            height: 32px;
            font-size: 0.72rem;
            padding: 0 0.35rem;
            max-width: 110px;
            direction: rtl;
            text-align: right;
            color-scheme: dark;
        }
        .movie-video-select option {
            background: #0b1220;
            color: #e5e7eb;
        }
        .movie-video-select:focus,
        .movie-video-select:active {
            background: rgba(15,23,42,0.95);
            color: #fff;
            outline: 1px solid rgba(56,189,248,0.65);
        }
        .movie-video-select:disabled { opacity: 0.65; }
        .movie-video-subtitle-upload {
            display: none;
        }
        .poll-card{background:#0b1d35;border:1px solid #1f3b63;border-radius:12px;padding:10px;margin-top:6px}
        .poll-title{font-weight:700;color:#dbeafe;margin-bottom:6px}
        .poll-description{color:#93c5fd;font-size:.85rem;margin-bottom:8px}
        .poll-option{display:flex;align-items:center;gap:8px;background:#122746;border:1px solid #284a74;border-radius:10px;padding:7px 9px;margin:6px 0;cursor:pointer;color:#e5efff}
        .poll-option span{color:inherit}
        .poll-option.active{border-color:#60a5fa;background:#17345c}
        .poll-vote-count{margin-inline-start:auto;color:#93c5fd;font-size:.8rem}
        .poll-footer{display:flex;justify-content:space-between;align-items:center;color:#93c5fd;font-size:.78rem;margin-top:8px}
        .poll-manage-btn{background:#1e3a8a;color:#fff;border:none;border-radius:8px;padding:4px 8px;cursor:pointer}
        .poll-total-votes{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;color:#93c5fd;font:inherit;cursor:pointer}
        .poll-total-votes:hover{color:#dbeafe;text-decoration:underline}
        .poll-voter-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
        .poll-voter-badge{display:inline-flex;align-items:center;max-width:100%;padding:3px 8px;border-radius:999px;background:#dbeafe;color:#1e3a8a;font-size:.74rem;font-weight:700;line-height:1.35;white-space:normal;word-break:break-word}

        /* Poll modal styling */
        #newPollModal.poll-modal {
            backdrop-filter: blur(6px);
            background: rgba(15, 23, 42, 0.52);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        #newPollModal.poll-modal .readers-modal-content {
            width: min(100%, 540px);
            max-height: min(90dvh, 820px);
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.24);
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }

        #newPollModal.poll-modal .readers-modal-header {
            padding: 1rem 1.1rem;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
            border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        }

        #newPollModal.poll-modal .readers-modal-header h3 {
            font-size: 1.05rem;
            font-weight: 800;
            color: #0f172a;
        }

        .poll-modal-form {
            display: flex;
            flex: 1 1 auto;
            min-height: 0;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
            direction: rtl;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .poll-modal-section {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 0.9rem;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        .poll-modal-section-title {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            margin-bottom: 0.8rem;
            font-size: 0.92rem;
            font-weight: 800;
            color: #0f172a;
        }

        .poll-modal-section-title i {
            color: #2563eb;
            font-size: 0.9rem;
        }

        .poll-modal-field {
            display: flex;
            flex-direction: column;
            gap: 0.42rem;
            margin-bottom: 0.7rem;
        }

        .poll-modal-field:last-child {
            margin-bottom: 0;
        }

        .poll-modal-label {
            font-size: 0.83rem;
            font-weight: 700;
            color: #334155;
        }

        .poll-modal-input,
        .poll-modal-textarea {
            width: 100% !important;
            min-width: 0;
            display: block;
            padding: 0.82rem 0.95rem;
            border: 1px solid #dbe2ea;
            border-radius: 14px;
            font-size: 0.94rem;
            line-height: 1.5;
            color: #0f172a;
            background: #fff;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
            box-sizing: border-box;
        }

        .poll-modal-input::placeholder,
        .poll-modal-textarea::placeholder {
            color: #94a3b8;
        }

        .poll-modal-input:focus,
        .poll-modal-textarea:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
            background: #fff;
        }

        .poll-modal-textarea {
            min-height: 92px;
            resize: vertical;
        }

        .poll-modal-hint {
            margin-top: 0.15rem;
            font-size: 0.76rem;
            color: #64748b;
            line-height: 1.7;
        }

        .poll-modal-options {
            display: grid;
            gap: 0.7rem;
        }

        .poll-modal-option-field {
            transition: opacity 0.18s ease, transform 0.18s ease;
        }

        .poll-modal-option-field.is-new {
            animation: pollOptionFadeIn 0.2s ease;
        }

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

        .poll-modal-checkboxes {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.7rem;
        }

        .poll-modal-check {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-height: 58px;
            padding: 0.8rem 0.9rem;
            border: 1px solid #dbe2ea;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            cursor: pointer;
            transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
            user-select: none;
        }

        .poll-modal-check:hover {
            transform: translateY(-1px);
            border-color: #93c5fd;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
        }

        .poll-modal-check input {
            width: 20px;
            height: 20px;
            margin: 0;
            accent-color: #2563eb;
            flex-shrink: 0;
        }

        .poll-modal-check span {
            font-size: 0.88rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.6;
        }

        .poll-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.65rem;
            padding-top: 0.1rem;
            position: sticky;
            bottom: 0;
            z-index: 2;
            background: linear-gradient(180deg, rgba(248,250,252,0.78) 0%, #f8fafc 18%, #f8fafc 100%);
            padding-bottom: max(0.2rem, env(safe-area-inset-bottom));
        }

        .poll-modal-submit {
            min-width: 180px;
            border: none;
            border-radius: 16px;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: #fff;
            padding: 0.95rem 1.2rem;
            font-size: 0.98rem;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }

        .poll-modal-submit:hover {
            transform: translateY(-1px);
            box-shadow: 0 20px 34px rgba(37, 99, 235, 0.28);
            filter: brightness(1.02);
        }

        .poll-modal-submit:active {
            transform: translateY(0);
        }

        @media (max-width: 640px) {
            #newPollModal.poll-modal {
                align-items: flex-end;
                padding: 0;
            }

            #newPollModal.poll-modal .readers-modal-content {
                width: 100%;
                height: min(92dvh, 920px);
                max-height: min(92dvh, 920px);
                border-radius: 24px 24px 0 0;
                margin: 0;
            }

            .poll-modal-form {
                gap: 0.85rem;
                padding: 0.9rem;
                padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
            }

            .poll-modal-section {
                border-radius: 16px;
                padding: 0.8rem;
            }

            .poll-modal-checkboxes {
                grid-template-columns: 1fr;
            }

            .poll-modal-submit {
                width: 100%;
                min-width: 0;
            }
        }
        .message-video-wrap.movie-pro:fullscreen,
        .message-video-wrap.movie-pro:-webkit-full-screen {
            width: 100vw;
            max-width: none;
            height: 100vh;
            border-radius: 0;
            background: #000;
            justify-content: center;
        }
        .message-video-wrap.movie-pro:fullscreen .movie-video-stage,
        .message-video-wrap.movie-pro:-webkit-full-screen .movie-video-stage {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            align-items: center;
            justify-content: center;
            padding-bottom: 132px;
        }
        .message-video-wrap.movie-pro:fullscreen video,
        .message-video-wrap.movie-pro:-webkit-full-screen video {
            width: auto;
            max-width: 100vw;
            max-height: calc(100vh - 76px);
            margin: auto;
        }
        .message-video-wrap.movie-pro:fullscreen .movie-video-controls,
        .message-video-wrap.movie-pro:-webkit-full-screen .movie-video-controls {
            position: absolute;
            left: 0;
            right: 0;
            top: auto;
            bottom: max(0px, env(safe-area-inset-bottom));
            width: 100%;
            border-top: 1px solid rgba(255,255,255,0.2);
            z-index: 2;
            border-radius: 0;
            margin-top: 0;
            padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
        }
        @media (max-width: 768px) {
            .message-video-wrap.movie-pro.movie-pro-fullscreen .movie-video-controls:not(.movie-pro-expanded) .movie-video-controls-row-secondary {
                display: none !important;
            }
            .message-video-wrap.movie-pro.movie-pro-fullscreen .movie-video-controls:not(.movie-pro-expanded) .movie-advanced {
                display: none !important;
            }
        }
        .music-player-card {
            background: linear-gradient(135deg, #0b1220, #0f172a);
            border-radius: 14px;
            padding: 0.75rem;
            border: 1px solid rgba(255,255,255,0.08);
            min-width: 260px;
        }
        .music-player-top {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #cbd5e1;
            margin-bottom: 0.55rem;
            font-size: 0.8rem;
            gap: 0.4rem;
        }
        .music-player-top i { color: #22c55e; }
        .music-wave {
            height: 58px;
            width: 100%;
            display: block;
            margin-bottom: 0.65rem;
            background: rgba(2, 6, 23, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .music-wave canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        .music-wave-progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, rgba(34,197,94,0.22), rgba(14,165,233,0.22));
            pointer-events: none;
        }
        .music-player-card audio {
            width: 100%;
            max-width: none;
            border-radius: 10px;
            background: rgba(255,255,255,0.92);
        }

        .message-file {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            justify-content: space-between;
            gap: 0.6rem;
            flex-wrap: wrap;
            padding: 0.75rem;
            background: rgba(76, 175, 80, 0.1);
            border-radius: var(--radius-md);
            color: var(--text-primary);
        }
        .message-file.message-file-actions-only {
            display: inline-flex;
            width: auto;
            padding: 0;
            gap: 0.45rem;
            background: transparent;
            border: 0;
            border-radius: 0;
            justify-content: flex-start;
        }
        .message-file-link {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 600;
        }
        .message-file-download-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.42rem 0.78rem;
            border-radius: 999px;
            background: #ffffff;
            color: #111827;
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 700;
            border: 1px solid rgba(15, 23, 42, 0.12);
            line-height: 1.2;
        }
        .message-file-download-btn .message-file-type-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            display: inline-block;
            flex-shrink: 0;
        }
        .message-file-download-btn i.message-file-type-icon {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            object-fit: unset;
        }

        .chat-input-area {
            padding: 1rem;
            border-top: 1px solid var(--border-color);
            background: white;
            flex-shrink: 0;
            position: relative;
        }

        .persistent-music-dock {
            display: none;
            flex-shrink: 0;
            margin: 0;
            padding: 0.35rem 0.55rem;
            background: linear-gradient(90deg, #0b1b30 0%, #15263f 45%, #0f2238 100%);
            border-bottom: 1px solid rgba(80, 159, 255, 0.25);
            box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
            padding: 0.55rem 0.8rem;
            background: rgba(15, 23, 42, 0.98);
            border-bottom: 1px solid rgba(255,255,255,0.12);
            box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);
            z-index: 5;
        }
        .persistent-music-dock.active { display: block; }
        .persistent-music-inner {
            display: flex;
            align-items: center;
            min-height: 42px;
            width: 100%;
            direction: ltr;
            justify-content: space-between;
            gap: 0.75rem;
        }
        .persistent-music-left,
        .persistent-music-right {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 0.45rem;
        }
        .persistent-music-left {
            justify-content: flex-start;
            flex: 0 0 auto;
        }
        .persistent-music-right {
            direction: rtl;
            justify-content: flex-start;
            flex: 1 1 auto;
        }
        .persistent-music-progress-row {
            width: 100%;
            direction: ltr;
        }
        .persistent-music-play,
        .persistent-music-prev,
        .persistent-music-next,
        .persistent-music-back,
        .persistent-music-repeat,
        .persistent-music-mode,
        .persistent-music-close,
        .persistent-music-volume {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: #7fc2ff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.95rem;
        }
        .persistent-music-play:hover,
        .persistent-music-prev:hover,
        .persistent-music-next:hover,
        .persistent-music-back:hover,
        .persistent-music-repeat:hover,
        .persistent-music-mode:hover,
        .persistent-music-close:hover,
        .persistent-music-volume:hover {
            background: rgba(255,255,255,0.12);
            color: #b8ddff;
        }
        .persistent-music-title {
            color: #ffffff;
            font-size: 0.84rem;
            min-width: 0;
            max-width: 280px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            text-align: right;
        }
        .persistent-music-time {
            color: #9ec5eb;
            font-size: 0.8rem;
            min-width: 42px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .persistent-music-progress {
            width: 100%;
            height: 3px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(158, 197, 235, 0.3);
            border-radius: 999px;
            cursor: pointer;
            min-width: 0;
            margin: 0;
            direction: ltr;
        }
        .persistent-music-progress::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #4ea0ff;
            border: none;
        }
        .persistent-music-progress::-moz-range-thumb {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #4ea0ff;
            border: none;
        }
        .persistent-music-progress::-moz-range-track {
            height: 3px;
            background: rgba(158, 197, 235, 0.3);
            border-radius: 999px;
        }
        .persistent-music-dock audio { display: none; }

        @media (max-width: 768px) {
            .persistent-music-inner { gap: 0.35rem; }
            .persistent-music-right { gap: 0.25rem; }
            .persistent-music-title { max-width: 120px; font-size: 0.76rem; }
            .persistent-music-time { font-size: 0.73rem; min-width: 36px; }
            .persistent-music-progress-row { margin-top: 0.25rem; }
            .persistent-music-mode,
            .persistent-music-volume {
                display: none;
            }
            .persistent-music-play,
            .persistent-music-prev,
            .persistent-music-next,
            .persistent-music-back,
            .persistent-music-repeat,
            .persistent-music-mode,
            .persistent-music-close,
            .persistent-music-volume {
                width: 26px;
                height: 26px;
                font-size: 0.85rem;
            }
        }

        .reply-preview {
            padding: 0.75rem;
            background: rgba(76, 175, 80, 0.1);
            border-right: 3px solid var(--primary-color);
            border-radius: var(--radius-md);
            margin-bottom: 0.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reply-preview-info {
            flex: 1;
        }

        .reply-preview-author {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--primary-dark);
        }

        .reply-preview-text {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        .input-container {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .input-wrapper {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
        }

        .chat-textarea {
            width: 100%;
            min-height: 50px;
            max-height: 150px;
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            resize: none;
            font-family: inherit;
            font-size: 0.95rem;
            line-height: 1.5;
            box-sizing: border-box;
        }

        .input-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-shrink: 0;
            position: relative;
        }

        .typing-indicator {
            min-height: 1.25rem;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 0.4rem;
            padding: 0 0.2rem;
            display: none;
        }

        .typing-indicator.active {
            display: block;
        }

        .typing-dots::after {
            content: '...';
            display: inline-block;
            width: 1.2em;
            text-align: right;
            animation: typingDots 1.2s steps(4, end) infinite;
        }

        @keyframes typingDots {
            0% { content: '.'; }
            33% { content: '..'; }
            66% { content: '...'; }
            100% { content: '.'; }
        }

        .btn-attach.is-hidden {
            display: none;
        }


        .chat-input-area.composer-readonly .reply-preview,
        .chat-input-area.composer-readonly .media-preview-box,
        .chat-input-area.composer-readonly .input-container {
            display: none !important;
        }

        .media-preview-box {
            display: none;
            align-items: flex-start;
            gap: 0.75rem;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            border-radius: 14px;
            padding: 0.65rem;
            margin-bottom: 0.65rem;
        }

        .media-preview-box.active {
            display: flex;
        }

        .media-preview-thumb {
            width: 74px;
            height: 74px;
            border-radius: 10px;
            overflow: hidden;
            background: #e2e8f0;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #334155;
            font-size: 1.4rem;
        }

        .media-preview-thumb img,
        .media-preview-thumb video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .media-preview-meta {
            min-width: 0;
            flex: 1;
        }

        .media-preview-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.25rem;
        }

        .media-preview-subtitle {
            font-size: 0.78rem;
            color: #475569;
        }

        .media-upload-progress-wrap {
            display: none;
            margin-top: 0.45rem;
        }

        .media-upload-progress-wrap.active {
            display: block;
        }

        .media-upload-progress-bar {
            width: 100%;
            height: 7px;
            background: rgba(148, 163, 184, 0.35);
            border-radius: 999px;
            overflow: hidden;
        }

        .media-upload-progress-fill {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #22c55e, #16a34a);
            transition: width 0.15s linear;
        }

        .media-upload-progress-text {
            margin-top: 0.3rem;
            font-size: 0.75rem;
            color: #166534;
            font-weight: 700;
        }

        .media-preview-remove {
            border: none;
            border-radius: 999px;
            background: #dc2626;
            color: #fff;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .emoji-picker-container {
            position: relative;
            display: flex;
            align-items: center;
        }

        .emoji-picker-panel {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 0;
            width: min(320px, calc(100vw - 2rem));
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
            padding: 0.75rem;
            z-index: 10060;
            display: none;
        }

        .emoji-picker-panel.active {
            display: block;
        }

        .emoji-picker-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .emoji-picker-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 0.35rem;
            max-height: 200px;
            overflow-y: auto;
        }

        .emoji-item {
            width: 100%;
            aspect-ratio: 1;
            border: none;
            background: transparent;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .emoji-item:hover,
        .emoji-item:focus-visible {
            background: rgba(76, 175, 80, 0.14);
            outline: none;
        }

        .btn-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
        }

        .btn-icon:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

        body {
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.09), transparent 22%),
                radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.08), transparent 26%),
                linear-gradient(180deg, #f8fbff 0%, #f3f6fb 42%, #eef2f7 100%);
        }

        .group-chat-container {
            gap: 1.2rem;
            padding: 1.15rem;
        }

        .groups-sidebar,
        .chat-area,
        .side-members-list {
            border: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
        }

        .groups-sidebar {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(18px);
        }

        .groups-header {
            background: linear-gradient(135deg, #0f172a, #1e293b 55%, #334155);
        }

        .group-item {
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
        }

        .group-item:hover {
            transform: translateX(-4px) translateY(-2px);
            box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
        }

        .chat-area {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(18px);
        }

        .chat-header {
            background: linear-gradient(135deg, #ffffff, #f8fbff 45%, #eef4ff);
            border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        }

        .chat-messages {
            background: linear-gradient(180deg, #f8fbff 0%, #f6f8fc 100%);
        }

        .message-item {
            gap: 0.9rem;
        }

        .message-body {
            border: 1px solid #e7eef8;
            border-radius: 22px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
            padding: 0.95rem 1.1rem;
            direction: rtl;
            text-align: justify;
            text-justify: inter-word;
            text-align-last: right;
        }

        .message-item.own-message .message-body,
        .message-body.message-own {
            background: linear-gradient(180deg, #f5fbf6 0%, #edf9ef 100%);
        }

        .chat-input-area {
            background: rgba(255,255,255,0.96);
            border-top: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.03);
        }

        .modern-composer {
            align-items: flex-end;
            gap: 0.7rem;
        }

        .chat-textarea {
            min-height: 56px;
            border-radius: 22px;
            border: 1px solid #dbe4f0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 20px rgba(15,23,42,0.04);
            padding: 0.95rem 1rem;
        }

        .chat-textarea:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16), inset 0 1px 0 rgba(255,255,255,0.85);
        }

        .input-actions {
            gap: 0.55rem;
        }

        .btn-icon {
            border-radius: 16px;
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            box-shadow: 0 12px 24px rgba(34, 197, 94, 0.22);
        }

        .btn-icon:hover {
            background: linear-gradient(135deg, #16a34a, #15803d);
            transform: translateY(-1px) scale(1.03);
        }

        .btn-send-modern {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
        }

        .btn-send-modern:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
        }

        .btn-plus.is-hidden {
            display: none;
        }

        .composer-plus-menu-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .chat-input-area.composer-plus-open .input-wrapper,
        .chat-input-area.composer-plus-open .emoji-picker-container,
        .chat-input-area.composer-plus-open #sendMessageBtn {
            display: none !important;
        }

        .chat-input-area.composer-plus-open .composer-plus-menu-wrap {
            margin-inline: auto;
        }

        .chat-input-area.composer-plus-open #composerPlusBtn {
            display: none !important;
        }

        .composer-plus-menu {
            position: absolute;
            left: 0;
            bottom: calc(100% + 12px);
            width: min(360px, calc(100vw - 2rem));
            background: rgba(255,255,255,0.98);
            border: 1px solid rgba(226, 232, 240, 0.96);
            border-radius: 24px;
            box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
            padding: 0.9rem;
            display: none;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.65rem;
            z-index: 10065;
            backdrop-filter: blur(18px);
        }

        .composer-plus-menu.active {
            display: grid;
        }

        .composer-plus-inline-slot.has-open-menu .composer-plus-menu.active {
            display: grid;
        }

        .composer-plus-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.32);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            z-index: 10060;
        }

        .composer-plus-backdrop.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .composer-plus-inline-slot {
            display: none;
        }

        .composer-plus-inline-slot.has-open-menu {
            display: block;
        }


        html.composer-plus-sheet-open,
        body.composer-plus-sheet-open {
            overflow: hidden !important;
            overscroll-behavior: contain;
        }

        .composer-menu-item {
            border: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border-radius: 18px;
            padding: 0.8rem 0.55rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            cursor: pointer;
            color: #0f172a;
            font-family: inherit;
            font-size: 0.83rem;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        .composer-menu-item i {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(37, 99, 235, 0.09);
            color: #2563eb;
            font-size: 1rem;
        }

        .composer-menu-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
            border-color: #bfdbfe;
        }

        .schedule-inline-panel {
            display: none;
            margin-bottom: 0.8rem;
            padding: 0.95rem 1rem;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08));
            border: 1px solid rgba(191, 219, 254, 0.95);
            box-shadow: 0 14px 28px rgba(59, 130, 246, 0.08);
        }

        .schedule-inline-panel.active {
            display: block;
        }

        .schedule-inline-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .schedule-inline-title {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-weight: 800;
            color: #0f172a;
        }

        .schedule-inline-title i {
            color: #2563eb;
        }

        .schedule-inline-close {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.08);
            color: #334155;
            cursor: pointer;
        }

        .schedule-inline-fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.8rem;
        }

        .schedule-inline-label {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            font-size: 0.8rem;
            color: #475569;
            font-weight: 700;
        }

        .schedule-inline-input {
            width: 100%;
            height: 46px;
            border: 1px solid #cbd5e1;
            border-radius: 14px;
            background: #fff;
            padding: 0 0.9rem;
            font-family: inherit;
        }

        .schedule-inline-hint {
            margin-top: 0.65rem;
            color: #475569;
            font-size: 0.8rem;
        }

        .emoji-picker-panel {
            border-radius: 20px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        @media (max-width: 770px) {
            .chat-input-area.composer-plus-open {
                z-index: auto;
            }

            .chat-input-area.composer-plus-open .input-wrapper {
                display: flex !important;
                flex: 1 1 auto;
            }

            .chat-input-area.composer-plus-open .emoji-picker-container,
            .chat-input-area.composer-plus-open #sendMessageBtn,
            .chat-input-area.composer-plus-open #composerPlusBtn {
                display: flex !important;
            }

            .chat-input-area.composer-plus-open .composer-plus-menu-wrap {
                position: relative;
                flex: 0 0 auto;
                justify-content: center;
                margin-inline: 0;
            }

            .composer-plus-inline-slot {
                padding: 0 0.75rem 0.75rem;
            }

            .composer-plus-inline-slot .composer-plus-menu {
                position: static;
                left: auto;
                right: auto;
                top: auto;
                bottom: auto;
                width: 100%;
                max-width: none;
                max-height: none;
                margin: 0;
                overflow: visible;
                overscroll-behavior: auto;
                transform: none;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.75rem;
                padding: 1rem;
                border-radius: 28px;
                box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
                z-index: auto;
            }

            .schedule-inline-fields {
                grid-template-columns: 1fr;
            }

            .btn-icon {
                width: 42px;
                height: 42px;
                min-width: 42px;
                min-height: 42px;
            }
        }

        /* Modal اطلاعات گروه (سبک تلگرام) */
        .group-info-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: clamp(0.75rem, 3vh, 2rem) 1rem;
            overflow-y: auto;
        }
        .group-info-modal.active {
            display: flex;
        }
        .group-info-content {
            background: white;
            border-radius: var(--radius-xl);
            max-width: 420px;
            width: 100%;
            padding: 2rem 1.5rem;
            box-shadow: var(--shadow-xl);
            position: relative;
            text-align: center;
            max-height: min(90vh, 920px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin: auto;
        }
        .group-info-close {
            position: absolute;
            top: 1rem;
            left: 1rem;
            width: 36px;
            height: 36px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
        }
        .group-info-close:hover {
            background: #e0e0e0;
        }
        .group-info-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1rem;
            overflow: hidden;
        }
        .group-info-avatar.has-image {
            background: var(--bg-soft, rgba(15, 23, 42, 0.08));
        }
        .group-info-avatar.has-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            border-radius: 50%;
            display: block;
        }
        .group-info-name {
            margin: 0 0 0.25rem;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .group-info-subtitle {
            margin: 0 0 0.5rem;
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        .group-info-media-section {
            margin: 0.75rem 0;
            padding: 0.5rem 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            overflow: hidden;
        }
        .group-info-media-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            justify-content: center;
            max-width: 100%;
        }
        .group-info-media-item {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.35rem 0.5rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: #f8f9fa;
            color: var(--text-color);
            font-size: 0.72rem;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s;
            flex-shrink: 0;
            white-space: nowrap;
        }
        .group-info-media-item:hover {
            background: #e9ecef;
            border-color: var(--primary-color);
        }
        .group-info-media-item i {
            color: var(--primary-color);
        }
        .group-info-members {
            margin: 0 0 1.5rem;
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .group-info-actions {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
            align-items: stretch;
            margin-bottom: 0.75rem;
        }
        .group-info-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            padding: 0.6rem 1rem;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            background: white;
            color: var(--text-primary);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            flex: 1 1 auto;
            min-width: 85px;
        }
        .group-info-btn span {
            white-space: nowrap;
        }
        .group-info-btn:hover {
            background: #f5f5f5;
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .group-info-btn-leave:hover {
            border-color: var(--danger-color);
            color: var(--danger-color);
            background: rgba(220, 53, 69, 0.08);
        }
        .group-info-extra {
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
        }
        .group-info-extra-actions {
            display: flex;
            gap: 0.5rem;
        }
        .group-info-extra-actions .group-info-btn {
            flex: 1 1 0;
            min-width: 0;
        }
        .group-info-btn-link {
            justify-content: center;
        }
        .group-info-btn-members {
            justify-content: center;
        }

        .group-personal-action-btn {
            width: 100%;
            min-height: 44px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.45rem;
            padding: 0.7rem 0.85rem;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .group-personal-action-btn i {
            font-size: 0.95rem;
        }
        .group-personal-action-btn:hover {
            transform: translateY(-1px);
            filter: brightness(0.94);
        }
        .group-personal-action-btn.group-personal-action-btn-clear {
            background: #b45309;
            border-color: #92400e;
        }
        .group-personal-action-btn.group-personal-action-btn-delete {
            background: #dc2626;
            border-color: #b91c1c;
        }
        .group-info-members-section {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
            text-align: right;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        .group-info-members-section.is-hidden {
            display: none;
        }
        .group-info-members-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            flex-wrap: wrap;
        }
        .group-info-members-header span {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .group-info-members-actions {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .group-info-member-search {
            width: 120px;
            padding: 0.4rem 0.6rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.85rem;
        }
        .group-info-btn-add {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .group-info-btn-add:hover {
            background: var(--primary-dark);
        }
        .group-info-members-list {
            max-height: 220px;
            overflow-y: auto;
            border-radius: var(--radius-md);
            background: #f8f9fa;
            min-height: 0;
        }
        .group-info-member-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-bottom: 1px solid var(--border-color);
        }
        .group-info-member-item:last-child {
            border-bottom: none;
        }
        .group-info-member-avatar {
            width: 48px;
            height: 48px;
            min-width: 48px;
            min-height: 48px;
            max-width: 80px;
            max-height: 80px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 600;
            flex-shrink: 0;
            overflow: visible;
            position: relative;
        }
        .group-info-member-avatar-link {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: inherit;
            border-radius: 50%;
            overflow: hidden;
        }
        .group-info-member-avatar .verified-badge-avatar {
            position: absolute;
            bottom: -2px;
            right: -2px;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .group-info-member-avatar .verified-badge-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .group-info-member-avatar .avatar-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-color);
            color: #fff;
            font-size: 1.05rem;
        }
        .group-info-member-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-width: 100%;
            max-height: 100%;
            border-radius: 50%;
            display: block;
        }
        .group-info-member-info {
            flex: 1;
            min-width: 0;
        }
        .group-info-member-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        .group-info-member-name a,
        .group-info-member-name a:hover,
        .group-info-member-name a:focus,
        .group-info-member-name a:active {
            color: #111;
            text-decoration: none;
        }
        .group-info-member-role {
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .group-info-member-lastseen {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 0.15rem;
        }
        @media (max-width: 480px) {
            .group-info-member-avatar {
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
            }
        }

        /* مودال رسانه‌های مشترک */
        .group-media-modal {
            display: none !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background: rgba(0,0,0,0.5);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .group-media-modal.active {
            display: flex !important;
        }
        .group-media-content {
            background: white;
            border-radius: var(--radius-xl);
            max-width: 560px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-xl);
        }
        .avatar-fallback {
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .avatar-fallback i {
            font-size: 1.2rem;
        }
        .avatar-fallback span {
            margin-left: 2px;
        }
        .group-media-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        .group-media-back, .group-media-close {
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            color: var(--text-color);
            cursor: pointer;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .group-media-back:hover, .group-media-close:hover {
            background: #f0f0f0;
        }
        .group-media-title {
            flex: 1;
            margin: 0;
            font-size: 1.1rem;
        }
        .group-media-search-wrap {
            padding: 0.5rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        .group-media-search {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.9rem;
        }
        .group-media-body {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            min-height: 200px;
        }
        .group-media-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }
        .group-media-grid .media-grid-item {
            aspect-ratio: 1;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: #f0f0f0;
            position: relative;
        }
        .group-media-grid .media-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .group-media-grid .media-grid-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .group-media-grid .media-grid-item .play-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.3);
            color: white;
            font-size: 1.5rem;
        }
        .group-media-grid .media-grid-item .duration {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background: rgba(0,0,0,0.7);
            color: white;
            font-size: 0.7rem;
            padding: 2px 4px;
            border-radius: 2px;
        }
        .group-media-list .media-list-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }
        .group-media-list .media-list-item:hover {
            background: #f8f9fa;
        }
        .group-media-list .media-list-item .media-list-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .group-media-list .media-list-item .media-list-icon.file { background: #6c757d; }
        .group-media-list .media-list-item .media-list-icon.audio { background: #0d6efd; }
        .group-media-list .media-list-item .media-list-info {
            flex: 1;
            min-width: 0;
        }
        .group-media-list .media-list-item .media-list-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .group-media-list .media-list-item .media-list-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 0.2rem;
        }
        .group-media-month {
            font-weight: 600;
            font-size: 0.9rem;
            margin: 1rem 0 0.5rem 0;
            color: var(--text-muted);
        }
        .group-media-month:first-child { margin-top: 0; }
        @media (max-width: 480px) {
            .group-media-grid { grid-template-columns: repeat(2, 1fr); }
        }

        /* مودال اعضا */
        .members-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .members-modal.active {
            display: flex;
        }

        .members-content {
            background: white;
            border-radius: var(--radius-xl);
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-xl);
            position: relative;
        }
        .members-content img {
            max-width: 100px;
            max-height: 100px;
            width: auto;
            height: auto;
            object-fit: cover;
        }

        @media (max-width: 576px) {
            .members-content {
                max-height: 95vh;
                border-radius: var(--radius-lg);
            }
        }

        .members-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .members-list {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        .members-content-upgraded {
            max-width: 780px;
            overflow: hidden;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }

        .members-header-upgraded {
            padding: 1rem 1.1rem;
            background: linear-gradient(135deg, #111827 0%, #1f2937 55%, #334155 100%);
            color: #fff;
            border-bottom: none;
            gap: 0.9rem;
            flex-wrap: wrap;
        }

        .members-header-main {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            min-width: 0;
            flex: 1;
        }

        .members-title-wrap {
            min-width: 0;
        }

        .members-title-wrap h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 800;
            color: #fff;
        }

        .members-title-wrap p {
            margin: 0.2rem 0 0;
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.78);
            line-height: 1.7;
        }

        .members-header-actions {
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }

        .members-role-summary {
            display: flex;
            gap: 0.55rem;
            flex-wrap: wrap;
            padding: 0.95rem 1.15rem 0.8rem;
            background: rgba(248, 250, 252, 0.9);
            border-bottom: 1px solid #e5e7eb;
        }

        .members-role-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.5rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 700;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .members-role-pill.role-default {
            background: #eef2ff;
            color: #3730a3;
            border-color: #c7d2fe;
        }

        .members-role-pill.role-admin {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        .members-role-pill.role-member {
            background: #f8fafc;
            color: #334155;
            border-color: #cbd5e1;
        }

        .members-role-pill.role-success {
            background: #ecfdf5;
            color: #047857;
            border-color: #a7f3d0;
        }

        .members-role-pill.role-warning {
            background: #fff7ed;
            color: #c2410c;
            border-color: #fdba74;
        }

        .members-tab-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            padding: 0.9rem 1.15rem 0.85rem;
            border-bottom: 1px solid #e5e7eb;
            background: rgba(255, 255, 255, 0.92);
        }

        .members-tab-btn {
            border: 1px solid #dbe3ee;
            background: #fff;
            color: #334155;
            border-radius: 12px;
            padding: 0.6rem 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            cursor: pointer;
            font-size: 0.86rem;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        .members-tab-btn:hover {
            border-color: #94a3b8;
            transform: translateY(-1px);
        }

        .members-tab-btn.active {
            background: #111827;
            color: #fff;
            border-color: #111827;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
        }

        .members-panels {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .members-panel {
            display: none;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 1rem 1.15rem 1.2rem;
            gap: 0.9rem;
        }

        .members-panel.active {
            display: flex;
            flex-direction: column;
        }

        .members-section-card {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
            padding: 1rem;
        }

        .members-section-title {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.96rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 0.35rem;
        }

        .members-section-note {
            color: #64748b;
            font-size: 0.82rem;
            line-height: 1.75;
            margin-bottom: 0.8rem;
        }

        .group-member-search-controls {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            align-items: center;
        }

        .group-member-search-input,
        .group-setting-select {
            width: 100%;
            border: 1px solid #d0d7e2;
            border-radius: 12px;
            padding: 0.7rem 0.85rem;
            background: #fff;
            font-size: 0.9rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .group-member-search-input:focus,
        .group-setting-select:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
        }

        .member-search-results {
            max-height: 240px;
            overflow-y: auto;
        }

        .member-search-item {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 0.8rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            margin-bottom: 0.55rem;
        }

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

        .member-search-meta {
            flex: 1;
            min-width: 0;
        }

        .member-search-name {
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 0.2rem;
        }

        .member-search-mobile {
            font-size: 0.82rem;
            color: #64748b;
            direction: ltr;
            text-align: right;
        }

        .members-admin-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .members-admin-action {
            width: 100%;
            border: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 18px;
            padding: 0.95rem;
            display: flex;
            align-items: flex-start;
            gap: 0.8rem;
            text-align: right;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            color: inherit;
        }

        .members-admin-action:hover {
            transform: translateY(-2px);
            border-color: #93c5fd;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
        }

        .members-admin-action-static {
            cursor: default;
        }

        .members-admin-action-static:hover {
            transform: none;
            border-color: #e2e8f0;
            box-shadow: none;
        }

        .members-admin-action-danger {
            border-color: #fecaca;
            background: linear-gradient(180deg, #fff5f5 0%, #fff1f2 100%);
        }

        .members-admin-action-danger .members-admin-action-icon {
            background: #fee2e2;
            color: #b91c1c;
        }

        .members-admin-action-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #eff6ff;
            color: #2563eb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1rem;
        }

        .members-admin-action-body {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            min-width: 0;
            flex: 1;
        }

        .members-admin-action-body strong {
            color: #0f172a;
            font-size: 0.92rem;
        }

        .members-admin-action-body span {
            color: #64748b;
            font-size: 0.8rem;
            line-height: 1.75;
        }

        .members-admin-action-body-wide {
            width: 100%;
        }

        .group-setting-form {
            display: flex;
            gap: 0.55rem;
            align-items: center;
            margin-top: 0.55rem;
        }

        .group-setting-input {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            padding: 0.78rem 0.9rem;
            background: #fff;
            color: #0f172a;
            font-size: 0.94rem;
            font-weight: 700;
            outline: none;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .group-setting-input:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
        }

        .group-name-inline-form {
            align-items: stretch;
        }

        .group-name-inline-input {
            text-align: right;
            direction: rtl;
        }

        .group-setting-save-btn {
            border: none;
            border-radius: 12px;
            padding: 0.72rem 0.9rem;
            background: #16a34a;
            color: #fff !important;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            cursor: pointer;
            white-space: nowrap;
        }

        .group-setting-save-btn span,
        .group-setting-save-btn i {
            color: #fff !important;
        }

        .group-setting-save-btn:disabled {
            opacity: 0.82;
            cursor: wait;
            transform: none !important;
            filter: none !important;
        }

        .group-personal-actions-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .members-list-panel {
            padding: 0;
            background: transparent;
            overflow-y: auto;
        }

        .members-admin-message-card {
            margin-top: 0.95rem;
        }

        .admin-message-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 0.65rem;
            align-items: center;
            margin-bottom: 0.7rem;
        }

        .admin-message-toolbar-btn {
            justify-content: center;
        }

        .admin-message-toolbar-btn-secondary {
            background: #0f766e;
        }

        .admin-message-manager-note {
            font-size: 0.8rem;
            line-height: 1.8;
            color: #64748b;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            padding: 0.75rem 0.85rem;
            margin-bottom: 0.8rem;
        }

        .admin-message-manager-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }

        .admin-message-item {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            padding: 0.9rem;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        .admin-message-item-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.8rem;
            margin-bottom: 0.55rem;
        }

        .admin-message-item-author {
            font-size: 0.92rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 0.15rem;
        }

        .admin-message-item-meta {
            font-size: 0.78rem;
            color: #64748b;
            line-height: 1.7;
        }

        .admin-message-item-body {
            font-size: 0.88rem;
            color: #1e293b;
            line-height: 1.95;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 0.75rem 0.85rem;
            margin-bottom: 0.7rem;
            word-break: break-word;
        }

        .admin-message-item-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
        }

        .admin-message-action-btn {
            border: none;
            border-radius: 12px;
            padding: 0.68rem 0.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            font-size: 0.82rem;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        }

        .admin-message-action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
        }

        .admin-message-action-btn-soft {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
        }

        .admin-message-action-btn-hard {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .admin-message-item-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.4rem 0.65rem;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 0.74rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .members-empty-state {
            padding: 2rem 1rem;
            text-align: center;
            color: #64748b;
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: rgba(248, 250, 252, 0.9);
        }

        .members-empty-state i {
            font-size: 2rem;
            margin-bottom: 0.7rem;
            opacity: 0.7;
        }

        .member-item {
            background: #fff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        .member-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            flex-wrap: wrap;
            margin-bottom: 0.3rem;
        }

        .member-badges {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .member-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 800;
            border: 1px solid transparent;
        }

        .member-badge-admin {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        .member-badge-member {
            background: #f8fafc;
            color: #334155;
            border-color: #cbd5e1;
        }

        .member-badge-status {
            background: #ecfeff;
            color: #0f766e;
            border-color: #a5f3fc;
        }

        .member-badge-site-admin {
            background: #fff7ed;
            color: #c2410c;
            border-color: #fdba74;
        }

        .member-role {
            line-height: 1.8;
        }

        .member-actions {
            display: flex;
            gap: 0.45rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .member-action-btn {
            border: none;
            border-radius: 12px;
            padding: 0.55rem 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            color: #fff;
            font-size: 0.78rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .member-action-btn-primary { background: #2563eb; }
        .member-action-btn-warning { background: #d97706; }
        .member-action-btn-danger { background: #dc2626; }
        .member-action-btn-dark { background: #111827; }
        .member-action-btn-success { background: #16a34a; }

        .member-action-btn:hover,
        .group-setting-save-btn:hover {
            filter: brightness(0.95);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .members-modal {
                padding: 0;
                align-items: stretch;
                justify-content: stretch;
                background: rgba(15, 23, 42, 0.72);
            }

            .members-content,
            .members-content-upgraded {
                width: 100vw;
                max-width: 100vw;
                height: 100dvh;
                max-height: 100dvh;
                min-height: 100dvh;
                border-radius: 0;
                margin: 0;
            }

            .members-admin-grid,
            .group-personal-actions-grid {
                grid-template-columns: 1fr;
            }

            .admin-message-toolbar {
                grid-template-columns: 1fr;
            }

            .members-content-upgraded {
                max-width: 100%;
            }

            .members-header-upgraded {
                padding: 0.9rem;
                padding-top: calc(0.9rem + env(safe-area-inset-top));
            }

            .members-role-summary,
            .members-tab-nav,
            .members-panel {
                padding-left: 0.85rem;
                padding-right: 0.85rem;
            }

            .members-panel {
                padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
            }

            .group-member-search-controls,
            .group-setting-form {
                flex-wrap: wrap;
            }

            .group-setting-save-btn {
                width: 100%;
                justify-content: center;
            }

            .member-item {
                align-items: flex-start;
                flex-wrap: wrap;
            }

            .member-actions {
                width: 100%;
                justify-content: stretch;
            }

            .member-action-btn {
                flex: 1 1 calc(50% - 0.3rem);
                justify-content: center;
            }
        }

        .member-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-radius: var(--radius-md);
            margin-bottom: 0.5rem;
            background: rgba(248, 249, 250, 0.8);
        }

        .member-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .member-avatar-wrapper {
            position: relative;
            flex-shrink: 0;
        }

        .member-avatar-wrapper .member-avatar {
            margin: 0;
        }

        .member-avatar-wrapper .verified-badge-avatar {
            position: absolute;
            bottom: -2px;
            right: -2px;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .member-avatar-wrapper .verified-badge-avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .member-avatar-wrapper.has-story,
        .side-member-avatar-wrapper.has-story {
            position: relative;
            padding: 2px;
            border-radius: 50%;
            cursor: pointer;
            isolation: isolate;
        }

        .member-avatar-wrapper.has-story::before,
        .side-member-avatar-wrapper.has-story::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #22c55e, #06b6d4, #2563eb, #4f46e5, #22c55e);
            animation: storyRingSpin 1.8s linear infinite;
            z-index: -1;
        }
        .member-avatar-wrapper.has-story.seen-story::before,
        .side-member-avatar-wrapper.has-story.seen-story::before {
            background: linear-gradient(135deg, #94a3b8, #cbd5e1);
            animation: none;
        }

        .member-avatar-wrapper.has-story .member-avatar,
        .side-member-avatar-wrapper.has-story .side-member-avatar {
            border: 2px solid #fff;
            background: #fff;
            border-radius: 50%;
        }

        .member-avatar-wrapper.has-story.no-image-avatar .member-avatar,
        .side-member-avatar-wrapper.has-story.no-image-avatar .side-member-avatar {
            background: var(--primary-color);
            color: #fff;
        }

        .member-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            content-visibility: auto;
            contain-intrinsic-size: 40px 40px;
        }

        .member-info {
            flex: 1;
        }

        .member-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .member-role {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .member-actions {
            display: flex;
            gap: 0.5rem;
        }

        .loading {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }

        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.3;
        }
        
        /* استایل‌های گروه‌های پیشنهادی */
        .suggested-groups-container {
            padding: 2rem;
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }
        
        @media (min-width: 1200px) {
            .suggested-groups-container {
                max-width: 900px;
            }
        }
        
        .suggested-groups {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .suggested-group-card {
            background: white;
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border-light);
            transition: all 0.3s ease;
        }
        
        .suggested-group-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }
        
        .suggested-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-light);
        }
        
        .suggested-group-header h3 {
            margin: 0;
            font-size: 1.1rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .suggested-group-header h3 i {
            color: #000000;
        }
        
        .group-city-badge {
            background: rgb(109 109 109 / 10%);
            color: #828282;
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-md);
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .suggested-group-info h4 {
            margin: 0 0 1rem 0;
            font-size: 1.25rem;
            color: var(--text-primary);
            font-weight: 600;
        }
        
        .group-members-preview {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .members-avatars {
            display: flex;
            gap: -0.5rem;
        }
        
        .member-avatar-small {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid white;
            overflow: hidden;
            background: #828282;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -10px;
            position: relative;
        }
        
        .member-avatar-small:first-child {
            margin-left: 0;
        }
        
        .member-avatar-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .member-avatar-small .avatar-initials {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .members-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-right: 0.5rem;
        }
        
        .btn-join-group {
            width: 100%;
            padding: 0.75rem 1.5rem;
            background: #c0c0c0;
            color: white;
            border: none;
            border-radius: var(--radius-lg);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }
        
        .btn-join-group:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(81, 81, 81, 0.4);
        }
        
        .btn-join-group i {
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .suggested-groups {
                grid-template-columns: 1fr;
            }
            
            .suggested-groups-container {
                padding: 1rem;
            }
        }

        .message-actions-trigger {
            opacity: 0;
            transition: opacity 0.2s;
            margin-right: auto;
        }

        .message-item:hover .message-actions-trigger {
            opacity: 1;
        }

        .btn-delete-msg {
            color: var(--danger-color);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.8rem;
            padding: 0.25rem;
        }

        .btn-delete-msg:hover {
            color: darkred;
        }
        
        /* Modal برای نمایش تصویر بزرگ */
        .image-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10040;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            cursor: pointer;
        }
        
        .image-modal.active {
            display: flex;
        }
        
        .image-modal-content {
            position: relative;
            width: min(92vw, 560px);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0.75rem;
            cursor: default;
        }
        
        .image-modal-content img {
            max-width: 100%;
            max-height: min(62vh, calc(90vh - 180px));
            width: 100%;
            height: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            object-fit: contain;
        }
        
        .image-modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .image-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .image-modal-caption {
            color: white;
            font-size: 1rem;
            line-height: 1.8;
            padding: 0.75rem 0.9rem;
            text-align: justify;
            text-justify: inter-word;
            background: rgba(15, 23, 42, 0.55);
            border-radius: 12px;
            max-height: 22vh;
            overflow-y: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
            word-break: break-word;
        }

        .image-modal-caption::-webkit-scrollbar {
            display: none;
        }

        .image-modal-caption.is-empty {
            display: none;
        }

        @media (max-width: 768px) {
            .image-modal {
                padding: 1rem;
            }

            .image-modal-content {
                width: 100%;
                max-height: 88vh;
            }

            .image-modal-content img {
                max-height: min(54vh, calc(88vh - 170px));
            }

            .image-modal-caption {
                max-height: 28vh;
                font-size: 0.95rem;
            }
        }

        /* وقتی داخل گروه هستیم: هدر و منو زیر محیط چت می‌روند */
        body.group-chat-in-group .header.container {
            display: none !important;
            z-index: 0 !important;
        }
        body.group-chat-in-group {
            overflow: hidden !important;
        }
        body.group-chat-in-group {
            background: #fff !important;
        }
        body.group-chat-in-group.music-group-mode {
            background: #071120 !important;
        }

        /* ===== استایل‌های جدید برای واکنش‌ها ===== */
        .message-reactions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px dashed var(--border-light);
        }

        .reaction-btn {
            background: none;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            color: var(--text-muted);
            font-size: 0.85rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-md);
            transition: all 0.2s;
        }

        .reaction-btn:hover {
            background: rgba(76, 175, 80, 0.1);
            color: var(--primary-color);
        }

        .reaction-btn.active-like,
        .reaction-btn.active-heart,
        .reaction-btn.active-laugh,
        .reaction-btn.active-angry,
        .reaction-btn.active-sad,
        .reaction-btn.active-dislike {
            font-weight: 600;
        }

        .reaction-btn.active-like { color: #10b981; }
        .reaction-btn.active-heart { color: #ec4899; }
        .reaction-btn.active-laugh { color: #f59e0b; }
        .reaction-btn.active-angry { color: #f97316; }
        .reaction-btn.active-sad { color: #3b82f6; }
        .reaction-btn.active-dislike { color: #ef4444; }

        .reaction-picker-toggle {
            margin-top: 0.35rem;
            border: 1px dashed var(--border-light);
            background: #fff;
            color: var(--text-muted);
            border-radius: var(--radius-md);
            padding: 0.25rem 0.55rem;
            font-size: 0.8rem;
            cursor: pointer;
        }

        .message-item.reaction-collapsed .message-reactions {
            display: none;
        }

        .reaction-btn i {
            font-size: 0.9rem;
        }

        .reaction-operator-icon {
            width: 1.35rem;
            height: 1.35rem;
            object-fit: contain;
            display: inline-block;
        }

        .message-reactions.config-message-reactions .reaction-btn.operator-reaction-btn .reaction-count {
            min-width: auto;
            display: inline-block;
            line-height: 1;
        }

        .message-reactions.config-message-reactions .reaction-btn.operator-reaction-btn {
            direction: ltr;
            justify-content: center;
            padding-inline: 0.7rem;
            white-space: nowrap;
        }

        .message-reactions.config-message-reactions .reaction-btn.operator-reaction-btn .reaction-count {
            min-width: auto;
            display: inline-block;
            line-height: 1;
        }


        .reaction-count {
            font-size: 0.75rem;
            min-width: 1.2rem;
            text-align: center;
        }


        .btn-reply-msg {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.25rem;
            border-radius: var(--radius-md);
        }
        .btn-reply-msg:hover {
            color: var(--primary-color);
            background: rgba(76, 175, 80, 0.08);
        }

        /* ===== استایل دکمه کپی کانفیگ V2Ray ===== */
        .v2ray-config-message {
            margin: 0.5rem 0;
        }
        .v2ray-config-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .btn-copy-v2ray {
            background: #ffffff;
            color: #1f2937;
            border: 1px solid rgba(15, 23, 42, 0.12);
            padding: 0.38rem 0.7rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.78rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
            font-weight: 600;
        }
        .btn-copy-v2ray .btn-copy-v2ray-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
            display: inline-block;
            flex-shrink: 0;
            border-radius: 4px;
        }
        .btn-copy-v2ray:hover {
            background: #f3f4f6;
            transform: scale(1.02);
        }
        .v2ray-app-download-btn {
            background: #ffffff;
            color: #1f2937;
            border: 1px solid rgba(15, 23, 42, 0.12);
            padding: 0.38rem 0.7rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.78rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            transition: all 0.2s;
            font-weight: 600;
        }
        .v2ray-app-download-btn .message-file-type-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
            display: inline-block;
            flex-shrink: 0;
        }
        .v2ray-app-download-btn:hover {
            background: #f3f4f6;
            transform: scale(1.02);
        }
        .v2ray-config-actions .config-action-btn {
            background: #ffffff;
            color: #1f2937;
            border: 1px solid rgba(15, 23, 42, 0.12);
            padding: 0.38rem 0.7rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.78rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            transition: all 0.2s;
            font-weight: 600;
            box-shadow: none;
        }
        .v2ray-config-actions .config-action-btn:hover {
            background: #f3f4f6;
            transform: scale(1.02);
        }
        .v2ray-config-actions .config-action-btn .config-action-fa-icon {
            width: 18px;
            text-align: center;
            display: inline-block;
            flex-shrink: 0;
            font-size: 0.98rem;
        }
        .telegram-proxy-link {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            margin: 0.15rem 0;
            padding: 0.45rem 0.85rem;
            border-radius: 999px;
            background: #229ed9;
            color: #fff;
            text-decoration: none;
            font-size: 0.83rem;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(34, 158, 217, 0.25);
            transition: all 0.2s ease;
            color: #fff !important;
        }
        .telegram-proxy-link i,
        .telegram-proxy-link span {
            color: #fff !important;
        }
        .telegram-proxy-link:hover {
            background: #1c8cc3;
            color: #fff;
            text-decoration: none;
            transform: translateY(-1px);
        }
        .group-message-context-item {
            width: 100%;
            border: none;
            background: transparent;
            text-align: right;
            padding: 0.5rem 0.6rem;
            border-radius: 8px;
            cursor: pointer;
            color: #111827;
            font-size: 0.84rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }
        .group-message-context-item:hover {
            background: #f3f4f6;
        }
        .group-message-context-item.is-disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .chat-selection-toolbar {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            padding: 0.55rem 0.75rem;
            background: rgba(15, 118, 110, 0.08);
            border-bottom: 1px solid rgba(15, 118, 110, 0.18);
        }
        .chat-selection-toolbar.active {
            display: flex;
        }
        .chat-selection-toolbar-count {
            font-size: 0.84rem;
            font-weight: 700;
            color: #0f766e;
        }
        .chat-selection-toolbar-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }
        .chat-selection-btn {
            border: 1px solid rgba(15, 23, 42, 0.16);
            background: #fff;
            color: #0f172a;
            border-radius: 10px;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.35rem 0.65rem;
            cursor: pointer;
        }
        .chat-selection-btn.danger {
            color: #dc2626;
            border-color: rgba(220, 38, 38, 0.25);
        }
        .group-chat-page-shell .message-item {
            position: relative;
        }
        .message-select-toggle {
            position: absolute;
            top: 50%;
            right: -30px;
            width: 22px;
            height: 22px;
            border-radius: 6px;
            border: 1px solid #94a3b8;
            background: rgba(255,255,255,0.96);
            color: #0f766e;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-50%);
            transition: opacity 0.15s ease;
            z-index: 3;
        }
        .message-item:hover .message-select-toggle,
        .chat-messages.select-mode .message-select-toggle {
            opacity: 1;
            pointer-events: auto;
        }
        .message-item.message-own .message-select-toggle {
            left: -30px;
            right: auto;
        }
        .message-item.is-selected::before {
            content: "";
            position: absolute;
            inset: 0 -8px;
            border-radius: 16px;
            background: rgba(20, 184, 166, 0.14);
            z-index: 0;
        }
        .message-item > * {
            position: relative;
            z-index: 1;
        }

        /* ===== Group chat redesign override ===== */
        #groupChatPageContent.group-chat-page-shell {
            position: relative;
        }

        body[data-group-chat-layout="chat"] {
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 24%),
                radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.08), transparent 28%),
                linear-gradient(180deg, #f7fbff 0%, #f2f6fb 45%, #eef2f7 100%);
        }

        .group-chat-page-shell .group-chat-container {
            grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
            gap: 1rem;
            align-items: stretch;
            min-height: calc(100dvh - 150px);
            padding: 1rem;
        }

        .group-chat-page-shell .group-chat-sidebar-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-width: 0;
        }

        .group-chat-page-shell .groups-sidebar,
        .group-chat-page-shell .chat-area,
        .group-chat-page-shell .side-members-list {
            border: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.92);
        }

        .group-chat-page-shell .groups-sidebar,
        .group-chat-page-shell .chat-area {
            overflow: hidden;
            border-radius: 28px;
        }

        .group-chat-page-shell .side-members-list {
            border-radius: 28px;
            overflow: hidden;
        }

        .group-chat-page-shell .groups-header {
            padding: 1.1rem 1.1rem 1rem;
            background: linear-gradient(135deg, #0f172a, #1e293b 55%, #334155);
            color: #fff;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .groups-header-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.95rem;
        }

        .groups-header-copy {
            min-width: 0;
        }

        .group-chat-page-shell .groups-header h2 {
            margin: 0;
            font-size: 1.16rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            line-height: 1.4;
        }

        .groups-header-subtitle {
            margin: 0.45rem 0 0;
            font-size: 0.83rem;
            line-height: 1.8;
            color: rgba(226, 232, 240, 0.84);
        }

        .groups-header-badges {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 0.45rem;
            max-width: 45%;
        }

        .header-stat-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0.4rem 0.75rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 800;
            color: #e2e8f0;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
            white-space: nowrap;
        }

        .header-stat-chip.muted {
            background: rgba(15, 23, 42, 0.25);
            color: #bfdbfe;
        }

        .group-chat-page-shell .group-search-box {
            margin: 0;
        }

        .group-random-video-slot {
            margin-top: 0.8rem;
        }

        .group-random-video-btn {
            width: 100%;
            min-height: 44px;
            border: 1px solid rgba(255,255,255,0.24);
            border-radius: 14px;
            background: rgba(15, 23, 42, 0.34);
            color: #fff !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            font-weight: 800;
            text-decoration: none;
            transition: all 0.18s ease;
        }

        .group-random-video-btn:hover {
            background: rgba(37, 99, 235, 0.35);
            border-color: rgba(191, 219, 254, 0.5);
            color: #fff !important;
        }

        .group-random-video-btn i,
        .group-random-video-btn span {
            color: #fff !important;
        }

        .group-chat-page-shell .group-search-box input {
            min-height: 48px;
            padding: 0.82rem 2.7rem 0.82rem 0.95rem;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
        }

        .group-chat-page-shell .group-search-box input:focus {
            outline: none;
            border-color: rgba(191, 219, 254, 0.9);
            background: rgba(255,255,255,0.16);
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
        }

        .group-chat-page-shell .groups-list {
            padding: 0.95rem;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.62), rgba(255,255,255,0.78));
        }

        .group-chat-page-shell .group-item {
            position: relative;
            overflow: hidden;
            margin-bottom: 0.9rem;
            padding: 1rem;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
            transform: translateX(0);
        }

        .group-chat-page-shell .group-item::after {
            content: "";
            position: absolute;
            inset: auto auto 0 0;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0));
            transform: translate(-20%, 35%);
            pointer-events: none;
        }

        .group-chat-page-shell .group-item:hover {
            transform: translateY(-2px) translateX(-4px);
            border-color: #93c5fd;
            box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12);
        }

        .group-chat-page-shell .group-item.active {
            border-color: #93c5fd;
            background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
            box-shadow: 0 22px 42px rgba(37, 99, 235, 0.14);
        }

        .group-chat-page-shell .group-name {
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.7;
            color: #0f172a;
        }

        .group-chat-page-shell .group-city {
            margin-top: 0.35rem;
            font-size: 0.82rem;
            color: #64748b;
        }

        .group-chat-page-shell .group-meta {
            display: none;
        }

        .group-chat-page-shell .group-item-chevron {
            color: #94a3b8;
            opacity: 0.7;
        }

        .group-chat-page-shell .group-badge {
            border-radius: 999px;
            padding: 0.34rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 800;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09);
        }

        .group-chat-page-shell .badge-member {
            background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(37,99,235,0.18));
            color: #1d4ed8;
        }

        .group-chat-page-shell .badge-admin {
            background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.18));
            color: #c2410c;
        }

        .group-chat-page-shell .group-invite-btn {
            min-height: 38px;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
            font-weight: 700;
        }

        .group-chat-page-shell .group-invite-btn:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-1px);
        }

        .group-chat-page-shell .side-members-header {
            padding: 0.95rem 1rem;
            background: linear-gradient(135deg, #ffffff, #f8fbff);
            border-bottom: 1px solid #e2e8f0;
        }

        .group-chat-page-shell .side-toggle-btn {
            min-height: 36px;
            border-radius: 999px;
            padding: 0.42rem 0.8rem;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
        }

        .group-chat-page-shell .side-members-body {
            padding: 0.75rem;
            background: linear-gradient(180deg, rgba(248,250,252,0.66), rgba(255,255,255,0.8));
        }

        .group-chat-page-shell .side-member-item,
        .group-chat-page-shell .side-group-item {
            border-radius: 18px;
            margin-bottom: 0.45rem;
            padding: 0.75rem;
            border: 1px solid transparent;
            background: rgba(255,255,255,0.72);
            box-shadow: 0 8px 18px rgba(15,23,42,0.04);
        }

        .group-chat-page-shell .side-member-item:hover,
        .group-chat-page-shell .side-group-item:hover {
            background: #fff;
            border-color: #dbeafe;
            box-shadow: 0 12px 22px rgba(37,99,235,0.08);
        }

        .group-chat-page-shell .side-group-item.active {
            background: linear-gradient(180deg, #ffffff, #f4f8ff);
            border-color: #93c5fd;
            border-right-width: 1px;
        }

        .group-chat-page-shell .chat-area {
            display: flex;
            flex-direction: column;
            min-width: 0;
            background: rgba(255,255,255,0.94);
        }

        .group-chat-page-shell .group-chat-container.full-screen .chat-area {
            border-radius: 0;
        }

        .group-chat-page-shell .chat-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.1rem;
            background: linear-gradient(135deg, #ffffff, #f8fbff 48%, #eef4ff);
            border-bottom: 1px solid rgba(226,232,240,0.95);
            transition: transform 0.28s ease, opacity 0.22s ease;
            will-change: transform;
        }

        .group-chat-page-shell .chat-area.chat-header-hidden .chat-header {
            transform: translateY(-110%);
            opacity: 0;
            pointer-events: none;
            margin-bottom: calc(var(--chat-header-hide-offset, 0px) * -1);
        }

        .group-chat-page-shell .chat-area.chat-input-hidden .chat-input-area {
            display: none !important;
        }

        .group-chat-page-shell[data-chat-layout="groups"] .chat-input-area,
        .group-chat-container[data-chat-layout="groups"] .chat-input-area,
        body[data-group-chat-layout="groups"] .group-chat-page-shell .chat-input-area {
            display: none !important;
        }

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

        .group-chat-page-shell .chat-header-info {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.28rem;
        }

        .group-chat-page-shell .chat-header-info h3 {
            margin: 0;
            font-size: 1.12rem;
            font-weight: 800;
            line-height: 1.35;
            min-width: 0;
        }

        .chat-header-meta {
            font-size: 0.82rem;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: min(64vw, 780px);
        }

        .chat-group-name-btn,
        .chat-group-name-static {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.18rem;
            min-width: 0;
            padding: 0;
            margin: 0;
            background: none;
            border: none;
            color: inherit;
            font: inherit;
            text-align: right;
        }

        .chat-group-name-btn {
            cursor: pointer;
        }

        .chat-group-name-line {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
            font-weight: 800;
            color: #0f172a;
        }

        .chat-group-name-line span:last-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: min(58vw, 600px);
        }

        .chat-group-name-line i {
            color: #2563eb;
            flex: 0 0 auto;
        }

        .chat-group-subline {
            font-size: 0.78rem;
            color: #64748b;
            font-weight: 600;
        }

        .group-chat-page-shell .chat-header-actions {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
        }

        .group-chat-page-shell .chat-header-actions .btn-icon,
        .group-chat-page-shell .back-to-groups {
            width: 42px;
            height: 42px;
            min-width: 42px;
            min-height: 42px;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            background: rgba(255,255,255,0.94);
            color: #0f172a;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }

        .group-chat-page-shell .back-to-groups {
            display: none;
        }

        .group-chat-page-shell .chat-messages {
            padding: 1.2rem 1.2rem 1rem;
            background:
                radial-gradient(circle at top left, rgba(59,130,246,0.06), transparent 24%),
                radial-gradient(circle at bottom right, rgba(34,197,94,0.05), transparent 28%),
                linear-gradient(180deg, #f8fbff 0%, #f5f7fb 100%);
        }

        #chatMessagesContent {
            display: flex;
            flex-direction: column;
        }

        .group-chat-page-shell .suggested-groups-container {
            max-width: 980px;
            padding: 1.5rem 0.75rem 2rem;
        }

        .group-chat-page-shell .suggested-group-card {
            border-radius: 28px;
            padding: 1.35rem;
            border: 1px solid #e2e8f0;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            box-shadow: 0 16px 36px rgba(15,23,42,0.08);
        }

        .group-chat-page-shell .suggested-group-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(37,99,235,0.14);
        }

        .group-chat-page-shell .group-city-badge {
            background: rgba(37, 99, 235, 0.09);
            color: #1d4ed8;
            font-weight: 700;
        }

        .group-chat-page-shell .btn-join-group {
            min-height: 48px;
            border-radius: 18px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
        }

        .group-chat-page-shell .btn-join-group:hover {
            box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
        }

        .group-chat-page-shell .message-item {
            gap: 0.85rem;
            align-items: flex-start;
            margin-bottom: 1rem;
            flex-direction: row-reverse;
        }

        .group-chat-page-shell .message-item.message-own .message-content {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .group-chat-page-shell .message-item.media-no-avatar .message-content {
            width: 100%;
            max-width: 100%;
        }
        .group-chat-page-shell .message-item.poll-only .message-content {
            width: 100%;
            max-width: 100%;
        }
        .group-chat-page-shell .message-item.poll-only .message-body {
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            max-width: 100%;
        }
        .group-chat-page-shell .message-item.poll-only .poll-card {
            margin-top: 0;
        }

        .group-chat-page-shell .message-avatar {
            width: 44px;
            height: 44px;
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
            border: 2px solid rgba(255,255,255,0.92);
        }

        .group-chat-page-shell .message-content {
            max-width: min(100%, 860px);
            min-width: 0;
        }

        .group-chat-page-shell .message-header {
            align-items: center;
            gap: 0.7rem;
            margin-bottom: 0.42rem;
        }

        .group-chat-page-shell .message-item.message-own .message-header {
            flex-direction: row-reverse;
        }

        .group-chat-page-shell .message-sender {
            font-size: 0.9rem;
            font-weight: 800;
            color: #0f172a;
            flex: 1 1 auto;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .group-chat-page-shell .message-sender-link {
            color: #0f172a;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .group-chat-page-shell .message-time {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            border-radius: 999px;
            padding: 0.2rem 0.55rem;
            background: rgba(255,255,255,0.76);
            border: 1px solid #e2e8f0;
            font-size: 0.73rem;
            color: #64748b;
            box-shadow: 0 4px 12px rgba(15,23,42,0.04);
            white-space: nowrap;
            flex-wrap: nowrap;
        }

        .group-chat-page-shell .message-body {
            position: relative;
            max-width: min(100%, 760px);
            padding: 0.95rem 1.05rem;
            border-radius: 24px;
            border: 1px solid #e7eef8;
            background: rgba(255,255,255,0.96);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
            line-height: 1.9;
            direction: rtl;
            text-align: justify;
            text-justify: inter-word;
            text-align-last: right;
        }

        .group-chat-page-shell .message-item.message-own .message-body,
        .group-chat-page-shell .message-body.message-own {
            background: linear-gradient(180deg, #effaf2 0%, #e6f7eb 100%);
            border-color: #cdebd5;
            border-top-right-radius: 10px;
        }

        .group-chat-page-shell .message-item:not(.message-own) .message-body {
            border-top-left-radius: 10px;
        }

        .group-chat-page-shell .message-reply {
            border-radius: 16px;
            background: rgba(59, 130, 246, 0.07);
            border-right: 3px solid #60a5fa;
            margin-bottom: 0.75rem;
        }

        .group-chat-page-shell .message-file {
            border-radius: 18px;
            border: 1px solid #dbeafe;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
        }
        .group-chat-page-shell .message-file.message-file-actions-only {
            border: 0;
            background: transparent;
            border-radius: 0;
            padding: 0;
        }

        .group-chat-page-shell .message-file-download-btn {
            border-radius: 999px;
            padding: 0.42rem 0.78rem;
            background: #ffffff;
            color: #111827;
            border: 1px solid rgba(15, 23, 42, 0.12);
            box-shadow: 0 5px 12px rgba(15, 23, 42, 0.06);
        }
        .group-chat-page-shell .v2ray-config-actions .btn-copy-v2ray,
        .group-chat-page-shell .v2ray-config-actions .v2ray-app-download-btn,
        .group-chat-page-shell .v2ray-config-actions .config-action-btn {
            border-radius: var(--radius-md);
            padding: 0.38rem 0.7rem;
            box-shadow: none;
            font-size: 0.78rem;
            min-height: 2rem;
            line-height: 1.2;
            box-sizing: border-box;
        }

        .group-chat-page-shell .message-reactions {
            margin-top: 0.75rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
        }

        .group-chat-page-shell .reaction-btn {
            border: 1px solid #e2e8f0;
            background: #fff;
            border-radius: 999px;
            padding: 0.42rem 0.68rem;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .group-chat-page-shell .reaction-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
            border-color: #cbd5e1;
        }

        .group-chat-page-shell .reaction-count {
            font-weight: 700;
        }

        .group-chat-page-shell .chat-input-area {
            padding: 0.95rem 1rem;
            border-top: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(255,255,255,0.96);
            box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.03);
        }

        .group-chat-page-shell .reply-preview,
        .group-chat-page-shell .media-preview-box,
        .group-chat-page-shell .schedule-inline-panel {
            border-radius: 20px;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
        }

        .group-chat-page-shell .typing-indicator {
            margin-bottom: 0.55rem;
            color: #64748b;
            font-weight: 600;
        }

        .group-chat-page-shell .modern-composer {
            align-items: flex-end;
            gap: 0.75rem;
        }

        .group-chat-page-shell .input-wrapper {
            flex: 1;
            min-width: 0;
        }

        .group-chat-page-shell .chat-textarea {
            min-height: 56px;
            max-height: 170px;
            padding: 0.95rem 1rem;
            border-radius: 22px;
            border: 1px solid #d7e3f1;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 8px 20px rgba(15, 23, 42, 0.05);
        }

        .group-chat-page-shell .chat-textarea:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16), inset 0 1px 0 rgba(255,255,255,0.86);
        }

        .group-chat-page-shell .input-actions {
            gap: 0.55rem;
        }

        .group-chat-page-shell .btn-icon {
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            border-radius: 18px;
            border: none;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            box-shadow: 0 14px 28px rgba(34, 197, 94, 0.22);
        }

        .group-chat-page-shell .btn-icon:hover {
            background: linear-gradient(135deg, #16a34a, #15803d);
            transform: translateY(-1px) scale(1.02);
        }

        .group-chat-page-shell .btn-plus {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.2);
        }

        .group-chat-page-shell .btn-send-modern {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
        }

        .group-chat-page-shell .btn-send-modern:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
        }

        .group-chat-page-shell .composer-plus-menu,
        .group-chat-page-shell .emoji-picker-panel {
            border-radius: 22px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12);
        }

        .group-chat-page-shell .composer-menu-item {
            border-radius: 16px;
        }

        .group-chat-page-shell .empty-state {
            padding: 3rem 1rem;
            color: #64748b;
        }

        .group-chat-page-shell .empty-state i {
            color: #94a3b8;
        }

        @media (max-width: 1220px) {
            .group-chat-page-shell .group-chat-container {
                grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
                gap: 0.85rem;
                padding: 0.85rem;
            }
        }

        @media (max-width: 992px) {
            .group-chat-page-shell .group-chat-container {
                grid-template-columns: 1fr;
                min-height: calc(100dvh - 120px);
            }

            .group-chat-page-shell .group-chat-sidebar-column {
                order: 2;
            }

            .group-chat-page-shell .chat-area {
                order: 1;
            }

            .group-chat-page-shell .side-members-list {
                display: none !important;
            }
        }

        @media (max-width: 770px) {
            .group-chat-page-shell {
                margin-top: 0 !important;
            }

            .group-chat-page-shell .group-chat-container {
                padding: 0.5rem;
                gap: 0.65rem;
            }

            .group-chat-page-shell .groups-sidebar,
            .group-chat-page-shell .chat-area,
            .group-chat-page-shell .side-members-list {
                border-radius: 24px;
            }

            .group-chat-page-shell .chat-header {
                padding: calc(0.85rem + env(safe-area-inset-top)) 0.85rem 0.85rem;
                gap: 0.7rem;
            }

            .group-chat-page-shell .chat-header-main {
                gap: 0.55rem;
            }

            .group-chat-page-shell .chat-header-actions {
                gap: 0.35rem;
            }

            .group-chat-page-shell .chat-messages {
                padding: 0.9rem 0.75rem 0.9rem;
            }

            .group-chat-page-shell .chat-input-area {
                position: sticky !important;
                left: auto !important;
                right: auto !important;
                bottom: 0 !important;
                top: auto !important;
                padding: 0.75rem 0.7rem calc(0.75rem + max(env(safe-area-inset-bottom), 10px));
                backdrop-filter: blur(18px);
                background: rgba(255,255,255,0.96);
            }

            .group-chat-page-shell .group-chat-container.full-screen .chat-messages {
                padding-bottom: 1rem;
            }

            .group-chat-page-shell .message-item {
                gap: 0.6rem;
            }

            .group-chat-page-shell .message-body {
                max-width: 100%;
                padding: 0.85rem 0.95rem;
                border-radius: 20px;
            }

            .group-chat-page-shell .message-time {
                padding: 0.18rem 0.48rem;
            }

            .group-chat-page-shell .reply-preview,
            .group-chat-page-shell .media-preview-box,
            .group-chat-page-shell .schedule-inline-panel {
                padding: 0.75rem;
            }

            .group-chat-page-shell .input-actions {
                gap: 0.45rem;
            }

            .group-chat-page-shell .modern-composer {
                position: relative;
            }

            .group-chat-page-shell .chat-input-area.composer-plus-open {
                z-index: auto;
            }

            .group-chat-page-shell .chat-input-area.composer-plus-open .input-wrapper {
                display: flex !important;
                flex: 1 1 auto;
            }

            .group-chat-page-shell .chat-input-area.composer-plus-open .emoji-picker-container,
            .group-chat-page-shell .chat-input-area.composer-plus-open #sendMessageBtn,
            .group-chat-page-shell .chat-input-area.composer-plus-open #composerPlusBtn {
                display: flex !important;
            }

            .group-chat-page-shell .chat-input-area.composer-plus-open .composer-plus-menu-wrap {
                position: relative;
                margin-inline: 0;
            }

            .group-chat-page-shell .composer-plus-inline-slot {
                padding: 0 0.7rem 0.75rem;
            }

            .group-chat-page-shell .composer-plus-inline-slot .composer-plus-menu {
                position: static;
                left: auto;
                right: auto;
                top: auto;
                bottom: auto;
                width: 100%;
                max-width: none;
                max-height: none;
                margin: 0;
                overflow: visible;
                overscroll-behavior: auto;
                padding: 1rem;
                gap: 0.75rem;
                border-radius: 28px;
                box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
                z-index: auto;
            }

            .group-chat-page-shell .btn-icon,
            .group-chat-page-shell .chat-header-actions .btn-icon,
            .group-chat-page-shell .back-to-groups {
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
                border-radius: 15px;
            }

            .group-chat-page-shell .chat-textarea {
                min-height: 50px;
                font-size: 0.92rem;
            }

            .group-chat-page-shell .groups-header-top {
                flex-direction: column;
            }

            .group-chat-page-shell .groups-header-badges {
                justify-content: flex-start;
                max-width: 100%;
            }

            .group-chat-page-shell .suggested-groups-container {
                padding: 1rem 0.25rem 1.25rem;
            }

            .group-chat-page-shell .chat-group-name-line span:last-child,
            .group-chat-page-shell .chat-header-meta {
                max-width: 58vw;
            }
        }

        @media (max-width: 560px) {
            .group-chat-page-shell .v2ray-config-message {
                margin: 0.35rem 0 0;
            }

            .group-chat-page-shell .v2ray-config-actions {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                gap: 0.35rem;
            }

            .group-chat-page-shell .v2ray-config-actions > .btn-copy-v2ray {
                flex: 0 0 100%;
                width: 100%;
                justify-content: center;
                padding: 0.34rem 0.34rem;
                border-radius: 10px;
                margin: 0;
                gap: 0.22rem;
                font-size: 0.74rem;
            }

            .group-chat-page-shell .v2ray-config-actions > .v2ray-app-download-btn,
            .group-chat-page-shell .v2ray-config-actions > .config-action-btn {
                flex: 1 1 calc(50% - 0.175rem);
                max-width: calc(50% - 0.175rem);
                min-width: 0;
                justify-content: center;
                padding: 0.45rem 0.5rem;
                border-radius: 10px;
                margin: 0;
                gap: 0.22rem;
                font-size: 0.8rem;
            }

            .group-chat-page-shell .v2ray-config-actions .btn-copy-v2ray-icon,
            .group-chat-page-shell .v2ray-config-actions .message-file-type-icon,
            .group-chat-page-shell .v2ray-config-actions .config-action-fa-icon {
                width: 15px;
                height: 15px;
                font-size: 0.85rem;
                line-height: 1;
            }

            .group-chat-page-shell .v2ray-config-actions > * + * {
                margin-right: 0;
            }

            .group-chat-page-shell .group-item {
                padding: 0.9rem;
                border-radius: 20px;
            }

            .group-chat-page-shell .message-avatar,
            .group-chat-page-shell .message-avatar-wrapper > img,
            .group-chat-page-shell .message-avatar-initials {
                --message-avatar-size: 38px;
                width: var(--message-avatar-size);
                height: var(--message-avatar-size);
            }

            .group-chat-page-shell .message-avatar-wrapper .verified-badge-avatar {
                --message-verify-size: 20px;
                width: var(--message-verify-size);
                height: var(--message-verify-size);
                min-width: var(--message-verify-size);
                min-height: var(--message-verify-size);
                bottom: -6px;
                right: -1px;
            }

            .group-chat-page-shell .message-reactions {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .group-chat-page-shell .message-reactions::-webkit-scrollbar {
                display: none;
            }

            .group-chat-page-shell .reaction-btn {
                flex: 0 0 auto;
                padding: 0.36rem 0.56rem;
                font-size: 0.78rem;
                gap: 0.2rem;
            }
        }


        /* ===== Music group mode / Spotify-like experience ===== */
        body.music-group-mode,
        .group-chat-page-shell.music-group-mode {
            --music-surface-1: #071120;
            --music-surface-2: #0a1730;
            --music-surface-3: #112240;
            --music-border: rgba(148, 163, 184, 0.18);
            --music-text: #f8fafc;
            --music-muted: #9fb2d7;
            --music-accent: #22c55e;
            --music-accent-2: #60a5fa;
            direction: rtl;
        }
        body.music-group-mode {
            scrollbar-color: #334155 #0b1220;
            scrollbar-gutter: stable both-edges;
        }
        body.music-group-mode::-webkit-scrollbar {
            width: 12px;
            background: #0b1220;
        }
        body.music-group-mode::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #334155, #1e293b);
            border-radius: 999px;
            border: 2px solid #0b1220;
        }
        body.music-group-mode::-webkit-scrollbar-track {
            background: #0b1220;
        }
        body.music-group-mode .chat-messages,
        body.music-group-mode .groups-list,
        body.music-group-mode .side-members-body {
            scrollbar-color: #334155 #0b1220;
        }
        body.music-group-mode .chat-messages::-webkit-scrollbar,
        body.music-group-mode .groups-list::-webkit-scrollbar,
        body.music-group-mode .side-members-body::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background: #0b1220;
        }
        body.music-group-mode .chat-messages::-webkit-scrollbar-track,
        body.music-group-mode .groups-list::-webkit-scrollbar-track,
        body.music-group-mode .side-members-body::-webkit-scrollbar-track {
            background: #0b1220;
        }
        body.music-group-mode .chat-messages::-webkit-scrollbar-thumb,
        body.music-group-mode .groups-list::-webkit-scrollbar-thumb,
        body.music-group-mode .side-members-body::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #334155, #1e293b);
            border-radius: 999px;
            border: 2px solid #0b1220;
        }
        body.music-group-mode .header.container {
            background: linear-gradient(180deg, rgba(6, 13, 26, 0.98), rgba(10, 18, 34, 0.98));
            border-bottom: 1px solid var(--music-border);
        }
        body.music-group-mode .header.container .header-content,
        body.music-group-mode .header.container .logo,
        body.music-group-mode .header.container .logo i,
        body.music-group-mode .header.container .mobile-nav-btn,
        body.music-group-mode .header.container .mobile-nav-btn i {
            color: var(--music-text) !important;
        }
        body.music-group-mode .header.container .mobile-nav-btn,
        body.music-group-mode .header.container .header-content .desktop-nav a {
            background: rgba(15, 23, 42, 0.4);
            border-color: var(--music-border);
        }
        body.music-group-mode .header.container .desktop-nav a,
        body.music-group-mode .header.container .desktop-nav a i {
            color: var(--music-text) !important;
        }
        body.music-group-mode .header.container .desktop-nav a:hover,
        body.music-group-mode .header.container .desktop-nav a.active {
            background: rgba(34, 197, 94, 0.18);
            color: #dcfce7 !important;
        }
        body.music-group-mode .group-chat-page-shell {
            max-width: 1600px;
        }
        body.music-group-mode .group-chat-container,
        body.music-group-mode .chat-area,
        body.music-group-mode .groups-sidebar,
        body.music-group-mode .side-members-list,
        body.music-group-mode .chat-header,
        body.music-group-mode .chat-input-area {
            background: linear-gradient(180deg, rgba(6,13,26,0.98), rgba(10,18,34,0.98));
            color: var(--music-text);
        }
        body.music-group-mode .group-chat-sidebar-column .groups-sidebar,
        body.music-group-mode .group-chat-sidebar-column .side-members-list,
        body.music-group-mode .chat-area {
            border-color: var(--music-border);
            box-shadow: 0 24px 60px rgba(2, 6, 23, 0.32);
        }
        body.music-group-mode .chat-header,
        body.music-group-mode .chat-input-area,
        body.music-group-mode .groups-header,
        body.music-group-mode .side-members-header {
            border-color: var(--music-border);
        }
        body.music-group-mode .chat-input-area.music-feedback-awaiting {
            position: relative;
            box-shadow: 0 -10px 28px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(148,163,184,0.04);
        }
        body.music-group-mode .chat-input-area.music-feedback-awaiting .modern-composer {
            opacity: 0.62;
            filter: saturate(0.86);
        }


        /* ===== Movie group mode / cinema-like experience ===== */
        body.movie-group-mode,
        .group-chat-page-shell.movie-group-mode {
            --movie-surface-1: #050913;
            --movie-surface-2: #091225;
            --movie-surface-3: #0f1b33;
            --movie-border: rgba(148, 163, 184, 0.18);
            --movie-text: #f8fafc;
            --movie-muted: #b8c4d9;
            --movie-accent: #ef4444;
            --movie-accent-2: #f59e0b;
            direction: rtl;
            background: linear-gradient(180deg, #04070f 0%, #08111f 100%);
        }
        body.movie-group-mode {
            scrollbar-color: #334155 #0b1220;
            scrollbar-gutter: stable both-edges;
        }
        body.movie-group-mode::-webkit-scrollbar,
        body.movie-group-mode *::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background: #0b1220;
        }
        body.movie-group-mode::-webkit-scrollbar-thumb,
        body.movie-group-mode *::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #334155, #1e293b);
            border-radius: 999px;
            border: 2px solid #0b1220;
        }
        body.movie-group-mode::-webkit-scrollbar-track,
        body.movie-group-mode *::-webkit-scrollbar-track {
            background: #0b1220;
        }
        body.movie-group-mode,
        body.movie-group-mode .site-shell,
        body.movie-group-mode .page-shell,
        body.movie-group-mode .page-content,
        body.movie-group-mode .group-chat-page-shell,
        body.movie-group-mode #groupChatPageContent,
        body.movie-group-mode .group-chat-container,
        body.movie-group-mode .group-chat-sidebar-column,
        body.movie-group-mode .chat-area,
        body.movie-group-mode .groups-sidebar,
        body.movie-group-mode .side-members-list,
        body.movie-group-mode .chat-header,
        body.movie-group-mode .chat-messages,
        body.movie-group-mode .chat-input-area,
        body.movie-group-mode .groups-header,
        body.movie-group-mode .side-members-header,
        body.movie-group-mode .composer-plus-menu,
        body.movie-group-mode .emoji-picker-panel,
        body.movie-group-mode #chatMessages,
        body.movie-group-mode #chatMessagesContent {
            background: linear-gradient(180deg, rgba(5,9,19,0.985), rgba(8,17,31,0.985));
            color: var(--movie-text);
        }
        body.movie-group-mode .header.container {
            background: linear-gradient(180deg, rgba(5,9,19,0.99), rgba(8,17,31,0.99));
            border-bottom: 1px solid var(--movie-border);
            box-shadow: 0 18px 42px rgba(0,0,0,0.28);
        }
        body.movie-group-mode .header.container .header-content,
        body.movie-group-mode .header.container .logo,
        body.movie-group-mode .header.container .logo i,
        body.movie-group-mode .header.container .mobile-nav-btn,
        body.movie-group-mode .header.container .mobile-nav-btn i,
        body.movie-group-mode .header.container .desktop-nav a,
        body.movie-group-mode .header.container .desktop-nav a i {
            color: var(--movie-text) !important;
        }
        body.movie-group-mode .header.container .mobile-nav-btn,
        body.movie-group-mode .header.container .header-content .desktop-nav a {
            background: rgba(15, 23, 42, 0.4);
            border-color: var(--movie-border);
        }
        body.movie-group-mode .header.container .desktop-nav a:hover,
        body.movie-group-mode .header.container .desktop-nav a.active {
            background: rgba(239, 68, 68, 0.18);
            color: #fee2e2 !important;
        }
        body.movie-group-mode .group-chat-page-shell {
            max-width: 1600px;
        }
        body.movie-group-mode .group-chat-sidebar-column .groups-sidebar,
        body.movie-group-mode .group-chat-sidebar-column .side-members-list,
        body.movie-group-mode .chat-area,
        body.movie-group-mode .movie-modal-dialog,
        body.movie-group-mode .movie-panel,
        body.movie-group-mode .movie-admin-list-item,
        body.movie-group-mode .movie-watch-item,
        body.movie-group-mode .movie-episode-card,
        body.movie-group-mode .movie-review-card {
            border-color: var(--movie-border);
            box-shadow: 0 24px 60px rgba(2, 6, 23, 0.32);
        }
        body.movie-group-mode .chat-header,
        body.movie-group-mode .chat-input-area,
        body.movie-group-mode .groups-header,
        body.movie-group-mode .side-members-header {
            border-color: var(--movie-border);
        }
        body.movie-group-mode .chat-header,
        body.movie-group-mode .chat-header *,
        body.movie-group-mode .group-chat-page-shell .chat-header-info h3,
        body.movie-group-mode .group-chat-page-shell .chat-header-meta,
        body.movie-group-mode .group-chat-page-shell .chat-header-actions .btn-icon,
        body.movie-group-mode .group-chat-page-shell .back-to-groups {
            color: var(--movie-text) !important;
        }
        body.movie-group-mode .group-chat-page-shell .chat-header-actions .btn-icon,
        body.movie-group-mode .group-chat-page-shell .back-to-groups,
        body.movie-group-mode .btn-icon {
            background: rgba(15,23,42,0.92);
            border-color: rgba(148,163,184,0.22);
            box-shadow: 0 10px 24px rgba(2,6,23,0.24);
        }
        body.movie-group-mode .group-chat-page-shell .chat-messages {
            background: linear-gradient(180deg, rgba(5,9,19,0.985), rgba(8,17,31,0.985));
        }
        body.movie-group-mode .group-chat-page-shell .message-body,
        body.movie-group-mode .group-chat-page-shell .reply-preview,
        body.movie-group-mode .group-chat-page-shell .media-preview-box,
        body.movie-group-mode .group-chat-page-shell .schedule-inline-panel,
        body.movie-group-mode .group-chat-page-shell .modern-composer,
        body.movie-group-mode .group-chat-page-shell .input-wrapper,
        body.movie-group-mode .group-chat-page-shell .chat-textarea,
        body.movie-group-mode .group-chat-page-shell .composer-plus-menu,
        body.movie-group-mode .group-chat-page-shell .emoji-picker-panel,
        body.movie-group-mode .group-chat-page-shell .group-item,
        body.movie-group-mode .group-chat-page-shell .side-member-item,
        body.movie-group-mode .group-chat-page-shell .side-group-item,
        body.movie-group-mode .group-chat-page-shell .suggested-group-card {
            background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(8,18,32,0.96));
            border-color: rgba(148,163,184,0.18);
            color: var(--movie-text);
        }
        body.movie-group-mode .group-chat-page-shell .group-item:hover,
        body.movie-group-mode .group-chat-page-shell .side-member-item:hover,
        body.movie-group-mode .group-chat-page-shell .side-group-item:hover,
        body.movie-group-mode .group-chat-page-shell .suggested-group-card:hover {
            background: linear-gradient(180deg, rgba(19,31,53,0.98), rgba(11,20,35,0.98));
        }
        body.movie-group-mode .group-chat-page-shell .group-item.active,
        body.movie-group-mode .group-chat-page-shell .side-group-item.active {
            border-color: rgba(239,68,68,0.34);
            box-shadow: 0 16px 36px rgba(239,68,68,0.16);
        }
        body.movie-group-mode .group-chat-page-shell .chat-textarea,
        body.movie-group-mode .group-chat-page-shell .chat-textarea::placeholder,
        body.movie-group-mode .group-chat-page-shell .message-time,
        body.movie-group-mode .group-chat-page-shell .group-meta,
        body.movie-group-mode .group-chat-page-shell .group-city,
        body.movie-group-mode .movie-hub-subtitle,
        body.movie-group-mode .movie-card-meta,
        body.movie-group-mode .movie-detail-meta,
        body.movie-group-mode .movie-summary-card span {
            color: var(--movie-muted) !important;
        }
        body.movie-group-mode .group-chat-page-shell .chat-textarea {
            caret-color: #fff;
        }
        body.movie-group-mode .group-chat-page-shell .chat-textarea:focus {
            box-shadow: 0 0 0 3px rgba(239,68,68,0.14);
        }
        body.movie-group-mode .movie-toolbar-panel,
        body.movie-group-mode .movie-hub-hero,
        body.movie-group-mode .movie-panel,
        body.movie-group-mode .movie-hub-summary,
        body.movie-group-mode .movie-card,
        body.movie-group-mode .movie-modal-dialog,
        body.movie-group-mode .movie-player-shell,
        body.movie-group-mode .movie-summary-card,
        body.movie-group-mode .movie-watch-item,
        body.movie-group-mode .movie-admin-list-item,
        body.movie-group-mode .movie-episode-card,
        body.movie-group-mode .movie-review-card {
            background-color: #091225;
        }
        body.movie-group-mode .movie-btn.primary {
            box-shadow: 0 14px 34px rgba(239,68,68,.34);
        }
        body.movie-group-mode .movie-btn.secondary,
        body.movie-group-mode .movie-mini-btn,
        body.movie-group-mode .movie-chip,
        body.movie-group-mode .movie-card-topline,
        body.movie-group-mode .movie-trailer-badge {
            background: rgba(255,255,255,.08);
            border-color: rgba(255,255,255,.12);
        }
        body.movie-group-mode .movie-btn.ghost {
            background: #fff;
            color: #0f172a;
        }
        body.movie-group-mode .movie-review-form input,
        body.movie-group-mode .movie-review-form select,
        body.movie-group-mode .movie-review-form textarea,
        body.movie-group-mode .movie-admin-form input,
        body.movie-group-mode .movie-admin-form select,
        body.movie-group-mode .movie-admin-form textarea {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.14);
            color: #fff;
        }
        @media (max-width: 768px) {
            body.movie-group-mode,
            body.movie-group-mode .group-chat-page-shell,
            body.movie-group-mode #groupChatPageContent,
            body.movie-group-mode .group-chat-container,
            body.movie-group-mode .chat-area,
            body.movie-group-mode .chat-header,
            body.movie-group-mode .chat-messages,
            body.movie-group-mode .chat-input-area {
                background: linear-gradient(180deg, rgba(5,9,19,1), rgba(8,17,31,1));
            }
            body.movie-group-mode .header.container {
                background: linear-gradient(180deg, rgba(5,9,19,1), rgba(8,17,31,1));
            }
        }
        body.music-group-mode .chat-input-area.music-feedback-awaiting .chat-textarea,
        body.music-group-mode .chat-input-area.music-feedback-awaiting .btn-icon,
        body.music-group-mode .chat-input-area.music-feedback-awaiting .composer-plus-menu-wrap,
        body.music-group-mode .chat-input-area.music-feedback-awaiting .emoji-picker-container {
            pointer-events: none;
        }
        body.music-group-mode .chat-input-area.music-feedback-awaiting .chat-textarea {
            cursor: not-allowed;
        }
        body.music-group-mode .music-composer-gate-hint {
            display: none !important;
            margin-top: 0.7rem;
            padding: 0.8rem 0.95rem;
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 0.9rem;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,0.18);
            background: linear-gradient(180deg, rgba(8,18,32,0.96), rgba(10,19,36,0.96));
            color: #dbeafe;
            box-shadow: 0 12px 26px rgba(2, 6, 23, 0.2);
        }
        body.music-group-mode .music-composer-gate-hint span {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            color: #dbeafe;
            font-size: 0.88rem;
            font-weight: 600;
        }
        body.music-group-mode .music-composer-gate-hint i {
            color: #60a5fa;
        }
        body.music-group-mode .music-composer-gate-btn {
            border: 1px solid rgba(96, 165, 250, 0.22);
            background: linear-gradient(135deg, rgba(37,99,235,0.96), rgba(29,78,216,0.96));
            color: #eff6ff;
            border-radius: 999px;
            padding: 0.58rem 0.95rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(30,64,175,0.24);
            white-space: nowrap;
        }
        body.music-group-mode .music-composer-gate-btn:hover {
            transform: translateY(-1px);
        }
        @media (max-width: 770px) {
            body.music-group-mode .music-composer-gate-hint {
                flex-direction: column;
                align-items: stretch;
            }
            body.music-group-mode .music-composer-gate-btn {
                width: 100%;
            }
        }
        body.music-group-mode .group-chat-page-shell .chat-header {
            background: linear-gradient(180deg, rgba(6,13,26,0.98), rgba(10,18,34,0.98)) !important;
            border-bottom-color: var(--music-border) !important;
        }
        body.music-group-mode .groups-header h2,
        body.music-group-mode #chatGroupName,
        body.music-group-mode .side-members-header,
        body.music-group-mode .side-member-name,
        body.music-group-mode .side-group-name,
        body.music-group-mode .group-info-name,
        body.music-group-mode .group-info-members,
        body.music-group-mode .chat-header-meta,
        body.music-group-mode .chat-group-name-link,
        body.music-group-mode .chat-group-name-line,
        body.music-group-mode .chat-header-info,
        body.music-group-mode .group-search-box input,
        body.music-group-mode .message-sender-link,
        body.music-group-mode .message-time {
            color: var(--music-text);
        }
        body.music-group-mode .chat-header-meta,
        body.music-group-mode .side-group-meta,
        body.music-group-mode .side-member-name,
        body.music-group-mode .group-search-box i,
        body.music-group-mode .group-search-box input::placeholder,
        body.music-group-mode .header-stat-chip,
        body.music-group-mode .group-random-video-btn span,
        body.music-group-mode .members-count,
        body.music-group-mode .message-time,
        body.music-group-mode .message-track-artist,
        body.music-group-mode .music-track-artist,
        body.music-group-mode .music-track-plays,
        body.music-group-mode .music-chart-subtitle,
        body.music-group-mode .music-chart-empty,
        body.music-group-mode .persistent-music-subtitle {
            color: var(--music-muted) !important;
        }
        body.music-group-mode .btn-icon,
        body.music-group-mode .side-toggle-btn,
        body.music-group-mode .group-random-video-btn,
        body.music-group-mode .group-search-box input,
        body.music-group-mode .composer-plus-menu,
        body.music-group-mode .chat-textarea,
        body.music-group-mode .input-wrapper,
        body.music-group-mode .message-content,
        body.music-group-mode .group-info-modal .group-info-content {
            background: rgba(15, 23, 42, 0.88);
            color: var(--music-text);
            border-color: var(--music-border);
        }
        body.music-group-mode .group-random-video-btn,
        body.music-group-mode .side-toggle-btn,
        body.music-group-mode .group-search-box input,
        body.music-group-mode .header-stat-chip,
        body.music-group-mode .composer-plus-menu,
        body.music-group-mode .composer-menu-item,
        body.music-group-mode .chat-textarea,
        body.music-group-mode .btn-icon,
        body.music-group-mode .group-info-btn,
        body.music-group-mode .group-info-media-item,
        body.music-group-mode .media-preview-box {
            border-color: var(--music-border);
        }
        body.music-group-mode .chat-textarea,
        body.music-group-mode .composer-menu-item,
        body.music-group-mode .group-info-btn,
        body.music-group-mode .group-info-media-item,
        body.music-group-mode .btn-icon,
        body.music-group-mode .group-random-video-btn,
        body.music-group-mode .side-toggle-btn,
        body.music-group-mode .header-stat-chip {
            color: var(--music-text);
        }
        body.music-group-mode .chat-textarea:focus,
        body.music-group-mode .group-search-box input:focus {
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
            border-color: rgba(34, 197, 94, 0.35);
        }
        body.music-group-mode .chat-messages {
            background:
                radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 26%),
                radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 22%),
                linear-gradient(180deg, #071120, #0a1324 50%, #0b1427 100%);
        }
        body.music-group-mode #chatMessagesContent {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 0 1rem 1.25rem;
        }
        body.music-group-mode #chatMessages,
        body.music-group-mode #chatInputArea,
        body.music-group-mode .chat-input-area,
        body.music-group-mode .composer-plus-inline-slot {
            background: linear-gradient(180deg, #071120 0%, #0a1324 100%) !important;
        }
        body.music-group-mode .input-wrapper,
        body.music-group-mode .chat-textarea,
        body.music-group-mode .reply-preview,
        body.music-group-mode .media-preview-box,
        body.music-group-mode .composer-plus-menu,
        body.music-group-mode .composer-menu-item,
        body.music-group-mode .message-content {
            background: rgba(10, 19, 36, 0.94) !important;
            color: var(--music-text) !important;
            border-color: var(--music-border) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-body,
        body.music-group-mode .group-chat-page-shell .message-body,
        .group-chat-page-shell.music-group-mode .message-body {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(10, 19, 36, 0.96) 100%) !important;
            color: var(--music-text) !important;
            border-color: var(--music-border) !important;
            box-shadow: 0 12px 28px rgba(2, 6, 23, 0.42);
        }
        html.music-group-mode .group-chat-page-shell .message-item.message-own .message-body,
        html.music-group-mode .group-chat-page-shell .message-body.message-own,
        body.music-group-mode .group-chat-page-shell .message-item.message-own .message-body,
        body.music-group-mode .group-chat-page-shell .message-body.message-own,
        .group-chat-page-shell.music-group-mode .message-item.message-own .message-body,
        .group-chat-page-shell.music-group-mode .message-body.message-own {
            background: linear-gradient(180deg, rgba(20, 48, 36, 0.95) 0%, rgba(10, 32, 25, 0.95) 100%) !important;
            border-color: rgba(34, 197, 94, 0.34) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link),
        html.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):visited,
        html.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):hover,
        html.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):active,
        html.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):focus,
        body.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link),
        body.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):visited,
        body.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):hover,
        body.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):active,
        body.music-group-mode .group-chat-page-shell .message-body a:not(.telegram-proxy-link):focus,
        .group-chat-page-shell.music-group-mode .message-body a:not(.telegram-proxy-link),
        .group-chat-page-shell.music-group-mode .message-body a:not(.telegram-proxy-link):visited,
        .group-chat-page-shell.music-group-mode .message-body a:not(.telegram-proxy-link):hover,
        .group-chat-page-shell.music-group-mode .message-body a:not(.telegram-proxy-link):active,
        .group-chat-page-shell.music-group-mode .message-body a:not(.telegram-proxy-link):focus {
            color: #bfdbfe !important;
        }
        body.music-group-mode .chat-textarea::placeholder,
        body.music-group-mode .reply-preview-text,
        body.music-group-mode .media-preview-subtitle {
            color: #90a5ca !important;
        }
        html.music-group-mode .group-chat-page-shell .message-time,
        body.music-group-mode .group-chat-page-shell .message-time,
        .group-chat-page-shell.music-group-mode .message-time {
            background: rgba(30, 41, 59, 0.9) !important;
            border-color: rgba(148, 163, 184, 0.22) !important;
            color: #f8fafc !important;
            box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-body,
        body.music-group-mode .group-chat-page-shell .message-body,
        .group-chat-page-shell.music-group-mode .message-body {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(8, 18, 32, 0.97) 100%) !important;
            border: 1px solid rgba(148, 163, 184, 0.18) !important;
            color: #e5eefc !important;
        }
        html.music-group-mode .group-chat-page-shell .message-item.message-own .message-body,
        body.music-group-mode .group-chat-page-shell .message-item.message-own .message-body,
        .group-chat-page-shell.music-group-mode .message-item.message-own .message-body {
            background: linear-gradient(180deg, rgba(19, 48, 35, 0.97) 0%, rgba(10, 32, 25, 0.97) 100%) !important;
            border-color: rgba(34, 197, 94, 0.28) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-body > div,
        html.music-group-mode .group-chat-page-shell .message-body > span,
        body.music-group-mode .group-chat-page-shell .message-body > div,
        body.music-group-mode .group-chat-page-shell .message-body > span,
        .group-chat-page-shell.music-group-mode .message-body > div,
        .group-chat-page-shell.music-group-mode .message-body > span {
            background: transparent !important;
            color: #e5eefc !important;
        }
        body.music-group-mode .chat-header-meta,
        body.music-group-mode .chat-group-subline,
        body.music-group-mode .music-metric-chip,
        body.music-group-mode .music-highlight-stat,
        body.music-group-mode .music-chart-track-artist,
        body.music-group-mode .music-chart-track-date,
        body.music-group-mode .music-chart-track-plays {
            direction: rtl;
            unicode-bidi: plaintext;
        }
        body.music-group-mode .reply-preview-author,
        body.music-group-mode .media-preview-title {
            color: #f8fafc !important;
        }
        .music-number-inline {
            display: inline-block;
            direction: ltr;
            unicode-bidi: isolate;
            font-variant-numeric: tabular-nums;
        }
        .music-value-pair {
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
        }
        body.music-group-mode .load-older-wrap {
            margin: 0 0 0.25rem;
        }
        body.music-group-mode .music-discussion-intro,
        .group-chat-page-shell.music-group-mode .music-discussion-intro,
        .music-discussion-intro {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.1rem;
            border-radius: 22px;
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(11,18,32,0.94), rgba(10,18,34,0.94));
            box-shadow: 0 18px 40px rgba(2, 6, 23, 0.2);
            direction: rtl;
        }
        body.music-group-mode .music-discussion-intro-copy,
        .group-chat-page-shell.music-group-mode .music-discussion-intro-copy,
        .music-discussion-intro-copy {
            min-width: 0;
        }
        body.music-group-mode .music-discussion-intro,
        .group-chat-page-shell.music-group-mode .music-discussion-intro,
        .music-discussion-intro {
            margin: 0 0 1rem;
            position: relative;
            overflow: hidden;
        }
        body.music-group-mode .music-discussion-intro::before,
        .group-chat-page-shell.music-group-mode .music-discussion-intro::before,
        .music-discussion-intro::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(56,189,248,0.12), transparent 28%), radial-gradient(circle at bottom left, rgba(34,197,94,0.10), transparent 30%);
            pointer-events: none;
        }
        body.music-group-mode .music-discussion-intro-copy,
        body.music-group-mode .music-discussion-badge,
        .group-chat-page-shell.music-group-mode .music-discussion-intro-copy,
        .group-chat-page-shell.music-group-mode .music-discussion-badge,
        .music-discussion-intro-copy,
        .music-discussion-badge {
            position: relative;
            z-index: 1;
        }
        #chatMessagesContent.music-discussion-hidden-empty {
            padding-top: 0 !important;
        }
        #chatMessagesContent.music-discussion-hidden-empty .load-older-container,
        #chatMessagesContent.music-discussion-hidden-empty .music-discussion-intro,
        #chatMessagesContent.music-discussion-hidden-empty .group-chat-date-separator,
        #chatMessagesContent.music-discussion-hidden-empty .message-item,
        #chatMessagesContent.music-discussion-hidden-empty .empty-state {
            display: none !important;
        }
        body.music-group-mode .music-discussion-kicker,
        .group-chat-page-shell.music-group-mode .music-discussion-kicker,
        .music-discussion-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: #86efac;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.02em;
        }
        body.music-group-mode .music-discussion-title,
        .group-chat-page-shell.music-group-mode .music-discussion-title,
        .music-discussion-title {
            margin-top: 0.35rem;
            color: #fff;
            font-size: 1.05rem;
            font-weight: 800;
        }
        body.music-group-mode .music-discussion-subtitle,
        .group-chat-page-shell.music-group-mode .music-discussion-subtitle,
        .music-discussion-subtitle {
            margin-top: 0.28rem;
            color: var(--music-muted);
            font-size: 0.88rem;
            line-height: 1.8;
        }
        body.music-group-mode .music-discussion-badge,
        .group-chat-page-shell.music-group-mode .music-discussion-badge,
        body.music-group-mode .music-discussion-badg,
        .group-chat-page-shell.music-group-mode .music-discussion-badg,
        .music-discussion-badge,
        .music-discussion-badg {
            flex: 0 0 auto;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.05);
            color: #fff;
            font-size: 0.82rem;
            font-weight: 800;
            white-space: nowrap;
        }
        body.music-group-mode .chat-e2ee-notice {
            background: rgba(15, 23, 42, 0.94);
            color: #dbeafe;
            border-color: rgba(96, 165, 250, 0.28);
        }
        .music-group-dashboard {
            display: none;
            padding: 1rem 1rem 0.5rem;
            direction: rtl;
            text-align: right;
        }
        .music-group-dashboard.active {
            display: block;
        }
        .music-dashboard-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
            gap: 1rem;
            align-items: stretch;
        }
        .music-hero-card,
        .music-chart-card,
        .music-highlight-card {
            border-radius: 26px;
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(11,18,32,0.96), rgba(10,18,34,0.96));
            box-shadow: 0 28px 55px rgba(2, 6, 23, 0.35);
            overflow: hidden;
        }
        .music-hero-card {
            padding: 1.4rem 1.4rem 1.2rem;
            min-height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background:
                radial-gradient(circle at 8% 15%, rgba(96, 165, 250, 0.18), transparent 24%),
                radial-gradient(circle at 90% 20%, rgba(34, 197, 94, 0.14), transparent 22%),
                linear-gradient(135deg, #17305b 0%, #102646 48%, #0a1b34 100%);
        }
        .music-hero-overline {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
            color: rgba(255,255,255,0.82);
            letter-spacing: 0.03em;
            font-weight: 700;
            text-transform: uppercase;
        }
        .music-hero-title {
            margin: 0.55rem 0 0;
            color: #fff;
            font-size: clamp(2rem, 3vw, 3.7rem);
            font-weight: 900;
            line-height: 1;
        }
        .music-hero-description {
            margin-top: 0.75rem;
            color: rgba(255,255,255,0.78);
            font-size: 0.95rem;
            max-width: 760px;
        }
        .music-hero-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            margin-top: 1rem;
        }
        .music-metric-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            padding: 0.5rem 0.8rem;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.1);
            color: #fff;
            font-size: 0.82rem;
            font-weight: 700;
        }
        .music-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.7rem;
            margin-top: 1rem;
        }
        .music-primary-btn,
        .music-secondary-btn {
            border: none;
            border-radius: 999px;
            padding: 0.8rem 1.2rem;
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            cursor: pointer;
            font-weight: 800;
            text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
        }
        .music-primary-btn {
            background: #22c55e;
            color: #04110a;
            box-shadow: 0 18px 35px rgba(34, 197, 94, 0.22);
        }
        .music-secondary-btn {
            background: rgba(255,255,255,0.08);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .music-primary-btn:hover,
        .music-secondary-btn:hover {
            transform: translateY(-1px);
            opacity: 0.96;
        }
        .music-highlight-card {
            padding: 1.15rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.95rem;
            background:
                linear-gradient(180deg, rgba(13,23,42,0.97), rgba(15,23,42,0.97)),
                radial-gradient(circle at top right, rgba(250,204,21,0.08), transparent 28%);
        }
        .music-highlight-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }
        .music-highlight-badge {
            width: 58px;
            height: 58px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(34,197,94,0.24), rgba(59,130,246,0.22));
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }
        .music-highlight-caption {
            font-size: 0.82rem;
            color: var(--music-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .music-highlight-title {
            margin-top: 0.3rem;
            color: #fff;
            font-size: 1.15rem;
            font-weight: 800;
            line-height: 1.45;
        }
        .music-highlight-artist {
            margin-top: 0.3rem;
            color: var(--music-muted);
            font-size: 0.9rem;
        }
        .music-highlight-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
        }
        .music-highlight-stat {
            border-radius: 16px;
            background: rgba(255,255,255,0.05);
            padding: 0.75rem 0.8rem;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .music-highlight-stat-label {
            display: block;
            color: var(--music-muted);
            font-size: 0.76rem;
            margin-bottom: 0.32rem;
        }
        .music-highlight-stat strong {
            display: block;
            font-size: 1rem;
            color: #fff;
        }
        .music-chart-card {
            margin-top: 1rem;
        }
        .music-chart-head {
            padding: 1rem 1.15rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .music-chart-headline {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .music-chart-title {
            font-size: 1.05rem;
            font-weight: 800;
            color: #fff;
        }
        .music-chart-subtitle {
            font-size: 0.83rem;
        }
        .music-chart-table {
            direction: ltr;
            width: 100%;
            overflow-x: auto;
        }
        .music-chart-row {
            display: grid;
            grid-template-columns: 52px minmax(320px, 1.9fr) minmax(120px, 0.7fr) minmax(90px, 0.55fr) 56px;
            gap: 0.75rem;
            align-items: center;
            padding: 0.8rem 1.1rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            color: #dbeafe;
        }
        .music-chart-row.header {
            font-size: 0.73rem;
            color: #8aa0c6;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 700;
            background: rgba(255,255,255,0.02);
        }
        .music-chart-row.track {
            transition: background 0.18s ease, transform 0.18s ease;
        }
        .music-chart-row.track:hover {
            background: rgba(255,255,255,0.04);
        }
        .music-chart-row.track.is-current {
            background: linear-gradient(90deg, rgba(34,197,94,0.12), rgba(59,130,246,0.08));
        }
        .music-chart-rank {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #fff;
            font-weight: 800;
        }
        .music-chart-rank-badge {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .music-chart-rank-badge.top-rank {
            background: linear-gradient(135deg, rgba(250,204,21,0.18), rgba(249,115,22,0.18));
            color: #fde68a;
        }
        .music-chart-track {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            min-width: 0;
        }
        .music-chart-album {
            color: var(--music-muted);
            font-size: 0.84rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .music-chart-track-play {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, #22c55e, #3b82f6);
            background-size: cover;
            background-position: center;
            color: #072010;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            box-shadow: 0 12px 24px rgba(34,197,94,0.22);
        }
        .music-chart-track-play.has-cover {
            color: #ffffff;
            box-shadow: 0 12px 24px rgba(8,18,31,0.36);
        }
        .music-chart-track-play.has-cover i {
            text-shadow: 0 2px 6px rgba(0,0,0,0.5);
        }
        .music-chart-track-info {
            min-width: 0;
        }
        .music-chart-track-title {
            color: #fff;
            font-weight: 700;
            line-height: 1.45;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }
        .music-chart-track-title:hover {
            color: #86efac;
        }
        .music-chart-track-artist,
        .music-chart-track-date,
        .music-chart-track-plays {
            font-size: 0.86rem;
            color: var(--music-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .music-chart-track-plays strong {
            color: #fff;
            font-weight: 800;
        }
        .music-chart-jump-btn {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.03);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .music-chart-empty,
        .music-dashboard-skeleton {
            padding: 1.35rem;
            text-align: center;
        }
        .music-dashboard-skeleton-bar {
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
            background-size: 200% 100%;
            animation: musicSkeleton 1.3s linear infinite;
            margin-top: 0.8rem;
        }
        .music-dashboard-skeleton-bar.small { width: 42%; }
        .music-dashboard-skeleton-bar.medium { width: 68%; }
        .music-dashboard-skeleton-bar.full { width: 100%; }
        @keyframes musicSkeleton {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .music-track-card {
            border-radius: 22px;
            padding: 1rem;
            background:
                radial-gradient(circle at top left, rgba(59,130,246,0.14), transparent 34%),
                radial-gradient(circle at top right, rgba(34,197,94,0.14), transparent 38%),
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.97));
            border: 1px solid rgba(148, 163, 184, 0.32);
            box-shadow: 0 20px 42px rgba(2, 6, 23, 0.2);
            min-width: min(540px, 100%);
            width: min(100%, 560px);
            color: #0f172a;
        }
        .music-track-card.is-current {
            border-color: rgba(34,197,94,0.4);
            box-shadow: 0 18px 38px rgba(34,197,94,0.14);
        }
        .music-track-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
            margin-bottom: 0.8rem;
            direction: ltr;
        }
        .music-track-rank,
        .music-track-plays {
            font-size: 0.8rem;
            font-weight: 700;
            color: #475569;
        }
        .music-track-rank.is-top {
            color: #fde68a;
        }
        .music-track-main {
            display: grid;
            grid-template-columns: 54px minmax(0, 1fr);
            gap: 0.85rem;
            align-items: center;
        }
        .music-track-play-btn {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, #22c55e, #3b82f6);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 16px 28px rgba(34,197,94,0.2);
        }
        .music-track-play-btn.has-cover {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        }
        .music-track-play-btn.has-cover::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(2,6,23,0.05), rgba(2,6,23,0.45));
        }
        .music-track-play-btn.has-cover i {
            position: relative;
            z-index: 1;
        }
        .music-track-body {
            min-width: 0;
        }
        .music-track-title {
            color: #0f172a;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .music-track-artist {
            margin-top: 0.32rem;
            display: flex;
            align-items: center;
            gap: 0.38rem;
            font-size: 0.85rem;
            color: #475569;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .music-track-meta-sep {
            opacity: 0.5;
        }
        .music-track-card .music-wave {
            background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
            border: 1px solid rgba(148, 163, 184, 0.5);
        }
        .music-track-card .music-wave-progress {
            background: linear-gradient(90deg, rgba(34,197,94,0.3), rgba(37,99,235,0.26));
        }
        .music-group-mode .message-item.music-message-item {
            align-items: stretch;
        }
        .music-group-mode .message-item.music-message-item .message-content {
            background: transparent;
            box-shadow: none;
            border: none;
            padding: 0;
        }
        .music-group-mode .message-item.music-message-item .message-header {
            padding: 0 0.25rem 0.45rem;
            justify-content: flex-start;
            gap: 0.45rem;
        }
        .music-group-mode .message-item.music-message-item .message-sender {
            flex: 0 0 auto;
        }
        .music-group-mode .message-item.music-message-item .message-time {
            margin-inline-start: 0;
        }
        .music-group-mode .message-item.music-message-item .message-header.music-header-compact {
            justify-content: flex-end;
        }
        .music-group-mode .message-item.music-message-item .message-body {
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            max-width: min(100%, 620px);
        }
        .music-group-mode .message-item.music-message-item .message-reactions {
            margin-top: 0.65rem;
            padding: 0 0.15rem;
        }

        body.music-group-mode .group-chat-page-shell .message-content,
        body.music-group-mode .group-chat-page-shell .message-content *,
        .group-chat-page-shell.music-group-mode .message-content,
        .group-chat-page-shell.music-group-mode .message-content * {
            color: #e5eefc;
        }
        body.music-group-mode .group-chat-page-shell .message-sender-link,
        .group-chat-page-shell.music-group-mode .message-sender-link {
            color: #ffffff !important;
        }
        body.music-group-mode .group-chat-page-shell .message-avatar-initials,
        .group-chat-page-shell.music-group-mode .message-avatar-initials {
            background: linear-gradient(180deg, rgba(30,41,59,1), rgba(15,23,42,1)) !important;
            border: 1px solid rgba(148,163,184,0.28) !important;
            color: #dbeafe !important;
        }
        [data-music-group-mode="1"] .message-body,
        [data-music-group-mode="1"] .message-body * {
            color: #e5eefc !important;
        }
        [data-music-group-mode="1"] .message-time {
            background: rgba(30, 41, 59, 0.9) !important;
            border-color: rgba(148, 163, 184, 0.22) !important;
            color: #f8fafc !important;
        }
        [data-music-group-mode="1"] .message-avatar-initials {
            background: linear-gradient(180deg, rgba(30,41,59,1), rgba(15,23,42,1)) !important;
            border: 1px solid rgba(148,163,184,0.28) !important;
            color: #dbeafe !important;
        }
        html.music-group-mode,
        html.music-group-mode body,
        html.music-group-mode body * {
            scrollbar-color: #334155 #0b1220;
        }
        html.music-group-mode,
        html.music-group-mode body,
        html.music-group-mode .chat-messages,
        html.music-group-mode #chatMessages,
        html.music-group-mode .groups-list,
        html.music-group-mode .side-members-body {
            scrollbar-width: thin;
        }
        html.music-group-mode .group-chat-page-shell .chat-header,
        body.music-group-mode .group-chat-page-shell .chat-header,
        .group-chat-page-shell.music-group-mode .chat-header,
        [data-music-group-mode="1"] .chat-header {
            background: linear-gradient(180deg, rgba(8,18,32,0.98), rgba(10,19,36,0.98)) !important;
            border-bottom: 1px solid rgba(148,163,184,0.18) !important;
            box-shadow: 0 16px 34px rgba(2,6,23,0.22);
        }
        html.music-group-mode .group-chat-page-shell .chat-header *,
        body.music-group-mode .group-chat-page-shell .chat-header *,
        .group-chat-page-shell.music-group-mode .chat-header *,
        [data-music-group-mode="1"] .chat-header * {
            color: #e5eefc !important;
        }
        html.music-group-mode .group-chat-page-shell .chat-header .back-to-groups,
        html.music-group-mode .group-chat-page-shell .chat-header .btn-icon,
        body.music-group-mode .group-chat-page-shell .chat-header .back-to-groups,
        body.music-group-mode .group-chat-page-shell .chat-header .btn-icon,
        .group-chat-page-shell.music-group-mode .chat-header .back-to-groups,
        .group-chat-page-shell.music-group-mode .chat-header .btn-icon,
        [data-music-group-mode="1"] .chat-header .back-to-groups,
        [data-music-group-mode="1"] .chat-header .btn-icon {
            background: rgba(15,23,42,0.92) !important;
            border: 1px solid rgba(148,163,184,0.22) !important;
            color: #f8fafc !important;
            box-shadow: 0 10px 24px rgba(2,6,23,0.24) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn,
        body.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn,
        .group-chat-page-shell.music-group-mode .message-reactions .reaction-btn,
        [data-music-group-mode="1"] .message-reactions .reaction-btn {
            background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(8,18,32,0.96)) !important;
            border: 1px solid rgba(148,163,184,0.22) !important;
            color: #dbeafe !important;
            box-shadow: 0 8px 18px rgba(2,6,23,0.24) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn .reaction-count,
        body.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn .reaction-count,
        .group-chat-page-shell.music-group-mode .message-reactions .reaction-btn .reaction-count,
        [data-music-group-mode="1"] .message-reactions .reaction-btn .reaction-count {
            color: #e5eefc !important;
        }
        html.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn:hover,
        body.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn:hover,
        .group-chat-page-shell.music-group-mode .message-reactions .reaction-btn:hover,
        [data-music-group-mode="1"] .message-reactions .reaction-btn:hover {
            border-color: rgba(96,165,250,0.34) !important;
            background: linear-gradient(180deg, rgba(22,34,58,0.98), rgba(10,22,40,0.98)) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn.active-like,
        body.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn.active-like,
        .group-chat-page-shell.music-group-mode .message-reactions .reaction-btn.active-like,
        [data-music-group-mode="1"] .message-reactions .reaction-btn.active-like {
            background: rgba(16,185,129,0.16) !important;
            border-color: rgba(16,185,129,0.34) !important;
        }
        html.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn.active-dislike,
        body.music-group-mode .group-chat-page-shell .message-reactions .reaction-btn.active-dislike,
        .group-chat-page-shell.music-group-mode .message-reactions .reaction-btn.active-dislike,
        [data-music-group-mode="1"] .message-reactions .reaction-btn.active-dislike {
            background: rgba(239,68,68,0.14) !important;
            border-color: rgba(239,68,68,0.3) !important;
        }
        @media (min-width: 992px) {
            .music-group-mode .music-track-card {
                border-radius: 24px;
                padding: 1.05rem 1.1rem;
                background:
                    radial-gradient(circle at 10% 8%, rgba(56,189,248,0.2), transparent 30%),
                    radial-gradient(circle at 92% 15%, rgba(34,197,94,0.2), transparent 32%),
                    linear-gradient(135deg, #f8fbff 0%, #ecf4ff 45%, #eefaf5 100%);
                border: 1px solid rgba(59, 130, 246, 0.22);
                box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.72);
            }
            .music-group-mode .music-track-card .music-track-title {
                font-size: 1.02rem;
            }
            .music-group-mode .music-track-card .music-track-artist {
                font-weight: 600;
            }
            .music-group-mode .music-track-card .music-wave {
                height: 64px;
                border-radius: 12px;
                background: linear-gradient(180deg, #d7e8ff, #c5ddf9);
            }
        }
        .persistent-music-cover {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(34,197,94,0.24), rgba(59,130,246,0.24));
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            flex-shrink: 0;
        }
        .persistent-music-meta {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.08rem;
            max-width: 260px;
        }
        .persistent-music-subtitle {
            font-size: 0.72rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .music-group-mode .persistent-music-dock {
            background: linear-gradient(90deg, rgba(4,12,24,0.96), rgba(8,18,32,0.98));
            border-bottom-color: rgba(255,255,255,0.1);
        }
        .music-group-mode .side-member-item,
        .music-group-mode .side-group-item {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .music-group-mode .side-member-item:hover,
        .music-group-mode .side-group-item:hover,
        .music-group-mode .side-group-item.active {
            background: linear-gradient(90deg, rgba(34,197,94,0.1), rgba(59,130,246,0.08));
        }
        .music-group-mode .side-members-header {
            background: linear-gradient(90deg, rgba(34,197,94,0.12), rgba(59,130,246,0.12));
        }
        .music-group-mode .member-status-online { background: #22c55e; }
        .music-group-mode .member-status-in-chat { background: #38bdf8; }
        .music-group-mode .member-status-site-only { background: #f59e0b; }
        .music-message-highlight {
            animation: musicMessagePulse 1.35s ease;
        }
        @keyframes musicMessagePulse {
            0% { transform: translateY(0); }
            35% { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(34,197,94,0.22); }
            100% { transform: translateY(0); box-shadow: none; }
        }
        @media (max-width: 1100px) {
            .music-dashboard-grid {
                grid-template-columns: 1fr;
            }
            .music-highlight-card {
                min-height: 0;
            }
        }
        @media (max-width: 820px) {
            .music-group-dashboard {
                padding: 0.8rem 0.8rem 0.4rem;
            }
            .music-hero-card,
            .music-chart-card,
            .music-highlight-card {
                border-radius: 22px;
            }
            .music-hero-title {
                font-size: clamp(1.7rem, 8vw, 2.5rem);
            }
            .music-chart-row {
                grid-template-columns: 42px minmax(180px, 1fr) minmax(90px, 0.7fr) minmax(80px, 0.55fr) minmax(68px, 0.45fr) 42px;
                padding: 0.72rem 0.8rem;
                gap: 0.55rem;
            }
            .music-chart-track-play {
                width: 36px;
                height: 36px;
            }
            .music-track-card {
                min-width: 100%;
                width: 100%;
                padding: 0.8rem;
                border-radius: 18px;
            }
            .music-track-main {
                grid-template-columns: 48px minmax(0, 1fr);
                gap: 0.7rem;
            }
            .music-track-play-btn {
                width: 48px;
                height: 48px;
            }
            .music-group-mode .persistent-music-meta {
                max-width: 145px;
            }
            .music-discussion-intro {
                flex-direction: column;
                align-items: stretch;
                gap: 0.7rem;
            }
            .music-discussion-badge {
                width: fit-content;
            }
        }



        /* ===== Group chat theme bridge (light/dark sync) ===== */
        html.group-chat-force-dark,
        body.group-chat-force-dark {
            color-scheme: dark;
        }

        html.group-chat-force-dark body,
        body.group-chat-force-dark {
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 24%),
                radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.08), transparent 28%),
                linear-gradient(180deg, #06111f 0%, #081425 46%, #0a1628 100%) !important;
        }

        html.group-chat-force-dark .header.container,
        body.group-chat-force-dark .header.container,
        html.group-chat-force-dark .header.container .header-content,
        body.group-chat-force-dark .header.container .header-content,
        html.group-chat-force-dark .header.container .nav-menu.show,
        body.group-chat-force-dark .header.container .nav-menu.show,
        html.group-chat-force-dark .header.container #navMenu.show,
        body.group-chat-force-dark .header.container #navMenu.show {
            background: linear-gradient(135deg, rgba(7, 18, 32, 0.96), rgba(11, 24, 44, 0.96)) !important;
            color: #e5eefc !important;
            border-color: rgba(100, 116, 139, 0.28) !important;
            box-shadow: 0 18px 44px rgba(2, 8, 23, 0.38) !important;
        }

        html.group-chat-force-dark .header.container *,
        body.group-chat-force-dark .header.container * {
            color: inherit !important;
        }

        html.group-chat-force-dark .header.container .logo,
        html.group-chat-force-dark .header.container .logo i,
        html.group-chat-force-dark .header.container .logo svg,
        html.group-chat-force-dark .header.container .desktop-nav a,
        html.group-chat-force-dark .header.container .desktop-nav a i,
        html.group-chat-force-dark .header.container .desktop-nav a svg,
        html.group-chat-force-dark .header.container .mobile-nav-btn,
        html.group-chat-force-dark .header.container .mobile-nav-btn i,
        html.group-chat-force-dark .header.container .mobile-nav-btn svg,
        html.group-chat-force-dark .header.container .nav-menu,
        html.group-chat-force-dark .header.container #navMenu,
        body.group-chat-force-dark .header.container .logo,
        body.group-chat-force-dark .header.container .logo i,
        body.group-chat-force-dark .header.container .logo svg,
        body.group-chat-force-dark .header.container .desktop-nav a,
        body.group-chat-force-dark .header.container .desktop-nav a i,
        body.group-chat-force-dark .header.container .desktop-nav a svg,
        body.group-chat-force-dark .header.container .mobile-nav-btn,
        body.group-chat-force-dark .header.container .mobile-nav-btn i,
        body.group-chat-force-dark .header.container .mobile-nav-btn svg,
        body.group-chat-force-dark .header.container .nav-menu,
        body.group-chat-force-dark .header.container #navMenu {
            color: #f8fbff !important;
            fill: currentColor !important;
            stroke: currentColor !important;
        }

        html.group-chat-force-dark .header.container .desktop-nav a,
        body.group-chat-force-dark .header.container .desktop-nav a {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }

        html.group-chat-force-dark .header.container .desktop-nav a:hover,
        html.group-chat-force-dark .header.container .desktop-nav a.active,
        html.group-chat-force-dark .header.container .desktop-nav a[aria-current="page"],
        html.group-chat-force-dark .header.container .desktop-nav a[aria-current="true"],
        body.group-chat-force-dark .header.container .desktop-nav a:hover,
        body.group-chat-force-dark .header.container .desktop-nav a.active,
        body.group-chat-force-dark .header.container .desktop-nav a[aria-current="page"],
        body.group-chat-force-dark .header.container .desktop-nav a[aria-current="true"] {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
        }

        html.group-chat-force-dark .header.container .mobile-nav-btn,
        body.group-chat-force-dark .header.container .mobile-nav-btn {
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            box-shadow: none !important;
        }

        html.group-chat-force-dark .header.container .nav-menu,
        html.group-chat-force-dark .header.container #navMenu,
        body.group-chat-force-dark .header.container .nav-menu,
        body.group-chat-force-dark .header.container #navMenu {
            background: linear-gradient(180deg, rgba(7, 18, 32, 0.98), rgba(11, 24, 44, 0.98)) !important;
            border-color: rgba(100, 116, 139, 0.24) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell {
            color: #dbe7f5;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-sidebar,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-area,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-list,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-sidebar,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-area,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-list {
            background: linear-gradient(180deg, rgba(7, 18, 32, 0.88), rgba(10, 22, 40, 0.94)) !important;
            border-color: rgba(71, 85, 105, 0.34) !important;
            box-shadow: 0 20px 46px rgba(2, 8, 23, 0.34) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-header,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-header {
            background: linear-gradient(135deg, #0c1730, #12213d 58%, #172746) !important;
            border-bottom-color: rgba(148, 163, 184, 0.14) !important;
            color: #f8fbff !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header h2,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header h2 *,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header-subtitle,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .header-stat-chip,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-header *,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header h2,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header h2 *,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-header-subtitle,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .header-stat-chip,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-header * {
            color: #e5eefc !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .header-stat-chip,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .header-stat-chip {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .header-stat-chip.muted,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .header-stat-chip.muted {
            background: rgba(30, 41, 59, 0.42) !important;
            color: #bfdbfe !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-list,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-body,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-messages,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .groups-list,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-members-body,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-messages {
            background: linear-gradient(180deg, rgba(8, 18, 32, 0.56), rgba(10, 20, 36, 0.36)) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-member-item,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-group-item,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .suggested-group-card,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-member-item,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-group-item,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .suggested-group-card {
            background: linear-gradient(180deg, rgba(15, 28, 48, 0.98), rgba(10, 21, 38, 0.96)) !important;
            border-color: rgba(59, 130, 246, 0.18) !important;
            box-shadow: 0 14px 30px rgba(2, 8, 23, 0.22) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item::after,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item::after {
            background: radial-gradient(circle, rgba(96, 165, 250, 0.14), rgba(96, 165, 250, 0)) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item:hover,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-member-item:hover,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-group-item:hover,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .suggested-group-card:hover,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item:hover,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-member-item:hover,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-group-item:hover,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .suggested-group-card:hover {
            border-color: rgba(96, 165, 250, 0.32) !important;
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.26) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item.active,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-group-item.active,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-item.active,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .side-group-item.active {
            background: linear-gradient(180deg, rgba(19, 38, 66, 0.98), rgba(13, 27, 47, 0.96)) !important;
            border-color: rgba(96, 165, 250, 0.44) !important;
            box-shadow: 0 18px 38px rgba(37, 99, 235, 0.18) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-name,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-sender,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-sender-link,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-info h3,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-name-line,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-name-line span,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-city,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-meta,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .typing-indicator,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .empty-state,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-meta,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-subline,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-name,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-sender,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-sender-link,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-info h3,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-name-line,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-name-line span,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-city,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-meta,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .typing-indicator,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .empty-state,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-meta,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-subline {
            color: #e5eefc !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-city,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-meta,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-meta,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-subline,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-city,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-meta,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-meta,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-group-subline {
            color: #9fb0c7 !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-time,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-time {
            background: rgba(15, 23, 42, 0.64) !important;
            border-color: rgba(71, 85, 105, 0.34) !important;
            color: #a9bdd6 !important;
            box-shadow: none !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header {
            background: linear-gradient(180deg, rgba(10, 20, 36, 0.96), rgba(12, 23, 42, 0.96)) !important;
            border-bottom-color: rgba(148, 163, 184, 0.14) !important;
            color: #e5eefc !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-actions .btn-icon,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .back-to-groups,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .btn-icon,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-header-actions .btn-icon,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .back-to-groups,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .btn-icon {
            background: rgba(15, 23, 42, 0.92) !important;
            border-color: rgba(71, 85, 105, 0.42) !important;
            color: #f8fbff !important;
            box-shadow: 0 10px 22px rgba(2, 8, 23, 0.18) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-input-area,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-input-area {
            background: rgba(9, 20, 36, 0.96) !important;
            border-top-color: rgba(71, 85, 105, 0.34) !important;
            box-shadow: 0 -8px 24px rgba(2, 8, 23, 0.18) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .reply-preview,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .media-preview-box,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .schedule-inline-panel,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .input-wrapper,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .reply-preview,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .media-preview-box,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .schedule-inline-panel,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .input-wrapper {
            background: rgba(10, 20, 36, 0.96) !important;
            border-color: rgba(71, 85, 105, 0.34) !important;
            color: #e5eefc !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-textarea,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-textarea {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            color: #f8fbff !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-textarea::placeholder,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .chat-textarea::placeholder {
            color: #9fb0c7 !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-body,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-body {
            background: rgba(15, 23, 42, 0.94) !important;
            border-color: rgba(71, 85, 105, 0.42) !important;
            color: #e5eefc !important;
            box-shadow: 0 12px 28px rgba(2, 8, 23, 0.16) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-item.message-own .message-body,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-body.message-own,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-item.message-own .message-body,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-body.message-own {
            background: linear-gradient(180deg, rgba(13, 148, 136, 0.20), rgba(15, 118, 110, 0.24)) !important;
            border-color: rgba(45, 212, 191, 0.24) !important;
            color: #f0fdfa !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-reply,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-reply {
            background: rgba(30, 64, 175, 0.16) !important;
            border-right-color: #60a5fa !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-file,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .composer-plus-menu,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .emoji-picker-panel,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-file,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .composer-plus-menu,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .emoji-picker-panel {
            background: rgba(10, 20, 36, 0.98) !important;
            border-color: rgba(71, 85, 105, 0.42) !important;
            color: #e5eefc !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .reaction-btn,
        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-file-download-btn,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .reaction-btn,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .message-file-download-btn {
            background: rgba(15, 23, 42, 0.86) !important;
            border-color: rgba(71, 85, 105, 0.34) !important;
            color: #e5eefc !important;
            box-shadow: none !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-search-box input,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-search-box input {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #f8fbff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-search-box input::placeholder,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-search-box input::placeholder {
            color: rgba(226, 232, 240, 0.72) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-search-box i,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-search-box i {
            color: rgba(226, 232, 240, 0.72) !important;
        }

        html.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-badge,
        body.group-chat-force-dark #groupChatPageContent.group-chat-page-shell .group-badge {
            box-shadow: none !important;
        }