/* ================= المقاعد الصوتية - تصميم دائري عائم خفيف ================= */
  /* ملحوظة: بنكرر الـ selector بصيغة أعلى specificity (#room .broadcasters)
     عشان نضمن إن الخلفية الرمادية متشالتش حتى لو في ملف CSS تاني بيتحمل بعد
     الملف ده وبيحاول يرجع خلفية للعنصر ده */
  #room .broadcasters,
  .broadcasters{
    width:100% !important;
    height:auto !important;
    min-height:80px;
    padding:12px 6px 10px !important;
    margin:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    /* [FIX] .broadcasters جايه قبل #d2 فى الـDOM جوه #room، وهي عنصر flex
       من غير z-index خاص بيها - فـ#d2 (اللي جاي بعدها) كان بيترسم فوقها
       بالكامل كطبقة، وبيغطي قائمة خيارات المايك (#showpf) حتى لو هي نفسها
       عندها z-index:99999 (لأن الـz-index الداخلي مبيقدرش يهرب برا طبقة
       أبوه). بنرفع .broadcasters نفسها فوق #d2 عشان طبقتها كلها تتقفل فوقه. */
    position:relative !important;
    z-index:50 !important;
  }
  #room .seatsWrap,
  .seatsWrap{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:0 auto !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }
  #room .seatsRow,
  .seatsRow{
    display:flex !important;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }
  .seatsExtra{
    display:none;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    width:100%;
    margin-top:4px;
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }
  .seatsExpandRow{
    width:100%;
    display:flex;
    justify-content:center;
    margin:2px 0;
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }
  .seatsExpandBtn{
    border:none;
    background:rgba(0,0,0,.06);
    color:#666;
    width:24px;
    height:16px;
    line-height:16px;
    font-size:11px !important;
    border-radius:8px;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease;
  }
  .seatsExpandBtn:hover{background:rgba(0,0,0,.12);}
  .seatsExpandBtn.open{transform:rotate(180deg);}
  .seatsMuteBtn{
    position:relative !important;
    width:40px !important;
    height:40px !important;
    margin:0 0 0 6px !important;
    left:0 !important;
    top:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:50% !important;
    background-color:mediumseagreen !important;
    color:#fff !important;
    box-shadow:0 3px 8px rgba(0,0,0,.18);
    cursor:pointer;
    flex-shrink:0;
    transition:transform .15s ease, background-color .15s ease;
  }
  .seatsMuteBtn:hover{transform:scale(1.08);}
  .seatsMuteBtn .fa{font-size:17px !important;}
  .broadcasters .prod{
    float:none !important;
    position:relative !important;
    left:0 !important;
    top:0 !important;
    width:58px !important;
    height:58px !important;
    margin:4px 2px 20px !important;
    border-radius:50% !important;
    border:2px solid rgba(255,255,255,.95) !important;
    background-color:#fff !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    box-shadow:0 3px 10px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
    transition:transform .15s ease, box-shadow .15s ease;
    cursor:pointer;
    flex-shrink:0;
  }
  /* أيقونة المايك تظهر داخل المقعد الفارغ (اللي لسه ما فيه صورة خلفية) */
  .broadcasters .prod .seatMicIcon{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .broadcasters .prod .seatMicIcon svg{
    width:20px;
    height:20px;
    stroke:#c2c8ce;
  }
  .broadcasters .prod[style*="background-image"] .seatMicIcon{
    display:none;
  }
  .broadcasters .prod:hover{
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 8px 16px rgba(0,0,0,.2);
  }
  .broadcasters .prod>hr{display:none !important;}
  /* اسم المتكلم يظهر كبادج عائم أسفل الدائرة بدل ما يتغطى فوقها */
  .broadcasters .prod .evant #name{
    position:absolute !important;
    top:62px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%);
    margin-top:0 !important;
    width:max-content !important;
    max-width:70px !important;
    padding:1px 7px !important;
    line-height:1.5 !important;
    color:#fff !important;
    background:rgba(20,20,20,.62) !important;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* شارة كتم الصوت الصغيرة على حافة الدائرة */
  .broadcasters .prod .ismute{
    position:absolute;
    bottom:-2px;
    left:-2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#e74c3c;
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    display:none;
  }
  .broadcasters .prod .ismute:after{
    content:"\f131";
    font-family:FontAwesome;
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:#fff;
  }
  /* توهج ناعم حول الدائرة وقت التحدث بدل الريبل التقليدي */
  .broadcasters .prod.is_speaking{
    box-shadow:0 3px 10px rgba(0,0,0,.14), 0 0 0 3px rgba(46,204,113,.4);
  }
  
  
  @media (max-width:420px){
    .broadcasters .prod{width:50px !important;height:50px !important;}
    .seatsMuteBtn{width:36px !important;height:36px !important;}
    .broadcasters .prod .evant #name{top:54px !important;}
  }
/* ===== [ADDED] إخفاء شريط السكرول في العام (#d2) ===== */
#d2::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
#d2{
  -ms-overflow-style:none !important;   /* IE / Edge القديم */
  scrollbar-width:none !important;      /* فايرفوكس */
}

/* ===== [ADDED] محاذاة نص "اكتب رسالتك هنا" ومحتوى الكتابة لليمين ===== */
#tbox{
  text-align:right !important;
  direction:rtl !important;
}
#tbox::placeholder{
  text-align:right !important;
}

/* ===== [ADDED] إزالة الإطار/الحدود السوداء حول منطقة العام ===== */
#room,
#d2,
#roomToolbar{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}/* ===== [ADDED] إخفاء شريط السكرول في العام (#d2) ===== */
#d2::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
#d2{
  -ms-overflow-style:none !important;   /* IE / Edge القديم */
  scrollbar-width:none !important;      /* فايرفوكس */
}

/* ===== [ADDED] محاذاة نص "اكتب رسالتك هنا" ومحتوى الكتابة لليمين ===== */
#tbox{
  text-align:right !important;
  direction:rtl !important;
}
#tbox::placeholder{
  text-align:right !important;
}

/* ===== [ADDED] منع ظهور سكرول صغير جنب الرسالة لما تتزنق تحت الاسم في العام ===== */
#d2 > .uzr.d-flex,
#d2bc > .uzr.d-flex{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
#d2 .uzr.d-flex .flex-fill,
#d2bc .uzr.d-flex .flex-fill{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
#d2 .uzr.d-flex .u-msg,
#d2bc .uzr.d-flex .u-msg{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* ===== [ADDED] إزالة الإطار/الحدود السوداء حول منطقة العام ===== */
#room,
#d2,
#roomToolbar{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}
/* [FIX] بعد ما رفعنا .broadcasters (شريط المايكات) لـ z-index:50 عشان
   تتقفل فوق #d2، بقت أعلى كمان من .usx-quickbar (شريط الأيقونات العليا:
   تنبيهات/خاص/راديو/متجر) اللي عنده z-index:2 بس فى usx-extras.css.
   فالقوائم المنسدلة بتاعة الشريط العلوي (اللي عندها z-index:3000 لوحدها)
   كانت بتتحبس جوه طبقة .usx-quickbar الأوطى وتظهر تحت المايكات، رغم
   الـz-index الداخلي بتاعها. بنرفع .usx-quickbar نفسها فوق .broadcasters. */
.usx-quickbar{
  z-index:200 !important;
}

/* [FIX] احتياطي: openStoreModal() لسه بترجع تفتح #dpnl (لوحة المتواجدين)
   كسلوك قديم من وقت ما المتجر كان عايش جواها. لو الفتح بتاعها حصل بعد
   إخفاء #dpnl (تايمنج/async)، نضمن برضه إن نافذة المتجر تفضل ظاهرة فوقها
   بصريًا لأن #dpnl عندها z-index:4000. */
.store-overlay{
  z-index:4500 !important;
}

/* ===== [ADDED] شريط أغنية اليوتيوب الحالية تحت المايكات - تصميم خفيف موحّد
   مع باقي عناصر المقاعد (نفس روح .broadcasters الشفافة والدائرية) =====
   الشريط ده مشترك لكل الأعضاء في الروم (مش خاص بمقعد واحد)، وبيبان بس
   لما يكون فيه أغنية يوتيوب شغالة حاليًا (يتفعّل من الجافاسكريبت). زرار
   الكتم فيه محلي بس (كل عضو بيتحكم في صوته هو)، وأزرار التشغيل/الإيقاف/
   التقديم/التأخير بتتحط display:flex بس عند اللي بدأ الأغنية (أو صاحب
   صلاحية إدارة الغرفة) عن طريق ytMicUpdateBarUI في x2.js. */
#ytmicbar{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:6px 10px 8px;
  margin-top:2px;
  direction:rtl;
}
#ytmicbar .ytmicbar-info{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:3px 12px;
  border-radius:14px;
  background:rgba(20,20,20,.55);
  color:#fff;
  font-size:10.5px !important;
  line-height:1.4;
}
#ytmicbar .ytmicbar-info .fa-youtube-play{
  color:#ff4757;
  font-size:12px !important;
  flex-shrink:0;
}
/* [ADDED] صورة الأغنية الحالية - مصغّرة، دائرية خفيفة، تتحط قبل اسم
   الأغنية. لو مفيش src (لسه محملتش) بنخفيها بدل ما تبان كصورة مكسورة. */
#ytmicbar .ytmicbar-info .ytmicSongThumb{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:rgba(255,255,255,.15);
}
#ytmicbar .ytmicbar-info .ytmicSongThumb[src=""],
#ytmicbar .ytmicbar-info .ytmicSongThumb:not([src]){
  display:none;
}
#ytmicbar #ytmicSongName{
  max-width:150px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
}
#ytmicbar #ytmicTime{
  color:#c7c7c7;
  font-size:9px !important;
  flex-shrink:0;
  direction:ltr;
}
#ytmicbar .ytmicbar-controls{
  display:flex;
  align-items:center;
  gap:14px;
}
#ytmicbar .ytmicbar-controls i{
  cursor:pointer;
  color:#666;
  font-size:13px !important;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
#ytmicbar .ytmicbar-controls i:hover{background:rgba(0,0,0,.12);transform:translateY(-1px);}
#ytmicbar .ytmicbar-controls i:active{transform:scale(.92);}
#ytmicbar .ytmicbar-controls .ytmicPlayPause{background:mediumseagreen;color:#fff;}
#ytmicbar .ytmicbar-controls .ytmicPlayPause:hover{background:#37a06b;}
#ytmicbar .ytmicbar-controls .ytmicStop{color:#e74c3c;}
#ytmicbar .ytmicbar-controls .ytmicMute.muted{color:#e74c3c;}

/* ===== [ADDED] نافذة يوتيوب المنبثقة (بحث/تشغيل) - .yt-modal-* =====
   دي الـCSS بتاعة نافذة الـmodal اللي بيبنيها JS في x2.js (openSeatYoutubeSearchModal
   ونتائج البحث addElements) لميزة "يوتيوب" في قائمة خيارات المايك وميزة إرسال
   فيديو للغرفة/الحائط. كانت الكلاسات دي من غير أي تنسيق خالص فالنافذة كانت
   بتتضاف للـDOM فعليًا بس من غير شكل modal (بلا خلفية داكنة/توسيط/z-index)
   فكانت عمليًا مش بتبان. التصميم هنا ماشي على نفس روح باقي عناصر الموقع
   (دواير المايك، الأزرار الخضرا mediumseagreen، الخلفيات الشفافة الغامقة). */
.yt-modal-overlay{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.55);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  direction:rtl;
}
.yt-modal-box{
  background:#1e1e1e;
  color:#fff;
  width:92%;
  max-width:420px;
  max-height:80vh;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.yt-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.yt-modal-title{
  font-size:13px !important;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
}
.yt-modal-title .fa-youtube-play{color:#ff4757;font-size:15px !important;}
.yt-modal-close{
  background:transparent;
  border:none;
  color:#bbb;
  font-size:20px !important;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
  transition:color .15s ease;
}
.yt-modal-close:hover{color:#fff;}
.yt-modal-search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.yt-modal-search-input{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  border-radius:20px;
  padding:7px 14px;
  font-size:12px !important;
  text-align:right;
  direction:rtl;
  outline:none;
}
.yt-modal-search-input::placeholder{color:#888;}
.yt-modal-search-input:focus{border-color:mediumseagreen;}
.yt-modal-search-btn{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:mediumseagreen;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px !important;
  transition:background .15s ease;
}
.yt-modal-search-btn:hover{background:#37a06b;}
.yt-modal-body{
  padding:10px 14px 14px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.yt-modal-body::-webkit-scrollbar{width:0;height:0;display:none;}
.yt-modal-loading,
.yt-modal-empty{
  text-align:center;
  color:#999;
  font-size:12px !important;
  padding:24px 10px;
}
.yt-modal-loading .fa-spinner{color:mediumseagreen;margin-left:6px;}
.yt-video-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  padding:6px;
  transition:background .15s ease;
}
.yt-video-item:hover{background:rgba(255,255,255,.09);}
.yt-video-thumb-wrap{
  position:relative;
  flex-shrink:0;
  width:88px;
  height:52px;
  border-radius:6px;
  overflow:hidden;
  background:#000;
}
.yt-video-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.yt-video-duration{
  position:absolute;
  bottom:2px;
  left:2px;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:9px !important;
  padding:1px 4px;
  border-radius:4px;
  direction:ltr;
}
.yt-video-info{
  flex:1;
  min-width:0;
}
.yt-video-title{
  font-size:11.5px !important;
  line-height:1.4;
  color:#eee;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.yt-send-btn{
  flex-shrink:0;
  background:mediumseagreen;
  color:#fff;
  border:none;
  border-radius:16px;
  padding:6px 10px;
  font-size:10px !important;
  cursor:pointer;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:4px;
  transition:background .15s ease;
}
.yt-send-btn:hover{background:#37a06b;}

/* ===== [FIX] زرار "يوتيوب" في قائمة خيارات المايك مش بيستجيب لبعض الكليكات =====
   زرار الـytmic هو الوحيد جوه #showpf اللي فيه عنصر <i> تاني جواه (أيقونة
   fa-youtube-play). السيلكتور `.evant i` في x2.js (fmute binding) بيربط
   نفس الهاندلر على أي <i> جوه .evant، يعني لو المستخدم ضغط بالظبط على
   الأيقونة الداخلية، `this` جوه fmute() بيبقى الأيقونة نفسها (اللي مالهاش
   كلاس "ytmic")، فمفيش أي شرط بيتحقق والدالة بتسيب من غير أي فعل ولا error.
   الحل: نمنع الأيقونة الداخلية من استقبال أي pointer events خالص، فأي كليك
   عليها بيعدي فعليًا لعنصر الزرار الأب (.ytmic) اللي عليه الكلاس الصح. */
#showpf .ytmic *{
  pointer-events:none;
}