/* ============================================================================
   [REDESIGN - v2] نافذة الخاص بالكامل - نسخة مصححة بعد بلاغ إن الصورة مش
   ظاهرة والاسم مش ظاهر وكل حاجة مجمعة في مكان واحد من غير تناسق.

   السبب اللي كان بيحصل (نسخة v1):
   1) كنا مخفيين صورة العضو في كل رسالة تمامًا (display:none) على أساس إنها
      هتتكرر - ده اللي خلى "ولا صورة ظاهرة". اتصلح: الصورة بقت ظاهرة دائرية
      جنب كل رسالة.
   2) قاعدة ".uzr.flex-fill > .d-flex{display:contents}" كانت من غير
      استثناء msgActions، ومسgActions كمان .d-flex وابن مباشر لنفس الأب - يعني
      كانت بتتفكك هي كمان فتفقد موضعها المطلق (position:absolute) وتترمي
      أزرارها (رد/حذف) فالت جوه النص نفسه - ده اللي خلى الكل "يبان مجمع في
      مكان واحد". اتصلح بإضافة ":not(.msgActions)".

   [لسه لازم يكون موجود في x2.js] - نفس التعديل اللي اتبعت قبل كده:
       if (_isPvMsg) { msg.addClass(_isOwnMsg ? "usx-pm-mine" : "usx-pm-theirs"); }
   لو الملف اللي عندك دلوقتي هو اللي بعتناه بعد التعديل، السطر ده موجود
   بالفعل ومحتاج بس تستبدل ملف الـCSS ده بالقديم.

   ----------------------------------------------------------------------------
   [REDESIGN - v3] بلاغ تاني: الرسايل مش متناسقة + شريط سكرول ظاهر جنب النص
   + زرار الرد/الحذف كبار وواقفين فوق الكلام.

   1) شريط السكرول: كل من الفقاعة (.uzr.flex-fill) والنص (.u-msg) معاهم
      كلاس ".break" جاي من base-styles.css وبيدّيهم overflow:auto. أي رسالة
      طولها يزيد شعرة عن المساحة (بسبب padding-bottom المحجوز للوقت) كانت
      بتطلّع سكرول جوّاها. اتصلح بـoverflow:visible!important على الاتنين.
   2) زرار الرد/الحذف: بدل ما يبانوا دايرتين كبار فوق النص، دلوقتي
      .msgActions نفسها بقت زرار واحد صغير شكله 3 نقط (⋮) في ركن الفقاعة
      (تمامًا زي القايمة المستخدمة أصلاً في شات الروم/الحائط - usx-extras.css).
      الضغط عليه بيفتح قائمة صغيرة تحته فيها زرار الرد والحذف الحقيقيين.
      الضغط في أي حتة تانية أو اختيار زرار بيقفلها تاني.
   [x2.js]: مفيش أي تعديل جديد مطلوب - آخر x2.js فيه بالفعل كود عام
   (document click listener) بيعمل toggle لكلاس "usxMenuOpen" على أي
   ".msgActions" في الصفحة (كان اتضاف أصلاً عشان قايمة الروم/الحائط)،
   فبمجرد ما استخدمنا نفس اسم الكلاس ده هنا، القايمة بقت شغالة في الخاص
   كمان من غير أي كود جافاسكريبت إضافي.
   ============================================================================ */

:root{
  --pm-accent: var(--theme-btcolor, #5b6bfa);
  --pm-ink:#242c3a;
  --pm-sub:#8a92a1;
  --pm-line:rgba(20,30,50,.08);
  --pm-wallpaper:#f2f4f7;
  --pm-bubble-theirs:#ffffff;
  --pm-bubble-mine:rgba(91,107,250,.13);
}

/* ---------------------------------------------------------------------------
   1) هيكل النافذة العام - [FIX v4] كانت نافذة عايمة صغيرة (max-width:500px،
   max-height:500px جايين من الـstyle الأصلي في index.ejs). بناءً على طلب
   إن النافذة تبقى بطول الشاشة كلها زي صفحة مستقلة، بنعمل override بالـ
   position/top/bottom/width/height بـ!important عشان تكسر الـinline style
   القديم (وكمان تكسر زرار "توسيع/تصغير" fa-expand اللي كان بيبدّل بين
   ارتفاعين بس - أصبح مالوش لازمة دلوقتي فاتخفى تحت).
   --------------------------------------------------------------------------- */
.dad > .c-flex.bgg.border{
  background:#fff!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  z-index:600!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  max-height:none!important;
  height:100%!important;
  height:100dvh!important;
}
/* زرار التوسيع/التصغير (fa-expand/fa-compress) كان بيبدّل بين ارتفاعين -
   مالوش معنى دلوقتي والنافذة بقت بطول الشاشة دايمًا */
.dad > .c-flex.bgg.border > .head > label.btn.fa-expand,
.dad > .c-flex.bgg.border > .head > label.btn.fa-compress{
  display:none!important;
}

/* ---------------------------------------------------------------------------
   2) الهيدر - صورة دائرية + اسم + حالة + أزرار دائرية خفيفة
   --------------------------------------------------------------------------- */
.dad > .c-flex.bgg.border > .head{
  height:52px!important;
  padding:6px 10px!important;
  background:#fff!important;
  border-bottom:1px solid var(--pm-line)!important;
  align-items:center!important;
  box-shadow:none!important;
}
.dad > .c-flex.bgg.border > .head label.fa-user{
  background:transparent!important;
  border:none!important;
  color:var(--pm-sub)!important;
}
.dad > .c-flex.bgg.border > .head .u-pic{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  box-shadow:none!important;
  border:1px solid rgba(20,30,50,.08)!important;
}
.dad > .c-flex.bgg.border > .head .ustat{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  border:2px solid #fff!important;
}
.dad > .c-flex.bgg.border > .head .u-topic{
  font-size:13.5px!important;
  font-weight:800!important;
  color:var(--pm-ink)!important;
  background:transparent!important;
  padding:0 4px!important;
  margin:0!important;
}
.dad > .c-flex.bgg.border > .head .uhash{
  color:var(--pm-sub)!important;
  font-size:10px!important;
  background:transparent!important;
  padding:0!important;
}
.dad > .c-flex.bgg.border > .head > label.btn{
  width:30px!important;
  height:30px!important;
  padding:0!important;
  margin:2px!important;
  border-radius:50%!important;
  border:none!important;
  background:rgba(20,30,50,.06)!important;
  color:#4a5568!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  box-shadow:none!important;
  transition:background .15s ease,transform .12s ease!important;
}
.dad > .c-flex.bgg.border > .head > label.btn:hover{background:rgba(20,30,50,.12)!important;}
.dad > .c-flex.bgg.border > .head > label.btn:active{transform:scale(.92)!important;}

/* ---------------------------------------------------------------------------
   3) خلفية منطقة الرسايل
   --------------------------------------------------------------------------- */
[id^="d2"]:not(#d2):not(#d2bc){
  background:var(--pm-wallpaper)!important;
  padding:10px 6px!important;
}

/* ---------------------------------------------------------------------------
   4) الصف الخارجي لكل رسالة = صورة + فقاعة جنب بعض (flex)، مش الفقاعة نفسها.
   الصف بياخد عرضه من محتواه بس (fit-content) ويتحاذى يمين أو شمال حسب مين
   بعت الرسالة.
   --------------------------------------------------------------------------- */
[id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex{
  display:flex!important;
  align-items:flex-end!important;
  gap:6px!important;
  width:fit-content!important;
  max-width:82%!important;
  margin:4px 8px!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
/* رسالتي أنا: الصف كله يمين، والصورة (أول عنصر في الـHTML) بتتقلب لآخر
   الصف (يعني تبان أقصى اليمين) بـrow-reverse */
[id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex.usx-pm-mine{
  margin-left:auto!important;
  margin-right:8px!important;
  flex-direction:row-reverse!important;
}
/* رسالة الطرف التاني: الصف كله شمال، والصورة تفضل أول حاجة (أقصى الشمال) */
[id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex.usx-pm-theirs{
  margin-right:auto!important;
  margin-left:8px!important;
}

/* ---------------------------------------------------------------------------
   5) صورة العضو - دائرية، بدون إطار متحرك أو إفكت (تصميم خفيف بدون مؤثرات)
   --------------------------------------------------------------------------- */
[id^="d2"]:not(#d2):not(#d2bc) .uzr.d-flex .usx-d2-avatar{
  display:block!important;
  position:relative!important;
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .usx-d2-avatar .u-pic{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  border-radius:50%!important;
  float:none!important;
  border:1px solid rgba(20,30,50,.08)!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .usx-d2-avatar .imgbaqer,
[id^="d2"]:not(#d2):not(#d2bc) .usx-d2-avatar .imgeffect{
  display:none!important;
}

/* ---------------------------------------------------------------------------
   6) الفقاعة نفسها (عمود النص) - هنا الخلفية والحواف الدائرية والـpadding
   --------------------------------------------------------------------------- */
[id^="d2"]:not(#d2):not(#d2bc) .uzr.flex-fill{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:6px 10px 20px!important;
  border-radius:14px!important;
  background:var(--pm-bubble-theirs)!important;
  border:1px solid rgba(20,30,50,.05)!important;
  box-shadow:0 1px 2px rgba(20,30,50,.05)!important;
  position:relative!important;
  /* [FIX v3] الفقاعة أصلاً معاها كلاس ".break" اللي بيدّيها overflow:auto
     (من base-styles.css) - وده اللي كان بيطلّع شريط سكرول جوه كل رسالة
     لما محتواها يزيد شعرة عن مساحتها (بسبب padding-bottom المحجوز للوقت
     ومكان زرار الثلاث نقط). مفيش داعي لـoverflow هنا خالص، النص بيلف عادي
     بـword-break أصلاً في قاعدة .u-msg تحت. */
  overflow:visible!important;
}
[id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex.usx-pm-mine .uzr.flex-fill{
  background:var(--pm-bubble-mine)!important;
  border-bottom-left-radius:14px!important;
  border-bottom-right-radius:4px!important;
}
[id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex.usx-pm-theirs .uzr.flex-fill{
  border-bottom-right-radius:14px!important;
  border-bottom-left-radius:4px!important;
}

/* فكّ الصف الداخلي (اسم+أيقونة / وقت) اللي كان مبني كـflex معقّد، عشان
   العناصر تترتب رأسي جوه الفقاعة (اسم فوق - نص تحت - وقت في الركن).
   [FIX v2] لازم :not(.msgActions) هنا - .msgActions نفسه كمان .d-flex وابن
   مباشر لـ.flex-fill، ولو اتفك زي باقي العناصر بيفقد position:absolute
   بتاعه وأزرار الرد/الحذف بتترمي فالتة جوه النص. */
[id^="d2"]:not(#d2):not(#d2bc) .uzr.flex-fill > .d-flex:not(.msgActions){
  display:contents!important;
}

/* اسم المرسل - ظاهر فوق كل فقاعة (عندي وعند الطرف التاني) بلون مميز خفيف */
[id^="d2"]:not(#d2):not(#d2bc) .u-topic{
  display:block!important;
  font-size:11.5px!important;
  font-weight:800!important;
  padding:0!important;
  margin:0 0 2px!important;
  background:transparent!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .u-topic::after{
  content:none!important;
}

/* نص الرسالة */
[id^="d2"]:not(#d2):not(#d2bc) .u-msg{
  direction:rtl!important;
  text-align:right!important;
  font-size:13.5px!important;
  font-weight:400!important;
  color:var(--pm-ink)!important;
  white-space:normal!important;
  word-break:break-word!important;
  padding:0!important;
  margin:0!important;
  /* [FIX v3] .u-msg نفسها معاها كلاس ".break" كمان (overflow:auto) - نفس
     سبب شريط السكرول اللي كان ظاهر جنب النص بالظبط. */
  overflow:visible!important;
}

/* الوقت - في ركن الفقاعة (نسبةً لـ.flex-fill نفسه، مش الصف كله) */
[id^="d2"]:not(#d2):not(#d2bc) .tago{
  position:absolute!important;
  bottom:3px!important;
  left:10px!important;
  right:auto!important;
  font-size:9.5px!important;
  color:var(--pm-sub)!important;
  margin:0!important;
  padding:0!important;
}

/* اقتباس الرد (لو موجود) */
[id^="d2"]:not(#d2):not(#d2bc) .u-rply .grid-container{
  border-left:none!important;
  border-right:3px solid var(--pm-accent)!important;
  background:rgba(20,30,50,.03)!important;
  border-radius:8px!important;
  padding:4px 6px!important;
  margin:0 0 4px!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .u-rply .item3,
[id^="d2"]:not(#d2):not(#d2bc) .u-rply .item5{
  text-align:right!important;
  font-size:11px!important;
  margin-left:0!important;
}

/* ---------------------------------------------------------------------------
   7) أزرار الرد/الحذف - [FIX v3] بدل ما يبانوا دايرتين كبار فوق النص طول
   الوقت، دلوقتي .msgActions نفسها بقت الزرار الظاهر - دايرة صغيرة فيها
   أيقونة 3 نقط (FontAwesome fa-ellipsis-v) في ركن الفقاعة السفلي (يمين
   العنصر - جنب زرار الوقت اللي في الركن الشمال - بعيد عن اسم المرسل اللي
   فوق). لما حد يدوس عليها بتتحط كلاس "usxMenuOpen" (الكود بتاع الفتح/القفل
   موجود بالفعل في آخر x2.js - نفس اللي بيشغّل نفس القايمة دي في الروم/
   الحائط) وتظهر فوقها قائمة صغيرة فيها زرار "رد" و"حذف" الحقيقيين
   (.breply/.bdel) واحد فوق التاني.
   --------------------------------------------------------------------------- */
[id^="d2"]:not(#d2):not(#d2bc) .msgActions{
  position:absolute!important;
  top:auto!important;
  bottom:4px!important;
  left:auto!important;
  right:4px!important;
  width:22px!important;
  max-width:22px!important;
  height:22px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  cursor:pointer!important;
  z-index:5!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .msgActions:hover{
  background:rgba(20,30,50,.06)!important;
}
/* أيقونة الثلاث نقط (FontAwesome fa-ellipsis-v \f142) - بدل ما يبانوا زرار
   رد وزرار حذف واقفين طول الوقت فوق النص */
[id^="d2"]:not(#d2):not(#d2bc) .msgActions:before{
  content:"\f142"!important;
  font-family:FontAwesome!important;
  font-size:13px!important;
  color:var(--pm-sub)!important;
}
/* لو الزرار مش متفعّل أصلاً (مفيش صلاحية رد/حذف على الرسالة دي) - يفضل
   مخفي دايمًا حتى لو القايمة اتفتحت */
[id^="d2"]:not(#d2):not(#d2bc) .msgActions .breply:not([onclick]),
[id^="d2"]:not(#d2):not(#d2bc) .msgActions .bdel:not([onclick]){
  display:none!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .msgActions .breply,
[id^="d2"]:not(#d2):not(#d2bc) .msgActions .bdel{
  display:none!important;
  position:absolute!important;
  bottom:26px!important;
  right:0!important;
  width:30px!important;
  height:30px!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;
  font-size:12px!important;
  color:var(--pm-ink)!important;
  margin:0!important;
}
/* القايمة مفتوحة - كلاس "usxMenuOpen" بيتحط بالجافاسكريبت (نفس الكود
   المستخدم أصلاً لقايمة الروم/الحائط في usx-extras.css - موجود آخر
   x2.js ومش محتاج أي تعديل تاني عشان يشتغل هنا كمان) */
[id^="d2"]:not(#d2):not(#d2bc) .msgActions.usxMenuOpen .breply{
  display:flex!important;
  bottom:26px!important;
}
[id^="d2"]:not(#d2):not(#d2bc) .msgActions.usxMenuOpen .bdel{
  display:flex!important;
  bottom:60px!important;
  color:#e53e3e!important;
}
/* رفع الرسالة اللي فاتح فيها القايمة فوق اللي جنبها عشان القايمة تبان
   كاملة مش متغطية من فقاعة تانية */
[id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex:has(.msgActions.usxMenuOpen){
  z-index:30!important;
}

@media (max-width:420px){
  [id^="d2"]:not(#d2):not(#d2bc) > .uzr.d-flex{
    max-width:90%!important;
  }
}