:root {
  --bg: #0e1117;
  --panel: #161b22;
  --panel2: #1c2330;
  --border: #2a3240;
  --text: #e6edf3;
  --muted: #8b98a9;
  --primary: #2f81f7;
  --primary2: #1f6feb;
  --danger: #f85149;
  --green: #3fb950;
  --accent: #7c5cff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
}
button { cursor: pointer; font-family: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 18px; }

/* ================= اللوبي ================= */
.lobby-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2a4a 0%, var(--bg) 60%);
  padding: 20px;
}
.lobby-card {
  width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.brand { text-align: center; margin-bottom: 18px; }
.brand .logo { font-size: 42px; }
.brand h1 { margin: 6px 0 0; font-size: 22px; }
.role-switch {
  display: flex; gap: 8px; margin: 16px 0;
  background: var(--panel2); padding: 6px; border-radius: 12px;
}
.role-btn {
  flex: 1; padding: 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 15px;
}
.role-btn.active { background: var(--primary); color: #fff; }
form label { display: block; margin: 12px 0; font-size: 14px; color: var(--muted); }
form input, form select {
  width: 100%; margin-top: 6px; padding: 11px 12px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); font-size: 15px;
}
.primary {
  width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: 16px; font-weight: 600;
  margin-top: 8px;
}
.primary:hover { background: var(--primary2); }
.primary.big { padding: 16px 22px; font-size: 18px; margin: 14px 0; }
.ghost {
  width: 100%; padding: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); border-radius: 10px; margin-top: 6px;
}
.rooms-block { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.rooms-block h3 { margin: 0 0 10px; font-size: 15px; }
.room-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.room-name { font-weight: 600; }
.live-badge { color: var(--danger); font-size: 13px; font-weight: 600; }
.join-mini {
  margin-inline-start: 8px; padding: 6px 12px; border: 0; border-radius: 7px;
  background: var(--primary); color: #fff;
}

/* ================= شاشات الانتظار ================= */
.wait-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wait-card {
  text-align: center; background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 40px; max-width: 460px; width: 100%;
}
.wait-card .logo, .wait-card .pulse { font-size: 56px; }
.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.15)} }

/* ================= واجهة الحصة ================= */
.app { height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar .left { display: flex; align-items: center; gap: 10px; }
.live-dot { animation: pulse 1.6s infinite; }
.role-chip {
  background: var(--panel2); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 20px; font-size: 13px;
}
.count-chip {
  background: var(--panel2); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 20px; font-size: 14px; margin-inline-end: 10px;
}
.danger {
  padding: 8px 16px; border: 0; border-radius: 8px;
  background: var(--danger); color: #fff; font-weight: 600;
}

.main { flex: 1; display: flex; min-height: 0; }
.stage-wrap { flex: 1; padding: 12px; min-width: 0; }
.stage {
  position: relative; height: 100%; background: #000;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
}
/* الفيديو الرئيسي يملأ الشاشة بالكامل */
.main-video {
  position: absolute; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.main-video video { width: 100%; height: 100%; object-fit: contain; }
.main-video.no-video::after {
  content: "📷 لا يوجد فيديو"; color: var(--muted); position: absolute;
}
.main-label {
  position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 6;
  background: rgba(0,0,0,.6); padding: 6px 12px; border-radius: 8px; font-size: 14px;
}

/* حاوية شريط المشاركين — تطفو فوق الفيديو، وشكلها يتغيّر حسب وضع العرض */
.filmstrip-wrap {
  position: absolute; z-index: 7; display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.filmstrip-wrap > * { pointer-events: auto; }
.filmstrip { display: flex; gap: 8px; overflow: auto; scroll-behavior: smooth; }
.filmstrip::-webkit-scrollbar { height: 6px; width: 6px; }
.filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.filmstrip:empty { display: none; }
/* أسهم التنقّل */
.strip-arrow {
  display: none; flex: 0 0 auto; width: 32px; height: 62px; border: 0;
  background: rgba(0,0,0,.6); color: #fff; border-radius: 9px; font-size: 26px;
  line-height: 1; cursor: pointer;
}
.strip-arrow:hover { background: rgba(0,0,0,.8); }
.strip-arrow.show { display: block; }

.tile {
  position: relative; width: 150px; height: 90px; flex: 0 0 auto;
  background: #11151c; border: 2px solid rgba(255,255,255,.25); border-radius: 10px;
  overflow: hidden; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.55);
}
.tile.speaking { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile.no-video::after {
  content: "📷"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 26px; opacity: .4;
}
.tile-label {
  position: absolute; bottom: 0; inset-inline: 0;
  background: rgba(0,0,0,.6); font-size: 11px; padding: 3px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== أوضاع عرض المشاركين ===== */
/* شريط علوي في المنتصف مع جزء أسود من فوق */
.stage.strip-top .filmstrip-wrap {
  top: 0; inset-inline: 0; justify-content: center; padding: 10px 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.stage.strip-top .filmstrip { flex-wrap: nowrap; max-width: calc(100% - 90px); }
/* عمود جانبي — المربعات تحت بعض على الجنب */
.stage.strip-side .filmstrip-wrap {
  top: 0; bottom: 0; inset-inline-end: 0; width: 178px; padding: 10px;
  flex-direction: column; align-items: stretch;
  background: linear-gradient(to var(--side-dir, left), rgba(0,0,0,.55), rgba(0,0,0,0));
}
.stage.strip-side .filmstrip { flex-direction: column; flex-wrap: nowrap; overflow-y: auto; max-height: 100%; }
.stage.strip-side .tile { width: 100%; height: 96px; }
/* مربع واحد فقط (المتحدّث الحالي) — مساحة أكبر للشاشة */
.stage.strip-single .filmstrip-wrap { bottom: 14px; inset-inline-end: 14px; }
/* إخفاء المربعات تمامًا */
.stage.strip-hidden .filmstrip-wrap { display: none; }

/* أداة اختيار العرض */
.stage-tools { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 9; }
.stage-btn {
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; padding: 6px 11px; font-size: 13px; cursor: pointer;
}
.stage-btn:hover { background: rgba(0,0,0,.75); }
.layout-menu {
  position: absolute; top: 40px; inset-inline-start: 0; min-width: 160px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.layout-menu.open { display: flex; }
.layout-menu button {
  text-align: start; padding: 9px 10px; border: 0; background: transparent;
  color: var(--text); border-radius: 7px; font-size: 13px;
}
.layout-menu button:hover { background: var(--panel2); }
.layout-menu button.active { background: var(--primary); color: #fff; }

/* ---- الشريط الجانبي ---- */
.sidebar {
  width: 320px; background: var(--panel); border-inline-start: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.tabs { display: flex; border-bottom: 1px solid var(--border); align-items: stretch; }
.tab {
  flex: 1; padding: 12px; border: 0; background: transparent;
  color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tab svg { width: 18px; height: 18px; }
.tab-ic-img {
  width: 18px; height: 18px; object-fit: contain;
  filter: invert(1) brightness(1.4); opacity: .8;
}
.tab.active { color: var(--text); border-bottom-color: var(--primary); }
.tab.active .tab-ic-img { opacity: 1; }
/* زر إغلاق الشات (X) فوق الشات */
.sidebar-close {
  flex: 0 0 auto; width: 44px; border: 0; background: transparent;
  color: var(--muted); font-size: 18px; border-bottom: 2px solid transparent;
}
.sidebar-close:hover { color: #fff; background: var(--danger); }
.tab-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.tab-panel.active { display: flex; }

.chat-list { flex: 1; overflow-y: auto; padding: 12px; }
.chat-msg { margin-bottom: 10px; font-size: 14px; }
.chat-msg.mine { text-align: start; }
.chat-name { font-weight: 700; color: var(--primary); margin-inline-end: 6px; }
.chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
.chat-form input {
  flex: 1; padding: 10px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.chat-form button, .float-reply button {
  padding: 10px 14px; border: 0; border-radius: 8px;
  background: var(--primary); color: #fff;
}

/* شريط التحكّم الجماعي أعلى قائمة المشاركين */
.people-bulk {
  padding: 10px; border-bottom: 1px solid var(--border); display: flex;
  flex-direction: column; gap: 6px; background: rgba(255,255,255,.02);
}
.bulk-title { font-size: 12px; color: var(--muted); font-weight: 600; }
.bulk-row { display: flex; gap: 6px; }
/* زر تبديل جماعي: عادي عند الفتح، أحمر + أيقونة مشطوبة عند القفل */
.bulk-toggle {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #d6dde6; border-radius: 11px;
  font-size: 13px; font-weight: 600; transition: all .15s;
}
.bulk-toggle .bt-ic { display: inline-flex; }
.bulk-toggle .bt-ic svg { width: 18px; height: 18px; }
.bulk-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.bulk-toggle.off {
  color: var(--danger); border-color: rgba(248,81,73,.45); background: rgba(248,81,73,.08);
}
.bulk-toggle.off:hover { background: rgba(248,81,73,.16); }

.people-list { flex: 1; overflow-y: auto; padding: 10px; }
.person {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
}
.person.clickable .person-top { cursor: pointer; }
/* أزرار التحكم مخفية حتى الضغط على المشارك */
.person .person-ctrl { display: none; }
.person.expanded .person-ctrl { display: flex; }
.pic.cam.off { color: var(--danger); }
.person-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.person-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.person-name .you { color: var(--muted); font-size: 12px; font-weight: 400; }
.person-icons { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pic { display: inline-flex; }
.pic svg { width: 17px; height: 17px; }
.pic.mic.on { color: var(--green); }
.pic.mic.off { color: var(--danger); }
.pic.hand { color: #f0a500; }
.person-ctrl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pctrl-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: #d6dde6; border-radius: 9px; font-size: 12px; font-weight: 600;
}
.pctrl-btn svg { width: 15px; height: 15px; }
.pctrl-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
/* أزرار نصية قديمة (احتياطي) */
.mini-btn {
  font-size: 12px; padding: 5px 8px; border: 1px solid var(--border);
  background: #10151d; color: var(--text); border-radius: 7px;
}
.mini-btn:hover { background: var(--primary); border-color: var(--primary); }
/* أيقونة المايك/اليد داخل علامة الفيديو */
.main-label, .tile-label { display: flex; align-items: center; gap: 5px; }
.lbl-mic, .lbl-hand { display: inline-flex; flex: 0 0 auto; }
.lbl-mic svg { width: 15px; height: 15px; }
.lbl-mic.on { color: var(--green); }
.lbl-mic.off { color: var(--danger); }
.lbl-hand { color: #f0a500; }
.lbl-hand svg { width: 14px; height: 14px; }
.lbl-share { font-size: 12px; color: var(--primary); font-weight: 600; }
.tile-label .lbl-mic svg { width: 13px; height: 13px; }
.lbl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- شريط التحكم السفلي (بنمط Zoom — أيقونة + اسم تحتها) ---- */
.controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 22px; background: var(--panel); border-top: 1px solid var(--border);
  gap: 8px;
}
.cgroup { display: flex; align-items: center; gap: 4px; }
.cgroup.center { flex: 1; justify-content: center; }

.cbtn2 {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  padding: 6px 12px; border-radius: 10px; min-width: 62px;
  transition: background .15s, transform .1s;
}
.cbtn2:hover { background: rgba(255,255,255,.08); }
.cbtn2:active { transform: scale(.95); }
.cbtn2 .lbl { font-size: 12px; color: #c9d1da; white-space: nowrap; }
.cbtn2.disabled { opacity: .5; }
/* حالات تفاعلية: أحمر عند الإيقاف/المغادرة، أزرق عند التفعيل — تلوّن الأيقونة فقط */
.cbtn2.off { color: var(--danger); }
.cbtn2.on { color: var(--primary); }
.cbtn2.leave { color: var(--danger); }

/* أيقونات الصور (سوداء الأصل) عبر mask — تتلوّن بلون currentColor */
.ic-mask {
  display: block; width: 26px; height: 26px; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  transition: transform .1s;
}
.ic-mask.sm { width: 20px; height: 20px; }
.cbtn2:hover .ic-mask { transform: scale(1.08); }
.ic-svg { display: flex; }
.ic-svg svg { width: 26px; height: 26px; transition: transform .1s; }
.cbtn2:hover .ic-svg svg { transform: scale(1.08); }

/* عدد المشاركين على أيقونة المشاركون */
.count-pill {
  position: absolute; top: 0; inset-inline-end: 6px;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
/* نقطة رسائل غير مقروءة على أيقونة الشات */
.unread-dot {
  position: absolute; top: 3px; inset-inline-end: 12px;
  width: 9px; height: 9px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 0 2px var(--panel);
}
/* شارة عدد الأيدي المرفوعة على أيقونة المشاركون */
.hand-badge {
  position: absolute; top: 0; inset-inline-start: 6px;
  background: #f0a500; color: #1a1200; font-size: 10px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  animation: badgePulse 1.4s infinite;
}
/* أيقونة داخل قائمة «المزيد» */
.more-pop .ic-svg svg { width: 20px; height: 20px; }
.more-pop .ic-svg.sm svg { width: 20px; height: 20px; }
/* زر رفع اليد المفعّل */
#handBtn.on .ic-svg svg { animation: waveHand 1s ease-in-out infinite; }
@keyframes waveHand { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 75%{transform:rotate(18deg)} }

/* قائمة الإيموجي المنبثقة */
.emoji-wrap { position: relative; display: flex; }
.emoji-pop {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--border); border-radius: 30px;
  padding: 8px 10px; display: none; gap: 4px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); z-index: 20;
}
.emoji-pop.open { display: flex; }
.emo { font-size: 26px; border: 0; background: transparent; padding: 6px; border-radius: 50%;
  transition: transform .1s, background .15s; }
.emo:hover { background: var(--panel2); transform: scale(1.3); }

/* قائمة «المزيد» */
.more-wrap { position: relative; }
.more-pop {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; display: none; flex-direction: column; gap: 2px; min-width: 190px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); z-index: 20;
}
.more-pop.open { display: flex; }
.more-pop button {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: transparent; border: 0; color: var(--text); border-radius: 8px;
  font-size: 14px; text-align: start; width: 100%;
}
.more-pop button:hover { background: var(--panel2); }
.more-pop .more-emo { font-size: 18px; }

/* ---- إخفاء/إظهار الشات (يُفتح من زر «الشات» أو «المشاركون») ---- */
.app.sidebar-hidden .sidebar { display: none; }

/* ---- وضع ملء الشاشة: الشريط العلوي والسفلي يظهران عند تحريك الماوس ---- */
.app.fs-active { background: #000; }
.app.fs-active .topbar {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  transform: translateY(-110%); transition: transform .25s ease;
  background: rgba(22,27,34,.9); backdrop-filter: blur(6px);
}
.app.fs-active .controls {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 100;
  transform: translateY(110%); transition: transform .25s ease;
  background: rgba(22,27,34,.92); backdrop-filter: blur(6px);
}
.app.fs-active.show-bar .topbar,
.app.fs-active.show-bar .controls { transform: translateY(0); }
/* المحتوى (الشات/المشاركون + الفيديو) يتقلّص ليناسب الشريطين عند ظهورهما،
   ويتوسّع عند اختفائهما — بحركة سلسة، فيظهر مكان الكتابة دائمًا فوق الشريط */
.app.fs-active .main { transition: padding .25s ease; }
.app.fs-active.show-bar .main {
  padding-top: var(--fs-top, 52px);
  padding-bottom: var(--fs-bottom, 96px);
}
/* لو الشريط الجانبي طبقة كاملة (شاشات صغيرة): يتقلّص هو أيضًا ليناسب الشريطين */
.app.fs-active .sidebar { transition: top .25s ease, bottom .25s ease; }
.app.fs-active.show-bar .sidebar {
  top: var(--fs-top, 52px);
  bottom: var(--fs-bottom, 96px);
}

/* ---- طبقة التنبيهات العائمة ---- */
.toast-layer {
  position: absolute; top: 10px; inset-inline: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.chat-toast {
  background: rgba(20,25,35,.92); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 20px; font-size: 14px; max-width: 80%;
  opacity: 0; transform: translateY(-12px); transition: .35s;
}
.chat-toast.show { opacity: 1; transform: translateY(0); }
.chat-toast.sys { background: rgba(47,129,247,.92); border-color: var(--primary); }

/* ---- إيموجي متطاير ---- */
.emoji-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 8; }
.fly-emoji {
  position: absolute; bottom: 10%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: fly 3s ease-out forwards;
}
.fly-emoji .fe-ic { font-size: 40px; line-height: 1; }
/* اسم صاحب التفاعل تحت الإيموجي */
.fly-emoji .fe-name {
  font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.14);
  padding: 3px 9px; border-radius: 12px; backdrop-filter: blur(4px);
}
@keyframes fly {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-20px) scale(1.2); }
  100% { transform: translateY(-70vh) scale(1); opacity: 0; }
}

/* ================= الشريط العائم ================= */
.float-bar {
  position: fixed; top: 80px; inset-inline-end: 16px; width: 312px; z-index: 50;
  background: rgba(18,22,30,.98); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden;
}
.float-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  background: linear-gradient(135deg, #2a3350, #1b2231);
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: move; font-size: 14px;
}
.float-head .grip { display: flex; opacity: .5; cursor: grab; }
.float-head .grip svg { width: 16px; height: 16px; }
.float-title-ic { display: flex; color: var(--primary); }
.float-title-ic svg { width: 18px; height: 18px; }
.float-head strong { flex: 1; font-weight: 700; letter-spacing: .2px; }
.float-min {
  display: flex; align-items: center; justify-content: center; border: 0;
  background: rgba(255,255,255,.1); color: #fff; width: 28px; height: 28px;
  border-radius: 8px; transition: background .15s;
}
.float-min:hover { background: rgba(255,255,255,.22); }
.float-min svg { width: 16px; height: 16px; }
/* شارة الرسائل غير المقروءة */
.unread-badge {
  background: #ff3b30; color: #fff; font-size: 12px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(255,59,48,.6); animation: badgePulse 1.4s infinite;
}
@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); }
  70% { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.float-bar.has-unread { border-color: #ff3b30; }
.float-msgs { max-height: 220px; overflow-y: auto; padding: 8px; }
/* الحالة المصغّرة — شريط صغير (العنوان + الشارة فقط) */
.float-bar.collapsed .float-msgs,
.float-bar.collapsed .float-reply,
.float-bar.collapsed .float-ctrls { display: none; }
.float-bar.collapsed.floating-fixed { width: auto; min-width: 210px; }
.float-msg {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; font-size: 13px;
}
.float-msg.mine { border-color: var(--primary); background: #16233a; }
.float-msg.hand { border-color: #f0a500; background: #2a2205; }
.float-msg.hand .fm-name { color: #f0a500; }
/* مؤشّر رفع اليد في قائمة المشاركين */
.person.raised { border-color: #f0a500; }
.hand-flag { color: #f0a500; margin-inline-start: 4px; }
.float-msg.clickable { cursor: pointer; border-color: var(--accent); }
.float-msg.clickable:hover { background: #232a3a; }
.fm-name { font-weight: 700; color: var(--accent); margin-inline-end: 5px; }
.float-msg.mine .fm-name { color: var(--primary); }
/* أزرار الطالب مخفية حتى الضغط على الرسالة — بحركة سلسة */
.fm-acts {
  display: flex; gap: 8px; overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0; pointer-events: none;
  transition: max-height .24s ease, opacity .2s ease, margin-top .24s ease;
}
/* الرسائل ورفع اليد: مقفولة افتراضيًا، تفتح بالضغط بحركة سلسة */
.float-msg.expanded .fm-acts {
  max-height: 52px; opacity: 1; margin-top: 8px; pointer-events: auto;
}
/* أزرار الإجراءات الأيقونية داخل الرسائل */
.mini-btn.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: #d6dde6; transition: all .12s;
}
.mini-btn.icon svg { width: 18px; height: 18px; }
.mini-btn.icon:hover { background: rgba(255,255,255,.12); color: #fff; }
/* زر تبديل: أحمر عند القفل */
.mini-btn.icon.toggle.off {
  color: var(--danger); border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.1);
}
.mini-btn.icon.toggle.off:hover { background: rgba(248,81,73,.2); }

.float-reply { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.float-reply input {
  flex: 1; padding: 10px 12px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: var(--text);
}
.float-reply input:focus { outline: none; border-color: var(--primary); }
.float-reply button {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px;
  background: var(--primary); color: #fff;
}
.float-reply button:hover { background: var(--primary2); }
.float-reply button svg { width: 18px; height: 18px; transform: scaleX(-1); }

/* شريط أدوات المشاركة داخل النافذة العائمة */
.float-ctrls {
  display: flex; flex-direction: column; gap: 7px; padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fc-row { display: flex; gap: 7px; }
.fctrl {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 6px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: #d6dde6; border-radius: 11px;
  font-size: 11.5px; font-weight: 600; transition: all .15s;
}
.fctrl svg { width: 19px; height: 19px; }
.fctrl:hover { background: rgba(255,255,255,.1); color: #fff; }
.fctrl.on { background: var(--green); border-color: var(--green); color: #04140a; }
.fctrl.danger { color: #ff9a92; border-color: rgba(248,81,73,.4); }
.fctrl.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* أزرار التبديل الجماعي في النافذة العائمة: صف أفقي، أحمر عند القفل */
.fctrl.bulk { flex-direction: row; justify-content: center; gap: 6px; }
.fctrl.bulk .bt-ic { display: inline-flex; }
.fctrl.bulk .bt-ic svg { width: 17px; height: 17px; }
.fctrl.bulk.off {
  color: var(--danger); border-color: rgba(248,81,73,.45); background: rgba(248,81,73,.1);
}
.fctrl.bulk.off:hover { background: rgba(248,81,73,.2); }
.float-bar.collapsed .float-ctrls { display: none; }

/* الشريط العائم داخل الصفحة (بديل عند عدم دعم النافذة العائمة) */
.float-bar.floating-fixed { top: 74px; inset-inline-end: 16px; z-index: 60; }

/* داخل نافذة Picture-in-Picture: يملأ النافذة بالكامل */
.pip-body { margin: 0; background: var(--bg); color: var(--text); }
.pip-body .float-bar {
  position: static; width: 100%; height: 100vh; inset: auto;
  border: 0; border-radius: 0; box-shadow: none; display: flex;
}
.pip-body .float-head { cursor: default; }
.pip-body .float-msgs { max-height: none; flex: 1; }

/* ---- قائمة إجراءات الطالب ---- */
.ctx-menu {
  position: fixed; z-index: 100; background: var(--panel);
  border: 1px solid var(--accent); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); min-width: 160px;
}
.ctx-title { font-weight: 700; padding: 6px 8px; color: var(--accent); font-size: 13px; }
.ctx-menu button {
  display: block; width: 100%; text-align: start; border: 0; background: transparent;
  color: var(--text); padding: 8px; border-radius: 6px; font-size: 13px;
}
.ctx-menu button:hover { background: var(--panel2); }

/* ================= مؤشّر التسجيل ================= */
.rec-indicator {
  display: flex; align-items: center; gap: 7px;
  background: rgba(248,81,73,.14); border: 1px solid rgba(248,81,73,.4);
  padding: 4px 11px; border-radius: 20px; font-size: 13px; font-weight: 700;
  color: #ff6b63; font-variant-numeric: tabular-nums;
}
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 0 rgba(248,81,73,.7); animation: recPulse 1.3s infinite;
}
@keyframes recPulse {
  0% { box-shadow: 0 0 0 0 rgba(248,81,73,.7); }
  70% { box-shadow: 0 0 0 7px rgba(248,81,73,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,81,73,0); }
}
/* زر التسجيل في قائمة المزيد */
.more-pop #recBtn .rec-ic svg { fill: var(--danger); }
.more-pop #recBtn.recording { color: var(--danger); }
.more-pop #recBtn.recording .rec-ic { animation: recPulse 1.3s infinite; border-radius: 50%; }

/* ================= مربّع تأكيد ================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; padding: 20px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: popIn .18s ease;
}
@keyframes popIn { from { transform: scale(.94); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.modal-ic {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(248,81,73,.15); color: var(--danger);
  display: flex; align-items: center; justify-content: center;
}
.modal-ic svg { width: 30px; height: 30px; }
.modal h3 { margin: 0 0 8px; font-size: 19px; }
.modal p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; }
.modal-btn {
  flex: 1; padding: 12px; border: 0; border-radius: 11px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.modal-btn.cancel { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
.modal-btn.cancel:hover { background: #232a3a; }
.modal-btn.danger { background: var(--danger); color: #fff; }
.modal-btn.danger:hover { background: #d63b31; }

/* ================= موبايل ================= */
@media (max-width: 820px) {
  /* الشريط الجانبي يصبح طبقة كاملة فوق الفيديو، ويُتحكّم فيه بنفس زر X/الأيقونة */
  .sidebar { position: fixed; inset: 0; width: 100%; z-index: 70; }
  .float-bar { width: 240px; inset-inline-end: 8px; }
  .controls { padding: 6px 8px; overflow-x: auto; }
  .cbtn2 { min-width: 52px; padding: 5px 7px; }
  .cbtn2 .ic-mask, .cbtn2 .ic-svg svg { width: 22px; height: 22px; }
  .cbtn2 .lbl { font-size: 10px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .sidebar {
    padding-bottom: 55px !important;
  }
  .controls {
    z-index: 80 !important;
  }
}