/* OscarChat — الأنماط (مفصولة من index.html). لا تعدّل أصناف Tailwind هنا؛ هذه أنماط مخصّصة فقط. */
        /* ===================== نظام الألوان الموحّد ===================== */
        :root {
            --app-bg:#f0f2f5; --surface:#ffffff; --surface-2:#f7f8fa;
            --txt:#111b21; --txt-soft:#667781; --txt-mute:#8696a0;
            --line:#e9edef; --line-strong:#d1d7db;
            --brand:#7c3aed; --brand-soft:#ede9fe; --brand-strong:#6d28d9;
            --bubble-me: rgba(124,58,237,0.78);
            --bubble-them: rgba(255,255,255,0.78);
            --bubble-shadow: 0 1px 4px rgba(15,23,42,.10);
            --bubble-shadow-me: 0 1px 4px rgba(91,33,182,.22);
            --tick-read:#53bdeb;
        }
        html.dark {
            --app-bg:#0b141a; --surface:#202c33; --surface-2:#2a3942;
            --txt:#e9edef; --txt-soft:#aebac1; --txt-mute:#8696a0;
            --line:#2a3942; --line-strong:#374b57;
            --brand:#a78bfa; --brand-soft:#1c1442; --brand-strong:#7c3aed;
            --bubble-me: rgba(124,58,237,0.72);
            --bubble-them: rgba(32,44,51,0.82);
            --bubble-shadow: 0 1px 4px rgba(0,0,0,.30);
            --bubble-shadow-me: 0 1px 4px rgba(0,0,0,.40);
            --tick-read:#53bdeb;
        }

        * { -webkit-tap-highlight-color: transparent; }
        body { background: var(--app-bg); }

        /* مقاس الجوال: استخدام الارتفاع الديناميكي (dvh) بدل 100vh لتفادي اختفاء أسفل الصفحة
           خلف شريط متصفح الجوال. الأسبقية لـ dvh في المتصفحات الحديثة مع fallback لـ vh.
           نخصّص body.h-screen ليتفوّق على صنف tailwind ‎.h-screen‎ (100vh). */
        html { height: 100%; }
        /* الارتفاع الفعلي للتطبيق: يُحدَّث من visualViewport عبر JS ليبقى شريط الكتابة فوق
           الكيبورد على كل الأجهزة (خصوصاً iOS). fallback: dvh ثم vh. */
        body.h-screen { height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); overflow: hidden; }
        /* الحاوية الرئيسية للتطبيق ترث الارتفاع الكامل */
        #app-section { height: 100%; }
        /* احترام المساحات الآمنة (الحافة السفلية/النوتش) على الأجهزة ذات الحواف */
        .composer-bar { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
        /* iOS: شريط الحالة شفّاف (black-translucent) + viewport-fit=cover يجعل المحتوى يمتدّ خلف النوتش.
           ندفع الرؤوس العلوية أسفل النوتش/شريط الحالة حتى تبقى أزرار المكالمة/الفيديو/القوائم قابلة للنقر.
           env() = 0 على الأجهزة بلا حواف، فالقاعدة آمنة عالمياً. */
        #sidebar > .bg-brand-700 { padding-top: env(safe-area-inset-top, 0px); }
        #active-chat > .bg-white.border-b { padding-top: calc(0.625rem + env(safe-area-inset-top, 0px)); }
        /* شاشة المكالمة: ادفع معلومات الأعلى والفيديو المحلي المصغّر أسفل النوتش */
        #call-overlay > .absolute.top-0 { padding-top: calc(env(safe-area-inset-top, 0px) + 2rem); }
        #local-video { top: calc(env(safe-area-inset-top, 0px) + 1.25rem) !important; }
        @supports (-webkit-touch-callout: none) {
            /* iOS: ضمان عدم اختفاء الإدخال خلف مؤشّر الـ home */
            #recording-ui { margin-bottom: env(safe-area-inset-bottom); }
        }
        /* منع التكبير التلقائي عند التركيز على الحقول في iOS (حجم خط ≥16px) */
        #message-input, #app-section input[type="text"], #app-section input[type="email"],
        #app-section input[type="password"], #app-section input[type="search"], #app-section textarea { font-size: 16px; }
        .font-brand { font-family: 'Poppins', 'Tajawal', system-ui, sans-serif; letter-spacing: -0.02em; }
        /* خط واتساب: خط النظام الافتراضي للجهاز (SF على iOS، Roboto على أندرويد، Segoe UI على ويندوز) مع دعم عربي.
           نطبّقه على كامل التطبيق ليكون التطبيق بأكمله بمظهر واتساب وليس فقاعات الرسائل فقط. */
        body, .chat-font, #app-section, #messages-container, .msg-text, .emoji-only, .reply-snippet, .voice-meta, .bubble-wrap {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Arabic", "Tajawal", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
            letter-spacing: 0;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        html.dark ::-webkit-scrollbar-thumb { background: #374b57; }
        html.dark ::-webkit-scrollbar-thumb:hover { background: #4a5d6a; }

        .emoji-scroll::-webkit-scrollbar { width: 4px; }

        /* خلفية المحادثة الافتراضية — تدرّج هادئ مع نقش خفيف */
        .chat-bg {
            background-color: #ece5dd;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394a3b8' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        html.dark .chat-bg {
            background-color: #0b141a;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* الحركات */
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        .slide-up { animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
        .message-in { animation: popIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .logo-pulse { animation: pulseGlow 2s infinite; }
        .recording-pulse { animation: recPulse 1.5s infinite; }
        .pop-scale { animation: popScale 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .menu-in { animation: menuIn 0.16s cubic-bezier(0.16, 1, 0.3, 1); }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes popIn { from { transform: scale(0.96); opacity: 0; transform-origin: bottom; } to { transform: scale(1); opacity: 1; } }
        @keyframes popScale { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        @keyframes menuIn { from { transform: scale(0.92) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
        @keyframes pulseGlow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(20, 184, 166, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(20, 184, 166, 0.8)); } }
        @keyframes recPulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

        @media (max-width: 768px) { .mobile-hidden { display: none !important; } }
        textarea { resize: none; }

        /* فقاعات كلاسيكية مستطيلة */
        .msg-tail-me   { border-radius: 14px 14px 14px 3px; }
        .msg-tail-them { border-radius: 14px 14px 3px 14px; }

        .reply-bubble { border-right: 4px solid #7c3aed; background: rgba(0,0,0,0.05); }
        .dark-reply-bubble { border-right: 4px solid #ddd6fe; background: rgba(255,255,255,0.15); }

        /* الروابط داخل الرسائل */
        .msg-link { text-decoration: underline; font-weight: 700; word-break: break-all; }

        /* علامة القراءة (تمت القراءة) — مثل واتساب: خطوط رفيعة بدون خلفية */
        .read-tick { color: var(--tick-read) !important; background: transparent !important; }
        .ph-checks, .ph-check { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }

        /* تفاعلات الرسائل */
        .reaction-pill { display:inline-flex; align-items:center; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:1px 7px 1px 6px; font-size:12px; font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,0.08); line-height:1.6; }
        .reaction-pill.mine { background:#ede9fe; border-color:#c4b5fd; color:#6d28d9; }
        html.dark .reaction-pill.mine { background:#2a1a4d; border-color:#5b21b6; color:#c4b5fd; }

        /* شريط التفاعل السريع */
        .react-emoji { font-size:24px; transition: transform .12s; cursor:pointer; padding:2px; border-radius:10px; }
        .react-emoji:hover { transform: scale(1.35) translateY(-2px); background: rgba(0,0,0,0.05); }

        /* قائمة إجراءات الرسالة */
        #msg-menu { position: fixed; z-index: 130; min-width: 190px; }
        .msg-menu-item { display:flex; align-items:center; gap:10px; width:100%; text-align:right; padding:10px 14px; font-size:14px; font-weight:700; transition: background .15s; }

        /* زر النزول لآخر الرسائل */
        #scroll-bottom-btn { transition: opacity .25s, transform .25s; }
        #scroll-bottom-btn.hidden-scroll { opacity:0; transform: translateY(16px) scale(.8); pointer-events:none; }

        /* المشغل الصوتي المخصص */
        .voice-player { display:flex; align-items:center; gap:10px; min-width:210px; max-width:260px; padding:2px 0; }
        .voice-play { flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: transform .1s; }
        .voice-play:active { transform: scale(.9); }
        .voice-wave { flex:1; display:flex; align-items:center; gap:2px; height:30px; cursor:pointer; }
        .voice-bar { flex:1; min-width:2px; border-radius:2px; transition: background .1s; }
        .voice-meta { display:flex; align-items:center; gap:6px; }
        .voice-speed { font-size:11px; font-weight:800; padding:1px 6px; border-radius:8px; cursor:pointer; }

        /* شارة العدّاد */
        .unread-badge { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#7c3aed; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(124,58,237,.45); }

        /* الهيكل العظمي أثناء التحميل */
        .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; }
        .float-soft { animation: floatSoft 3.2s ease-in-out infinite; }
        @keyframes floatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
        @media (prefers-reduced-motion: reduce) { .float-soft { animation: none; } }

        /* تمييز نتائج البحث */
        mark.hl { background:#fde047; color:#000; border-radius:3px; padding:0 2px; }

        audio { height: 35px; outline: none; }

        /* ===================== تجاوزات الوضع الليلي ===================== */
        .dark #app-section, .dark .dark-scope { color: var(--txt); }

        .dark #app-section .bg-white, .dark .dark-scope .bg-white { background-color: var(--surface) !important; }
        .dark #app-section .bg-slate-50, .dark .dark-scope .bg-slate-50 { background-color: var(--surface-2) !important; }
        .dark #app-section .bg-slate-100, .dark .dark-scope .bg-slate-100 { background-color: #131c24 !important; }
        .dark #app-section .bg-slate-50\/50 { background-color: rgba(40,52,66,0.5) !important; }
        .dark #app-section .bg-brand-50, .dark .dark-scope .bg-brand-50 { background-color: #1c1442 !important; }
        .dark #app-section .border-brand-100, .dark .dark-scope .border-brand-100 { border-color: #3a2a6b !important; }

        .dark #app-section .text-slate-800, .dark .dark-scope .text-slate-800 { color: #e6eaed !important; }
        .dark #app-section .text-slate-700, .dark .dark-scope .text-slate-700 { color: #d3d9de !important; }
        .dark #app-section .text-slate-600, .dark .dark-scope .text-slate-600 { color: #bcc4cc !important; }
        .dark #app-section .text-slate-500, .dark .dark-scope .text-slate-500 { color: #93a0ab !important; }
        .dark #app-section .text-slate-400, .dark .dark-scope .text-slate-400 { color: #76828e !important; }

        .dark #app-section .border-slate-50, .dark #app-section .border-slate-100, .dark #app-section .border-slate-200,
        .dark .dark-scope .border-slate-50, .dark .dark-scope .border-slate-100, .dark .dark-scope .border-slate-200 { border-color: var(--line) !important; }

        /* الحالات التفاعلية في الوضع الليلي */
        .dark #app-section [class~="hover:bg-slate-50"]:hover, .dark .dark-scope [class~="hover:bg-slate-50"]:hover,
        .dark #app-section [class~="hover:bg-slate-100"]:hover, .dark .dark-scope [class~="hover:bg-slate-100"]:hover,
        .dark #app-section [class~="hover:bg-slate-200"]:hover, .dark .dark-scope [class~="hover:bg-slate-200"]:hover { background-color: #2a3942 !important; }
        .dark #app-section [class~="hover:bg-red-50"]:hover, .dark .dark-scope [class~="hover:bg-red-50"]:hover { background-color: rgba(239,68,68,0.16) !important; }
        .dark #app-section [class~="focus:bg-white"]:focus, .dark .dark-scope [class~="focus:bg-white"]:focus { background-color: var(--surface-2) !important; }
        .dark #app-section [class~="hover:bg-brand-50"]:hover, .dark .dark-scope [class~="hover:bg-brand-50"]:hover { background-color: #1c1442 !important; }

        /* شريط الكتابة السفلي */
        .composer-bar { background:#f0f2f5; border-top: 1px solid var(--line); }
        html.dark .composer-bar { background:#1a242c; border-top-color: var(--line); }
        html.dark #message-form { background-color: var(--surface) !important; border-color: var(--line-strong) !important; }

        /* القائمة المنسدلة - رأس كود العضوية في الوضع الليلي */
        html.dark .dark-scope .menu-member-code { background-color: #1c1442 !important; border-color: #2a1f5e !important; }
        html.dark .dark-scope .menu-member-code .font-mono { color: #c4b5fd !important; }
        html.dark .dark-scope .menu-member-code p { color: #7c6fcd !important; }
        html.dark .dark-scope .menu-member-code button { background-color: #2a1f5e !important; color: #c4b5fd !important; }

        /* تحسين عناصر الإدخال في الوضع الليلي */
        .dark #app-section input, .dark .dark-scope input, .dark #app-section textarea { color: var(--txt); }
        .dark #app-section input::placeholder, .dark .dark-scope input::placeholder, .dark #app-section textarea::placeholder { color: #6b7681; }

        /* ===================== تحسينات الرد/الاقتباس والفقاعات ===================== */
        /* السحب للرد (swipe to reply) */
        .swipe-row { position: relative; touch-action: pan-y; }
        .swipe-row.swiping .swipe-bubble { transition: none; }
        .swipe-bubble { transition: transform .22s cubic-bezier(.22,1,.36,1); will-change: transform; }
        .swipe-reply-hint { position: absolute; top: 50%; right: 8px; transform: translateY(-50%) scale(.6); width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: #7c3aed; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.18); opacity: 0; transition: opacity .12s, transform .12s; pointer-events: none; z-index: 1; }
        html.dark .swipe-reply-hint { background: #2a3942; color: #c4b5fd; }
        .swipe-row.justify-end .swipe-reply-hint { right: auto; left: 8px; }

        /* تمييز الرسالة عند القفز إليها من الاقتباس */
        @keyframes msgFlash { 0% { box-shadow: 0 0 0 0 rgba(124,58,237,0); } 25% { box-shadow: 0 0 0 4px rgba(124,58,237,.40); } 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); } }
        .bubble-flash { animation: msgFlash 1.3s ease; }

        /* الاقتباس داخل الفقاعة: قابل للنقر + شكل أنظف */
        .reply-snippet { cursor: pointer; display: block; border-radius: 8px; transition: filter .15s, transform .08s; }
        .reply-snippet:active { transform: scale(.985); filter: brightness(.96); }

        /* فقاعات شبه شفافة أنيقة — ارتفاع أقل، فاصل بين الفقاعات، خط أصغر */
        .msg-text { line-height: 1.55; font-size: 14px; }
        .bubble-bg-me   { background: var(--bubble-me); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
        .bubble-bg-them { background: var(--bubble-them); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
        .bubble    { box-shadow: var(--bubble-shadow); }
        .bubble-me { box-shadow: var(--bubble-shadow-me); }
        /* تقليص الحشو الداخلي وارتفاع الفقاعة */
        .bubble-wrap { padding: 5px 10px 4px !important; font-size: 14px !important; line-height: 1.5 !important; }
        /* فاصل بين فقاعات الرسائل */
        .msg-row-gap { margin-bottom: 8px; }
        .msg-row-tight { margin-bottom: 2px; }
        /* فاصل بصري بين كتل المرسلين المختلفين */
        .msg-block-sep { margin-top: 6px; }
        /* شارات النظام (تواريخ/تشفير) داكن وفاتح */
        .system-pill { background: rgba(255,255,255,0.82); color: #54656f; border: 1px solid rgba(0,0,0,0.04); backdrop-filter: blur(6px); }
        html.dark .system-pill { background: rgba(32,44,51,0.85); color: #aebac1; border-color: rgba(255,255,255,0.05); }

        /* شريط الكتابة: ظل أنعم وحواف أوضح */
        #message-form { box-shadow: 0 2px 14px rgba(15,23,42,.06); }
        html.dark #message-form { box-shadow: 0 2px 14px rgba(0,0,0,.25); }

        /* رسائل الإيموجي: نفس حجم النص العادي (بدون تكبير) */
        .emoji-only { line-height: 1.62; }
        .emoji-only-lg, .emoji-only-md, .emoji-only-sm { font-size: inherit; }

        /* تنسيق النص بنمط واتساب: *عريض* _مائل_ ~مشطوب~ `كود` */
        .msg-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,.10); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
        .bubble-me .msg-code { background: rgba(255,255,255,.20); }
        .msg-text s { opacity: .85; }

        /* قلب النقر المزدوج (تفاعل سريع) */
        @keyframes heartPop { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 30% { opacity: 1; } 60% { transform: translate(-50%,-110%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%,-170%) scale(.9); opacity: 0; } }
        .heart-pop { position: absolute; left: 50%; top: 50%; font-size: 30px; pointer-events: none; z-index: 3; animation: heartPop .7s ease forwards; }

        /* اتساق المقاسات على الجوال */
        @media (max-width: 768px) {
            #messages-container { padding-left: .65rem; padding-right: .65rem; }
            .composer-bar { padding-left: .5rem; padding-right: .5rem; }
            /* عرض أوسع قليلاً للفقاعة على الشاشات الصغيرة */
            .bubble-wrap { max-width: 88% !important; }
        }
        @media (max-width: 380px) {
            #emoji-btn, #attach-btn { padding: .4rem; }
        }

        /* إخفاء شريط تمرير شريط الحالات (مع إبقاء التمرير) */
        #status-strip { scrollbar-width: none; }
        #status-strip::-webkit-scrollbar { display: none; }

        /* إمكانية الوصول: احترام تفضيل تقليل الحركة */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
        }

        /* ===== أصناف مساعدة للميزات الجديدة (تضمن العرض الصحيح حتى قبل إعادة بناء app.css) ===== */
        .bg-violet-50{background-color:#f5f3ff}.bg-violet-100{background-color:#ede9fe}.text-violet-500{color:#8b5cf6}.border-violet-100{border-color:#ede9fe}
        .bg-emerald-50{background-color:#ecfdf5}.bg-emerald-100{background-color:#d1fae5}.text-emerald-500{color:#10b981}.border-emerald-100{border-color:#d1fae5}
        .bg-teal-50{background-color:#f0fdfa}.bg-teal-100{background-color:#ccfbf1}.text-teal-500{color:#14b8a6}.border-teal-100{border-color:#ccfbf1}
        .bg-orange-50{background-color:#fff7ed}.hover\:bg-orange-50:hover{background-color:#fff7ed}.bg-orange-500{background-color:#f97316}.hover\:bg-orange-600:hover{background-color:#ea580c}.text-orange-500{color:#f97316}.text-orange-600{color:#ea580c}.border-orange-100{border-color:#ffedd5}.focus\:border-orange-400:focus{border-color:#fb923c}
        .accent-orange-500{accent-color:#f97316}.accent-red-500{accent-color:#ef4444}
        .min-w-\[4\.5rem\]{min-width:4.5rem}
        /* تدرّجات حلقات الحالة ومخطّط التحليلات */
        .bg-gradient-to-tr.from-brand-500.to-brand-300{background-image:linear-gradient(to top right,#8b5cf6,#c4b5fd)}
        .bg-gradient-to-t.from-amber-400.to-amber-300{background-image:linear-gradient(to top,#fbbf24,#fcd34d)}
        html.dark .bg-violet-50,html.dark .bg-emerald-50,html.dark .bg-teal-50{background-color:rgba(255,255,255,0.04)}

        /* ============================================================
           طبقة الأناقة — تحديث بصري أعمق (إضافي وغير مخرّب للبنية)
           ============================================================ */
        /* خلفية التطبيق: تدرّجات ناعمة بدل اللون المسطّح */
        #app-section{
            background:
                radial-gradient(1100px 560px at 100% -6%, rgba(124,58,237,.07), transparent 60%),
                radial-gradient(820px 480px at -8% 108%, rgba(14,165,233,.05), transparent 55%),
                var(--app-bg) !important;
        }
        html.dark #app-section{
            background:
                radial-gradient(1100px 560px at 100% -6%, rgba(124,58,237,.12), transparent 60%),
                radial-gradient(820px 480px at -8% 108%, rgba(2,132,199,.09), transparent 55%),
                var(--app-bg) !important;
        }
        /* رأس القائمة الجانبية: تدرّج راقٍ + عمق + لمعان علوي خفيف */
        #sidebar > .bg-brand-700{
            background: linear-gradient(135deg,#8b5cf6 0%,#7c3aed 48%,#5b21b6 100%) !important;
            box-shadow: 0 6px 22px -10px rgba(91,33,182,.55);
        }
        #sidebar > .bg-brand-700::after{
            content:""; position:absolute; inset:0; pointer-events:none;
            background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%);
        }
        /* السايدبار: فصل أنعم بظل متدرّج */
        #sidebar{ box-shadow: 1px 0 0 var(--line), 10px 0 30px -22px rgba(15,23,42,.22); }
        /* شريط البحث: هالة تركيز ناعمة */
        #search-contacts{ transition: box-shadow .2s, background .2s, border-color .2s; }
        #search-contacts:focus{ box-shadow: 0 0 0 4px rgba(124,58,237,.10); }
        /* حلقة «حالتي» وعمق شريط الحالات */
        #my-status-ring{ box-shadow: 0 3px 10px -4px rgba(124,58,237,.35); }
        /* الأزرار الأساسية: تدرّج + ظل ملوّن + رفع لطيف */
        button.bg-brand-600, button.bg-brand-700{
            background-image: linear-gradient(135deg,#8b5cf6 0%,#7c3aed 52%,#6d28d9 100%);
            box-shadow: 0 9px 22px -10px rgba(124,58,237,.55);
            transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .2s, filter .2s;
        }
        button.bg-brand-600:hover, button.bg-brand-700:hover{ filter: brightness(1.04); box-shadow: 0 13px 28px -10px rgba(124,58,237,.66); }
        button.bg-brand-600:active, button.bg-brand-700:active{ transform: translateY(1px) scale(.99); }
        /* النوافذ المنبثقة: ظل متعدّد الطبقات أكثر نعومة */
        .slide-up{ box-shadow: 0 26px 64px -20px rgba(15,23,42,.45), 0 10px 28px -18px rgba(15,23,42,.28) !important; }
        /* شريط الكتابة: حواف أنعم */
        #message-form{ border-radius: 24px; }
        /* رأس المحادثة: ظلّ سفلي خفيف بدل الحدّ الصلب */
        #active-chat > .bg-white.border-b{ box-shadow: 0 3px 12px -8px rgba(15,23,42,.20); }
        /* أشرطة التمرير: مسحة برّاقة بلون العلامة */
        ::-webkit-scrollbar-thumb{ background: linear-gradient(#c4b5fd,#a78bfa); }
        html.dark ::-webkit-scrollbar-thumb{ background: linear-gradient(#5b21b6,#4c1d95); }
        /* تنعيم انتقالات الأيقونات داخل الأزرار */
        button .ph-bold, button .ph-fill{ transition: transform .15s ease; }

        /* ====================== المنشن (@) ====================== */
        .mention{ color:#7c3aed; font-weight:700; }
        html.dark .mention{ color:#c4b5fd; }
        .bubble-me .mention{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
        .mention-self{ background:rgba(124,58,237,.15); border-radius:6px; padding:0 3px; }
        .bubble-me .mention-self{ background:rgba(255,255,255,.25); }
        #mention-suggest .mention-row{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.5rem .75rem; text-align:right; transition:background .12s; }
        #mention-suggest .mention-row:hover, #mention-suggest .mention-row.active{ background:rgba(124,58,237,.08); }
        html.dark #mention-suggest .mention-row:hover, html.dark #mention-suggest .mention-row.active{ background:rgba(124,58,237,.20); }

        /* ====================== مكالمة المجموعة (LiveKit) ====================== */
        .gc-grid{ display:grid; gap:4px; padding:4px; padding-top:5rem; padding-bottom:8rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); align-content:center; }
        .gc-tile{ position:relative; background:#1e293b; border-radius:14px; overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
        .gc-tile video{ width:100%; height:100%; object-fit:cover; }
        .gc-tile.gc-screen{ aspect-ratio:16/9; grid-column:1/-1; background:#000; }
        /* الشاشة المشاركة: أظهرها كاملة بلا اقتطاع (cover كان يقصّ نصفها) */
        .gc-tile.gc-screen video{ object-fit:contain; background:#000; }
        .gc-tile.gc-screen .gc-name{ background:rgba(0,0,0,.45); border-radius:8px; padding:2px 8px; left:auto; }
        /* شارة "تمت مشاركة الشاشة" داخل بلاطة المُشارِك — اضغط لفتح الشاشة بملء الجهاز */
        .gc-screen-badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:90%; background:rgba(124,58,237,.95); color:#fff; font-size:12px; font-weight:800; padding:8px 12px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.4); z-index:6; cursor:pointer; text-align:center; line-height:1.4; }
        .gc-screen-badge:active{ transform:translate(-50%,-50%) scale(.96); }
        .gc-tile .gc-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2); }
        .gc-tile .gc-name{ position:absolute; bottom:6px; right:8px; left:8px; color:#fff; font-size:11px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.6); display:flex; align-items:center; gap:4px; }
        .gc-tile .gc-mic-off{ color:#f87171; }

        /* ====================== الملصقات (رياكشن/ستيكر) ====================== */
        /* الملصق يُعرض كبيراً بلا فقاعة (مثل سناب/واتساب) */
        .sticker-msg{ font-size:64px; line-height:1.05; margin:0; }
        .sticker-img{ width:150px; height:150px; max-width:46vw; max-height:46vw; object-fit:contain; cursor:pointer; filter:drop-shadow(0 3px 8px rgba(0,0,0,.28)); }
        .sticker-bubble{ background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0 !important; min-width:0 !important; }
        .sticker-bubble .sticker-msg{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.20)); }
        /* لون مقروء لسطر الوقت/الحالة أسفل الملصق على الخلفية الفاتحة والداكنة */
        .sticker-bubble .text-brand-100, .sticker-bubble .text-slate-400{ color:#8696a0 !important; }

        /* ====================== شبكة الملصقات المخصّصة (تبويب الملصقات) ====================== */
        /* في وضع الملصقات نعرض 4 أعمدة أوسع بدل 8 لتظهر الصور بحجم مريح */
        #emoji-grid.sticker-mode{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; padding:.65rem; }
        .sticker-cell{ position:relative; aspect-ratio:1/1; }
        .sticker-pick{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:.45rem; border-radius:1rem; transition:background .15s, transform .12s; }
        .sticker-pick:hover{ background:rgba(124,58,237,.08); }
        .sticker-pick:active{ transform:scale(.9); }
        .sticker-pick img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.22)); pointer-events:none; }
        /* زر الحذف شارة صغيرة — نتجاوز قاعدة تكبير أزرار (X) العامة بـ !important حتى لا تغطّي الصورة */
        .sticker-del{ position:absolute; top:-5px; inset-inline-end:-5px; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; border-radius:9999px; background:#ef4444; color:#fff; display:flex!important; align-items:center; justify-content:center; box-shadow:0 1px 5px rgba(0,0,0,.35); border:2px solid #fff; opacity:0; transform:scale(.8); transition:opacity .15s, transform .15s; z-index:2; }
        .sticker-del i{ font-size:10px; line-height:1; }
        .sticker-cell:hover .sticker-del{ opacity:1; transform:scale(1); }
        @media (hover:none){ .sticker-del{ opacity:1; transform:scale(1); } }
        html.dark .sticker-del{ border-color:#0b141a; }
        /* زر «ملصق جديد» */
        .sticker-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; aspect-ratio:1/1; border:2px dashed #a78bfa; border-radius:1rem; color:#7c3aed; transition:background .15s; }
        .sticker-add i{ font-size:1.5rem; }
        .sticker-add span{ font-size:.6rem; font-weight:800; line-height:1; }
        .sticker-add:hover{ background:rgba(124,58,237,.08); }
        html.dark .sticker-add{ color:#c4b5fd; border-color:#6d28d9; }
        /* حالة فارغة عندما لا توجد ملصقات بعد */
        .sticker-empty{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.25rem; padding:1.4rem 1rem; }
        .sticker-empty i{ font-size:2.4rem; color:#c4b5fd; }
        .sticker-empty p{ font-weight:800; font-size:.85rem; color:#64748b; margin:0; }
        .sticker-empty span{ font-size:.7rem; color:#94a3b8; }
        html.dark .sticker-empty p{ color:#aeb9c4; }

        /* ====================== محرر الملصقات (قص يدوي بالممحاة) ====================== */
        /* خلفية شطرنجية تُظهر الأجزاء الشفافة بعد المسح (مثل واتساب) */
        .sticker-checker{
            background-color:#fff;
            background-image:
                linear-gradient(45deg,#dbe3ea 25%,transparent 25%),
                linear-gradient(-45deg,#dbe3ea 25%,transparent 25%),
                linear-gradient(45deg,transparent 75%,#dbe3ea 75%),
                linear-gradient(-45deg,transparent 75%,#dbe3ea 75%);
            background-size:18px 18px;
            background-position:0 0,0 9px,9px -9px,-9px 0;
        }
        #sticker-canvas{ cursor:crosshair; touch-action:none; }
        .sticker-tool{ display:inline-flex; align-items:center; gap:.35rem; height:2.25rem; padding:0 .85rem; border-radius:9999px; font-weight:700; font-size:.8rem; background:rgba(255,255,255,.1); color:#fff; transition:background .15s; }
        .sticker-tool:hover{ background:rgba(255,255,255,.2); }
        .sticker-tool.active{ background:#7c3aed; }

        /* ====================== توسيع منطقة لمس أزرار الإغلاق (X) ====================== */
        /* بعض نوافذ التطبيق كان زر الإغلاق فيها صغيراً يصعب الضغط عليه على الجوال */
        button:has(> i.ph-x){ min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; }

        /* ====================== سحب عناصر قائمة المحادثات (مقروء/مسح) ====================== */
        .chat-swipe-row{ touch-action: pan-y; }
        .chat-swipe-hint{
            position:absolute; top:50%; transform:translateY(-50%) scale(.7);
            display:flex; align-items:center; justify-content:center;
            width:40px; height:40px; border-radius:9999px; font-size:21px;
            opacity:0; pointer-events:none; z-index:5; transition:opacity .12s;
            box-shadow:0 2px 8px rgba(15,23,42,.12);
        }
        .chat-swipe-hint.is-read{ background:#dcfce7; color:#16a34a; }
        .chat-swipe-hint.is-clear{ background:#fee2e2; color:#dc2626; }
        html.dark .chat-swipe-hint.is-read{ background:rgba(22,163,74,.20); color:#4ade80; }
        html.dark .chat-swipe-hint.is-clear{ background:rgba(220,38,38,.20); color:#f87171; }
        /* تبويبات تصنيف القائمة */
        #chat-filter-tabs::-webkit-scrollbar{ height:0; }
        #chat-filter-tabs{ scrollbar-width:none; }