/* ═══════════════════════════════════════════════════════════════════════ ★ Maroc Star — «الثيم الكلاسيكي» (على طراز SpeakyChat) يُطبَّق فقط عندما يحمل الصنف skin-classic — كل القواعد الأصلية تبقى سليمة، ويمكن التبديل بزر 🎨 في الشريط العلوي ═══════════════════════════════════════════════════════════════════════ */ body.skin-classic { --c-chrome-1: #6d7093; --c-chrome-2: #44465f; --c-chrome-3: #2a2b3a; --c-bar-1: #2b2c36; --c-bar-2: #16171d; --c-panel: #fbfbfd; --c-line: #a9aabd; --c-input: #c9c9d8; --c-red-1: #c62828; --c-red-2: #8e1b1b; background: #131419 !important; overflow: hidden; } /* ═══════════ الشريط العلوي ═══════════ */ body.skin-classic .topbar { background: linear-gradient(180deg, #34363f, #1c1d24) !important; border-bottom: 2px solid #0c0d10 !important; padding: 5px 10px !important; backdrop-filter: none !important; min-height: 46px; } body.skin-classic .logo-sm { background: linear-gradient(180deg, #f5c840, #b8860b) !important; border-radius: 8px; font-size: 17px; width: 34px; height: 34px; } body.skin-classic .site-name { font-size: 14px; color: #ffd166; font-weight: 800; text-shadow: 1px 1px 0 #000; } body.skin-classic .site-sub { font-size: 10px; color: #b9bccb; } body.skin-classic .topbar .btn { background: linear-gradient(180deg, #555871, #33354a); border: 1px solid #14151b; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); border-radius: 6px; } body.skin-classic .topbar .btn:hover { background: linear-gradient(180deg, #676a86, #3d3f57); } body.skin-classic .user-chip { background: linear-gradient(180deg, #2a2b36, #16171d); border: 1px solid #0c0d10; border-radius: 6px; } body.skin-classic .badge { background: #b8860b; color: #fff; } /* ═══════════ التخطيط: الأعضاء يسار + الشات وسط ═══════════ */ body.skin-classic .layout { direction: ltr; /* لتثبيت قائمة الأعضاء على اليسار مثل الأصل */ display: grid !important; grid-template-columns: 250px 1fr; gap: 0 !important; padding: 0 !important; height: calc(100vh - 46px - 44px); min-height: 0; } body.skin-classic .layout > * { direction: rtl; } body.skin-classic .layout { grid-template-rows: 1fr; align-items: stretch; } body.skin-classic .rooms-panel { display: none !important; } body.skin-classic .users-panel { order: -1; background: var(--c-panel) !important; border: 1px solid var(--c-line) !important; border-radius: 0 !important; box-shadow: none !important; overflow-y: auto; padding: 0 !important; } body.skin-classic .users-panel .panel-head { background: linear-gradient(180deg, #ececf3, #d9dae4); border-bottom: 1px solid var(--c-input); padding: 6px 10px; position: sticky; top: 0; z-index: 2; } body.skin-classic .users-panel .panel-head h2 { color: #2a2b3a; font-size: 13px; font-weight: 800; } body.skin-classic .users-panel .pill { background: #2a2b3a; color: #fff; } body.skin-classic .room-log { display: none !important; } /* سجل الغرفة يُخفى للشكل الكلاسيكي */ body.skin-classic .users-panel > .panel-head:nth-child(3) { display: none !important; } /* عنوان «سجل الغرفة» */ body.skin-classic #room-users { padding: 4px; } body.skin-classic #room-users .user-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 4px; cursor: pointer; background: transparent; border: none; } body.skin-classic #room-users .user-row:hover { background: #e8ecfb; } body.skin-classic #room-users .user-row .avatar { width: 34px !important; height: 34px !important; font-size: 20px; border-radius: 4px; border: 1px solid #b9b9c8; background: #e7e8f2; display: grid; place-items: center; overflow: hidden; } body.skin-classic #room-users .user-row .avatar img { width: 100%; height: 100%; object-fit: cover; } body.skin-classic #room-users .user-row .u-name { font-size: 15px; font-weight: 800; } body.skin-classic #room-users .user-row .u-sub { font-size: 11px; color: #6b6c7e; } body.skin-classic #room-users .user-row .on-dot { display: none; } /* ═══════════ تبويبات الغرف (أعلى) ═══════════ */ .classic-tabs { display: none; } body.skin-classic .classic-tabs { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; background: #1c1d24; border-bottom: 2px solid #0c0d10; overflow-x: auto; scrollbar-width: thin; } body.skin-classic .c-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 6px; cursor: pointer; font: 800 14px/1 'Segoe UI', Tahoma, sans-serif; color: #fff; background: linear-gradient(180deg, var(--c-chrome-1), var(--c-chrome-2)); border: 1px solid #14151b; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; transition: filter .12s; } body.skin-classic .c-tab:hover { filter: brightness(1.18); } body.skin-classic .c-tab.active { background: linear-gradient(180deg, #9a9cc4, #5f6180); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px #c8c9e0 inset; } body.skin-classic .c-count { background: rgba(0,0,0,.35); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 7px; min-width: 20px; text-align: center; } body.skin-classic .c-tab.locked { opacity: .85; } body.skin-classic .c-tab.new { background: linear-gradient(180deg, #2e7d4f, #1b4d31); padding: 7px 12px; } /* ═══════════ نافذة الغرفة ═══════════ */ body.skin-classic .room-view { display: flex !important; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; background: transparent !important; border: none !important; border-radius: 0 !important; } body.skin-classic .room-head { background: linear-gradient(180deg, var(--c-bar-1), var(--c-bar-2)) !important; border: 1px solid #0c0d10 !important; border-radius: 0 !important; padding: 6px 10px !important; margin: 0 !important; color: #fff; } body.skin-classic .room-head h2 { color: #fff !important; font-size: 15px; font-weight: 800; text-shadow: 1px 1px 0 #000; } body.skin-classic .room-topic { color: #b9bccb !important; font-size: 11px; } body.skin-classic .room-stats .pill { background: linear-gradient(180deg,#3d4054,#23242f); border: 1px solid #0c0d10; color: #fff; font-size: 12px; font-weight: 700; } body.skin-classic #pill-mic { display: none; } /* عدّاد المايك لا يظهر في الأصل */ body.skin-classic .seats-wrap, body.skin-classic .controls { display: none !important; } /* ═══════════ منطقة الشات (لافندر كلاسيكي + علامة مائية) ═══════════ */ body.skin-classic .chat-wrap { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; /* كانت 42% في الأساس — هذا كان سبب الفراغ الأسود */ display: flex !important; flex-direction: column; margin: 0 !important; } body.skin-classic .chat-log { flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto; padding: 8px 4px; background: radial-gradient(120% 60% at 80% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), radial-gradient(90% 55% at 10% 100%, rgba(190,200,255,.5), rgba(255,255,255,0) 60%), linear-gradient(160deg, #eceefb 0%, #dfe1f5 45%, #d2d5ef 100%) !important; border: 1px solid var(--c-input) !important; border-radius: 0 !important; font-family: 'Segoe UI', Tahoma, sans-serif; } body.skin-classic .chat-log::before { content: '★ Maroc Star'; position: sticky; top: 34%; display: block; text-align: center; font: 800 30px/1 'Segoe UI', Tahoma, sans-serif; color: rgba(120,124,170,.30); text-shadow: 0 1px 0 rgba(255,255,255,.6); pointer-events: none; letter-spacing: 1px; margin-bottom: -34px; } /* سطر الرسالة على الطراز الكلاسيكي: [الوقت] صورة الاسم: النص */ body.skin-classic .msg { display: block !important; padding: 2px 10px !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-size: 15px; line-height: 1.55; color: #14151b; } body.skin-classic .msg.mine { background: rgba(255,255,255,.45) !important; } body.skin-classic .msg.private { background: rgba(255,214,102,.35) !important; } body.skin-classic .c-time { color: #74758a; font-size: 13px; margin-inline-end: 4px; } body.skin-classic .msg .avatar { width: 20px !important; height: 20px !important; font-size: 13px; margin: 0 4px; vertical-align: -4px; border-radius: 3px; border: 1px solid #b9b9c8; background: #fff; display: inline-grid; place-items: center; } body.skin-classic .msg .m-body, body.skin-classic .msg .m-head { display: inline !important; } body.skin-classic .msg .m-head strong { font-weight: 800; font-size: 15px; } body.skin-classic .msg .m-head > span:last-child { display: none; } /* الوقت صار في المقدمة */ body.skin-classic .msg .rank-tag { font-size: 10px !important; vertical-align: 1px; } body.skin-classic .m-text { display: inline !important; color: #14151b; } body.skin-classic .m-text a { color: #1652a8; } body.skin-classic .chat-em { vertical-align: -4px; } body.skin-classic #chat-log .sys, body.skin-classic .log-line, body.skin-classic .hint { color: #5c5d70 !important; font-size: 13px; } /* ═══════════ شريط الأدوات السفلي ═══════════ */ body.skin-classic .chat-form { background: linear-gradient(180deg, #22232b, #0d0e12) !important; border: 1px solid #0c0d10 !important; border-radius: 0 !important; padding: 6px 8px !important; gap: 6px !important; } body.skin-classic .chat-form .btn { background: linear-gradient(180deg, #3d4054, #23242f) !important; border: 1px solid #0c0d10 !important; color: #fff; border-radius: 5px; padding: 6px 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } body.skin-classic .chat-form .btn:hover { filter: brightness(1.25); } body.skin-classic .chat-form input#chat-input { background: #fff !important; border: 2px solid var(--c-input) !important; border-radius: 3px !important; color: #14151b !important; font-size: 15px; padding: 8px 10px; direction: rtl; } body.skin-classic .chat-form button[type=submit] { background: linear-gradient(180deg, #33343f, #101116) !important; color: #fff !important; border: 2px solid #c9c9d8 !important; border-radius: 3px !important; font-weight: 800; min-width: 92px; } body.skin-classic .emoji-bar { background: #16171d !important; border: 1px solid #0c0d10 !important; border-radius: 4px !important; } body.skin-classic .hand-btn.on { background: linear-gradient(180deg,#e0a800,#a97c00) !important; } /* ═══════════ الشريط السفلي (التحدّث + الحالة + خروج) ═══════════ */ .classic-bottom { display: none; } body.skin-classic .classic-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 4px 10px; background: linear-gradient(180deg, #2b2c36, #141519); border-top: 2px solid #0c0d10; } body.skin-classic .c-talk { display: inline-flex; align-items: center; gap: 8px; padding: 6px 22px; cursor: pointer; font: 800 15px/1 'Segoe UI', Tahoma, sans-serif; color: #fff; background: linear-gradient(180deg, #4a4d66, #23242f); border: 2px solid #0c0d10; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); } body.skin-classic .c-talk:hover { filter: brightness(1.2); } body.skin-classic .c-talk.on { background: linear-gradient(180deg, #2e9e5b, #17603a); } body.skin-classic .c-mid { display: flex; align-items: center; gap: 10px; } body.skin-classic .c-brand { display: flex; flex-direction: column; align-items: center; line-height: 1; background: #0b0c10; border: 1px solid #3a3c48; border-radius: 6px; padding: 4px 12px; } body.skin-classic .c-brand b { color: #ffd166; font-size: 12px; text-shadow: 1px 1px 0 #000; } body.skin-classic .c-brand i { color: #9aa0b5; font-size: 9px; font-style: normal; } body.skin-classic .c-online { background: #0b0c10; border: 1px solid #3a3c48; border-radius: 6px; padding: 5px 10px; color: #d8dbe6; font-size: 12px; font-weight: 700; } body.skin-classic .c-online b { color: #6ee7a0; } body.skin-classic .c-actions { display: flex; align-items: center; gap: 8px; } body.skin-classic .c-btn { padding: 6px 14px; cursor: pointer; font: 700 13px/1 'Segoe UI', Tahoma, sans-serif; color: #fff; background: linear-gradient(180deg, #3d4054, #23242f); border: 1px solid #0c0d10; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } body.skin-classic .c-btn:hover { filter: brightness(1.2); } body.skin-classic .c-btn.danger { background: linear-gradient(180deg, var(--c-red-1), var(--c-red-2)); } body.skin-classic .c-btn .num { background: #0b0c10; border-radius: 999px; padding: 1px 7px; margin-inline-start: 5px; } /* ═══════════ نوافذ وأشياء متفرقة ═══════════ */ body.skin-classic .modal { background: linear-gradient(180deg, #f6f6fb, #e6e7f2) !important; border: 2px solid #2a2b3a !important; border-radius: 8px !important; } body.skin-classic .modal h3, body.skin-classic .modal label, body.skin-classic .modal p, body.skin-classic .modal li, body.skin-classic .modal .hint { color: #1c1d24 !important; } body.skin-classic .modal .btn { background: linear-gradient(180deg, #555871, #33354a); color: #fff; border: 1px solid #14151b; } body.skin-classic .modal .btn.primary { background: linear-gradient(180deg, #b8860b, #8a6308); } body.skin-classic .modal input, body.skin-classic .modal select, body.skin-classic .modal textarea { background: #fff !important; color: #14151b !important; border: 1px solid var(--c-input) !important; } body.skin-classic .toasts .toast { border-radius: 6px; } /* ═══════════ الهاتف ═══════════ */ @media (max-width: 860px) { body.skin-classic .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 46px - 44px); } body.skin-classic .users-panel { order: 0; max-height: 34vh; border-bottom: 2px solid var(--c-input) !important; } body.skin-classic .room-view { order: 1; } body.skin-classic .classic-tabs { justify-content: flex-start; padding: 5px 8px; } body.skin-classic .c-tab { padding: 6px 12px; font-size: 13px; } body.skin-classic .c-brand { display: none; } body.skin-classic .c-online { padding: 5px 8px; font-size: 12px; } /* شريط علوي على سطر واحد في الهاتف */ body.skin-classic .topbar { flex-wrap: nowrap !important; overflow: visible; gap: 6px !important; padding: 5px 6px !important; align-items: center; } body.skin-classic .topbar-left, body.skin-classic .topbar-right { flex-wrap: nowrap !important; gap: 5px !important; } body.skin-classic .site-name { white-space: nowrap; font-size: 13px; } body.skin-classic .user-chip { padding: 3px 6px; gap: 4px; } body.skin-classic .user-chip .badge { display: none; } body.skin-classic .site-sub { display: none; } body.skin-classic .topbar-center { display: none; } body.skin-classic .user-chip .u-name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.skin-classic .topbar .btn.icon { padding: 4px 7px; } body.skin-classic .users-panel { max-height: 30vh; } body.skin-classic .c-talk { padding: 6px 14px; font-size: 14px; } body.skin-classic .chat-log::before { font-size: 22px; } body.skin-classic .msg { font-size: 14px; } } /* ألوان أسماء الأعضاء في الشكل الكلاسيكي (خلفية فاتحة) */ body.skin-classic #room-users .u-sub { color: #5a5f70; } body.skin-classic #room-users .user-row:hover { background: linear-gradient(180deg,#f4f6ff,#e7ecff); } body.skin-classic .seat .s-name, body.skin-classic .listener { color: #14151b; } body.skin-classic #room-log .log-item { color: #3b3f52; } /* الموبايل: قائمة الأعضاء لا تدفع الشات خارج الشاشة */ @media (max-width: 760px) { body.skin-classic .side, body.skin-classic #room-users { max-height: 30vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ═══════════════════════════════════════════════════════════════════ ★ شريط الأدوات الكلاسيكي (Hand · Emoticons · Animoticons · GIF · Attach · Font · Sound · Camera · Room tools · All Settings) ═══════════════════════════════════════════════════════════════════ */ body:not(.skin-classic) .c-tools { display: none !important; } body.skin-classic .c-tools { display: flex; align-items: center; gap: 4px; padding: 5px 6px; margin: 0; background: linear-gradient(180deg, #2c2f3f, #1c1e29); border-top: 1px solid #0b0c12; border-bottom: 1px solid #0b0c12; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } body.skin-classic .c-tools .ct { flex: 0 0 auto; width: 34px; height: 30px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; border-radius: 4px; background: linear-gradient(180deg, #4a4f66, #33374a); border: 1px solid #14151b; color: #ffe9b0; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } body.skin-classic .c-tools .ct:hover { background: linear-gradient(180deg, #5b6180, #3d4257); } body.skin-classic .c-tools .ct:active { transform: translateY(1px); } body.skin-classic .c-tools .ct.active { background: linear-gradient(180deg, #b8860b, #8a6508); border-color: #5d4504; color: #fff; } body.skin-classic .c-tools .ct.font { font-family: Georgia, serif; font-weight: 900; font-size: 19px; color: #cfe3ff; } body.skin-classic .c-tools .ct-spacer { flex: 1 1 auto; min-width: 8px; } body.skin-classic .c-tools .ct-gif-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #c9cfe6; padding: 0 6px; text-shadow: 0 1px 0 #000; } body.skin-classic .c-tools #c-private2 { flex: 0 0 auto; height: 30px; padding: 0 10px; } /* ── النوافذ العائمة للشريط ─────────────────────────────────────── */ .ct-panel { position: fixed; z-index: 60; width: 372px; max-width: calc(100vw - 16px); background: #23262f; border: 1px solid #0c0d13; border-radius: 5px; box-shadow: 0 14px 38px rgba(0,0,0,.55); color: #e9edf8; } .ct-panel .ctp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: linear-gradient(180deg, #3a3f52, #262a38); border-bottom: 1px solid #101218; font-size: 12.5px; font-weight: 700; } .ct-panel .ctp-head .ctp-tabs { display: flex; gap: 4px; } .ct-panel .ctp-head button { background: linear-gradient(180deg, #4a4f66, #33374a); color: #e9edf8; border: 1px solid #14151b; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 12px; } .ct-panel .ctp-head button.on { background: linear-gradient(180deg, #b8860b, #8a6508); color: #fff; } .ct-panel .ctp-body { padding: 8px; max-height: 320px; overflow-y: auto; } .ct-panel .ctp-foot { padding: 6px 8px; border-top: 1px solid #101218; font-size: 11.5px; color: #98a0b8; } .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; } .ct-grid button { background: rgba(255,255,255,.05); border: 1px solid #14151b; border-radius: 4px; padding: 3px; cursor: pointer; min-height: 46px; display: flex; align-items: center; justify-content: center; } .ct-grid button:hover { background: rgba(184,134,11,.25); border-color: #b8860b; } .ct-grid button img { max-width: 40px; max-height: 40px; display: block; } .ct-grid.big button { min-height: 62px; } .ct-grid.big button img { max-width: 54px; max-height: 54px; } .ct-grid button .gl-name { font-size: 9px; color: #98a0b8; display: block; overflow: hidden; } .ct-sec { font-size: 11.5px; font-weight: 700; color: #b9c1da; margin: 8px 2px 4px; } .ct-row { display: flex; align-items: center; gap: 8px; margin: 6px 2px; flex-wrap: wrap; } .ct-row label { font-size: 12px; color: #c9cfe6; min-width: 74px; } .ct-row input[type=range] { flex: 1; min-width: 120px; } .ct-row select, .ct-row input[type=number], .ct-row input[type=text] { background: #171922; color: #e9edf8; border: 1px solid #101218; border-radius: 4px; padding: 4px 6px; font-size: 12px; } .ct-colors { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 4px 2px 8px; } .ct-colors button { height: 20px; border: 1px solid #0c0d13; border-radius: 3px; cursor: pointer; } .ct-colors button.on { outline: 2px solid #fff; outline-offset: 1px; } .ct-sample { margin: 6px 2px; padding: 8px; min-height: 40px; background: #f5f5f0; color: #111; border: 1px solid #0c0d13; border-radius: 4px; font-size: 15px; } .ct-panel .ctp-body .hintline { font-size: 11.5px; color: #98a0b8; margin: 4px 2px; } .ct-meter { height: 8px; background: #14161f; border: 1px solid #0c0d13; border-radius: 4px; overflow: hidden; flex: 1; } .ct-meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#3fa34d,#d8c33a,#d33a3a); transition: width .08s linear; } /* ── حالة المستخدم (Online/Busy/Away/On the phone/BRB) ─────────── */ body.skin-classic .c-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; background: rgba(255,255,255,.06); border: 1px solid #14151b; border-radius: 4px; color: #e9edf8; font-size: 11.5px; font-weight: 700; padding: 2px 7px; cursor: pointer; } body.skin-classic .c-status:hover { background: rgba(255,255,255,.13); } #c-status-dot { font-size: 11px; } .st-menu { position: fixed; z-index: 61; background: #23262f; border: 1px solid #0c0d13; border-radius: 5px; padding: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.55); } .st-menu button { display: flex; align-items: center; gap: 7px; width: 100%; text-align: start; cursor: pointer; background: transparent; border: 0; color: #e9edf8; font-size: 12.5px; padding: 6px 10px; border-radius: 4px; white-space: nowrap; } .st-menu button:hover { background: #2f3547; } .st-menu button.on { background: #1f3d6b; } .st-menu button .st-hint { color: #98a0b8; font-size: 10.5px; margin-inline-start: auto; } /* ── معاينة الكاميرا ───────────────────────────────────────────── */ .cam-preview { position: fixed; right: 12px; bottom: 96px; z-index: 62; width: 260px; background: #23262f; border: 1px solid #0c0d13; border-radius: 5px; overflow: hidden; box-shadow: 0 14px 38px rgba(0,0,0,.6); } .cam-preview .cp-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px; font-weight: 700; color: #e9edf8; background: linear-gradient(180deg, #3a3f52, #262a38); border-bottom: 1px solid #101218; } .cam-preview .cp-head .cp-x { margin-inline-start: auto; background: none; border: 0; color: #c9cfe6; cursor: pointer; font-size: 13px; } .cam-preview video { width: 100%; display: block; background: #0b0c12; aspect-ratio: 4 / 3; object-fit: cover; } .cam-preview .cp-foot { display: flex; gap: 6px; padding: 6px; justify-content: flex-end; } /* ── أسماء الأعضاء مع حالة المستخدم ────────────────────────────── */ body.skin-classic #room-users .u-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } body.skin-classic #room-users .u-sub .st-txt { color: #8a5a00; font-weight: 700; } body.skin-classic #room-users .user-row.st-busy .u-name { color: #8e1b1b !important; } body.skin-classic #room-users .user-row.st-away .u-name, body.skin-classic #room-users .user-row.st-brb .u-name { color: #7a6a1f !important; } body.skin-classic #room-users .user-row.st-phone .u-name { color: #1b4f8e !important; } /* ── المرفقات والصور في الشات ──────────────────────────────────── */ body.skin-classic .c-attach { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: rgba(255,255,255,.07); border: 1px solid #c9cfe6; border-radius: 4px; padding: 2px 7px; color: #1b3a6b; } body.skin-classic .c-attach img { max-height: 14px; } body.skin-classic .chat-img { max-width: 210px; max-height: 160px; border: 1px solid #14151b; border-radius: 3px; vertical-align: middle; cursor: pointer; } .chat-em { vertical-align: middle; } .chat-em.big { max-width: 92px; max-height: 92px; } .chat-em.mid { max-width: 58px; max-height: 58px; } .chat-em.orig { max-width: 100px; max-height: 120px; } /* ── أزرار الشريط على الموبايل ─────────────────────────────────── */ @media (max-width: 760px) { body.skin-classic .c-tools { padding: 4px; gap: 3px; } body.skin-classic .c-tools .ct { width: 31px; height: 28px; font-size: 15px; } body.skin-classic .c-tools .ct-gif-label { display: none; } .ct-panel { width: calc(100vw - 12px); max-height: 62vh; } .ct-panel .ctp-body { max-height: 46vh; } .cam-preview { right: 8px; left: 8px; width: auto; bottom: 84px; } } /* [hidden] يجب أن يتغلّب على display:flex (نفس درس «الصورة الثابتة») */ body.skin-classic .c-tools[hidden], #ct-panel[hidden], .cam-preview[hidden] { display: none !important; } /* في الشكل الكلاسيكي: أيقونات الشريط تحلّ محل أزرار الصف القديمة */ body.skin-classic #btn-emoji, body.skin-classic #btn-hand, body.skin-classic #emoji-bar { display: none !important; } body.skin-classic .chat-form { padding: 6px; } body.skin-classic .chat-form #chat-input { font-size: 14px; } /* صور مصغّرة في القائمة (خيار All Settings) */ body.small-avatars.skin-classic #room-users .avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; } body.show-level.skin-classic #room-users .u-sub { opacity: 1; } /* ── لافتة الترحيب الكلاسيكية ──────────────────────────────────── */ body.skin-classic .c-welcome { padding: 10px 12px 6px; margin-bottom: 8px; text-align: center; background: linear-gradient(180deg,#f3f6ff,#e9eefb); border-bottom: 1px solid #cdd6ef; } body.skin-classic .c-welcome .cw-line { font-size: 17px; font-style: italic; font-weight: 800; color: #2f6fb0; text-shadow: 0 1px 0 #fff; letter-spacing: .4px; } body.skin-classic .c-welcome .cw-line b { color: #1b4f8e; } body.skin-classic .c-welcome .cw-line i { color: #6b7280; font-weight: 600; font-style: normal; font-size: 13px; } body.skin-classic .c-welcome .cw-logo { margin-top: 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 900; color: #b8860b; text-shadow: 1px 1px 0 #fff, 2px 2px 3px rgba(0,0,0,.28); letter-spacing: 1px; } body.skin-classic .c-welcome .cw-logo span { display: block; font-size: 10px; letter-spacing: 3px; color: #8a6508; font-family: Tahoma, sans-serif; font-weight: 700; text-transform: lowercase; } /* ═══ إصلاح: سجل الشات لا يمدّد الصفحة — يتمرّر داخلياً (سطح المكتب والموبايل) ═══ */ body.skin-classic .layout { grid-template-rows: minmax(0, 1fr); } body.skin-classic .room-view { min-height: 0; } body.skin-classic .chat-wrap { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: hidden; } body.skin-classic #chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; } body.skin-classic .seats-wrap { flex: 0 0 auto; max-height: 38%; overflow-y: auto; } @media (max-width: 760px) { body.skin-classic .layout { grid-template-rows: none; } body.skin-classic .chat-wrap { max-height: 46vh !important; } body.skin-classic .seats-wrap { max-height: 26vh; } body.skin-classic .users-panel { max-height: 34vh; } } /* صناديق اختيار على الطراز الكلاسيكي داخل نوافذ الشريط */ .ct-panel input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; flex: 0 0 auto; background: #171922; border: 1px solid #0c0d13; border-radius: 3px; cursor: pointer; position: relative; } .ct-panel input[type=checkbox]:checked { background: #2f6fb0; border-color: #1b4f8e; } .ct-panel input[type=checkbox]:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; line-height: 1; } .ct-panel .ct-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════ ★ قائمة الزر الأيمن + نافذة الرسائل الخاصة ═══════════════════════════════════════════════════════════════ */ .ctx-menu { position: fixed; z-index: 90; min-width: 232px; max-width: 300px; background: #262a36; border: 1px solid #0c0d13; border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.6); padding: 4px; color: #e9edf8; font-size: 13px; user-select: none; } .ctx-menu .cm-head { padding: 6px 9px 7px; margin-bottom: 4px; border-bottom: 1px solid #14161f; display: flex; flex-direction: column; gap: 1px; } .ctx-menu .cm-head b { font-size: 13.5px; } .ctx-menu .cm-head small { color: #98a0b8; font-size: 10.5px; } .ctx-menu .cm-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: transparent; border: 0; color: #e9edf8; cursor: pointer; padding: 6px 9px; border-radius: 4px; font-size: 12.8px; } .ctx-menu .cm-item:hover:not(:disabled) { background: #31405c; } .ctx-menu .cm-item:disabled { opacity: .38; cursor: not-allowed; } .ctx-menu .cm-item.danger:hover:not(:disabled) { background: #6b2020; } .ctx-menu .cm-ic { width: 18px; text-align: center; flex: 0 0 auto; } .ctx-menu .cm-lb { flex: 1; } .ctx-menu .cm-arrow { color: #98a0b8; font-size: 11px; } .ctx-menu .cm-sep { height: 1px; background: #14161f; margin: 4px 6px; } .ctx-menu .cm-sub { position: relative; } .ctx-menu .cm-sublist { display: none; margin-inline-start: 14px; border-inline-start: 2px solid #31405c; padding-inline-start: 4px; } .ctx-menu .cm-sublist.open { display: block; } /* نافذة الرسائل الخاصة */ .pm-win { position: fixed; inset-inline-end: 14px; bottom: 92px; z-index: 88; width: 330px; background: #23262f; border: 1px solid #0c0d13; border-radius: 6px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.6); color: #e9edf8; display: flex; flex-direction: column; max-height: 60vh; } .pm-win .pm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: linear-gradient(180deg, #3a3f52, #262a38); border-bottom: 1px solid #101218; font-size: 12.5px; } .pm-win .pm-head small { color: #98a0b8; font-size: 10px; margin-inline-start: 4px; } .pm-win .pm-x { background: none; border: 0; color: #c9cfe6; cursor: pointer; font-size: 13px; padding: 0 3px; } .pm-win .pm-body { padding: 8px; overflow-y: auto; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 6px; } .pm-win .pm-empty { color: #98a0b8; font-size: 11.5px; text-align: center; margin: auto; } .pm-win .pm-line { display: flex; } .pm-win .pm-line.mine { justify-content: flex-end; } .pm-win .pm-msg { max-width: 82%; padding: 5px 9px; border-radius: 11px; font-size: 12.7px; word-break: break-word; background: #313a4e; border: 1px solid #3d4761; } .pm-win .pm-line.mine .pm-msg { background: linear-gradient(135deg, #2c6ea8, #1b4f8e); border-color: #143a6b; color: #fff; } .pm-win .pm-form { display: flex; gap: 5px; padding: 6px; border-top: 1px solid #101218; } .pm-win .pm-form input { flex: 1; background: #171922; color: #e9edf8; border: 1px solid #0c0d13; border-radius: 4px; padding: 6px 8px; font-size: 12.5px; } .pm-win .pm-send { background: linear-gradient(180deg, #4a7fbf, #2f6fb0); border: 1px solid #1b4f8e; color: #fff; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 700; } @media (max-width: 760px) { .ctx-menu { min-width: 210px; font-size: 12.5px; } .pm-win { inset-inline-end: 8px; inset-inline-start: 8px; width: auto; bottom: 84px; } } /* ضمان ظهور الرموز داخل القوائم والنوافذ (خط الإيموجي المضمَّن) */ .ctx-menu, .pm-win, .ct-panel, .c-tools .ct, #c-status, .stat .k, .cm-head { font-family: "Segoe UI", Tahoma, system-ui, -apple-system, "Noto Naskh Arabic", Arial, "MS Emoji", sans-serif; } /* ═══════════════════════════════════════════════════════════════ ★ المرحلة الثانية: Undercover · Invisible · One-to-one ═══════════════════════════════════════════════════════════════ */ /* نافذة Undercover */ .uc-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(6,8,14,.72); display: flex; align-items: center; justify-content: center; padding: 16px; } .uc-card { width: 460px; max-width: 100%; background: #23262f; color: #e9edf8; border: 1px solid #0c0d13; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.65); } .uc-card .uc-head { padding: 10px 14px; font-weight: 800; font-size: 14.5px; background: linear-gradient(180deg, #3a3f52, #262a38); border-bottom: 1px solid #101218; } .uc-card .uc-body { padding: 12px 14px; } .uc-card .uc-hint { font-size: 12.8px; line-height: 1.7; color: #c9cfe6; margin: 0 0 10px; } .uc-card .uc-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .uc-card .uc-field span { font-size: 12.5px; color: #b9c1da; min-width: 90px; } .uc-card .uc-field input { flex: 1; background: #171922; color: #e9edf8; border: 1px solid #0c0d13; border-radius: 5px; padding: 7px 9px; font-size: 13px; } .uc-card .uc-note { font-size: 11.5px; color: #98a0b8; line-height: 1.6; } .uc-card .uc-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #101218; justify-content: flex-end; flex-wrap: wrap; } .uc-btn { border-radius: 5px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid #1b4f8e; background: linear-gradient(180deg, #4a7fbf, #2f6fb0); color: #fff; } .uc-btn.ghost { background: linear-gradient(180deg, #4a4f66, #33374a); border-color: #14151b; } /* شارة Invisible */ .ms-inv-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; background: rgba(120, 90, 200, .25); border: 1px solid #6d5aa8; color: #d9cdfa; border-radius: 20px; font-size: 11px; font-weight: 700; padding: 2px 9px; } body.ms-invisible .logo-sm { filter: hue-rotate(220deg) brightness(.9); } /* بطاقات دعوة One-to-one */ .o2o-invites { position: fixed; inset-inline-end: 14px; bottom: 150px; z-index: 92; display: flex; flex-direction: column; gap: 8px; max-width: 330px; } .o2o-card { background: #23262f; color: #e9edf8; border: 1px solid #0c0d13; border-radius: 7px; box-shadow: 0 16px 40px rgba(0,0,0,.6); overflow: hidden; animation: o2oIn .25s ease; } @keyframes o2oIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .o2o-card .o2o-title { padding: 7px 10px; font-size: 12.5px; font-weight: 800; background: linear-gradient(180deg, #3a3f52, #262a38); border-bottom: 1px solid #101218; } .o2o-card .o2o-text { padding: 9px 11px; font-size: 12.6px; line-height: 1.6; color: #c9cfe6; } .o2o-card .o2o-actions { display: flex; flex-direction: column; gap: 6px; padding: 8px 11px 11px; } .o2o-card button { border-radius: 5px; padding: 8px 10px; font-size: 12.8px; font-weight: 700; cursor: pointer; border: 1px solid transparent; } .o2o-card .o2o-accept { background: linear-gradient(180deg, #3fa34d, #2c7d38); color: #fff; border-color: #1e5a27; } .o2o-card .o2o-decline { background: linear-gradient(180deg, #d33a3a, #a52222); color: #fff; border-color: #7a1717; } .o2o-card button:hover { filter: brightness(1.12); } /* شريط المحادثة الفردية */ .o2o-banner { position: fixed; inset-inline-start: 50%; transform: translateX(-50%); top: 62px; z-index: 91; background: linear-gradient(180deg, #2c6ea8, #1b4f8e); color: #fff; border: 1px solid #143a6b; border-radius: 20px; padding: 6px 14px; font-size: 12.6px; font-weight: 700; box-shadow: 0 10px 26px rgba(0,0,0,.45); display: flex; align-items: center; gap: 10px; } .o2o-banner .o2o-leave { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 14px; padding: 3px 10px; cursor: pointer; font-size: 11.5px; font-weight: 700; } @media (max-width: 760px) { .uc-card { width: 100%; } .o2o-invites { inset-inline: 8px; max-width: none; } .o2o-banner { font-size: 11.5px; padding: 5px 10px; } }