/* ============ الشريط السفلي (المتواجدين / الخاص / الغرف / الحائط / الإعدادات) + كل مربعات إرسال الرسائل (الدردشة/الخاص/الحائط) - تصميم موحّد خفيف وأنيق ============ */

:root{
  --tb-accent:var(--theme-btcolor); --tb-ink:#242c3a; --tb-sub:#8a92a1; --tb-line:rgba(20,30,50,.08); --tb-soft:rgba(20,30,50,.06);
  /* [ADDED] ارتفاع مربع كتابة الرسالة السفلي (#roomToolbar/.tablebox.d-flex.footer)
     وارتفاع شريط التبويبات السفلي (#d0) - بيتستخدموا في usx-extras.css عشان
     نحجز لهم مساحة تحت لوحة #dpnl (المتصلين/الأصدقاء/الخاص/الحائط/الضبط) فميبقوش
     متغطين لما اللوحة تتفتح. لو غيّرت ارتفاع أي منهم هنا تحت، عدّل القيمة هنا كمان. */
  --tb-toolbar-h:58px; --tb-nav-h:67px;
}

/* ----- الشريط السفلي الرئيسي (تابات التنقل) ----- */
#d0{
  display:flex!important;
  align-items:stretch!important;
  justify-content:space-between!important;
  gap:2px!important;
  background:rgba(255,255,255,.94)!important;
  border-top:1px solid var(--tb-line)!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:0 -6px 18px rgba(20,30,50,.09)!important;
  padding:6px 6px!important;
  height:auto!important;
}
#d0 .ae{
  position:relative!important;
  flex:1 1 0!important;
  width:auto!important;
  max-width:none!important;
  height:54px!important;
  margin:0 2px!important;
  padding:7px 2px 6px!important;
  background:transparent!important;
  border:none!important;
  border-radius:14px!important;
  color:var(--tb-sub)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  font-size:10.5px!important;
  font-weight:700!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  transition:background .2s ease,color .2s ease,transform .15s ease!important;
}
#d0 .ae:before{
  font-size:18px!important;
  transition:transform .2s ease!important;
}
#d0 .ae:hover{background:var(--tb-soft)!important;color:var(--tb-accent)!important;}
#d0 .ae:hover:before{transform:translateY(-2px)!important;}
#d0 .ae:active{transform:scale(.94)!important;}
#d0 .ae:focus{background:rgba(0,0,0,.09)!important;color:var(--tb-accent)!important;}
#d0 .ae span{
  position:absolute!important;
  top:1px!important;
  left:9px!important;
  min-width:15px!important;
  height:15px!important;
  padding:0 3px!important;
  background:linear-gradient(135deg,#ff6b81,#ff4757)!important;
  color:#fff!important;
  border-radius:8px!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:15px!important;
  text-align:center!important;
  box-shadow:0 1px 4px rgba(255,71,87,.5)!important;
}
#d0 .ae span:empty{display:none!important;}

/* ----- مربع كتابة/إرسال الرسائل الموحّد (الدردشة الرئيسية، الخاص، تعليقات الحائط، الحائط نفسه) ----- */
.tablebox.d-flex.footer,
#wall .tablebox{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  height:auto!important;
  min-height:56px!important;
  padding:9px 10px!important;
  background:rgba(255,255,255,.96)!important;
  border-top:1px solid var(--tb-line)!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:0 -4px 14px rgba(20,30,50,.06)!important;
  position:relative!important;
}

/* [ADDED] لما تتحط خلفية مخصصة للغرفة (روم> إعدادات> خلفية صندوق الكتابة)،
   الجافاسكريبت (applyRoomMsgBg في x2.js) بيحط متغير CSS اسمه --room-msg-bg-url
   وكلاس has-custom-bg على #roomToolbar. بنستخدم القاعدة دي (ID + كلاس = أعلى
   تحديدًا من ".tablebox.d-flex.footer" فوق) عشان نرسم الصورة فوق طبقة بيضاء
   شفافة (عشان النص والأيقونات جوه الصندوق تفضل واضحة - ده اللي بيدي شكل
   "شفاف" أنيق بدل ما الصورة تطلع كاملة وتغطي على شكل الصندوق)، مع الحفاظ على
   نفس الحواف الدائرية والظل الموجودين أصلاً. */
#roomToolbar.has-custom-bg{
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),
    var(--room-msg-bg-url) center / cover no-repeat
    !important;
}

/* [ADDED] نفس فكرة اللي فوق، لكن دلوقتي بتتطبق على #room كله (الحاوية
   العامة اللي فيها الرسائل + صندوق الكتابة)، مش على صندوق الكتابة بس. الجافاسكريبت
   (applyRoomMsgBg في x2.js) بقى بيحط نفس متغير الـCSS (--room-msg-bg-url)
   ونفس الكلاس (has-custom-bg) على #room زي ما بيعمل مع #roomToolbar بالظبط.
   بنخليها تغطي كل الحاوية (cover) مع طبقة بيضاء شفافة فوقها زي صندوق الكتابة
   بالظبط عشان يبقى شكلهم متناسق.
   [FIX - PERFORMANCE] كانت الخلفية دي مثبتة بـ background-attachment:fixed
   عشان متتحركش مع سكرول الرسائل، لكن fixed مكلفة جدًا على الأداء (بتخلي
   المتصفح يعيد رسم الخلفية مع كل فريم سكرول بدل ما يركّبها مرة واحدة على
   الـGPU) وده اللي كان بيسبب تقل/تهنيج ملحوظ في الشات وقت وجود خلفية.
   #room نفسه أصلاً مش عنصر بيعمل سكرول (اللي بيعمل سكرول هو #d2 الجواه)،
   فمش محتاجين fixed خالص - شيلناها والنتيجة البصرية نفسها بالظبط بس بأداء
   أخف بكتير. */
#room.has-custom-bg{
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),
    var(--room-msg-bg-url) center center / cover no-repeat
    !important;
}
/* لو الخلفية اتحطت على #room نفسه، مش محتاجين نكررها تاني جوه صندوق الكتابة
   (هتبقى مكررة فوق بعض)، فبنسيب صندوق الكتابة شفاف عشان خلفية #room تظهر من
   وراه على طول بدل ما تتغطى. */
#room.has-custom-bg #roomToolbar.has-custom-bg{
  background:transparent!important;
}

/* [ADDED] #d2 هو حاوية رسائل الدردشة نفسها جوه الغرفة، وليها خلفية لونها
   خاص بيها (جاية من كلاس "light" في ملف تنسيق تاني مش هنا) بتغطي خلفية
   #room اللي احنا حطيناها فوق. عشان خلفية الروم المخصصة تظهر وراء الرسائل
   بدل ما تفضل واقفة بس فوق وتحت صندوق الكتابة، بنخلي #d2 شفاف لما يكون
   الروم عليه خلفية مخصصة، فالخلفية بتاعة #room تبقى ظاهرة ورا الرسائل كلها. */
#room.has-custom-bg > #d2{
  background:transparent!important;
}

/* كل الأزرار الجانبية (خروج، مرفقات، مايك، اتصال...) دوائر خفيفة موحدة */
.tablebox.d-flex.footer > button,
.tablebox.d-flex.footer > span.btn,
#wall .tablebox > button{
  flex:0 0 auto!important;
  width:35px!important;
  height:35px!important;
  min-width:35px!important;
  margin:0!important;
  padding:0!important;
  border:none!important;
  border-radius:50%!important;
  background:var(--tb-soft)!important;
  color:#4a5568!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:0!important;
  box-shadow:none!important;
  transition:background .18s ease,transform .12s ease!important;
}
.tablebox.d-flex.footer > button:before,
.tablebox.d-flex.footer > span.btn:before,
#wall .tablebox > button:before{
  font-size:14px!important;
  font-family:FontAwesome!important;
}
.tablebox.d-flex.footer > button:hover,
.tablebox.d-flex.footer > span.btn:hover,
#wall .tablebox > button:hover{background:rgba(20,30,50,.12)!important;transform:translateY(-1px)!important;}
.tablebox.d-flex.footer > button:active,
.tablebox.d-flex.footer > span.btn:active,
#wall .tablebox > button:active{transform:scale(.92)!important;}

/* -------------------------------------------------------------------------
   [UPDATED] زر "الخروج من الغرفة" اتنقل من هنا لجوه قايمة التلات نقط
   (roomMediaMenu في youtube-enhance.css - كلاس roomExitBtn)، ومكانه القديم
   جوه الشريط اتاخده زرار يوتيوب (roomYoutubeBtn) بدل الإخفاء جوه القايمة.
   ------------------------------------------------------------------------- */

/* زر يوتيوب - بقى ظاهر مباشرة جوه الشريط (بدل جوه التلات نقط) بلون يوتيوب
   المميز عشان يبان واضح ومتناسق مع باقي دوائر الأزرار حواليه */
.tablebox.d-flex.footer > .roomYoutubeBtn{
  background:#ff0000!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(255,0,0,.25)!important;
}
.tablebox.d-flex.footer > .roomYoutubeBtn:hover{
  filter:brightness(1.08)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 5px 14px rgba(255,0,0,.32)!important;
}

/* زر التسجيل الصوتي - نقلناه برا قايمة التلات نقط وحطيناه جنبها مباشرة،
   بنفس شكل الدائرة الموحّد بتاع باقي أزرار الشريط، مع لون أحمر خفيف يميّزه
   كزرار "تسجيل" لما تحطه جنب زرار الثلاث نقط */
.tablebox.d-flex.footer > .roomRecordBtn{
  background:rgba(229,62,62,.1)!important;
  color:#e53e3e!important;
}
.tablebox.d-flex.footer > .roomRecordBtn:hover{
  background:rgba(229,62,62,.18)!important;
}
/* [ADDED] الأيقونة دلوقتي جوه <i> منفصل جوه الزرار (fa-solid fa-microphone)
   مش على الزرار نفسه زي باقي الأزرار - فمحتاجة مقاس/لون خاص بيها لأنها
   هترث font-size:0 من القاعدة العامة (.tablebox.d-flex.footer > button)
   لو مفيش override صريح هنا */
.tablebox.d-flex.footer > .roomRecordBtn i{
  font-size:14px!important;
  color:inherit!important;
}

/* أزرار الإرسال (الدردشة/الخاص/الحائط) - دائرة واحدة بلون الموقع مع لمعة عند التمرير */
.tablebox.d-flex.footer .fa-send,
#wall .tablebox .sndbc{
  width:37px!important;
  height:37px!important;
  min-width:37px!important;
  background:var(--tb-accent)!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(20,30,50,.22)!important;
}
.tablebox.d-flex.footer .fa-send:hover,
#wall .tablebox .sndbc:hover{filter:brightness(1.08)!important;transform:translateY(-2px)!important;box-shadow:0 5px 14px rgba(20,30,50,.28)!important;}
.tablebox.d-flex.footer .fa-send:active,
#wall .tablebox .sndbc:active{transform:scale(.92)!important;}

/* أزرار الإيموشن (صورة) في كل الصناديق */
.tablebox.d-flex.footer img[role="button"],
#wall .tablebox img[role="button"]{
  flex:0 0 auto!important;
  width:31px!important;
  height:31px!important;
  padding:5px!important;
  margin:0!important;
  border-radius:50%!important;
  transition:background .18s ease,transform .12s ease!important;
}
.tablebox.d-flex.footer img[role="button"]:hover,
#wall .tablebox img[role="button"]:hover{background:var(--tb-soft)!important;transform:translateY(-1px)!important;}

/* مربع كتابة الرسالة الموحّد */
.tablebox.d-flex.footer textarea.tbox,
#wall .tablebox textarea.tbox{
  flex:1 1 auto!important;
  height:39px!important;
  min-height:39px!important;
  max-height:39px!important;
  width:auto!important;
  margin:0!important;
  padding:9px 16px!important;
  background:#f1f3f6!important;
  border:none!important;
  border-radius:20px!important;
  font-size:13px!important;
  font-weight:400!important;
  color:var(--tb-ink)!important;
  transition:background .18s ease,box-shadow .18s ease!important;
}
.tablebox.d-flex.footer textarea.tbox:focus,
#wall .tablebox textarea.tbox:focus{
  background:#eaecf1!important;
  box-shadow:inset 0 0 0 1.5px rgba(20,30,50,.12)!important;
  outline:none!important;
}
.tablebox.d-flex.footer textarea.tbox::placeholder,
#wall .tablebox textarea.tbox::placeholder{color:#98a1af!important;}

/* مؤشر الكتابة داخل صندوق الخاص */
.tablebox.d-flex.footer .typ{top:-16px!important;right:14px!important;margin-top:0!important;}