/* =========================================================================
   usx-extras.css
   تنسيقات إضافية لتوحيد شكل (المحادثات الخاصة - نافذة إرسال الإعلان -
   إشعار الإعلان المنبثق داخل الغرفة) مع تصميم لوحة الإعدادات (usx-*)
   يعتمد على متغيرات الثيم الموجودة أصلاً:
   --theme-btcolor / --theme-bgcolor / --theme-hicolor
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) تبويب "المحادثات الخاصة" (#chats)
   ------------------------------------------------------------------------- */
#chats.active{
  display:flex;
  flex-direction:column;
  padding:8px 8px 4px;
  gap:6px;
  overflow-y:auto;
  background:#f5f6fa;
}
#chats.active::-webkit-scrollbar{width:5px;}
#chats.active::-webkit-scrollbar-thumb{background:#cfd3dc;border-radius:10px;}

/* حالة فارغة (لو الجافاسكربت مايحقنش عناصر) - تظهر فقط والتبويب فعلاً نشط */
#chats.active:empty::before{
  content:"لا توجد محادثات خاصة بعد";
  display:block;
  text-align:center;
  color:#9aa0ac;
  font-size:12px !important;
  padding:40px 10px;
}

/* صف كل محادثة/رسالة داخل قائمة الخاص (نفس القالب #umsg .uzr) */
#chats.active .uzr{
  display:flex;
  align-items:center;
  width:100% !important;
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid #eceef2 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:8px 4px !important;
  box-shadow:none;
  transition:background .12s ease;
  cursor:pointer;
}
#chats.active .uzr:hover{
  background:rgba(20,30,50,.03) !important;
}
#chats.active .uzr .u-pic{
  min-width:44px !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  overflow:hidden;
  background-color:#eef0f4 !important;
  border:1.5px solid var(--theme-btcolor);
  flex-shrink:0;
}
#chats.active .uzr .u-ico{
  min-height:12px;
  border-radius:3px;
}
#chats.active .uzr .u-topic{
  font-weight:700 !important;
  font-size:12.5px !important;
  color:#22242c !important;
  background:transparent !important;
  padding:0 4px !important;
}
#chats.active .uzr .u-msg{
  font-size:11.5px !important;
  color:#8b8f99 !important;
  padding:2px 6px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#chats.active .uzr .tago{
  color:#b3b7c1 !important;
  font-size:9.5px !important;
}
#chats.active .uzr .msgActions{
  gap:2px;
}
#chats.active .uzr .msgActionBtn{
  border-radius:50% !important;
  width:24px;
  height:24px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  background:#f1f2f6;
  color:#7d8290;
  border:0 !important;
}
#chats.active .uzr .msgActionBtn-reply:hover{background:var(--theme-btcolor);color:#fff;}
#chats.active .uzr .msgActionBtn-del:hover{background:#ff5252;color:#fff;}

/* -------------------------------------------------------------------------
   2) نافذة إرسال الإعلان (#mnot)
   ------------------------------------------------------------------------- */
.usx-modal-dialog{
  max-width:320px;
  margin:12% auto 0;
}
.usx-modal-content{
  border:0 !important;
  border-radius:16px !important;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  background:#fff;
}
.usx-modal-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--theme-btcolor), var(--theme-hicolor));
  color:#fff;
}
.usx-modal-head-ico{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px !important;
}
.usx-modal-head-title{
  flex:1;
  font-size:13px !important;
  font-weight:700 !important;
}
.usx-modal-close{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);
  cursor:pointer;
  font-size:12px !important;
}
.usx-modal-close:hover{background:rgba(255,255,255,.3);}
.usx-modal-body{
  padding:12px !important;
  background:#f5f6fa;
}
.usx-modal-body .usx-card{
  box-shadow:none;
  border:1px solid #ecedf1;
}
.announceTa{
  min-height:90px !important;
}

/* -------------------------------------------------------------------------
   3) إشعار الإعلان المنبثق داخل الغرفة (#not)
   ------------------------------------------------------------------------- */
.dad > .hand.corner.nosel{
  min-width:220px !important;
  max-width:300px !important;
  top:16px !important;
  left:50% !important;
  margin-left:0 !important;
  transform:translateX(-50%);
  background:#fff !important;
  border:0 !important;
  border-radius:14px !important;
  padding:0 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  overflow:hidden;
}

.dad > .hand.corner.nosel .corner.border.label.label-primary{
  display:flex !important;
  align-items:center;
  gap:8px;
  width:100% !important;
  padding:10px 14px !important;
  border-radius:0 !important;
  background:linear-gradient(135deg, var(--theme-btcolor), var(--theme-hicolor)) !important;
  color:#fff !important;
  font-size:12px !important;
  text-align:right;
}
.dad > .hand.corner.nosel .corner.border.label.label-primary::before{
  content:"\f0a1";
  font-family:FontAwesome;
  font-size:14px !important;
}
/* نص التنبيه (زي: يمكنك ارسال حركة كل 1 دقيقة) */
.dad > .hand.corner.nosel > .break.fl{
  display:block !important;
  width:100% !important;
  background:#fff !important;
  color:#3a3d46 !important;
  font-size:12px !important;
  line-height:1.5;
  padding:10px 14px !important;
  text-align:right;
  border-radius:0 0 14px 14px;
}
/* صف صاحب التنبيه لو موجود (صورة + اسم) */
.dad > .hand.corner.nosel .uzr.d-flex{
  display:flex !important;
  align-items:center;
  gap:8px;
  width:100% !important;
  padding:8px 12px !important;
  background:#fafbfc !important;
  border-bottom:1px solid #f0f1f4 !important;
  border-radius:0 !important;
  margin:0 !important;
}
.dad > .hand.corner.nosel .uzr.d-flex img{
  border-radius:50% !important;
  flex-shrink:0;
}
.dad > .hand.corner.nosel .uzr.d-flex .u-topic{
  font-size:12px !important;
  font-weight:700 !important;
  color:#22242c !important;
}

/* -------------------------------------------------------------------------
   4) البوب أب المنبثق للإعلان (#annpop) - يظهر فوق الشاشة بدل ما يتحقن في فيد الروم
   ------------------------------------------------------------------------- */
.usx-announce-toast{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:5002;
  min-width:240px;
  max-width:320px;
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, var(--theme-btcolor), var(--theme-hicolor));
  color:#fff;
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
}
.usx-announce-toast-out{
}

.usx-announce-toast-ico{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:15px !important;
  flex-shrink:0;
}

.usx-announce-toast-body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.usx-announce-toast-label{
  font-size:10.5px !important;
  font-weight:700 !important;
  opacity:.85;
}
.usx-announce-toast-msg{
  font-size:12.5px !important;
  line-height:1.4;
  word-break:break-word;
}
.usx-announce-toast-close{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:10px !important;
  flex-shrink:0;
}

/* -------------------------------------------------------------------------
   5) زر الإعجاب في البروفايل (.ulike) - الجافاسكربت بيمسح المحتوى ويسيب
   الرقم بس، فبنرجّع أيقونة القلب بـ CSS. [MOVED] الزر بقى دايرة عايمة
   صغيرة فوق غلاف البروفايل (upro-cover-actions) بدل صف upro-actions، فالحجم
   والتنسيق هنا اتظبطوا على الدايرة الجديدة (34px) بدل الصف القديم.
   زر التنبيه (.unot) جمبه محتفظ بأيقونته زي ما هي لأن الجافاسكربت بيغيّر
   لونه بس (background-color) ومش بيمسح محتواه، فمحتاجش نفس المعالجة.
   ------------------------------------------------------------------------- */
.upro-cover-actions .ulike{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  position:relative;
  font-size:8px !important;
  font-weight:700;
  line-height:1;
  color:#e74c3c;
}
.upro-cover-actions .ulike::before{
  content:"\f004";
  font-family:FontAwesome;
  font-size:13px !important;
  line-height:1;
  color:#e74c3c;
}
.upro-cover-actions .ulike:hover,
.upro-cover-actions .ulike.liked{
  color:#fff !important;
}
.upro-cover-actions .ulike:hover::before,
.upro-cover-actions .ulike.liked::before{
  color:#fff;
}

/* -------------------------------------------------------------------------
   6) كارت "نبذة عن مبرمج الموقع" في صفحة الدخول
   ------------------------------------------------------------------------- */
.landingDevCard{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:16px;
  padding:14px;
  margin:14px 0;
  box-shadow:0 2px 10px rgba(20,20,30,.08);
}
.landingDevPic{
  width:62px;
  height:62px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:3px solid var(--theme-btcolor);
  background:#eef0f4;
}
.landingDevInfo{
  flex:1;
  min-width:0;
}
.landingDevName{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:14px !important;
  font-weight:700 !important;
  color:#22242c;
}
.landingDevVerified{
  color:#1d9bf0 !important;
  font-size:14px !important;
}
.landingDevRole{
  font-size:11.5px !important;
  color:#8b8f99;
  margin-top:2px;
}
.landingDevSocial{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.landingDevSocialBtn{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  font-size:14px !important;
  text-decoration:none !important;
  transition:transform .15s ease;
}
.landingDevSocialBtn:hover{
  transform:translateY(-2px);
}
.landingDevFb{background:#1877f2;}
.landingDevWa{background:#25d366;}
.landingDevTg{background:#229ed9;}

/* -------------------------------------------------------------------------
   7) نافذة إنشاء / تعديل الغرفة (#mkr)
   ------------------------------------------------------------------------- */
.usx-modal-dialog-lg{
  max-width:340px;
}
.usx-modal-dialog-lg .usx-modal-body{
  max-height:78vh;
  overflow-y:auto;
}
.usx-modal-dialog-lg .usx-modal-body::-webkit-scrollbar{width:5px;}
.usx-modal-dialog-lg .usx-modal-body::-webkit-scrollbar-thumb{background:#d7dae0;border-radius:10px;}

.usx-input{
  width:100% !important;
  box-sizing:border-box;
  border:1px solid #e3e5ea !important;
  background:#f8f9fb !important;
  border-radius:10px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  color:#22242c !important;
  direction:rtl;
  text-align:right;
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.usx-input:focus{
  border-color:var(--theme-btcolor) !important;
  background:#fff !important;
}
.usx-input::placeholder{
  color:#a7abb5;
}

.usx-field-inline{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.usx-field-inline label{
  margin:0 !important;
  font-size:11.5px !important;
  color:#5c6070;
  white-space:nowrap;
}

.usx-mini-btn.usx-danger{
  background:#fdeceb;
  color:#ff5252;
}

.usx-save-bar-multi{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:10px 12px;
}
.usx-save-bar-multi .usx-save-btn{
  flex:1;
  min-width:96px;
  justify-content:center;
}
.usx-danger-btn{
  background:#ff5252 !important;
}
#mkr .usx-avatar-wrap,
#mkr .usx-avatar-wrap img.picroom{
  width:64px !important;
  height:64px !important;
}
#mkr .usx-avatar-wrap img.picroom{
  border-radius:50% !important;
  object-fit:cover;
}

/* -------------------------------------------------------------------------
   8) إصلاح ترتيب الطبقات: الإطار المتحرك (.imgbaqer) لازم يظهر فوق
   الصورة (.u-pic) مش تحتها - كانت الصورة بترسم فوقه لأنها بعده في الـDOM
   -------------------------------------------------------------------------
   [FIX] المشكلة الأساسية اللي بتسبب "مربع أسود الحواف" حوالين الإطار في أي
   مكان مالوش override خاص بيه (قائمة الإشعارات، وأحيانًا حتى الشات الرئيسي
   لو الصفحة مركّبة على نسخة قديمة من الملف): كان الديفولت العام هنا
   position:relative من غير أي تحديد حجم/قص - يعني العنصر بيترسم بحجمه
   الطبيعي الكامل (مربع كبير) بدل دائرة صغيرة حوالين الصورة، فبيبان مربع
   الصورة الخام بتاعة تصميم الإطار (اللي أطرافها مش شفافة أصلاً) بدل ما
   يتقص على شكل دائرة صغيرة. الحل الجذري: الديفولت العام نفسه يبقى آمن
   ومكتفي بذاته (حجم ثابت صغير + position:absolute + قص دائري) بدل ما
   نعتمد إن كل نافذة جديدة تضيف override خاص بيها - أي override خاص
   (زي #d2/#users/#chats) بيفضل شغال فوق الديفولت ده عادي لأنه أكثر تحديدًا. */
.imgbaqer{
  position:absolute !important;
  top:50% !important;
  right:0 !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  margin:0 !important;
  /* [FIX] بعض المسارات القديمة في x2.js (زي تحديث قائمة المتصلين قبل
     التصليح) كانت بتحط padding:32px يدوي على العنصر ده من غير أي !important
     - ومفيش أي قاعدة قبل كده كانت بتلغيه، فكان بيتضاف فوق الـwidth/height
     المحددين هنا (box-sizing الافتراضي content-box) ويضخم صندوق الإطار
     الفعلي لأضعاف مقاسه المقصود. بنقفل الباب ده هنا نهائيًا عالمستوى
     العام: padding:0 يمنع أي تضخم زيادة، وbox-sizing:border-box شبكة أمان
     إضافية تضمن إن أي padding يتحط بالغلط مستقبلاً ياخد من نفس المقاس
     المحدد (width/height) بدل ما يزوّد عليه. */
  padding:0 !important;
  box-sizing:border-box !important;
  z-index:3 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background-size:cover !important;
  background-position:center !important;
  pointer-events:none !important;
  /* [FIX] حماية عامة: العنصر ده دايمًا جاي بكلاس borderg (مربع حواف خفيف
     border:1px solid #f4f4f4) - بنلغيها هنا مرة واحدة عالمستوى العام عشان
     أي مكان جديد يستخدم .imgbaqer منظهرش فيه الإطار المربع الخفيف ده تاني */
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}
.imgbaqer + .u-pic{
  position:relative !important;
  z-index:1 !important;
}
/* [FIX] الـposition:absolute الجديد فوق بيتموضع بالنسبة لأقرب عنصر أب عنده
   position (relative/absolute/fixed) - لو الصف الحاوي مالوش position خالص
   (زي .uzr.d-flex العادي)، هيرجع العنصر يتموضع بالنسبة لصفحة كاملة مش
   الصف نفسه، فيطلع مكانه غلط تمامًا. شبكة أمان عامة تضمن إن أي صف بيحتوي
   الإطار يبقى نقطة مرجعية صحيحة، حتى لو الحاوية دي جديدة ومفيش لها override
   مخصص. الـoverride المخصص (زي #d2 .uzr.d-flex) لسه بيفضل شغال فوقيها. */
.uzr.d-flex,
.uzr.uhtml .di1,
.cc{
  position:relative !important;
}


/* -------------------------------------------------------------------------
   [FIX] إطار الصورة المتحرك (.imgbaqer) كان بيبان شفاف/مقطوع/طايح جوه
   نوافذ الشريط العلوي (الإشعارات/الرسايل الخاصة)، لأن syncPm()/syncVisits()
   في index.ejs بتعمل clone لصفوف .cc/.notification (اللي جواها .imgbaqer)
   من #chats/#wetchprofilenotifi وتحطها جوه #usxQbPmBody و#usxQbVisitsList
   (داخل .usx-qb-dropdown) - وهي حاويات جديدة مالهاش تنسيق absolute/حجم/قص
   الخاص بـ .imgbaqer (المتعمول بس لما يكون العنصر جوه #users أو #d2/#d2bc).
   فبيرجع للقاعدة العامة بس (position:relative) بمقاسات/هوامش سالبة جاية من
   الجافاسكريبت الأصلي، فيبان خارج حدود الصف. أبسط حل: نمنع ظهوره خالص جوه
   نوافذ الشريط العلوي دي (مش محتاجينه في قائمة معاينة صغيرة زي دي).
   ------------------------------------------------------------------------- */
.usx-qb-dropdown .imgbaqer{
  display:none !important;
}

/* -------------------------------------------------------------------------
   [FIX] نفس مشكلة .usx-qb-dropdown فوق، بس في نوافذ تانية بتفتح فوق صورة
   العضو: نوافذ الخاص المنفصلة (كل نافذة خاص بتاخد id="d2"+معرف العضو من
   openw() في x2.js - مش id="d2" بالظبط، فقاعدة #d2 .uzr.d-flex > .imgbaqer
   الأصلية مش بتلمسها خالص) ومودال التعليقات (#cooment/#rmsg اللي بيستخدم
   نفس قالب #umsg وماعندوش أي تنسيق لـ.imgbaqer في comments-ui.css). في
   الحالتين .imgbaqer بيرجع للقاعدة العامة بس (position:relative) بمقاسات/
   هوامش سالبة جاية من applyMsgUserIcon في x2.js، فبيبان طايح/مقطوع جوه صف
   الرسالة بدل ما يتمركز حوالين الصورة. نفس الحل: نخفيه (شفاف) في النوافذ
   دي بدل ما يبان مكسور. #d2 و#d2bc الأصليين مستثنيين لأنهم عندهم تنسيق
   صحيح فوق (السطر 1179). */
[id^="d2"]:not(#d2):not(#d2bc) .imgbaqer,
#cooment .imgbaqer{
  display:none !important;
}

/* -------------------------------------------------------------------------
   [FIX] كارت "الإشعار" (زيارة بروفايل/تنبيه) عنده في base-styles.css بوردر
   أسود صريح قديم الطراز (border:1px solid #000) وخلفية رمادية (#efefef).
   ده كان اتظبط بس جوه القائمة المنسدلة الجديدة (.usx-qb-dd-body .notification
   بالأسفل)، لكن لو المستخدم فتح اللوحة القديمة (.dpnl > #wetchprofilenotifi)
   بدل الأيقونة الجديدة في الشريط العلوي، بيشوف المربع الأسود القديم ده لسه
   واقف زي ما هو لأنه معندوش أي Override في المستوى العام. بنوحد الشكل هنا
   عالمستوى العام عشان يبقى نفس التصميم الحديث في أي مكان يتعرض فيه. */
.notification{
  border:1px solid #f0f0f6 !important;
  background-color:#fff !important;
  box-shadow:0 1px 3px rgba(20,20,40,.05) !important;
  border-radius:12px !important;
}
.notification__sender__avatar{
  border-radius:50% !important;
  object-fit:cover;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(20,30,50,.08);
}
.notification__title{
  background:#eef1fb !important;
  color:#5b6b93 !important;
  border:none !important;
}

/* -------------------------------------------------------------------------
   9) العلم (.co) في صف المتصلين - يفضل ثابت المكان والحجم، والاسم/الحالة
   يتقصر بـ "..." بدل ما يدفع العلم برا الصف (الصف قائم على float مش flex)
   ------------------------------------------------------------------------- */
.uzr .di1{
  max-width:calc(100% - 36px) !important;
  box-sizing:border-box !important;
}
.uzr .di3{
  width:36px !important;
  flex-shrink:0 !important;
}
.uzr .di3 .co{
  flex-shrink:0 !important;
  min-width:16px;
}
.uzr .di2{
  min-width:0 !important;
  overflow:hidden !important;
}
.uzr .di2 .u-topic{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
.uzr .di2 .u-msg{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center !important;
}

/* -------------------------------------------------------------------------
   10) نشر القصة في الحائط - كان بياخد "position" من مكانه القديم فمربع
   بحث يوتيوب كان بيغطي عليه. نرجعه لتدفق طبيعي فوق مربع البحث
   ------------------------------------------------------------------------- */
#wall .itemstory{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  height:auto !important;
  display:flex !important;
  box-sizing:border-box;
  z-index:2;
  background:#fff;
}
#wall .youtubeSearch{
  position:relative !important;
  z-index:1;
}

/* -------------------------------------------------------------------------
   11) شريط "نشر قصة" في أعلى الحائط - شكل أنيق متماشي مع باقي التصميم
   ------------------------------------------------------------------------- */
.usx-story-bar{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px 10px;
  background:#fff;
  overflow-x:auto;
}
.usx-story-bar::-webkit-scrollbar{height:0;}
.usx-story-add{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.usx-story-ring{
  position:relative;
  width:60px;
  height:60px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(135deg, var(--theme-btcolor), var(--theme-hicolor));
  display:flex;
  align-items:center;
  justify-content:center;
}
.usx-story-pic{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  background:#eef0f4;
}
.usx-story-plus{
  position:absolute;
  bottom:-2px;
  left:-2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--theme-btcolor);
  border:2px solid #fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px !important;
  cursor:pointer;
}
.usx-story-label{
  font-size:11px !important;
  color:#5c6070;
  font-weight:600 !important;
}

/* ================= [ADDED] الشريط العلوي السريع فوق المايكات: صورة الحساب + الإشعارات + الخاص ================= */
/* لازم لوحة #dpnl (الإعدادات/الخاص/المتواجدين...) تفضل دايماً فوق الشريط الجديد وقوائمه المنسدلة حتى يظهر زرار الإغلاق ويشتغل بشكل طبيعي (بدون ما تتعارض مع مودالات أعلى زي إعلانات الإدارة أو استوديو التصميم) */
#dpnl{ z-index:4000; }
/* -------------------------------------------------------------------------
   [FIX] لوحة #dpnl (المتصلين/الأصدقاء/الخاص/الحائط/الضبط) كانت بارتفاع ثابت
   inline (height:590px) بيتجاهل ارتفاع مربع كتابة الرسالة (#roomToolbar)
   وشريط التبويبات السفلي (#d0) اللي بقوا أطول بعد التصميم الجديد لهم في
   bottom-toolbar.css - فكان الجزء السفلي من اللوحة (وبالتالي آخر عنصر جواها)
   بيتمد لتحت أكتر من اللازم ويغطي عليهم بدل ما يوقف فوقيهم.

   الحل: شيلنا الـheight الثابت من inline style في index.ejs، وهنا بنخلي
   اللوحة تاخد ارتفاعها تلقائيًا (auto) من الفرق بين top:0 و bottom المحجوز
   (ارتفاع مربع الكتابة + شريط التبويبات سوا، محسوبين في bottom-toolbar.css).
   ده بيخلي اللوحة توقف بالظبط فوقهم في كل الشاشات من غير تغطية.

   ملحوظة مهمة: الحائط (#wall.active) عنده height:100%!important خاص بيه
   (شوف [ADDED] إصلاح تخطيط الحائط تحت) بيورث نسبته من ارتفاع #dpnl نفسه -
   فلما #dpnl بقى محسوب صح، مربع إرسال الحائط (.tablebox) بيفضل ظاهر
   تلقائيًا من غير أي تعديل إضافي عليه، ومن غير ما يختفي أو يتقص. */
#dpnl{
  height:auto!important;
  bottom:calc(var(--tb-toolbar-h, 58px) + var(--tb-nav-h, 67px))!important;
}
/* [FIX] الحافة السوداء العادية اللي كانت حوالين اللوحة (border:1px solid
   في base-styles.css) بقت واضحة جدًا خصوصًا تحت بعد ما اللوحة بقت بتوقف
   بالظبط فوق مربع الكتابة - شيلناها واستبدلناها بظل خفيف يفصل اللوحة عن
   الخلفية بشكل أنعم، بينسجم مع باقي التصميم الحديث في الموقع */
#dpnl{
  border:none!important;
  box-shadow:0 4px 18px rgba(0,0,0,.18)!important;
}
/* [FIX] بروفايل المستخدم (#upro) كان بيتفتح بـ z-index أقل من قايمة المتصلين (#dpnl:4000)
   فكانت القايمة بتفضل ظاهرة فوق البروفايل بدل ما تختفي وراه. بنرفع المودال وخلفيته
   فوق قايمة المتصلين عشان البروفايل يظهر صح فوقها. */
#upro.modal{ z-index:4300 !important; }
.modal-backdrop{ z-index:4290 !important; }

.usx-quickbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;flex:0 0 auto;width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(20,30,50,.08);
  position:relative;z-index:2;
}
/* [ADDED] زرار القائمة الجديد لوحده على شمال الشريط (الفراغ اللي كان فاضي)،
   وباقي الأيقونات (الأفاتار + الراديو المُضاف ديناميكياً + الخاص + الإشعارات)
   فاضلة ملتصقة ببعض في مجموعة واحدة على يمين الشريط زي ما كانت بالظبط -
   منستخدملهم عنصر التفاف واحد usx-qb-right عشان "space-between" فوق يفرّق
   بين مجموعتين بس (القائمة، والمجموعة) مش بين كل أيقونة والتانية. */
.usx-qb-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ================= [ADDED] زرار القائمة (الثلاث شرطات) في الشريط العلوي ================= */
.usx-qb-menu-btn{ background:#fff; }
.usx-qb-bars{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:18px; }
.usx-qb-bars i{
  display:block; width:100%; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--theme-btcolor),var(--theme-hicolor));
  transition:transform .2s ease, opacity .2s ease, width .2s ease;
}
.usx-qb-bars i:nth-child(2){ width:74%; align-self:flex-end; }
.usx-qb-menu-btn:hover .usx-qb-bars i{ width:100%; }
.usx-qb-menu-dropdown{ transform-origin:top left; }
.usx-qb-menu-body{ padding:8px; display:flex; flex-direction:column; gap:8px; }
.usx-qb-menu-opt{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right;
  background:#fafafd; border:1px solid #f0f0f6; border-radius:14px; padding:10px;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.usx-qb-menu-opt:hover{ border-color:rgba(20,30,50,.14); box-shadow:0 3px 10px rgba(20,20,40,.08); }
.usx-qb-menu-opt:active{ transform:scale(.97); }
.usx-qb-menu-ico{
  width:38px; height:38px; min-width:38px; border-radius:12px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 3px 8px rgba(20,30,50,.16); flex-shrink:0;
}
.usx-qb-menu-ico-gold{ background:linear-gradient(135deg,#ffd166,#e0a100); }
.usx-qb-menu-ico-pink{ background:linear-gradient(135deg,#ff5f7e,#c2185b); }
.usx-qb-menu-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:right; }
.usx-qb-menu-txt b{ font-size:12px; color:#2c2c3a; }
.usx-qb-menu-txt small{ font-size:10px; color:#a3a3b0; font-weight:400; }
.usx-qb-menu-chev{ color:#c7c7d4; font-size:12px; flex-shrink:0; }
.usx-qb-avatar{
  width:42px;height:42px;min-width:42px;border-radius:50%;padding:2px;border:none;
  background:linear-gradient(135deg,var(--theme-btcolor),var(--theme-hicolor));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.18);flex-shrink:0;cursor:pointer;
  transition:transform .12s ease;
}
.usx-qb-avatar:active{transform:scale(.92);}
.usx-qb-avatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2px solid #fff;background:#eee;display:block;
}
.usx-qb-item{position:relative;flex-shrink:0;}
.usx-qb-ico{
  width:40px;height:40px;border-radius:50%;border:none;
  background:#fff;color:var(--theme-btcolor);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(20,30,50,.14);position:relative;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.usx-qb-ico:hover{box-shadow:0 4px 12px rgba(20,30,50,.2);}
.usx-qb-ico:active{transform:scale(.92);}
.usx-qb-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 3px;
  background:linear-gradient(135deg,#ff6b81,#ff4757);color:#fff;border-radius:9px;
  font-size:9px;font-weight:800;display:none;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(255,71,87,.5);border:2px solid #fff;line-height:1;
}
.usx-qb-dropdown{
  position:fixed;top:0;left:0;
  width:min(272px,calc(100vw - 16px));max-height:min(380px,calc(100vh - 90px));
  background:#fbfbfd;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(20,20,40,.24);border:1px solid rgba(20,30,50,.06);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.96);transform-origin:top right;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  display:flex;flex-direction:column;z-index:3000;
}
.usx-qb-dropdown.usx-qb-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);}
.usx-qb-dropdown-wide{width:min(300px,calc(100vw - 16px));}
.usx-qb-dd-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--theme-btcolor),var(--theme-hicolor));color:#fff;
}
.usx-qb-dd-title{font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px;}
.usx-qb-dd-close{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;
  transition:background .15s ease;
}
.usx-qb-dd-close:hover{background:rgba(220,53,69,.9);}
.usx-qb-dd-body{padding:10px;overflow-y:auto;flex:1;min-height:60px;-webkit-overflow-scrolling:touch;}
.usx-qb-empty{text-align:center;color:#b3b3c0;font-size:11.5px;padding:26px 10px;}
.usx-qb-sep{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font-size:10.5px;color:#a9a9b8;font-weight:700;}
.usx-qb-sep:before,.usx-qb-sep:after{content:"";flex:1;height:1px;background:#eee;}
.usx-qb-dd-foot{flex-shrink:0;padding:8px 10px;border-top:1px solid #f0f0f6;background:#fff;}
.usx-qb-dd-foot button{
  width:100%;background:#fafafd;border:1px solid #ecebf3;border-radius:10px;padding:9px;
  font-size:11.5px;font-weight:700;color:#444;display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;
}
.usx-qb-dd-foot button:active{transform:scale(.97);}

/* تنسيق عناصر الإشعارات المستنسخة (زيارات البروفايل / إعجاب / تنبيهات) داخل القائمة الجديدة */
.usx-qb-dd-body .notification{
  min-width:0;max-width:none;width:100%;box-sizing:border-box;
  border:1px solid #f0f0f6;background:#fff;box-shadow:0 1px 3px rgba(20,20,40,.04);
  margin:0 0 8px;padding:9px 10px;border-radius:12px;position:relative;
}
.usx-qb-dd-body .notification__title{
  display:inline-block;position:static;margin:0 0 6px;width:auto;border:none;
  background:#eef1fb;color:#5b6b93;font-size:9.5px;font-weight:800;
  padding:2px 8px;border-radius:8px;line-height:1.5;text-align:center;
}
.usx-qb-dd-body .notification__sender{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.usx-qb-dd-body .notification__sender__avatar{
  width:30px;height:30px;min-width:30px;border-radius:50%;object-fit:cover;margin:0;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(20,30,50,.08);
}
.usx-qb-dd-body .notification__sender__name{margin:0;font-size:11.5px;max-width:100%;}
.usx-qb-dd-body .notification__sender__name .u-topic{font-size:11.5px;font-weight:800;color:#2c2c3a;padding:1px 6px;border-radius:6px;}
.usx-qb-dd-body .notification__message{font-size:11px;color:#666;font-weight:500;margin-top:2px;width:100%;padding:0;}
.usx-qb-dd-body .notification__time{position:static;display:block;margin-top:5px;font-size:9.5px;color:#a9a9b8;text-align:left;}
/* حالة "غير مقروء" لعنصر الإشعار (زيارة بروفايل / تنبيه / إعجاب) - بتتشال أوتوماتيك
   لما المستخدم يفتح ايقونة الإشعارات ويشوفها (تتحول لمقروءة). */
.usx-qb-dd-body .notification{transition:background .5s ease,border-color .5s ease,box-shadow .5s ease;}
.usx-qb-dd-body .notification.usx-qb-new{
  background:#eef4ff !important;border-color:#cfe0ff !important;
  box-shadow:0 1px 3px rgba(40,90,200,.15) !important;
}
.usx-qb-dd-body .notification.usx-qb-new::after{
  content:"";position:absolute;top:10px;left:10px;width:8px;height:8px;
  border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2px #fff;
}

/* تنسيق عناصر المحادثات الخاصة المستنسخة داخل القائمة المنسدلة */
.usx-qb-dd-body .cc{
  background:#fff;border:1px solid #f0f0f6;border-radius:12px;position:relative;
  padding:6px 8px !important;margin:0 0 8px !important;box-shadow:0 1px 3px rgba(20,20,40,.04);
}
.usx-qb-dd-body .cc.unread{background:#fff4e9;border-color:#ffd9ad;}
.usx-qb-dd-body .cc .uzr{display:flex !important;align-items:center;gap:8px;}
.usx-qb-dd-body .cc .u-pic{
  width:38px;height:38px;min-width:38px;min-height:38px;max-height:38px;border-radius:50%;
  background-color:#eef0f5;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(20,30,50,.08);margin-top:0;
}
.usx-qb-dd-body .cc .u-topic{font-size:12px;font-weight:800;color:#2c2c3a;background:transparent !important;}
.usx-qb-dd-body .cc .u-msg{font-size:10.5px;color:#9a9aa8;}
.usx-qb-dd-body .cc .uhash{font-size:9px;color:#b3b3c0;}
.usx-qb-dd-body .cc .label-danger{
  position:absolute;top:6px;left:6px;margin:0 !important;
  width:22px;height:22px;padding:0 !important;border-radius:50%;
  display:flex !important;align-items:center;justify-content:center;
  font-size:0 !important;line-height:1;
  background:rgba(220,53,69,.1) !important;color:#dc3545 !important;border:0 !important;
  box-shadow:none !important;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .12s ease;
}
.usx-qb-dd-body .cc .label-danger:before{
  font-family:FontAwesome;font-size:11px !important;
}
.usx-qb-dd-body .cc .label-danger:hover{background:#dc3545 !important;color:#fff !important;}
.usx-qb-dd-body .cc .label-danger:active{transform:scale(.9);}
@media (max-width:420px){
  .usx-quickbar{padding:7px 10px;gap:8px;}
  .usx-qb-avatar{width:38px;height:38px;min-width:38px;}
  .usx-qb-ico{width:36px;height:36px;font-size:15px;}
}

/* ===========================================================================
   [ADDED] نافذتا "مبدع الحائط" و"الأعضاء الأكثر تميزاً" - بطاقة منبثقة عصرية
   في منتصف الشاشة بحواف دائرية مضبوطة (squircle) بدل التبويب القديم داخل
   لوحة المتواجدين. تعتمد على نفس أسماء الأصناف (u-top1, lk-top1, ltop ...)
   اللي بيستخدمها x2.js حتى تفضل البيانات شغالة زي ما هي بدون أي تعديل إضافي.
   =========================================================================== */
.usx-popup-overlay{
  display:flex !important; align-items:center; justify-content:center;
  position:fixed; inset:0; width:100%; height:100%;
  background:rgba(15,18,30,.6);
  z-index:6000; padding:18px; box-sizing:border-box;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s;
}
.usx-popup-overlay.usx-popup-open{ opacity:1; visibility:visible; pointer-events:auto; }
.usx-popup-card{
  width:100%; max-width:360px; max-height:min(600px,86vh);
  background:#fbfbfd; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 20px 50px rgba(10,10,25,.35);
  transform:translateY(14px) scale(.94); opacity:0;
  transition:transform .26s cubic-bezier(.2,.9,.3,1.24), opacity .22s ease;
}
.usx-popup-overlay.usx-popup-open .usx-popup-card{ transform:translateY(0) scale(1); opacity:1; }
.usx-popup-head{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; color:#fff;
  background:linear-gradient(135deg,var(--theme-btcolor),var(--theme-hicolor));
}
.usx-popup-head-gold{ background:linear-gradient(135deg,#ffb703,#e0a100); }
.usx-popup-title{ font-size:14px; font-weight:800; display:flex; align-items:center; gap:7px; }
.usx-popup-close{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.usx-popup-close:hover{ background:rgba(220,53,69,.9); }
.usx-popup-close:active{ transform:scale(.9); }
.usx-popup-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 14px 16px; }

.usx-podium{ position:relative; }
.usx-podium-rank{
  margin-top:6px; display:inline-flex; align-items:center; gap:5px;
  background:#f1f1f9; color:var(--theme-btcolor); font-size:10.5px; font-weight:800;
  padding:3px 9px; border-radius:20px;
}
.usx-podium-bars{ border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(20,20,40,.1); }
.usx-podium-bars > div{ box-shadow:none !important; }

.usx-rank-list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.usx-rank-row{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #f0f0f6; border-radius:14px; padding:8px 10px;
  box-shadow:0 1px 4px rgba(20,20,40,.05);
}
.usx-rank-badge{
  min-width:24px; height:24px; border-radius:8px; background:#f1f1f9; color:#7a7a8c;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.usx-rank-row-gold .usx-rank-badge{ background:#fdf1d6; color:#c98a00; }
.usx-rank-pic{
  width:42px; height:42px; min-width:42px; border-radius:12px; object-fit:cover;
  background:#eef0f5; box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(20,30,50,.08);
}
.usx-rank-pic-gold{ box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(224,161,0,.35); }
.usx-rank-name{
  flex:1; min-width:0; font-size:12.5px; font-weight:700; color:#2c2c3a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.usx-rank-count{
  flex-shrink:0; display:flex; align-items:center; gap:5px;
  background:#f1f1f9; color:var(--theme-btcolor); font-size:10.5px; font-weight:800;
  padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.usx-rank-count-gold{ background:#fdf1d6; color:#c98a00; }

@media (max-width:420px){
  .usx-popup-card{ border-radius:22px; }
  .usx-popup-title{ font-size:13px; }
}

/* ============ [ADDED] متجر مميزات العضوية (store-system) ============ */
/* public/store-system/store.css */

/* أيقونة المتجر بجانب زرار القائمة (التلت شرط) */
.usx-qb-store-btn {
  position: relative;
}
.usx-qb-store-btn i.fa-shopping-bag,
.usx-qb-store-btn i.fa-shopping-cart {
  font-size: 16px;
}

.store-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
}

.store-modal {
  max-width: 640px;
  margin: 40px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.store-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, #ff9800, #f57c00);
  color: #fff;
}

.store-likes-balance-wrap {
  padding: 8px 16px;
  background: #fff7e6;
  font-weight: bold;
  color: #b45309;
}

.store-modal-body {
  overflow-y: auto;
  padding: 12px 16px;
}

.store-section-title {
  font-weight: bold;
  margin: 10px 0 6px;
  color: #444;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

.store-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store-card {
  width: 110px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  background: #fafafa;
}

.store-card-img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  margin-bottom: 4px;
}

.store-card-icon {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #f0ad4e;
}

.store-card-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.store-buy-btn {
  border: none;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  background: #5cb85c;
  color: #fff;
}
.store-buy-btn-30 {
  background: #337ab7;
}

.store-card-active {
  color: #2e7d32;
  font-weight: bold;
  font-size: 12px;
  padding-top: 8px;
}

.store-empty {
  text-align: center;
  color: #999;
  padding: 30px 0;
}

.store-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  z-index: 5000;
}
.store-toast-error {
  background: #d9534f;
}

/* حقول السعر في لوحة التحكم - خانة الإضافات */
.store-admin-price-row {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-top: 2px;
}
.store-admin-price-row input {
  width: 46px;
  font-size: 11px;
  padding: 1px 3px;
}

/* =========================================================================
   [ADDED - RTL FLIP] قلب كارت العضو في الشات العام (#d2) والحائط/الإعلانات
   (#d2bc) بالكامل من اليسار لليمين: الصورة، الأيقونة، الاسم، الوقت، والنص.
   وكمان رسائل النظام (انضمام غرفة / الانتقال لغرفة تانية / مغادرة الغرفة /
   تسجيل الخروج) اللي بتوصل جوه نفس الكارت كـ HTML من السيرفر (.sysNotice).
   ========================================================================= */

/* الكارت نفسه: الصورة كانت أول عنصر (تظهر شمال) - direction:rtl بيخلي
   الفلكس بتاعها يترتب من اليمين تلقائيًا (الصورة تبقى يمين، عمود النص شمالها) */
#d2 > .uzr.d-flex,
#d2bc > .uzr.d-flex{
  direction:rtl !important;
  padding-left:0 !important;
  padding-right:2px !important;
}
#d2 > .uzr.d-flex > .uzr.flex-fill,
#d2bc > .uzr.d-flex > .uzr.flex-fill{
  padding-left:0 !important;
  padding-right:6px !important;
  text-align:right !important;
}
/* صف (الأيقونة + الاسم) و(الوقت) بيترتب صح تلقائيًا مع direction:rtl
   الموروثة، بس بنثبّت الهوامش الصغيرة اللي كانت متظبطة على اليسار */
#d2 .uzr.d-flex .u-topic,
#d2bc .uzr.d-flex .u-topic{
  margin-left:0 !important;
  margin-right:4px !important;
}
#d2 .uzr.d-flex .tago,
#d2bc .uzr.d-flex .tago{
  margin-right:0 !important;
  margin-left:4px !important;
}

/* =========================================================================
   [ADDED - ROOM CHAT BACKGROUND] لما الغرفة يكون ليها خلفية شات (roommsgbg)،
   #d2 بياخد كلاس usx-has-chatbg (applyRoomMsgBg في x2.js). كارت كل رسالة
   (.uzr.d-flex) كان أصلاً بلون خلفية أبيض/فاتح ثابت (background-color:#fafafa
   من قالب #umsg، وكمان JS بيغيّره inline لبعض الحالات زي لون اسم العضو أو
   الرد) وده كان بيغطي الخلفية بالكامل. هنا بنشيل الخلفية دي تمامًا (شفافية
   كاملة، من غير أي طبقة بيضاء فوقها) مع !important عشان يغلب أي inline style
   (سواء من القالب أو من AddMsg في x2.js) ويسيب خلفية الروم ظاهرة وراه.
   ========================================================================= */
#d2.usx-has-chatbg > .uzr.d-flex{
  background:transparent !important;
  border-radius:14px !important;
  border-bottom:none !important;
  margin:6px 8px !important;
  width:calc(100% - 16px) !important;
  box-shadow:none !important;
  transition:background .2s ease;
}
#d2.usx-has-chatbg > .uzr.d-flex:hover{
  background:transparent !important;
}
/* الكارت اللي بيتفتح فيه رد (reply) كان بيتلوّن aliceblue صلب من JS - بنخليه
   شفاف تمامًا برضه، من غير طبقة لون فوق خلفية الروم */
#d2.usx-has-chatbg > .uzr.d-flex[style*="aliceblue"]{
  background:transparent !important;
}
/* صورة العضو داخل الكارت كانت بخلفية رمادي فاتح صلبة (#f3f3f3) - بنخليها
   شفافة تمامًا كمان عشان ما تفضلش بقعة مربعة واضحة فوق الخلفية */
#d2.usx-has-chatbg > .uzr.d-flex .u-pic{
  background-color:transparent !important;
}

/* نص الرسالة نفسه */
#d2 .uzr.d-flex .u-msg,
#d2bc .uzr.d-flex .u-msg{
  direction:rtl !important;
  text-align:right !important;
}
/* اقتباس الرد (لو الرسالة ردّ على رسالة تانية) */
#d2 .uzr.d-flex .u-rply .grid-container,
#d2bc .uzr.d-flex .u-rply .grid-container{
  border-left:none !important;
  border-right:4px solid cornflowerblue !important;
}
#d2 .uzr.d-flex .u-rply .item3,
#d2 .uzr.d-flex .u-rply .item5,
#d2bc .uzr.d-flex .u-rply .item3,
#d2bc .uzr.d-flex .u-rply .item5{
  text-align:right !important;
}

/* -------------------------------------------------------------------------
   رسائل النظام (sysNotice) - تسجيل خروج / انضمام لغرفة / الانتقال لغرفة
   أخرى / مغادرة الغرفة - بتوصل جاهزة من السيرفر جوه .u-msg. مفيش لها تصميم
   قبل كده فكانت بتظهر كنص عادي شمال. دلوقتي شكل "شريحة" ملوّنة حسب النوع
   ومتجهة بالكامل لليمين (الأيقونة يمين النص).
   ------------------------------------------------------------------------- */
.sysNotice{
  display:flex !important;
  flex-direction:row-reverse;
  align-items:center;
  gap:6px;
  direction:rtl;
  text-align:right;
  width:fit-content;
  max-width:100%;
  margin:2px 0;
  padding:5px 12px;
  border-radius:20px;
  font-size:11.5px !important;
  font-weight:700 !important;
  line-height:1.5;
}
.sysNotice .fa{
  font-size:11px !important;
  flex-shrink:0;
}
.sysNoticeText{
  white-space:normal;
  word-break:break-word;
}
.sysNotice-join{background:rgba(46,204,113,.12); color:#1e8449;}
.sysNotice-join .fa{color:#2ecc71;}
.sysNotice-leave{background:rgba(149,165,166,.15); color:#616a6b;}
.sysNotice-leave .fa{color:#95a5a6;}
.sysNotice-logout{background:rgba(231,76,60,.12); color:#c0392b;}
.sysNotice-logout .fa{color:#e74c3c;}
/* شريحة اسم الغرفة القابلة للضغط جوه رسالة النظام (الانتقال لغرفة تانية) */
.sysNoticeRoomBtn{
  cursor:pointer;
  text-decoration:underline;
  font-weight:800;
  margin-right:2px;
}

/* -------------------------------------------------------------------------
   [FIX] زرار الحذف (X) وزرار الرد كانوا لسه عالقين يمين (fr) بعد قلب
   الكارت - دلوقتي بننقلهم لليسار عشان يبقوا في الطرف التاني (بعيد عن الصورة)
   ------------------------------------------------------------------------- */
#d2 .uzr.d-flex .msgActions,
#d2bc .uzr.d-flex .msgActions{
  float:left !important;
  direction:ltr;
}

/* =========================================================================
   [ADDED - REDESIGN] شكل كارت العضو في الشات العام (#d2) والحائط (#d2bc)
   زي الصورة اللي اتبعتت بالظبط: صورة كبيرة بإطار متحرك عليها + شارة رتبة
   جنبها + الاسم والرسالة في سطر واحد "الاسم : الرسالة" + خطوط متبادلة بين
   الصفوف + قايمة "ثلاث نقط" تجمع زرار الرد والحذف بدل ما يكونوا ظاهرين
   طول الوقت.
   ========================================================================= */
#d2:not(.usx-has-chatbg) > .uzr.d-flex,
#d2bc:not(.usx-has-chatbg) > .uzr.d-flex{
  position:relative !important;
  align-items:center !important;
  min-height:0;
  padding:8px 14px 8px 36px !important; /* مساحة شمال العنصر لزرار التلات نقط */
  background:#f4f5f7 !important;
  border-bottom:none !important;
}
/* [ADDED] لازم العنصرين دول (position/align/padding) يفضلوا شغالين برضه وقت
   وجود خلفية للروم (مش بس اللون)، فبنكررهم هنا من غير اللون بس */
#d2.usx-has-chatbg > .uzr.d-flex,
#d2bc.usx-has-chatbg > .uzr.d-flex{
  position:relative !important;
  /* align-items:center !important; */
  min-height:0;
  padding:8px 14px 8px 36px !important;
  border-bottom:none !important;
}
/* [FIX] بعد ما جربنا نغلب القاعدة دي بقاعدة تانية بنفس درجة التحديد ومكانتش
   بتكسب دايمًا، بدّلنا الأسلوب: بنستثني وضع خلفية الروم (#d2.usx-has-chatbg)
   من القاعدة نفسها بـ :not()، فالقاعدة دي أصلاً مبقاش بتتفعل خالص وقت وجود
   خلفية - بدل ما نحاول نلغيها بقاعدة تانية بعدها. */
#d2:not(.usx-has-chatbg) > .uzr.d-flex:nth-child(even),
#d2bc:not(.usx-has-chatbg) > .uzr.d-flex:nth-child(even){
  background:#fbfbfc !important;
}

/* -------------------------------------------------------------------------
   [REWRITE] نسخة طبق الأصل من تقنية قايمة المتصلين (#users) لصورة/إطار
   العضو في الرسائل، بنفس المقاسات بالظبط:
     - الصورة (.u-pic): 38×38 دائرة كاملة (نفس مقاس #users بالحرف)
     - الإطار (.imgbaqer): 46×46 متمركز فوق الصورة ببروز 4px من كل جهة
       (نفس مقاس/بروز #users بالحرف)، عن طريق top:50% + transform:translateY(-50%)
       + right:-4px - وده بقى ممكن دلوقتي لأن الإطار والصورة بقوا جوه
       wrapper صغير (.usx-d2-avatar) بمقاس الصورة بالظبط (زي .di1 في #users)،
       فالتموضع بالنسبة للصورة نفسها مباشرة، مش بالنسبة لصف الرسالة الطويل.
   ------------------------------------------------------------------------- */
#d2 .uzr.d-flex > .usx-d2-avatar,
#d2bc .uzr.d-flex > .usx-d2-avatar{
  position:relative !important;
  display:flex !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  flex-shrink:0 !important;
  margin:0 !important;
  /* [FIX] نفس الهامش العلوي القديم عشان الصورة تفضل ملازمة سطر الاسم فوق
     تمامًا زي ما كانت (الصف align-items:flex-start تحت) */
  margin-top:1px !important;
}
#d2 .usx-d2-avatar > .u-pic,
#d2bc .usx-d2-avatar > .u-pic{
  min-width:38px !important;
  width:38px !important;
  height:38px !important;
  max-height:none !important;
  border-radius:50% !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:1 !important;
  flex-shrink:0 !important;
  margin:0 !important;
}
/* [FIX] الصف كان align-items:center، فلما الرسالة تطول ويطول الصف معاها،
   الـwrapper (وبالتالي الصورة والإطار) كانوا بيتزحلقوا لتحت مع نص ارتفاع
   الصف الجديد الأطول، فيبان وكأنهم "بينزلوا مع الكلام". دلوقتي الصف نفسه
   بيثبّت أولاده فوق عند الحافة العلوية دايمًا (flex-start) بدل التوسيط
   الرأسي، فالصورة تفضل ملازمة سطر الاسم بالظبط مهما طال الكلام تحتها. */
#d2 > .uzr.d-flex,
#d2bc > .uzr.d-flex{
  align-items:flex-start !important;
}
/* الإطار المتحرك - نفس أرقام #users بالحرف (top:50%/-4px/46px/translateY) */
#d2 .usx-d2-avatar > .imgbaqer,
#d2bc .usx-d2-avatar > .imgbaqer{
  position:absolute !important;
  top:50% !important;
  right:-4px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  max-height:none !important;
  margin:0 !important;
  z-index:3 !important;
  /* [FIX] العنصر جاي بكلاس borderg اللي بيحط مربع حواف خفيف حوالين الصورة
     نفسها - بيبان كإطار مربع تحت/فوق الإطار المتحرك الدائري، فبنشيله هنا */
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}


/* -------------------------------------------------------------------------
   [ADDED] تكبير الإيموشن المُرسل داخل الرسائل (الروم + الخاص) لحوالي مرة
   ونص (20px الأصلية -> 30px). الإيموشن بيتحط كـ<img class="emoi"> جوه
   .u-msg من دالة emo() في x2.js، وده نفس الكلاس المستخدم في شبكة اختيار
   الإيموشن (.emoji-picker-wrap .emoji-grid .emoi)، فبنحدد السلكتور هنا
   بدقة على .u-msg بس عشان التكبير ميأثرش على شكل شبكة الاختيار (اللي
   أصلاً عندها تنسيق مستقل بمقاس تاني). [id^="d2"]:not(#d2bc) بتغطي
   الروم (#d2) وكل نوافذ الخاص (#d2<معرف العضو>) وتستثني الحائط (#d2bc)
   لأن الطلب كان الروم والخاص بس. width متسيبة auto عشان النسبة الطبيعية
   للصورة تفضل سليمة زي ما هي، بس بارتفاع أكبر. */
#d2 .u-msg .emoi,
[id^="d2"]:not(#d2):not(#d2bc) .u-msg .emoi{
  height: 50px !important;
  max-height: 50px !important;
  width:auto !important;
}
/* [ADDED] الضغط على إيموشن جوه رسالة في الروم (#d2 بس) بينسخه لمربع
   الكتابة - x2.js هو اللي بيربط الـclick handler (AddMsg، شرط wid=="#d2")،
   هنا بس بنضيف مؤشر اليد + تفاعل بصري خفيف عشان يبان إنه قابل للضغط.
   الخاص والحائط ملهومش هاندلر فعليًا، فمقصود إن الماوس يفضل عادي عندهم. */
#d2 .u-msg .emoi{
  cursor:pointer;
  transition:transform .12s ease;
}
#d2 .u-msg .emoi:hover{
  transform:scale(1.15);
}
#d2 .u-msg .emoi:active{
  transform:scale(.92);
}

/* عمود النص */
#d2 .uzr.d-flex .flex-fill,
#d2bc .uzr.d-flex .flex-fill{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  direction:rtl !important;
  text-align:right !important;
  padding:0 10px 0 0 !important;
  row-gap:2px;
}
/* فك الصف العلوي (أيقونة+اسم / فاصل+وقت) عشان الكل يبقى في نفس سطر التدفق */
#d2 .uzr.d-flex .flex-fill > .d-flex:not(.msgActions),
#d2bc .uzr.d-flex .flex-fill > .d-flex:not(.msgActions){
  display:contents !important;
}
#d2 .uzr.d-flex .flex-fill > .d-flex:not(.msgActions) > .flex-grow-1:first-child,
#d2bc .uzr.d-flex .flex-fill > .d-flex:not(.msgActions) > .flex-grow-1:first-child{
  display:contents !important;
}
/* عمود الوقت (الفاصل + الساعة) - مستخبي في التصميم الجديد */
#d2 .uzr.d-flex .flex-fill > .d-flex:not(.msgActions) > .flex-grow-1:last-child,
#d2bc .uzr.d-flex .flex-fill > .d-flex:not(.msgActions) > .flex-grow-1:last-child{
  display:none !important;
}

/* شارة الرتبة جنب الصورة
   [FIX] .flex-fill حاطط align-items:baseline (عشان النص يترتب صح)، وده كان
   بيخلي الأيقونة تترتب على baseline النص بدل ما تبقى في نص ارتفاع الصف
   زي الصورة بالظبط - align-self:center بيلغي ده للأيقونة بس وبيوسطها
   رأسيًا مع الصورة والاسم */
#d2 .uzr.d-flex .u-ico,
#d2bc .uzr.d-flex .u-ico{
  min-height:18px !important;
  height:18px !important;
  max-height:18px !important;
  margin:0 0 0 4px !important;
  align-self:center !important;
}
/* اسم العضو - flex:0 0 auto وnowrap عشان يفضل ثابت وماينضغطش أبدًا مهما
   كان الكلام اللي جنبه طويل */
#d2 .uzr.d-flex .u-topic,
#d2bc .uzr.d-flex .u-topic{
  font-size:13px !important;
  font-weight:800 !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 auto !important;
  max-width:55% !important;
}
#d2 .uzr.d-flex .u-topic::after,
#d2bc .uzr.d-flex .u-topic::after{
  content:" : ";
  font-weight:800;
  color:#5b6472;
}
/* [FIX] نص الرسالة: كان بيحاول يكمل جنب الاسم في نفس السطر الأول، وأول ما
   الكلام يطول بيبدأ يتكسّر لأسطر ضيقة جنب الاسم (قريبة من مساحة "...")
   بدل ما ياخد عرض الصف كامل. دلوقتي flex-basis:100% تجبره دايمًا ياخد
   سطر جديد كامل لوحده تحت "الاسم :" (زي فقرة تحت العنوان) بدل ما يتنازع
   على المساحة المتبقية من سطر الاسم - فمفيش أسطر ضيقة متكسرة، الرسالة
   كلها بتنزل تحت الاسم والأيقونة وتاخد العرض المتاح كامل. */
#d2 .uzr.d-flex .u-msg,
#d2bc .uzr.d-flex .u-msg{
  flex:1 1 100% !important;
  min-width:0 !important;
  max-width:100% !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
  font-size:14px !important;
  font-weight:700;
  padding:0 !important;
  margin:2px 0 0 !important;
}
/* اقتباس الرد (لو موجود) ياخد سطر لوحده تحت */
#d2 .uzr.d-flex .u-rply,
#d2bc .uzr.d-flex .u-rply{
  flex:1 1 100% !important;
}

/* ------- قايمة "الثلاث نقط" بدل زرار الرد/الحذف الظاهرين طول الوقت ------- */
#d2 .uzr.d-flex .msgActions,
#d2bc .uzr.d-flex .msgActions{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  left:6px !important;
  float:none !important;
  width:26px !important;
  max-width:26px !important;
  height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  cursor:pointer;
  z-index:5;
}
#d2 .uzr.d-flex .msgActions:hover,
#d2bc .uzr.d-flex .msgActions:hover{
  background:rgba(20,30,50,.06) !important;
}
#d2 .uzr.d-flex .msgActions::before,
#d2bc .uzr.d-flex .msgActions::before{
  content:"\f142";
  font-family:FontAwesome;
  font-size:16px;
  color:#8a92a1;
}
/* لو الزرار مش متفعّل أصلاً (مفيش صلاحية رد/حذف على الرسالة دي) - يفضل
   مخفي دايمًا حتى لو القايمة اتفتحت، عشان منظهرش زرار "ميت" بدون وظيفة */
#d2 .uzr.d-flex .msgActions .breply:not([onclick]),
#d2 .uzr.d-flex .msgActions .bdel:not([onclick]),
#d2bc .uzr.d-flex .msgActions .breply:not([onclick]),
#d2bc .uzr.d-flex .msgActions .bdel:not([onclick]){
  display:none !important;
}
#d2 .uzr.d-flex .msgActions .breply,
#d2 .uzr.d-flex .msgActions .bdel,
#d2bc .uzr.d-flex .msgActions .breply,
#d2bc .uzr.d-flex .msgActions .bdel{
  display:none !important;
  position:absolute !important;
  top:30px !important;
  left:0 !important;
  width:34px !important;
  height:34px !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:1px solid rgba(20,30,50,.1) !important;
  border-radius:10px !important;
  box-shadow:0 6px 16px rgba(20,30,50,.18) !important;
  margin:0 !important;
}
/* القايمة مفتوحة (usxMenuOpen كلاس بيتحط بالجافاسكريبت) */
#d2 .uzr.d-flex .msgActions.usxMenuOpen .breply,
#d2bc .uzr.d-flex .msgActions.usxMenuOpen .breply{
  display:flex !important;
  top:30px !important;
}
#d2 .uzr.d-flex .msgActions.usxMenuOpen .bdel,
#d2bc .uzr.d-flex .msgActions.usxMenuOpen .bdel{
  display:flex !important;
  top:68px !important;
}
/* [FIX] زرار الرد/الحذف كانوا بيبانوا شفافين - في الحقيقة مش شفافين، لكن
   الصف اللي تحت (له خلفية صلبة #f4f5f7/#fbfbfc) بيترسم فوقهم لإنه بييجي
   بعدهم في ترتيب الصفحة (كل الصفوف position:relative بنفس مستوى z-index
   الافتراضي auto). بنرفع الصف اللي فاتح فيه القايمة فوق كل اللي حواليه
   عشان القايمة تبان كاملة فوق خلفية الصف اللي بعده مش وراها */
#d2 > .uzr.d-flex:has(.msgActions.usxMenuOpen),
#d2bc > .uzr.d-flex:has(.msgActions.usxMenuOpen){
  z-index:30 !important;
}

/* =========================================================================
   [FIX] نافذة المحادثة الخاصة كانت بتبان شفافة فوق الشات العام (يظهر
   كلام العام من وراها). بنضمن خلفية صلبة 100% لجسم النافذة ومنطقة
   الرسايل جواها بغض النظر عن قيمة متغير لون الثيم لو كانت شفافة، وكمان
   z-index كافي إنها تبقى فوق كل حاجة في الشات.
   ========================================================================= */
.bgg.border.c-flex{
  background-color:#eef1f5 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25) !important;
  z-index:600 !important;
}
.bgg.border.c-flex .cont{
  background-color:#eef1f5 !important;
}
.bgg.border.c-flex .d2{
  background-color:#ffffff !important;
}
.bgg.border.c-flex .tablebox.footer{
  background-color:#eef1f5 !important;
}

/* ============ [ADDED] نافذة الإيموشنات - تصميم أنيق متماشي مع باقي الموقع
   (نفس روح بطاقات bottom-toolbar/comments-ui: خلفية بيضاء، حواف دائرية،
   ظل خفيف، وشريط سفلي مميز بخلفية فاتحة زي تصميم الـ footer في الشريط
   السفلي)، صفحات مرقمة (45 إيموجي بحجم مضبوط لكل صفحة)، وتحميل كسول لكل
   صفحة. الترقيم بالأرقام مباشرة (دوس على رقم يودّيك للصفحة على طول)، وبعد
   5 أرقام يظهر سهم استكمال بدل ما يتزنق كل الأرقام مع بعض.
   [FIX] base-styles.css فيه ".popover.fade.top{width:700px!important;
   height:300px!important;...}" وده بـ3 كلاسات، يعني بيكسب على أي override
   بـ.popover:has(...) (كلاس واحد + pseudo-class) حتى لو !important، فكان
   بيفرض ارتفاع 300px ثابت على النافذة بغض النظر عن المحتوى الفعلي، فلما
   المحتوى (9 صفوف) بقى أطول من 300px كان بيطلع/يفيض تحت النافذة فوق شريط
   الأزرار السفلي. الحل: نطابق نفس الكلاسات (.popover.fade.top) عشان الأولوية
   تبقى بالتعادل بيننا وبينه فيكسب آخر واحد معرّف (يعني إحنا، لأننا متعرّفين
   بعد base-styles.css في index.ejs)، وكمان بنحط سكرول داخلي كخط دفاع إضافي
   يمنع أي فيضان تاني تحت أي ظرف. ============ */
:root{ --emo-accent:var(--theme-btcolor,#5b6bfa); --emo-line:rgba(20,30,50,.08); --emo-soft:rgba(20,30,50,.06); --emo-ink:#242c3a; --emo-sub:#8a92a1; }

.popover:has(.emoji-picker-wrap),
.popover.fade.top:has(.emoji-picker-wrap){
  width:min(94vw,258px)!important;
  min-width:0!important;
  height:auto!important;
  max-height:min(72vh,392px)!important;
  overflow:hidden!important;
  padding:0!important;
  margin-left:0!important;
  margin-top:-16px!important; /* [FIX] ترفع النافذة شوية زيادة فوق الزرار عشان تبعد عن شريط الأزرار السفلي */
  border:1px solid var(--emo-line)!important;
  border-radius:18px!important;
  box-shadow:0 12px 30px rgba(20,30,50,.2)!important;
  background:#fff!important;
}
.popover:has(.emoji-picker-wrap) .popover-content{padding:0!important;}
.popover:has(.emoji-picker-wrap) > .arrow{display:none!important;} /* السهم القديم كان بيكسر شكل الحواف الدائرية الجديدة */

.emoji-picker-wrap{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  overflow:hidden; /* عشان شريط الترقيم السفلي ياخد نفس دائرية حواف النافذة بالظبط */
  border-radius:18px;
  max-height:min(72vh,392px);
}
.emoji-picker-wrap .emoji-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-content:start;
  gap:3px;
  padding:8px 8px 6px;
  overflow-y:auto; /* [FIX] خط دفاع إضافي: لو المساحة ضاقت (شاشة صغيرة) يبقى سكرول داخلي، مش فيضان بره النافذة */
}
.emoji-picker-wrap .emoji-grid .emoi{
  width:100%!important;
  height:28px!important;
  max-width:100%!important;
  max-height:28px!important;
  min-height:0!important;
  margin:0!important;
  padding:2px!important;
  box-sizing:border-box;
  object-fit:contain;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease,transform .12s ease;
}
.emoji-picker-wrap .emoji-grid .emoi:hover{background:var(--emo-soft);transform:translateY(-1px);}
.emoji-picker-wrap .emoji-grid .emoi:active{transform:scale(.88);}

/* ----- شريط ترقيم الصفحات: بار سفلي مميز (زي فوتر الشريط السفلي) بخلفية
   فاتحة يفصله عن شبكة الإيموشنات، أرقام تُضغط مباشرة + سهم استكمال بعد كل 5 ----- */
.emoji-picker-wrap .emoji-pager{
  direction:ltr; /* عشان ترتيب الأرقام يفضل منطقي 1..5 بغض النظر عن اتجاه الصفحة */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 8px;
  background:#f7f8fa;
  border-top:1px solid var(--emo-line);
  flex-shrink:0;
}
.emoji-picker-wrap .emoji-page-num{
  min-width:23px;
  height:23px;
  padding:0 3px;
  border:none;
  border-radius:7px;
  background:#fff;
  color:var(--emo-sub);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(20,30,50,.06);
  transition:background .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease;
}
.emoji-picker-wrap .emoji-page-num:hover{color:var(--emo-ink);box-shadow:0 1px 4px rgba(20,30,50,.12);}
.emoji-picker-wrap .emoji-page-num:active{transform:scale(.9);}
.emoji-picker-wrap .emoji-page-num.emoji-page-active{
  background:var(--emo-accent)!important;
  color:#fff!important;
  box-shadow:0 2px 7px rgba(20,30,50,.28)!important;
}
.emoji-picker-wrap .emoji-nav-btn{
  width:23px!important;
  height:23px!important;
  border:none!important;
  border-radius:7px!important;
  background:transparent!important;
  color:var(--emo-accent)!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px!important;
  padding:0!important;
  margin:0!important;
  cursor:pointer;
  transition:background .15s ease,transform .12s ease;
}
.emoji-picker-wrap .emoji-nav-btn:hover{background:rgba(20,30,50,.08)!important;}
.emoji-picker-wrap .emoji-nav-btn:active{transform:scale(.88);}


/* ============ [ADDED] قائمة الإجراءات السريعة عند الضغط على صورة عضو في
   الشات العام: إرسال برايفت / متجر الهدية / أدوات إدارية (أو تجاهل+إبلاغ
   للعضو العادي). نفس لغة تصميم قوائم الشريط السفلي (usx-qb-menu-*) بس في
   بطاقة أصغر بتتمركز جنب الصورة اللي اتضغطت مباشرة. ============ */
.usx-am-menu{
  position:fixed;top:0;left:0;z-index:4000;
  width:min(190px,calc(100vw - 16px));
  background:#fbfbfd;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 34px rgba(20,20,40,.24);border:1px solid rgba(20,30,50,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.96);transform-origin:top;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  display:flex;flex-direction:column;gap:4px;padding:6px;
}
.usx-am-menu.usx-am-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);}
.usx-am-opt{
  display:flex;align-items:center;gap:8px;width:100%;text-align:right;
  background:#fafafd;border:1px solid #f0f0f6;border-radius:11px;padding:6px 8px;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.usx-am-opt:hover{border-color:rgba(20,30,50,.14);box-shadow:0 3px 10px rgba(20,20,40,.08);}
.usx-am-opt:active{transform:scale(.97);}
.usx-am-opt .usx-qb-menu-ico{width:28px;height:28px;min-width:28px;border-radius:9px;font-size:12px;}
.usx-am-opt .usx-qb-menu-txt b{font-size:11px;color:#2c2c3a;}
/* ألوان إضافية لأيقونة الخيار (الذهبي والوردي متعرفين بالفعل فوق) */
.usx-qb-menu-ico-blue{background:linear-gradient(135deg,#4a7dff,#2c56d6);}
.usx-qb-menu-ico-gray{background:linear-gradient(135deg,#9aa1b3,#6c7386);}
.usx-qb-menu-ico-red{background:linear-gradient(135deg,#ff6b6b,#e64545);}

/* ============ فقاعات المحادثات المصغّرة (Chat Heads) - تظهر يسار الشاشة
   في المنتصف لما المستخدم يصغّر نافذة خاص بزر "-" بدل ما تختفي خالص ============ */
.pmFloatBar{
  position:fixed!important;
  left:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  z-index:4600!important;
  pointer-events:none!important;
}
.pmFloatBtn{
  position:relative!important;
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(20,20,40,.28)!important;
  border:2px solid #fff!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  overflow:visible!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
.pmFloatBtn:hover{transform:scale(1.06)!important;box-shadow:0 6px 18px rgba(20,20,40,.34)!important;}
.pmFloatBtn:active{transform:scale(.95)!important;}
.pmFloatBtn.hasUnread{border-color:var(--theme-btcolor,#4a7dff)!important;}
.pmFloatPic{
  width:100%!important;height:100%!important;border-radius:50%!important;
  object-fit:cover!important;display:block!important;
}
.pmFloatIco{
  position:absolute!important;bottom:-2px!important;right:-2px!important;
  width:16px!important;height:16px!important;border-radius:50%!important;
  border:2px solid #fff!important;background:#fff!important;
}
.pmFloatBadge{
  position:absolute!important;top:-3px!important;left:-3px!important;
  min-width:14px!important;height:14px!important;padding:0 3px!important;
  border-radius:8px!important;background:linear-gradient(135deg,#ff6b81,#ff4757)!important;
  box-shadow:0 1px 4px rgba(255,71,87,.5)!important;
  display:none!important;
}
.pmFloatBadge.show{display:block!important;}
.pmFloatClose{
  position:absolute!important;top:-6px!important;right:-6px!important;
  width:18px!important;height:18px!important;border-radius:50%!important;
  background:#4a5568!important;color:#fff!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:9px!important;opacity:0!important;transition:opacity .15s ease!important;
}
.pmFloatBtn:hover .pmFloatClose{opacity:1!important;}

/* -------------------------------------------------------------------------
   [FIX] قائمة خيارات المايك (#showpf: سحب المايك/إيقاف الصوت/فتح البروفايل/
   تشغيل موسيقى) جايه من index.ejs بـ z-index:1 (إنلاين، من غير !important)
   وهو رقم واطي جدًا - أي عنصر تاني في الصفحة عنده z-index أعلى أو حتى
   z-index:auto بس جاي بعده في الـDOM (زي خلفية الشات #d2) بيترسم فوقيه
   ويغطيه، فالقائمة بتظهر تحت خلفية الشات، والكليك عليها بيوصل للعنصر
   اللي فوقها بدل زرارها هي (كأنها "طلعت برا"/معطلة). بنرفع الـz-index بقوة
   ونثبّت إن كل العناصر الأب (المقعد/الصف) بتعمل stacking context صحيح
   عشان القائمة تفضل فوق أي حاجة تانية في الصفحة مهما كان ترتيبها. */
#showpf{
  z-index:99999!important;
}
.broadcasters > div > .prod{
  z-index:2!important;
}
.broadcasters > div > .prod > .evant{
  position:relative!important;
  z-index:2!important;
}
/* ==========================================================================
   [ADDED] هيدر لوحة "المتواجدين / الخاص / الغرف / الضبط" (تبويبات #dpnl
   ما عدا الحائط، لأن الحائط ليه هيدر خاص بيه فعلاً فى wall-redesign.css
   عبر #dpnl.on-wall > .pnhead و #dpnl.on-wall > .fa-close - وده هيفضل
   شغال زي ما هو من غير ما يتأثر، لأن القواعد بتاعته أعلى تحديدًا (id+class)
   من القواعد العامة هنا (id بس)، فهو دايمًا بيكسب.

   المشكلة الأصلية: العنوان (.pnhead) والزرار (.fa-close) عناصر مباشرة
   جوه #dpnl (اللي هو position:fixed)، وكان فيه margin-top:-35px على
   الزرار عشان "يلزقه" جنب العنوان بدل ما يقع تحته فى العمود - ده اللي
   كان بيطلعه برة حدود اللوحة نفسها فيبان مختفي/مقطوع. بنشيل الحيلة دي
   ونعمل هيدر حقيقي بزرار إغلاق دايرة خفيفة absolute على اليسار.
   ========================================================================== */

#dpnl > .pnhead{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:14px 16px 14px 54px!important; /* مساحة على الشمال عشان زرار الإغلاق */
  background:#fff!important;
  color:#242c3a!important;
  font-size:14.5px!important;
  font-weight:800!important;
  text-align:right!important;
  line-height:1.3!important;
  border:none!important;
  border-bottom:1px solid #ecebf3!important;
  border-radius:0!important;
  box-shadow:0 1px 4px rgba(20,30,50,.04)!important;
  position:relative!important;
  z-index:4!important;
  flex-shrink:0!important;
}

/* زرار الإغلاق (X) - دايرة خفيفة على اليسار بدل المربع الأسود القديم على اليمين */
#dpnl > .fa-close{
  position:absolute!important;
  top:9px!important;
  left:12px!important;
  right:auto!important;
  bottom:auto!important;
  float:none!important;
  margin:0!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  padding:0!important;
  border:none!important;
  border-radius:50%!important;
  background:rgba(20,30,50,.06)!important;
  color:#8a92a1!important;
  font-size:0!important;
  line-height:30px!important;
  text-align:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:none!important;
  z-index:6!important;
  transition:background .18s ease,color .18s ease,transform .12s ease!important;
}
#dpnl > .fa-close:before{
  font-size:13px!important;
  font-family:FontAwesome!important;
}
#dpnl > .fa-close:hover{background:rgba(231,76,60,.12)!important;color:#e74c3c!important;}
#dpnl > .fa-close:active{transform:scale(.9)!important;}

/* ==========================================================================
   [ADDED] مربع البحث فى تبويب "المتواجدين" (#usearch) - كان textarea.tbox
   عادي جدًا وشكله قديم وملزوق تحت الهيدر مباشرة. بنخليه شريط بحث لاصق
   (sticky) فاضل ظاهر فوق وهو بيسكرول جوه #users، بنفس روح البحث المستخدم
   فى تبويب الغرف (settings-tabs-1.css / .rms-search).
   ========================================================================== */
#dpnl #users > textarea#usearch.tbox{
  position:sticky!important;
  top:0!important;
  z-index:4!important;
  display:block!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:11px 16px!important;
  background:#fff!important;
  border:none!important;
  border-bottom:1px solid #ecebf3!important;
  border-radius:0!important;
  font-size:12.5px!important;
  font-weight:400!important;
  color:#333!important;
  resize:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-align:right!important;
}
#dpnl #users > textarea#usearch.tbox::placeholder{color:#a9a9b8!important;}
/* ==========================================================================
   [ADDED] إصلاح تخطيط الحائط (#wall) - المشكلة كانت إن #wall نفسه كان
   "break" (overflow:auto) يعني اللوحة كلها بتتسكرول كوحدة واحدة، وجواها
   #d2bc (قائمة المنشورات) كمان "break" بتتسكرول لوحدها - سكرول متداخل
   (nested scroll) بيخلي شريط القصص وزرار "مبدع الحائط" يتحركوا مع
   سكرول اللوحة نفسها بدل ما يفضلوا ثابتين فوق، وده اللي كان بيخليهم
   يختفوا/يبانوا تحت الخلفية. وكمان لما تدوس تكتب فى مربع الرسالة تحت،
   المتصفح كان بيسكرول #wall نفسه (مش #d2bc بس) عشان يورّي مربع الكتابة،
   فيقفل على شريط القصص ويطلعه برة الشاشة.

   الحل: #wall بقى flex-column بارتفاع ثابت وoverflow:hidden (مفيش
   سكرول للوحة نفسها خالص)، والسكرول الوحيد المسموح بيه هو جوه #d2bc
   بس (قائمة المنشورات)؛ شريط القصص + زرار مبدع الحائط + مربع البحث
   عن يوتيوب + مربع الكتابة (tablebox) كلهم ثابتين (flex-shrink:0)
   فوق وتحت السكرول ده مباشرة.
   ========================================================================== */

/* [FIX] مهم: القواعد لازم تتقيد بـ #wall.active بس، مش #wall لوحدها.
   لأن reset.css فيه ".tab-content>.tab-pane{display:none}" و
   ".tab-content>.active{display:block}" - وده اللي بيتحكم فى إظهار/إخفاء
   كل تبويب. لو كتبنا "#wall{display:flex!important}" من غير شرط active،
   هيكسب بالـ !important حتى لو التبويب مش مفتوح، فيبان الحائط فوق كل
   التبويبات التانية زي ما حصل. */
#wall.active{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;      /* اللوحة نفسها ما تتسكرولش تاني */
  height:100%!important;
}

/* العناصر الثابتة فوق (قصص + مبدع الحائط + بحث يوتيوب) - ما تتحركش مع السكرول */
#wall.active > .itemstory.usx-story-bar,
#wall.active > label.top.wall,
#wall.active > .youtubeSearch{
  flex-shrink:0!important;
}

/* قائمة المنشورات - هي بس اللي بتتسكرول */
#wall.active > #d2bc.d2bc{
  flex:1 1 auto!important;
  min-height:0!important;         /* ضروري عشان الفليكس يسمح للعنصر يعمل سكرول داخلي بدل ما يكبر على حساب باقي العناصر */
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* مربع كتابة الرسالة تحت - ثابت مكانه دايمًا وظاهر، حتى وقت الكتابة/الكيبورد */
#wall.active > .tablebox{
  flex-shrink:0!important;
}