/* ============ تصميم قائمة المتواجدين - قائمة مسطّحة خفيفة بدون كروت أو ظلال (بدون تغيير ألوان الموقع الأساسية) ============ */
#users{padding:2px 0 12px;}
#users .itemstory{padding:8px 8px 2px;}
#usearch{border-radius:20px!important;margin:6px 8px!important;width:calc(100% - 16px)!important;}
#users .uzr.uhtml{
  position:relative;
  /* display:flex!important; */
  direction:rtl!important;
  align-items:center;
  background:#fff;
  border:1px solid rgba(20,30,50,.07)!important;
  border-radius:9px!important;
  margin: 2px 0px!important;
  /* padding:8px 10px!important; */
  box-shadow:none;
}
/* ===== [SMALLER CARDS] تصغير حجم كروت قائمة المتواجدين (الصورة + الإطار
   المتحرك حوالينها) - الصورة كانت 52px بيرثها من القاعدة العامة (.uhtml
   .u-pic في usx-extras.css/base-styles.css)، هنا بنفرض حجم أصغر خاص بقائمة
   المتواجدين بس من غير ما نأثر على أي قايمة تانية زي #chats أو #d2 ===== */
#users .uzr.uhtml .u-pic{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
}
/* di1 (الصورة + الاسم) كان "fl" وdi3 (الهاشتاج) كان "fr" - direction:rtl
   فوق كفى لقلب ترتيبهم، فبقى di1 (الصورة) يمين وdi3 (الهاشتاج) شمال */
#users .uzr.uhtml .di1{
  direction:rtl!important;
  align-items:center;
  padding-right:0!important;
  padding-left:0!important;
}
#users .uzr.uhtml .di2 .d-flex.dots{direction:rtl!important;}
#users .uzr.uhtml .u-pic{
  border-radius:50%!important;
  box-shadow:none!important;
  /* [FIX] كانت !important هنا بتمنع اللون المخصص (copic) اللي بيتحط inline
     من الجافاسكريبت (updateu في x2.js: el.upic.style.border) من الظهور
     خالص - نفس مشكلة الإطار الملون اللي اتصلحت قبل كده في #d2. بشيل
     !important بس (مش القاعدة كلها) عشان تفضل موجودة كـfallback افتراضي
     أنيق للأعضاء اللي معندهمش لون مخصص، لكن لون العضو المخصص (لو موجود)
     يقدر يغلبها لأنه بيتحط inline. */
  border:1px solid rgba(20,30,50,.08);
  position:relative!important;
  z-index:1!important;
}
/* ------- الإطار المتحرك (.imgbaqer) - كان بيترسم كمربع منفصل جنب
   الصورة لأنه عنصر flex عادي زيها بالظبط. دلوقتي بنطلعه بره تدفق الفلكس
   ونحطه absolute فوق الصورة نفسها بالظبط (أكبر منها شوية عشان يبان كإطار
   حواليها) ------- */
#users .uzr.uhtml .di1{position:relative!important;}
#users .uzr.uhtml .di1 .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;
  pointer-events:none!important;
  /* [FIX] العنصر جاي بكلاس borderg اللي بيحط مربع حواف خفيف (border:1px solid
     #f4f4f4) حوالين الصورة نفسها - نفس المشكلة اللي كانت متعالجة في #d2 بس
     متعملتش هنا، فكان بيبان كإطار مربع خفيف حوالين الإطار المتحرك الدائري */
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  /* [FIX] كانت وراثة background-size:cover من القاعدة العامة (.imgbaqer في
     usx-extras.css) - ده بيقص رسمة الإطار الزخرفية بدل ما يمددها بالظبط
     على مقاس الصندوق، فتطلع رسمة الإطار منزاحة/مقصوصة عن الصورة بدل ما
     تتلزق حواليها بالظبط. نفس الفيكس اللي اتعمل لـ#d2 بالظبط (تمديد مباشر
     100% 100% بدل القص) + قص دائري نضيف بدون أي تربيع. */
  border-radius:50%!important;
  overflow:hidden!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* -------------------------------------------------------------------------
   [FIX] نفس صف uhtml (صورة + إطار متحرك) مستخدم كمان جوه #chats (قايمة
   محادثات الخاص القديمة داخل #dpnl - راجع openw() في x2.js اللي بتعمل
   uhh = $(uhtml) وتضيفها جوه #chats)، لكن #chats كانت مش متضمنة في أي من
   الـselectors فوق - فكان .imgbaqer بيرجع للقاعدة العامة بس (position:relative
   بلا حجم/قص) من usx-extras.css وده اللي كان بيخليه يبان طايح خارج حدود
   الصف/النافذة. بنكرر نفس التنسيق هنا لـ #chats. ------------------------- */
#chats .uzr.uhtml .u-pic{
  position:relative!important;
  z-index:1!important;
}
#chats .uzr.uhtml .di1{position:relative!important;}
#chats .uzr.uhtml .di1 .imgbaqer{
  position:absolute!important;
  top:50%!important;
  right:-7px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
  width:66px!important;
  height:66px!important;
  min-width:66px!important;
  max-width:66px!important;
  max-height:none!important;
  margin:0!important;
  z-index:3!important;
  pointer-events:none!important;
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  border-radius:50%!important;
  overflow:hidden!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}
#users .uzr.uhtml .ustat{
  position:absolute!important;
  right:4px;
  left:auto!important;
  bottom:4px;
  top:auto!important;
  width:9px!important;
  min-width:9px!important;
  height:9px!important;
  min-height:9px!important;
  max-height:9px!important;
  border-radius:50%!important;
  border:2px solid #fff!important;
  z-index:2;
  box-shadow:none;
}
#users .uzr.uhtml .di2{padding:0 8px!important;}
#users .uzr.uhtml .di2 .d-flex{height:auto!important;align-items:center;}
#users .uzr.uhtml .u-topic{
  font-weight:700!important;
  font-size:12.5px!important;
  color:#242c3a;
  padding:1px 7px!important;
  border-radius:7px!important;
  text-align:right!important;
}
/* الوسط اللي بيلف اسم العضو (flex-grow-1) بيورث text-align:left من
   الكلاس العام .uhtml، فالاسم كان بيفضل شمال جوه مساحته حتى بعد قلب
   الصف - بنجبره يبقى يمين عشان يلزق جنب الأيقونة */
#users .uzr.uhtml .di2 .d-flex.dots .flex-grow-1{text-align:right!important;}
#users .uzr.uhtml .u-msg{
  color:#98a1af!important;
  font-size:10.5px!important;
  text-align:right!important;
  padding-top:1px!important;
}
#users .uzr.uhtml .di3{
  margin-left:0!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
#users .uzr.uhtml .uhash{
  background:#f1f3f6;
  color:#8a92a1!important;
  padding:1px 5px;
  border-radius:7px;
  font-size:9px!important;
}
#users .uzr.uhtml .co.ico{border-radius:3px;width:16px!important;height:16px!important;}

/* صندوق عدد المتصلين بالغرفة - خط متقطع مربع، يظهر فقط داخل الغرفة */
.roomUsersCountBox{
  width:calc(100% - 16px);
  margin:2px 8px 8px;
  padding:6px 8px;
  border:1.5px dashed rgba(20,30,50,.35);
  border-radius:4px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#4a5568;
  background:rgba(20,30,50,.02);
}
.roomUsersCountBox .roomUsersCountNum{color:#2ecc71;font-size:13px;}

/* فواصل متصلين/غير متصلين داخل الغرفة */
#users .inrh.label.label-primary,
#users .uzr.label.label-primary.ninr{
  background:transparent!important;
  color:#8a92a1!important;
  font-size:11px!important;
  font-weight:700!important;
  text-align:center!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:6px 10px 2px!important;
  padding:4px 0!important;
  border-top:1px dashed rgba(20,30,50,.15)!important;
}
#users .inrh.label.label-primary{margin-top:2px!important;border-top:none!important;}
#users .onlineDot,#users .offlineDot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
}
#users .onlineDot{background:#2ecc71;}
#users .offlineDot{background:#c3c9d3;}

/* ============ زر "حذف" أمام كل محادثة في تبويب الخاص ============ */
#chats .cc{
  position:relative!important;
  padding-right:34px!important;
  box-sizing:border-box!important;
}
#chats .cc .pmdel{
  position:absolute!important;
  top:50%!important;
  right:2px!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:24px!important;
  height:24px!important;
  padding:0!important;
  margin:0!important;
  border:none!important;
  border-radius:50%!important;
  background:rgba(20,30,50,.05)!important;
  color:#9aa1af!important;
  font-size:11px!important;
  z-index:4!important;
  transition:background .15s ease,color .15s ease,transform .12s ease!important;
}
#chats .cc .pmdel:hover{background:rgba(231,76,60,.14)!important;color:#e74c3c!important;}
#chats .cc .pmdel:active{transform:translateY(-50%) scale(.9)!important;}