/*
 * MirrorORG Live — صفحة البث للمشاهد.
 *
 * طابع فاتح وهادئ افتراضيًا: لوحات بيضاء بحدود رقيقة، ولون أساسي واحد،
 * ودون توهّج أو تدرّجات صاخبة. مساحة الفيديو وحدها داكنة لأنها شاشة عرض.
 * الوضع الداكن اختياري (من الإعدادات أو زر المشاهد).
 *
 * كل شيء داخل .mls-wrap (و.mls-list للقوائم)، فلا يمسّ بقية الموقع،
 * والخصائص المنطقية تجعل الصفحة نفسها تعمل بالعربية والإنجليزية.
 */

/* ===================================================================== *
 * الرموز
 * ===================================================================== */

.mls-wrap, .mls-list, .mls-countdown-box, .mls-toast {
	--mls-accent: #3b6a99;
	--mls-radius: 14px;
	--mls-ease: cubic-bezier(.25, .8, .25, 1);

	/* فاتح (افتراضي) */
	--mls-bg: #f6f7f9;
	--mls-panel: #ffffff;
	--mls-panel-2: #f6f7f9;
	--mls-line: #e6e8ee;
	--mls-text: #1f2430;
	--mls-dim: #5c6577;
	--mls-faint: #646d84;
	--mls-input: #ffffff;
	--mls-soft: color-mix(in srgb, var(--mls-accent) 9%, #ffffff);
	--mls-soft-line: color-mix(in srgb, var(--mls-accent) 24%, #ffffff);
	--mls-live: #b23b36;
	--mls-live-soft: #fbeceb;
	--mls-ok: #2a7352;
	--mls-shadow: 0 1px 2px rgba(31, 36, 48, .04);
	color-scheme: light;
}

.mls-wrap[data-theme="dark"], .mls-list[data-theme="dark"], .mls-countdown-box[data-theme="dark"] {
	--mls-bg: #15181f;
	--mls-panel: #1b1f27;
	--mls-panel-2: #20252e;
	--mls-line: #2b313c;
	--mls-text: #e4e7ed;
	--mls-dim: #a3abba;
	--mls-faint: #8d95a5;
	--mls-input: #20252e;
	--mls-soft: color-mix(in srgb, var(--mls-accent) 20%, #1b1f27);
	--mls-soft-line: color-mix(in srgb, var(--mls-accent) 40%, #1b1f27);
	--mls-live: #e0807a;
	--mls-live-soft: #2f1f1f;
	--mls-ok: #7cc4a0;
	--mls-shadow: none;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.mls-wrap[data-theme="auto"], .mls-list[data-theme="auto"], .mls-countdown-box[data-theme="auto"] {
		--mls-bg: #15181f;
		--mls-panel: #1b1f27;
		--mls-panel-2: #20252e;
		--mls-line: #2b313c;
		--mls-text: #e4e7ed;
		--mls-dim: #a3abba;
		--mls-faint: #8d95a5;
		--mls-input: #20252e;
		--mls-soft: color-mix(in srgb, var(--mls-accent) 20%, #1b1f27);
		--mls-soft-line: color-mix(in srgb, var(--mls-accent) 40%, #1b1f27);
		--mls-live: #e0807a;
		--mls-live-soft: #2f1f1f;
		--mls-ok: #7cc4a0;
		--mls-shadow: none;
		color-scheme: dark;
	}
}

/* ===================================================================== *
 * التحصين ضد القالب
 *
 * القوالب التجارية (Eduma مثلًا) تلوّن كل <button> عارٍ، وتفرض خطوطها
 * وهوامشها على العناوين والحقول من ملف يُحمَّل بعدنا. هنا نعيدها إلى أصلها
 * داخل البث فقط.
 * ===================================================================== */

.mls-wrap, .mls-wrap *, .mls-list, .mls-list *, .mls-countdown-box, .mls-countdown-box * { box-sizing: border-box; }
.mls-wrap, .mls-list, .mls-countdown-box { font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif !important; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.mls-wrap h2, .mls-wrap h3, .mls-wrap h4, .mls-wrap p, .mls-list h3, .mls-list h4, .mls-list p { margin: 0; padding: 0; font-family: inherit !important; letter-spacing: normal; text-transform: none; }
.mls-wrap button, .mls-list button {
	font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important;
	min-width: 0 !important; min-height: 0 !important; line-height: 1.3 !important; margin: 0;
	background-image: none; box-shadow: none;
}
.mls-wrap textarea, .mls-wrap input[type="text"], .mls-wrap input[type="password"] {
	font-family: inherit !important; margin: 0 !important; box-shadow: none !important; text-transform: none !important;
}
.mls-wrap a { text-decoration: none !important; box-shadow: none !important; }
.mls-wrap img { max-width: 100%; }
.mls-wrap svg { flex: 0 0 auto; }

/* ===================================================================== *
 * الصفحة والرأس
 * ===================================================================== */

.mls-page { max-width: 1440px; margin: 0 auto; padding: 28px 20px 48px; }

.mls-wrap { position: relative; color: var(--mls-text); display: flex; flex-direction: column; gap: 16px; }

.mls-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mls-head-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mls-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mls-title { font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--mls-text) !important; }
.mls-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--mls-dim); font-size: 14px; }
.mls-sub small { color: var(--mls-faint); }
.mls-brand-text { font-weight: 600; color: var(--mls-text); }

.mls-state {
	display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
	font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
	background: var(--mls-panel); color: var(--mls-dim); border: 1px solid var(--mls-line);
}
.mls-state-live { background: var(--mls-live-soft); color: var(--mls-live); border-color: color-mix(in srgb, var(--mls-live) 25%, transparent); }
.mls-state-scheduled { background: var(--mls-soft); color: var(--mls-accent); border-color: var(--mls-soft-line); }
.mls-state-replay { background: var(--mls-panel-2); color: var(--mls-dim); }
.mls-state-canceled { color: var(--mls-live); }
.mls-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mls-breathe 2.4s ease-in-out infinite; }

.mls-viewers { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--mls-panel); border: 1px solid var(--mls-line); color: var(--mls-dim); font-size: 12.5px; font-weight: 600; }
.mls-viewers b { color: var(--mls-text); font-variant-numeric: tabular-nums; display: inline-block; font-weight: 700; }

.mls-net { width: 8px; height: 8px; border-radius: 50%; background: var(--mls-ok); transition: background .3s; }
.mls-net.is-bad { background: #b7791f; }

.mls-tools { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--mls-panel); border: 1px solid var(--mls-line); }
.mls-wrap .mls-tool {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
	height: 34px !important; min-width: 34px; padding: 0 10px !important; border-radius: 9px !important;
	border: 0 !important; background: transparent !important; color: var(--mls-dim) !important;
	font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: background .15s, color .15s;
}
.mls-wrap .mls-tool:hover { background: var(--mls-panel-2) !important; color: var(--mls-text) !important; }
.mls-wrap .mls-tool.is-on { background: var(--mls-soft) !important; color: var(--mls-accent) !important; }
.mls-i-sun { display: none; }
.mls-wrap[data-theme="dark"] .mls-i-moon { display: none; }
.mls-wrap[data-theme="dark"] .mls-i-sun { display: inline; }
@media (prefers-color-scheme: dark) {
	.mls-wrap[data-theme="auto"] .mls-i-moon { display: none; }
	.mls-wrap[data-theme="auto"] .mls-i-sun { display: inline; }
}

/* ===================================================================== *
 * الجسم: المشغّل والدردشة
 * ===================================================================== */

.mls-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 390px); gap: 16px; align-items: start; }
.mls-layout-below .mls-body, .mls-no-chat .mls-body, .mls-theater .mls-body, .mls-chat-hidden .mls-body { grid-template-columns: minmax(0, 1fr); }
.mls-chat-hidden .mls-chat { display: none !important; }
.mls-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.mls-stage {
	position: relative; width: 100%; padding-top: var(--mls-ratio, 56.25%);
	border-radius: var(--mls-radius); overflow: hidden; isolation: isolate;
	background: #11141a; border: 1px solid var(--mls-line);
}
.mls-theater .mls-stage { padding-top: min(var(--mls-ratio, 56.25%), 78vh); }
.mls-stage:fullscreen { padding-top: 0; border-radius: 0; height: 100vh; border: 0; }

.mls-player { position: absolute; inset: 0; }
.mls-player iframe, .mls-player video, .mls-player .mls-jitsi { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; background: #000; }
.mls-player video { object-fit: contain; }

.mls-loading {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	color: rgba(255, 255, 255, .82); font-size: 15px; text-align: center; padding: 24px;
	background: #1a1e26;
}
.mls-loading p { max-width: 420px; color: inherit !important; }
.mls-spin { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .15); border-top-color: rgba(255, 255, 255, .7); animation: mls-spin 1s linear infinite; }
.mls-idle-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); position: relative; }
.mls-idle-icon::after { content: ""; position: absolute; inset: 19px 17px 19px 22px; background: rgba(255, 255, 255, .75); clip-path: polygon(0 0, 100% 50%, 0 100%); }
[dir="rtl"] .mls-idle-icon::after { inset: 19px 22px 19px 17px; }

.mls-watermark {
	position: absolute; top: 12%; inset-inline-start: 8%; z-index: 4; pointer-events: none; user-select: none;
	color: #fff; font: 600 13px/1.3 'Tajawal', system-ui, sans-serif; white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7); opacity: .22;
	transition: top 2.4s var(--mls-ease), inset-inline-start 2.4s var(--mls-ease);
}

.mls-float { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.mls-floating {
	position: absolute; bottom: 6%; left: var(--x); font-size: var(--size, 26px); line-height: 1;
	animation: mls-rise var(--dur, 3s) cubic-bezier(.2, .7, .3, 1) forwards; will-change: transform, opacity;
}

.mls-overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 20px; background: rgba(17, 20, 26, .86); }
.mls-overlay[hidden] { display: none; }
.mls-overlay-box { max-width: 420px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.mls-overlay-box p { color: #fff !important; font-size: 15px; }

.mls-join { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #fff; background: #1a1e26; }
.mls-join p { color: rgba(255, 255, 255, .75) !important; max-width: 440px; }
.mls-join-uses { font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* ---------- تحت المشغّل ---------- */

.mls-under { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mls-react { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--mls-panel); border: 1px solid var(--mls-line); }
.mls-wrap .mls-react-btn {
	width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
	background: transparent !important; font-size: 19px !important; cursor: pointer; display: grid !important; place-items: center;
	transition: background .15s, transform .15s var(--mls-ease);
}
.mls-wrap .mls-react-btn:hover { background: var(--mls-panel-2) !important; transform: translateY(-2px); }
.mls-react-btn.is-pop { animation: mls-pop .35s var(--mls-ease); }

/* ---------- الأزرار ---------- */

.mls-wrap .mls-btn, .mls-list .mls-btn {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	height: 42px !important; padding: 0 18px !important; border-radius: 11px !important;
	border: 1px solid var(--mls-line) !important; background: var(--mls-panel) !important; color: var(--mls-text) !important;
	font-size: 14px !important; font-weight: 600 !important; cursor: pointer; white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.mls-wrap .mls-btn:hover { background: var(--mls-panel-2) !important; }
.mls-wrap .mls-btn-solid { background: var(--mls-accent) !important; border-color: var(--mls-accent) !important; color: #fff !important; }
.mls-wrap .mls-btn-solid:hover { background: color-mix(in srgb, var(--mls-accent) 85%, #000) !important; }
.mls-wrap .mls-btn-ghost { background: var(--mls-panel) !important; }
.mls-wrap .mls-btn-lg { height: 48px !important; padding: 0 24px !important; font-size: 15px !important; }

/* ---------- العدّاد ---------- */

.mls-countdown { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--mls-radius); background: var(--mls-panel); border: 1px solid var(--mls-line); }
.mls-countdown-label { font-weight: 600; font-size: 15px; color: var(--mls-text); }
.mls-countdown-tiles { display: flex; gap: 8px; direction: ltr; }
.mls-countdown-tiles span { min-width: 68px; padding: 9px 8px; border-radius: 11px; text-align: center; background: var(--mls-panel-2); border: 1px solid var(--mls-line); display: flex; flex-direction: column; gap: 2px; }
.mls-countdown-tiles b { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--mls-text); display: inline-block; }
.mls-countdown-tiles small { font-size: 11.5px; color: var(--mls-dim); }
.mls-countdown-done { opacity: .6; }
.mls-countdown-box { display: block; }

/* ---------- الوصف ---------- */

.mls-desc { padding: 20px 22px; border-radius: var(--mls-radius); background: var(--mls-panel); border: 1px solid var(--mls-line); color: var(--mls-text); font-size: 15px; line-height: 1.85; }
.mls-desc p + p { margin-top: 12px; }
.mls-desc a { color: var(--mls-accent) !important; }

/* ===================================================================== *
 * الدردشة
 * ===================================================================== */

.mls-chat {
	/* Sticks below the site's sticky header (themes that set --header-h). */
	position: sticky; top: calc(var(--header-h, 0px) + 16px);
	display: flex; flex-direction: column; min-height: 0;
	height: clamp(420px, calc(100vh - var(--header-h, 0px) - 40px), 660px);
	border-radius: var(--mls-radius); overflow: hidden;
	background: var(--mls-panel); border: 1px solid var(--mls-line);
}
.mls-layout-below .mls-chat, .mls-theater .mls-chat { position: relative; top: 0; height: 540px; }
.mls-chat-only .mls-chat { position: relative; top: 0; }

.mls-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--mls-line); }
.mls-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--mls-panel-2); }
.mls-wrap .mls-tab {
	display: inline-flex !important; align-items: center; gap: 6px; height: 32px !important; padding: 0 12px !important;
	border-radius: 8px !important; border: 0 !important; background: transparent !important; color: var(--mls-dim) !important;
	font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: background .15s, color .15s;
}
.mls-wrap .mls-tab em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--mls-line); }
.mls-wrap .mls-tab.is-on { background: var(--mls-panel) !important; color: var(--mls-text) !important; box-shadow: 0 1px 2px rgba(31, 36, 48, .08) !important; }
.mls-mod-flag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--mls-soft); color: var(--mls-accent); }

/* ---------- الاستطلاع ---------- */

.mls-poll { margin: 10px 10px 0; padding: 13px; border-radius: 12px; background: var(--mls-panel); border: 1px solid var(--mls-soft-line); }
.mls-poll[hidden] { display: none; }
.mls-poll-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mls-poll-head small { color: var(--mls-dim); font-size: 12px; }
.mls-poll-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--mls-dim); }
.mls-poll-tag.is-open { color: var(--mls-ok); }
.mls-poll-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--mls-ok); }
.mls-poll-q { font-weight: 600; font-size: 14.5px; margin-bottom: 10px !important; color: var(--mls-text) !important; }
.mls-poll-opts { display: flex; flex-direction: column; gap: 6px; }
.mls-wrap .mls-poll-opt {
	position: relative; overflow: hidden; display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; min-height: 38px !important; padding: 8px 12px !important; border-radius: 9px !important;
	border: 1px solid var(--mls-line) !important; background: var(--mls-panel-2) !important; color: var(--mls-text) !important;
	font-size: 13.5px !important; font-weight: 500 !important; text-align: start; cursor: pointer; transition: border-color .15s;
}
.mls-wrap .mls-poll-opt:not(:disabled):hover { border-color: var(--mls-soft-line) !important; }
.mls-wrap .mls-poll-opt:disabled { cursor: default; }
.mls-poll-opt i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--mls-soft); transition: width .6s var(--mls-ease); }
.mls-poll-opt span, .mls-poll-opt b { position: relative; }
.mls-poll-opt b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mls-wrap .mls-poll-opt.is-mine { border-color: var(--mls-accent) !important; }

/* ---------- المثبّتة والرسائل ---------- */

.mls-pinned { display: flex; gap: 10px; margin: 10px 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--mls-panel-2); border: 1px solid var(--mls-line); font-size: 13px; }
.mls-pinned[hidden] { display: none; }
.mls-pinned b { display: block; font-weight: 600; color: var(--mls-text); }
.mls-pinned p { color: var(--mls-dim) !important; word-break: break-word; }

.mls-messages, .mls-files { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 6px 6px; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--mls-line) transparent; }
.mls-messages.is-scrollable, .mls-files { overscroll-behavior: contain; }
.mls-messages[hidden], .mls-files[hidden] { display: none; }
.mls-chat-empty { height: 100%; min-height: 120px; display: grid; place-items: center; text-align: center; color: var(--mls-faint); font-size: 13.5px; padding: 20px; }

.mls-msg { position: relative; display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; transition: background .12s; }
.mls-msg:hover { background: var(--mls-panel-2); }
.mls-msg-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.mls-msg-initial { display: grid; place-items: center; background: var(--mls-soft); color: var(--mls-accent); font-weight: 700; font-size: 12.5px; }
.mls-msg-body { flex: 1; min-width: 0; }
.mls-msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mls-msg-name { font-weight: 600; font-size: 13px; color: var(--mls-text); }
.mls-msg-badge { font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--mls-panel-2); color: var(--mls-dim); border: 1px solid var(--mls-line); }
.mls-role-admin, .mls-role-host { background: var(--mls-soft) !important; color: var(--mls-accent) !important; border-color: var(--mls-soft-line) !important; }
.mls-role-cohost { color: var(--mls-ok) !important; }
.mls-role-moderator { color: var(--mls-accent) !important; }
.mls-msg-time { font-size: 11px; color: var(--mls-faint); margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.mls-msg-text { font-size: 14px; color: var(--mls-text); word-break: break-word; white-space: pre-wrap; margin-top: 1px; }
.mls-msg.is-mine .mls-msg-name { color: var(--mls-accent); }
.mls-msg-question { background: var(--mls-soft); }
.mls-msg-system { width: 100%; text-align: center; font-size: 12.5px; color: var(--mls-dim); padding: 5px 12px; border-radius: 999px; background: var(--mls-panel-2); }
.mls-msg.mls-msg-system { justify-content: center; }

.mls-wrap .mls-msg-menu {
	width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 7px !important; border: 0 !important;
	background: transparent !important; color: var(--mls-dim) !important; font-size: 15px !important; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.mls-msg:hover .mls-msg-menu, .mls-msg-menu[aria-expanded="true"] { opacity: 1; }
.mls-wrap .mls-msg-menu:hover { background: var(--mls-line) !important; }
@media (hover: none) { .mls-wrap .mls-msg-menu { opacity: .8; } }

.mls-wrap .mls-msg-like {
	margin-top: 6px; display: inline-flex !important; align-items: center; gap: 4px; height: 24px !important; padding: 0 9px !important;
	border-radius: 999px !important; border: 1px solid var(--mls-line) !important; background: var(--mls-panel) !important; color: var(--mls-dim) !important;
	font-size: 12px !important; font-weight: 600 !important; cursor: pointer;
}
.mls-wrap .mls-msg-like.mls-like-on { border-color: var(--mls-soft-line) !important; color: var(--mls-accent) !important; }

.mls-msg-pop {
	position: absolute; top: 32px; inset-inline-end: 8px; z-index: 20; min-width: 200px; padding: 5px;
	border-radius: 12px; background: var(--mls-panel); border: 1px solid var(--mls-line); box-shadow: 0 16px 36px -18px rgba(31, 36, 48, .35);
}
.mls-wrap .mls-msg-pop button {
	display: flex !important; align-items: center; gap: 10px; width: 100%; height: 34px !important; padding: 0 10px !important;
	border-radius: 8px !important; border: 0 !important; background: transparent !important; color: var(--mls-text) !important;
	font-size: 13px !important; font-weight: 500 !important; text-align: start; cursor: pointer;
}
.mls-wrap .mls-msg-pop button:hover { background: var(--mls-panel-2) !important; }
.mls-msg-pop i { font-style: normal; width: 20px; text-align: center; }
.mls-wrap .mls-msg-pop .mls-pop-danger { color: var(--mls-live) !important; }
.mls-pop-sep { height: 1px; margin: 4px; background: var(--mls-line); }

/* ---------- المرفقات ---------- */

.mls-files { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.mls-file { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 11px; background: var(--mls-panel); border: 1px solid var(--mls-line); color: var(--mls-text) !important; font-weight: 500; font-size: 13.5px; transition: border-color .15s; }
.mls-file:hover { border-color: var(--mls-soft-line); }
.mls-file-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--mls-soft); color: var(--mls-accent); }
.mls-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- الكتابة ---------- */

.mls-chat-foot { padding: 10px; border-top: 1px solid var(--mls-line); }
.mls-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 5px; border-radius: 12px; background: var(--mls-input); border: 1px solid var(--mls-line); transition: border-color .15s, box-shadow .15s; }
.mls-chat-form:focus-within { border-color: var(--mls-accent); box-shadow: 0 0 0 3px var(--mls-soft); }
.mls-wrap .mls-chat-form textarea {
	flex: 1; min-height: 38px; max-height: 120px; resize: none; padding: 8px 10px !important;
	border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--mls-text) !important;
	font-size: 14px !important; line-height: 1.5 !important; border-radius: 8px !important;
}
.mls-chat-actions { display: flex; align-items: center; gap: 8px; }
.mls-ask { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mls-dim); cursor: pointer; white-space: nowrap; }
.mls-ask input { accent-color: var(--mls-accent); margin: 0 !important; }
.mls-wrap .mls-send {
	width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 10px !important; border: 0 !important;
	background: var(--mls-accent) !important; color: #fff !important; display: grid !important; place-items: center; cursor: pointer;
	transition: background .15s;
}
.mls-wrap .mls-send:hover { background: color-mix(in srgb, var(--mls-accent) 85%, #000) !important; }
[dir="rtl"] .mls-send svg { transform: scaleX(-1); }
.mls-chat-notice { padding: 11px; border-radius: 10px; background: var(--mls-panel-2); text-align: center; color: var(--mls-dim); font-size: 13px; }

/* ===================================================================== *
 * شاشة الرفض
 * ===================================================================== */

.mls-denied { align-items: center; padding: 24px 0; }
.mls-gate {
	position: relative; width: min(540px, 100%); margin: 0 auto; padding: 44px 30px 30px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	border-radius: 18px; background: var(--mls-panel); border: 1px solid var(--mls-line);
}
.mls-gate-top { position: absolute; top: 12px; inset-inline-end: 12px; }
.mls-gate-top .mls-tools { border-color: transparent; }
.mls-gate-icon { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; color: var(--mls-accent); background: var(--mls-soft); }
.mls-gate-kicker { font-size: 12px; font-weight: 600; color: var(--mls-dim); }
.mls-gate h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--mls-text) !important; }
.mls-gate p { color: var(--mls-dim) !important; font-size: 15px; max-width: 440px; }
.mls-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.mls-gate-when { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--mls-panel-2); font-size: 13px !important; }
.mls-tz { color: var(--mls-faint); }
.mls-gate-error { color: var(--mls-live) !important; font-weight: 600; }
.mls-pass-form { display: flex; gap: 8px; width: 100%; max-width: 400px; }
.mls-wrap .mls-pass-form input { flex: 1; height: 42px; padding: 0 14px !important; border-radius: 11px !important; border: 1px solid var(--mls-line) !important; background: var(--mls-input) !important; color: var(--mls-text) !important; font-size: 14px !important; }

/* ===================================================================== *
 * القوائم والأرشيف
 * ===================================================================== */

.mls-list { color: var(--mls-text); }
.mls-list-title { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 14px !important; color: var(--mls-text) !important; }
.mls-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.mls-card {
	display: flex; flex-direction: column; overflow: hidden; border-radius: var(--mls-radius);
	background: var(--mls-panel); border: 1px solid var(--mls-line); color: var(--mls-text) !important;
	transition: border-color .15s;
}
.mls-card:hover { border-color: var(--mls-soft-line); }
.mls-card-thumb { position: relative; aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; overflow: hidden; background: var(--mls-panel-2); color: var(--mls-faint); }
.mls-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mls-card-thumb .mls-state { position: absolute; top: 10px; inset-inline-start: 10px; }
.mls-card-ph { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--mls-panel); border: 1px solid var(--mls-line); }
.mls-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 5px; }
.mls-card-body h4 { font-size: 15.5px !important; font-weight: 700 !important; color: var(--mls-text) !important; line-height: 1.45 !important; }
.mls-card-when { color: var(--mls-dim) !important; font-size: 13px; }
.mls-card-lock { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--mls-panel-2); color: var(--mls-dim); }

.mls-note { padding: 16px 18px; border-radius: 12px; background: #f6f7f9; color: #5c6577; border: 1px solid #e6e8ee; font-family: 'Tajawal', system-ui, sans-serif; text-align: center; }

/* ===================================================================== *
 * التنبيه المنبثق
 * ===================================================================== */

.mls-toast {
	position: fixed; bottom: 24px; left: 50%; z-index: 999999; transform: translateX(-50%);
	max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 11px;
	background: #ffffff; color: #1f2430; border: 1px solid #e6e8ee;
	font: 500 14px/1.5 'Tajawal', system-ui, sans-serif; text-align: center;
	box-shadow: 0 12px 30px -16px rgba(31, 36, 48, .3); animation: mls-toast .25s var(--mls-ease) both;
}
.mls-toast.is-out { animation: mls-toast-out .25s ease both; }

/* ===================================================================== *
 * الحركة — هادئة ومقتصدة
 * ===================================================================== */

@keyframes mls-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mls-spin { to { transform: rotate(360deg); } }
@keyframes mls-rise {
	0% { transform: translate(0, 0) scale(.7); opacity: 0; }
	15% { opacity: .95; transform: translate(calc(var(--drift) * .2), -26px) scale(1); }
	100% { transform: translate(var(--drift), -220px) scale(.9); opacity: 0; }
}
@keyframes mls-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes mls-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mls-toast-out { to { opacity: 0; transform: translate(-50%, 6px); } }

@media (prefers-reduced-motion: reduce) {
	.mls-wrap *, .mls-list * { animation: none !important; transition: none !important; }
	.mls-floating { display: none; }
}

/* ===================================================================== *
 * الشاشات الصغيرة
 * ===================================================================== */

@media (max-width: 1024px) {
	.mls-body { grid-template-columns: minmax(0, 1fr); }
	.mls-chat { position: relative; top: 0; height: min(600px, 76vh); }
}

@media (max-width: 640px) {
	.mls-page { padding: 16px 12px 32px; }
	.mls-head { align-items: flex-start; }
	.mls-tools { order: -1; align-self: flex-end; }
	.mls-stage { border-radius: 10px; }
	.mls-countdown { flex-direction: column; align-items: stretch; text-align: center; }
	.mls-countdown-tiles { justify-content: center; }
	.mls-countdown-tiles span { min-width: 0; flex: 1; }
	.mls-countdown-tiles b { font-size: 21px; }
	.mls-react { width: 100%; justify-content: space-between; }
	.mls-wrap .mls-react-btn { width: 36px !important; height: 36px !important; }
	.mls-under .mls-btn { width: 100%; }
	.mls-gate { padding: 52px 18px 24px; border-radius: 16px; }
	.mls-pass-form { flex-direction: column; }
	.mls-chat { height: 70vh; }
}

/* ---------- Zoom inside the page (2.1.0) ---------- */
.mls-zoom-root { position: absolute; inset: 0; overflow: hidden; background: #1a1e26; }

.mls-zoom-on .mls-watermark { display: none; }
.mls-zoom-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #1a1e26; }
.mls-stage:has(.mls-zoom-frame) { padding-top: 0; height: min(82vh, 720px); }
.mls-zoom-pre .mls-zoom-alt { margin-top: 2px; background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.mls-zoom-pre .mls-zoom-alt:hover { background: rgba(255, 255, 255, .08); }
.mls-zoom-pre .mls-zoom-msg { max-width: 460px; padding: 10px 14px; border-radius: 10px; background: rgba(225, 29, 72, .16); color: #fecdd3 !important; font-size: 13.5px; }
@media (max-width: 700px) {
	.mls-stage:has(.mls-zoom-root) { padding-top: 0; height: min(78vh, 620px); }
}

/* ---------- The page around the player follows light / dark (2.1.0) ----------
   The switch used to recolour only the widget, so dark mode was a dark box on
   the theme's white page. Now the whole page background follows it. */
body:has(.mls-page > .mls-wrap) { background: #f6f7f9; }
body:has(.mls-page > .mls-wrap[data-theme="dark"]) { background: #15181f; }
@media (prefers-color-scheme: dark) {
	body:has(.mls-page > .mls-wrap[data-theme="auto"]) { background: #15181f; }
}
body:has(.mls-page > .mls-wrap) .site-main,
body:has(.mls-page > .mls-wrap) #main { background: transparent; }
.mls-page { max-width: 1400px; padding: 24px clamp(12px, 3vw, 28px) 48px; }
/* Side chat column on wide screens only: without the media query this rule came
   after the 1024px one-column rule and kept phones in two columns. */
@media (min-width: 1025px) {
	.mls-body { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 370px); }
}
.mls-body { gap: 18px; }
.mls-wrap { gap: 18px; }
.mls-stage { box-shadow: 0 24px 60px -36px rgba(15, 18, 26, .55); }
.mls-wrap[data-theme="dark"] .mls-stage { box-shadow: none; }

/* ---------- Locked stream card (2.1.0) ---------- */
.mls-gate { width: min(520px, 100%); padding: 48px 32px 28px; gap: 10px; box-shadow: 0 30px 70px -45px rgba(15, 18, 26, .45); }
.mls-wrap[data-theme="dark"] .mls-gate { box-shadow: none; }
.mls-gate-icon { width: 72px; height: 72px; border-radius: 22px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px var(--mls-soft-line); }
.mls-gate-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; color: var(--mls-accent); }
.mls-gate h2 { font-size: clamp(22px, 2.4vw, 26px) !important; }
.mls-gate > p { margin-bottom: 6px !important; }
.mls-gate-actions { flex-direction: column; align-items: stretch; width: min(340px, 100%); gap: 12px; }
.mls-gate-actions .mls-btn { justify-content: center; }
.mls-wrap .mls-gate-sub { min-height: 48px !important; font-size: 15.5px !important; box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--mls-accent) 80%, transparent); }
.mls-gate-login { margin: 0 !important; font-size: 14px !important; color: var(--mls-dim) !important; }
.mls-gate-login a { color: var(--mls-accent) !important; font-weight: 700; }
.mls-gate-login a:hover { text-decoration: underline !important; }
.mls-gate-when { margin-top: 10px; border: 1px solid var(--mls-line); }
@media (max-width: 640px) {
	.mls-gate { padding: 56px 18px 22px; }
}

/* ---------- Waiting screen: countdown + Google Calendar inside the player (2.2.2) ----------
   The stage is always dark, so the colours here are fixed (light text on dark)
   in both themes. Hidden as soon as the player starts (.mls-playing). */
.mls-wait {
	position: absolute; inset: auto 0 0 0; z-index: 4;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	padding: 48px 22px 20px;
	background: linear-gradient(to top, rgba(9, 11, 16, .92) 0%, rgba(9, 11, 16, .6) 55%, rgba(9, 11, 16, 0) 100%);
}
.mls-playing .mls-wait, .mls-wait:has(.mls-countdown-done) { display: none; }
.mls-stage.is-waiting .mls-loading { padding-bottom: 130px; }
.mls-playing .mls-stage.is-waiting .mls-loading { padding-bottom: 24px; }

.mls-wait .mls-countdown { padding: 0; border: 0; background: none; gap: 14px; flex-wrap: nowrap; justify-content: flex-start; }
.mls-wait .mls-countdown-label { color: rgba(255, 255, 255, .82); font-size: 14px; white-space: nowrap; }
.mls-wait .mls-countdown-tiles span { min-width: 62px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
.mls-wait .mls-countdown-tiles b { color: #fff; font-size: 24px; }
.mls-wait .mls-countdown-tiles small { color: rgba(255, 255, 255, .62); }

.mls-wrap .mls-wait-cal { background: #fff !important; color: #1f2430 !important; border-color: #fff !important; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.mls-wrap .mls-wait-cal:hover { background: #eef1f6 !important; border-color: #eef1f6 !important; }

/* Phones: the 16:9 stage is too short for message + countdown + button, so
   while waiting it grows to fit them and stacks them; it returns to 16:9 once
   the player starts. */
@media (max-width: 640px) {
	.mls-wrap:not(.mls-playing) .mls-stage.is-waiting { padding-top: 0; display: flex; flex-direction: column; min-height: 56.25vw; }
	.mls-wrap:not(.mls-playing) .mls-stage.is-waiting .mls-player { position: relative; inset: auto; flex: 1; min-height: 132px; }
	.mls-wrap:not(.mls-playing) .mls-stage.is-waiting .mls-loading { padding: 22px 16px 6px; }
	.mls-wait { position: relative; inset: auto; flex-direction: column; align-items: stretch; gap: 12px; padding: 4px 14px 16px; background: none; }
	.mls-wait .mls-countdown { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
	.mls-wait .mls-countdown-label { font-size: 13px; }
	.mls-wait .mls-countdown-tiles { gap: 6px; }
	.mls-wait .mls-countdown-tiles span { min-width: 0; flex: 1; padding: 8px 4px; }
	.mls-wait .mls-countdown-tiles b { font-size: 20px; }
	.mls-wrap .mls-wait-cal { width: 100%; }
}

/* ---------- Waiting screen + phone header (2.2.3) ---------- */
/* Before the stream: no spinner (nothing is loading) and no viewer watermark
   over the message (it protects a playing stream, not the waiting screen). */
.mls-wrap:not(.mls-playing) .mls-stage.is-waiting .mls-spin { display: none; }
.mls-wrap:not(.mls-playing) .mls-watermark { display: none; }

/* Phones: badges and tools share the top row, then the title and the date at
   full width. Without this the tools took the left half and squeezed the
   title block into a narrow column. */
@media (max-width: 640px) {
	.mls-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badges tools" "title title" "sub sub"; align-items: center; gap: 10px 12px; }
	.mls-head-main { display: contents; }
	.mls-badges { grid-area: badges; min-width: 0; }
	.mls-tools { grid-area: tools; order: 0; align-self: center; }
	.mls-title { grid-area: title; margin: 0 !important; }
	.mls-sub { grid-area: sub; margin: 0; }
	/* Language button: globe only on phones; the label stays for screen readers. */
	.mls-head .mls-lang span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Voice notes in the chat (2.3.0) ---------- */
/* Mic: a quiet button beside «send», same 38px target on phones and desktop. */
.mls-wrap .mls-mic {
	width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 10px !important; border: 0 !important;
	background: transparent !important; color: var(--mls-dim) !important; display: grid !important; place-items: center; cursor: pointer;
	transition: background .15s, color .15s;
}
.mls-wrap .mls-mic[hidden] { display: none !important; }
.mls-wrap .mls-mic:hover, .mls-wrap .mls-mic:focus-visible { background: var(--mls-soft) !important; color: var(--mls-accent) !important; }
.mls-chat-form.is-sending-voice .mls-mic { opacity: .45; pointer-events: none; }

/* Recording: the bar takes the whole row instead of the text box and buttons. */
.mls-chat-form.is-recording > textarea, .mls-chat-form.is-recording > .mls-chat-actions { display: none !important; }
.mls-rec { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 38px; padding-inline: 4px; }
.mls-rec[hidden] { display: none; }
.mls-rec-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: #e11d48; animation: mls-rec-blink 1s steps(2, start) infinite; }
.mls-rec-time { min-width: 40px; color: var(--mls-text); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mls-rec-bars { flex: 1; display: flex; align-items: center; gap: 3px; height: 22px; overflow: hidden; }
.mls-rec-bars i { width: 3px; height: 30%; border-radius: 3px; background: var(--mls-accent); opacity: .7; animation: mls-rec-bar .9s ease-in-out infinite; }
.mls-rec-bars i:nth-child(2) { animation-delay: .12s; } .mls-rec-bars i:nth-child(3) { animation-delay: .24s; } .mls-rec-bars i:nth-child(4) { animation-delay: .36s; }
.mls-rec-bars i:nth-child(5) { animation-delay: .48s; } .mls-rec-bars i:nth-child(6) { animation-delay: .6s; } .mls-rec-bars i:nth-child(7) { animation-delay: .72s; }
.mls-wrap .mls-rec-btn {
	width: 38px !important; height: 38px !important; flex-shrink: 0; padding: 0 !important; border-radius: 10px !important; border: 0 !important;
	display: grid !important; place-items: center; cursor: pointer; transition: background .15s;
}
.mls-wrap .mls-rec-cancel { background: transparent !important; color: var(--mls-dim) !important; }
.mls-wrap .mls-rec-cancel:hover { background: var(--mls-panel-2) !important; color: #e11d48 !important; }
.mls-wrap .mls-rec-send { background: var(--mls-accent) !important; color: #fff !important; }
.mls-wrap .mls-rec-send:hover { background: color-mix(in srgb, var(--mls-accent) 85%, #000) !important; }
[dir="rtl"] .mls-rec-send svg { transform: scaleX(-1); }
@keyframes mls-rec-blink { to { visibility: hidden; } }
@keyframes mls-rec-bar { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(2.6); } }

/* Player inside a message. */
.mls-voice { display: flex; align-items: center; gap: 10px; width: min(100%, 260px); margin-top: 4px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--mls-panel-2); border: 1px solid var(--mls-line); }
[dir="rtl"] .mls-voice { padding: 6px 6px 6px 12px; }
.mls-wrap .mls-voice-btn {
	width: 34px !important; height: 34px !important; flex-shrink: 0; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
	background: var(--mls-accent) !important; color: #fff !important; display: grid !important; place-items: center; cursor: pointer;
}
[dir="rtl"] .mls-voice-btn svg { transform: scaleX(-1); }
.mls-voice.is-playing .mls-voice-btn svg { transform: none; }
.mls-voice-track { position: relative; flex: 1; height: 6px; border-radius: 6px; background: var(--mls-line); overflow: hidden; cursor: pointer; }
.mls-voice-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 6px; background: var(--mls-accent); transition: width .2s linear; }
.mls-voice-time { min-width: 34px; color: var(--mls-dim); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.mls-msg.is-mine .mls-voice { background: var(--mls-soft); border-color: var(--mls-soft-line); }

@media (max-width: 640px) {
	.mls-voice { width: 100%; }
	.mls-rec { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.mls-rec-dot, .mls-rec-bars i { animation: none; }
}

/* ===================================================================== *
 * 2.4.0 — صفحة مستقلة، والدردشة داخل بطاقة الفيديو، والتفاعل داخل الدردشة
 * ===================================================================== */

/* ---------- الصفحة المستقلة: بلا رأس الموقع وتذييله ---------- */
body.mls-solo { margin: 0; min-height: 100vh; min-height: 100svh; }
.mls-page-solo { max-width: 1560px; margin: 0 auto; padding: 14px clamp(10px, 2.2vw, 28px) 28px; }
.mls-page-solo .mls-wrap { gap: 14px; }
.mls-page-solo .mls-head { align-items: center; }
.mls-page-solo .mls-title { font-size: clamp(18px, 1.7vw, 24px) !important; }

.mls-home {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; overflow: hidden;
	background: var(--mls-panel); border: 1px solid var(--mls-line); color: var(--mls-dim) !important; transition: border-color .15s, transform .15s;
}
.mls-home:hover { border-color: var(--mls-soft-line); transform: translateY(-1px); }
.mls-home img { width: 30px; height: 30px; object-fit: contain; }

/* ---------- البطاقة: الفيديو والدردشة في إطار واحد ---------- */
.mls-body[data-mls-card] {
	gap: 0; align-items: stretch; overflow: hidden;
	border-radius: var(--mls-radius); background: var(--mls-panel); border: 1px solid var(--mls-line);
	box-shadow: 0 26px 60px -42px rgba(15, 18, 26, .55);
}
.mls-wrap[data-theme="dark"] .mls-body[data-mls-card] { box-shadow: none; }
.mls-body[data-mls-card] .mls-main { gap: 0; min-width: 0; display: flex; flex-direction: column; background: #11141a; }
.mls-body[data-mls-card] .mls-stage {
	flex: 1 0 auto; padding-top: 0; aspect-ratio: var(--mls-ar, 16/9); max-height: calc(100svh - 120px);
	border: 0; border-radius: 0; box-shadow: none;
}
.mls-body[data-mls-card] .mls-chat {
	position: relative; top: 0; height: 0; min-height: 100%;
	border: 0; border-radius: 0; border-inline-start: 1px solid var(--mls-line);
}

@media (min-width: 1025px) {
	.mls-body[data-mls-card] { grid-template-columns: minmax(0, 1fr) clamp(310px, 25vw, 380px); min-height: 440px; }
	.mls-no-chat .mls-body[data-mls-card], .mls-chat-hidden .mls-body[data-mls-card] { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* المسرح، أو شاشة أضيق: الدردشة تحت الفيديو داخل البطاقة نفسها. */
.mls-theater .mls-body[data-mls-card] { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.mls-theater .mls-body[data-mls-card] .mls-stage { max-height: 80vh; }
.mls-theater .mls-body[data-mls-card] .mls-chat,
.mls-layout-below .mls-body[data-mls-card] .mls-chat { height: 440px; min-height: 0; border-inline-start: 0; border-top: 1px solid var(--mls-line); }

@media (max-width: 1024px) {
	.mls-body[data-mls-card] { grid-template-columns: minmax(0, 1fr); }
	.mls-body[data-mls-card] .mls-stage { max-height: none; }
	.mls-body[data-mls-card] .mls-chat {
		height: max(380px, calc(100svh - 56.25vw - 150px)); min-height: 0;
		border-inline-start: 0; border-top: 1px solid var(--mls-line);
	}
}
@media (max-width: 640px) {
	.mls-page-solo { padding: 8px 8px 20px; }
	.mls-body[data-mls-card] { border-radius: 14px; }
	.mls-body[data-mls-card] .mls-chat { height: max(360px, calc(100svh - 56.25vw - 140px)); }
	.mls-home { width: 38px; height: 38px; border-radius: 11px; }
	.mls-home img { width: 26px; height: 26px; }
	.mls-page-solo .mls-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "home badges tools" "title title title" "sub sub sub"; }
	.mls-page-solo .mls-home { grid-area: home; }
}

/* ملء الشاشة على الشاشات العريضة: البطاقة كلها، والدردشة بجوار الفيديو. */
.mls-body[data-mls-card]:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; grid-template-rows: 100%; }
.mls-body[data-mls-card]:fullscreen .mls-stage { aspect-ratio: auto; max-height: none; height: 100%; }
.mls-body[data-mls-card]:fullscreen .mls-chat { height: 100%; min-height: 0; }
.mls-body[data-mls-card]:-webkit-full-screen { width: 100vw; height: 100vh; }
.mls-stage:fullscreen { aspect-ratio: auto; max-height: none; }

/* زوم داخل البطاقة (اجتماع البث أو اجتماع المتحدّثين). */
.mls-body[data-mls-card] .mls-stage:has(.mls-zoom-frame) { aspect-ratio: auto; height: min(80vh, 720px); max-height: none; }
.mls-wrap .mls-stage-back {
	position: absolute; top: 12px; inset-inline-start: 12px; z-index: 7; height: 34px !important; padding: 0 14px !important;
	border-radius: 999px !important; border: 0 !important; background: rgba(255, 255, 255, .94) !important; color: #1f2430 !important;
	font-size: 13px !important; font-weight: 700 !important; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
}

/* ---------- داخل الدردشة ---------- */
.mls-chat-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mls-chat-area .mls-messages { flex: 1; }
.mls-chat-area[hidden], .mls-messages[hidden] + .mls-float { display: none; }

/* التفاعلات تطفو على حافة الدردشة لا فوق الفيديو. */
.mls-chat .mls-float { position: absolute; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; width: 84px; z-index: 3; pointer-events: none; overflow: hidden; }
.mls-chat .mls-floating { bottom: 4px; }

.mls-chat-react { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.mls-chat-react .mls-react-btn { width: 34px !important; height: 34px !important; font-size: 18px !important; }
.mls-wrap .mls-hand {
	margin-inline-start: auto; display: inline-flex !important; align-items: center; gap: 6px; height: 32px !important; padding: 0 12px !important;
	border-radius: 999px !important; border: 1px solid var(--mls-line) !important; background: var(--mls-panel) !important; color: var(--mls-dim) !important;
	font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.mls-wrap .mls-hand:hover { border-color: var(--mls-soft-line) !important; color: var(--mls-text) !important; }
.mls-wrap .mls-hand.is-up { background: #fff4d6 !important; border-color: #f0c35a !important; color: #7a5200 !important; }
.mls-wrap[data-theme="dark"] .mls-hand.is-up { background: #3a2e12 !important; border-color: #8a6a20 !important; color: #f6d27a !important; }
.mls-wrap .mls-hand[hidden] { display: none !important; }
@media (max-width: 380px) { .mls-hand-label { display: none; } }

/* أعجبني / لم يعجبني: خفيفة، تظهر عند المرور أو حين يكون فيها أصوات. */
.mls-msg-rate { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .15s; }
.mls-msg:hover .mls-msg-rate, .mls-msg-rate:focus-within, .mls-msg-rate.has-votes { opacity: 1; }
@media (hover: none) { .mls-msg-rate { opacity: .6; } .mls-msg-rate.has-votes { opacity: 1; } }
.mls-wrap .mls-rate {
	display: inline-flex !important; align-items: center; gap: 4px; height: 22px !important; padding: 0 7px !important;
	border-radius: 999px !important; border: 1px solid var(--mls-line) !important; background: var(--mls-panel) !important; color: var(--mls-dim) !important;
	font-size: 11.5px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.mls-wrap .mls-rate b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mls-wrap .mls-rate b:empty { display: none; }
.mls-wrap .mls-rate:hover { color: var(--mls-text) !important; border-color: var(--mls-soft-line) !important; }
.mls-wrap .mls-rate.is-on { color: var(--mls-accent) !important; border-color: var(--mls-soft-line) !important; background: var(--mls-soft) !important; }
.mls-wrap .mls-rate-dislike.is-on { color: var(--mls-live) !important; border-color: color-mix(in srgb, var(--mls-live) 30%, transparent) !important; background: var(--mls-live-soft) !important; }
.mls-rate-dislike svg { transform: scaleY(-1); }

/* منتقي الرموز داخل خانة الكتابة. */
.mls-chat-form { position: relative; }
.mls-picker {
	position: absolute; bottom: calc(100% + 8px); inset-inline: 0; z-index: 12; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px;
	border-radius: 14px; background: var(--mls-panel); border: 1px solid var(--mls-line); box-shadow: 0 18px 40px -20px rgba(15, 18, 26, .45);
}
.mls-picker[hidden] { display: none; }
.mls-wrap .mls-pick { height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; font-size: 20px !important; cursor: pointer; }
.mls-wrap .mls-pick:hover { background: var(--mls-panel-2) !important; }
.mls-wrap .mls-emoji-btn[aria-expanded="true"] { background: var(--mls-soft) !important; color: var(--mls-accent) !important; }

/* الأيدي المرفوعة (للمقدّم ومشرفيه). */
.mls-wrap .mls-hands-btn {
	display: inline-flex !important; align-items: center; gap: 5px; height: 28px !important; padding: 0 10px !important; margin-inline-start: auto;
	border-radius: 999px !important; border: 1px solid var(--mls-line) !important; background: var(--mls-panel) !important; color: var(--mls-text) !important;
	font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer;
}
.mls-wrap .mls-hands-btn[hidden] { display: none !important; }
.mls-wrap .mls-hands-btn.has-hands { background: #fff4d6 !important; border-color: #f0c35a !important; color: #7a5200 !important; animation: mls-breathe 2.4s ease-in-out infinite; }
.mls-wrap[data-theme="dark"] .mls-hands-btn.has-hands { background: #3a2e12 !important; border-color: #8a6a20 !important; color: #f6d27a !important; }
.mls-hands { margin: 10px 10px 0; padding: 10px; border-radius: 12px; background: var(--mls-panel-2); border: 1px solid var(--mls-line); max-height: 45%; overflow-y: auto; }
.mls-hands[hidden] { display: none; }
.mls-hands-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; }
.mls-wrap .mls-hands-x { width: 26px !important; height: 26px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--mls-dim) !important; cursor: pointer; }
.mls-hands-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--mls-line); font-size: 13.5px; }
.mls-hands-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mls-hands-sub { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--mls-dim); }
.mls-hands-empty { color: var(--mls-dim) !important; font-size: 13px; padding: 4px 0; }
.mls-wrap .mls-btn-sm { height: 30px !important; padding: 0 10px !important; font-size: 12.5px !important; border-radius: 9px !important; }

/* «معك المايك» للمشاهد. */
.mls-mic-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 10px 0; padding: 12px; border-radius: 12px; background: var(--mls-soft); border: 1px solid var(--mls-soft-line); }
.mls-mic-card[hidden] { display: none; }
.mls-mic-text { flex: 1 1 180px; min-width: 0; }
.mls-mic-text b { display: block; font-size: 14px; color: var(--mls-text); }
.mls-mic-text p { font-size: 12.5px; color: var(--mls-dim) !important; }
.mls-mic-card .mls-btn { height: 38px !important; }

/* الصوتيات والصور في الرسائل لا تهتز أثناء التحميل. */
.mls-msg-avatar { aspect-ratio: 1; }
.mls-messages { contain: content; }

/* «سؤال»: زر أيقونة بحجم الميكروفون بدل مربع الاختيار العريض. */
.mls-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mls-wrap .mls-ask {
	position: relative; width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; gap: 0;
	border-radius: 10px; color: var(--mls-dim); cursor: pointer; transition: background .15s, color .15s;
}
.mls-wrap .mls-ask input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0 !important; opacity: 0; cursor: pointer; }
.mls-wrap .mls-ask:hover { background: var(--mls-soft); color: var(--mls-accent); }
.mls-wrap .mls-ask:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--mls-accent); }
.mls-wrap .mls-ask:has(input:checked) { background: var(--mls-accent); color: #fff; }
.mls-chat-form.is-question { border-color: var(--mls-accent); background: var(--mls-soft); }
.mls-chat-actions { gap: 2px; }

/* رأس الصفحة المستقلة في سطر واحد: الشعار، العنوان، الحالة، المشاهدون، الموعد، ثم الأدوات. */
@media (min-width: 641px) {
	.mls-page-solo .mls-head { flex-wrap: nowrap; align-items: center; gap: 14px; }
	.mls-page-solo .mls-head-main { flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
	.mls-page-solo .mls-title { order: 1; flex: 0 1 auto; min-width: 0; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mls-page-solo .mls-badges { order: 2; flex: 0 0 auto; flex-wrap: nowrap; }
	.mls-page-solo .mls-sub { order: 3; flex: 0 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
	.mls-page-solo .mls-sub > span { overflow: hidden; text-overflow: ellipsis; }
	.mls-page-solo .mls-tools { margin-inline-start: auto; flex: 0 0 auto; }
}
@media (min-width: 641px) and (max-width: 900px) {
	.mls-page-solo .mls-sub { display: none; }
}

/* حلقة التركيز للوحة المفاتيح فقط، لا بعد النقر بالفأرة. */
.mls-wrap button:focus:not(:focus-visible) { outline: none; }
.mls-wrap button:focus-visible { outline: 2px solid var(--mls-accent); outline-offset: 2px; }

/* الصفحة المستقلة: المحتوى في منتصف الشاشة، ولا تمرير إن كان كل شيء يتسع. */
.mls-solo-html { --mls-bar: var(--wp-admin--admin-bar--height, 0px); }
body.mls-solo { min-height: calc(100svh - var(--mls-bar)); }
.mls-page-solo {
	box-sizing: border-box; min-height: calc(100svh - var(--mls-bar));
	display: flex; flex-direction: column; justify-content: center;
	padding-block: 12px;
}
.mls-page-solo .mls-body[data-mls-card] .mls-stage { max-height: calc(100svh - var(--mls-bar) - 110px); }
.mls-page-solo .mls-body[data-mls-card] { box-shadow: 0 20px 50px -40px rgba(15, 18, 26, .5); }

/* ---------- الدردشة المطويّة (2.4.2) ----------
   مطويّة = الفيديو بالعرض الكامل + زر عائم صغير في ركنه («💬 الدردشة» والعدد
   وصور آخر المتحدّثين). المرور أو اللمس يُدخل الدردشة من الجانب فوق حافة
   الفيديو؛ الدبوس يثبّتها بجواره؛ وزر المكان ينقلها تحت الفيديو. */
.mls-chat-rail, .mls-chat-pin, .mls-chat-scrim, .mls-land-exit { display: none; }

.mls-wrap .mls-chat-pin {
	display: grid !important; place-items: center; width: 30px !important; height: 30px !important; padding: 0 !important; flex: 0 0 auto;
	border-radius: 9px !important; border: 0 !important; background: transparent !important; color: var(--mls-dim) !important; cursor: pointer;
}
.mls-wrap .mls-chat-pin[hidden] { display: none !important; }
.mls-wrap .mls-chat-pin:hover { background: var(--mls-panel-2) !important; color: var(--mls-text) !important; }
.mls-wrap .mls-chat-pin.is-on { color: var(--mls-accent) !important; background: var(--mls-soft) !important; }
.mls-chat-head { gap: 4px; }
.mls-chat-head .mls-tabs { margin-inline-end: auto; }

.mls-body[data-mls-card] { position: relative; }
.mls-body[data-mls-card].is-chat-collapsed { grid-template-columns: minmax(0, 1fr) !important; }
.mls-body[data-mls-card].is-chat-collapsed .mls-chat {
	position: absolute; inset-block: 0; inset-inline-end: 0; height: auto; min-height: 0; width: clamp(300px, 26vw, 380px); z-index: 9;
	border: 0; border-inline-start: 1px solid var(--mls-line);
	transform: translateX(105%); visibility: hidden;
	transition: transform .3s var(--mls-ease), visibility 0s linear .3s, box-shadow .3s;
}
[dir="rtl"] .mls-body[data-mls-card].is-chat-collapsed .mls-chat { transform: translateX(-105%); }
.mls-body[data-mls-card].is-chat-collapsed .mls-chat.is-open {
	transform: none; visibility: visible; transition: transform .3s var(--mls-ease), visibility 0s, box-shadow .3s;
	box-shadow: -24px 0 50px -24px rgba(8, 10, 14, .65);
}
[dir="rtl"] .mls-body[data-mls-card].is-chat-collapsed .mls-chat.is-open { box-shadow: 24px 0 50px -24px rgba(8, 10, 14, .65); }
.mls-body[data-mls-card].has-chat-open .mls-chat-scrim { display: block; position: absolute; inset: 0; z-index: 8; background: rgba(8, 10, 14, .2); }

/* الزر العائم: زجاجي داكن فوق الفيديو. */
.mls-wrap .is-chat-collapsed > .mls-chat-rail {
	position: absolute; top: 14px; inset-inline-end: 14px; z-index: 7;
	display: inline-flex !important; align-items: center; gap: 8px; height: 42px !important; width: auto !important;
	padding: 0 14px 0 6px !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .14) !important;
	background: rgba(14, 17, 24, .58) !important; color: #fff !important; cursor: pointer;
	-webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
	box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .55);
	transition: background .2s, transform .2s var(--mls-ease), opacity .2s;
}
[dir="rtl"] .mls-wrap .is-chat-collapsed > .mls-chat-rail { padding: 0 6px 0 14px !important; }
.mls-wrap .is-chat-collapsed > .mls-chat-rail:hover { background: rgba(14, 17, 24, .78) !important; transform: translateY(-1px); }
.mls-wrap .has-chat-open > .mls-chat-rail { opacity: 0; pointer-events: none; }
.mls-rail-btn { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--mls-accent); color: #fff; }
.mls-rail-btn svg { width: 16px; height: 16px; }
.mls-rail-label { font-size: 13px; font-weight: 700; white-space: nowrap; color: #fff; }
.mls-rail-faces { display: flex; align-items: center; }
.mls-rail-faces:empty { display: none; }
.mls-rail-faces img, .mls-rail-faces span {
	width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-inline-start: -7px; box-shadow: 0 0 0 2px rgba(14, 17, 24, .9);
	display: grid; place-items: center; background: var(--mls-soft); color: var(--mls-accent); font-size: 11px; font-weight: 700;
}
.mls-rail-faces > :first-child { margin-inline-start: 0; }
.mls-rail-n {
	min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
	background: var(--mls-live); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; animation: mls-pop .35s var(--mls-ease);
}
.mls-rail-n[hidden], .mls-rail-hand[hidden] { display: none; }
.mls-rail-hand { font-style: normal; font-size: 16px; animation: mls-breathe 2.4s ease-in-out infinite; }
@media (max-width: 640px) { .mls-rail-label { display: none; } }

/* الدردشة تحت الفيديو (اختيار المشاهد أو إعداد «ترتيب الصفحة»). */
@media (min-width: 1025px) {
	.mls-layout-below .mls-body[data-mls-card] { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.mls-layout-below .mls-body[data-mls-card] .mls-stage { max-height: calc(100svh - 220px); }
	.mls-layout-below .mls-body[data-mls-card] .mls-chat { height: 400px; min-height: 0; border-inline-start: 0; border-top: 1px solid var(--mls-line); }
}

/* زر الوضع الأفقي: للهاتف والتابلت فقط. */
.mls-wrap .mls-tool-land { display: none !important; }
@media (max-width: 1024px), (hover: none) {
	.mls-wrap .mls-tool-land { display: inline-flex !important; }
}

/* ---------- الوضع الأفقي (2.4.2) ---------- */
html.mls-land-lock, html.mls-land-lock body { overflow: hidden !important; }
.mls-land .mls-body[data-mls-card] {
	position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; margin: 0;
	border: 0; border-radius: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr) min(42%, 360px); grid-template-rows: 100%;
	background: #0b0d12;
}
.mls-land .mls-body[data-mls-card] .mls-main { height: 100%; }
.mls-land .mls-body[data-mls-card] .mls-stage { aspect-ratio: auto; height: 100%; max-height: none; }
.mls-land .mls-body[data-mls-card] .mls-chat { height: 100%; min-height: 0; border-top: 0; border-inline-start: 1px solid var(--mls-line); }
.mls-land .mls-body[data-mls-card].is-chat-collapsed .mls-chat { width: min(78%, 360px); }
.mls-land .mls-body[data-mls-card] .mls-chat-rail { top: 10px; inset-inline-end: 10px; }
/* الجهاز عمودي ولا يسمح بقفل الاتجاه (آيفون): ندير البطاقة نفسها. */
.mls-land-rotate .mls-body[data-mls-card] {
	inset: auto; top: 0; left: 100vw; width: 100vh; width: 100dvh; height: 100vw;
	transform-origin: left top; transform: rotate(90deg);
}
.mls-wrap .mls-land .mls-land-exit, .mls-land .mls-land-exit {
	display: grid !important; place-items: center; position: absolute; top: 10px; inset-inline-start: 10px; z-index: 10;
	width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
	background: rgba(15, 18, 26, .62) !important; color: #fff !important; backdrop-filter: blur(6px); cursor: pointer;
}
.mls-land .mls-chat-head { padding: 6px 8px; }
.mls-land .mls-chat-react { margin-bottom: 4px; }
.mls-land .mls-chat-foot { padding: 6px 8px; }
.mls-land .mls-wrap .mls-hand .mls-hand-label, .mls-land .mls-hand-label { display: none; }

/* اسم الزائر فوق خانة الكتابة (2.4.2). */
.mls-guest-name { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--mls-dim); }
.mls-guest-name span { white-space: nowrap; font-weight: 600; }
.mls-wrap .mls-guest-name input {
	flex: 1; min-width: 0; height: 32px; padding: 0 10px !important; border-radius: 9px !important;
	border: 1px solid var(--mls-line) !important; background: var(--mls-input) !important; color: var(--mls-text) !important; font-size: 13px !important;
}
.mls-wrap .mls-guest-name input:focus { outline: 0; border-color: var(--mls-accent) !important; box-shadow: 0 0 0 3px var(--mls-soft); }
.has-guest-name .mls-guest-name input { height: 26px; border-color: transparent !important; background: transparent !important; padding: 0 4px !important; font-weight: 700; color: var(--mls-text) !important; }
.mls-hands-guest { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--mls-panel); border: 1px solid var(--mls-line); color: var(--mls-dim); }

/* التفاعلات فوق الفيديو (2.4.2): ترتفع أعلى، وظل خفيف يبرزها على أي صورة. */
.mls-stage .mls-float { z-index: 6; }
.mls-stage .mls-floating { bottom: 8%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); animation-name: mls-rise-tall; }
[dir="rtl"] .mls-stage .mls-floating { left: auto; right: var(--x); }
@keyframes mls-rise-tall {
	0% { transform: translate(0, 0) scale(.6); opacity: 0; }
	12% { opacity: 1; transform: translate(calc(var(--drift) * .2), -30px) scale(1.05); }
	100% { transform: translate(var(--drift), -320px) scale(.9); opacity: 0; }
}

/* رجوع للرئيسية: سهم ثم الشعار في زر واحد (2.4.3). */
.mls-home { width: auto; padding: 0 10px 0 8px; gap: 6px; display: inline-flex; align-items: center; justify-content: center; }
[dir="rtl"] .mls-home { padding: 0 8px 0 10px; }
[dir="rtl"] .mls-home-back { transform: scaleX(-1); }
.mls-home-back { flex: 0 0 auto; color: var(--mls-dim); transition: transform .2s var(--mls-ease), color .2s; }
.mls-home:hover .mls-home-back { color: var(--mls-accent); transform: translateX(-2px); }
[dir="rtl"] .mls-home:hover .mls-home-back { transform: scaleX(-1) translateX(-2px); }
.mls-home img { width: 28px; height: 28px; }
@media (max-width: 640px) { .mls-home { height: 38px; padding: 0 8px 0 6px; } .mls-home img { width: 24px; height: 24px; } }

/* المسافات (2.4.4): الزر العائم دائرة مرتبة حين يختفي اسمه، ولا يظهر خلف الدردشة المفتوحة. */
.mls-wrap .has-chat-open > .mls-chat-rail { visibility: hidden; }
.mls-wrap .is-chat-collapsed > .mls-chat-rail { top: 12px; inset-inline-end: 12px; }
@media (max-width: 640px) {
	.mls-wrap .is-chat-collapsed > .mls-chat-rail, [dir="rtl"] .mls-wrap .is-chat-collapsed > .mls-chat-rail { width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center; gap: 0; }
	.mls-wrap .is-chat-collapsed > .mls-chat-rail .mls-rail-faces { display: none; }
	.mls-rail-n { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 20px; height: 20px; font-size: 11px; }
}
.mls-body[data-mls-card].is-chat-collapsed .mls-chat { background: var(--mls-panel); }

/* الوضع الأفقي والهاتف عمودي (2.4.4): الفيديو فوق والدردشة تملأ الباقي، بلا تدوير. */
.mls-land-portrait .mls-body[data-mls-card] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); }
.mls-land-portrait .mls-body[data-mls-card] .mls-stage { height: auto; aspect-ratio: var(--mls-ar, 16/9); max-height: 45vh; }
.mls-land-portrait .mls-body[data-mls-card] .mls-chat { position: relative; inset: auto; width: auto; height: auto; min-height: 0; transform: none; visibility: visible; border-inline-start: 0; border-top: 1px solid var(--mls-line); }
.mls-land-portrait .mls-body[data-mls-card] .mls-chat-rail, .mls-land-portrait .mls-body[data-mls-card] .mls-chat-scrim { display: none !important; }

/* Phones, own page (2.4.6): back button and tools on the first row, then the
   title with the live dot and badge right after it and the viewer count at the
   opposite end of the row, then the date. Sharing one row left the badges
   ~100px, so «Live now» and the viewer count wrapped onto two lines. */
@media (max-width: 640px) {
	.mls-page-solo .mls-head { grid-template-columns: minmax(0, max-content) auto auto minmax(0, 1fr) auto; grid-template-areas: "home home tools tools tools" "title net state . views" "sub sub sub sub sub"; gap: 10px 8px; }
	.mls-page-solo .mls-home { justify-self: start; }
	.mls-page-solo .mls-tools { justify-self: end; }
	.mls-page-solo .mls-badges { display: contents; }
	.mls-page-solo .mls-state { grid-area: state; }
	.mls-page-solo .mls-viewers { grid-area: views; justify-self: end; }
	/* The dot beside the name tells live from not live: green and pulsing while
	   the badge says live (amber if the viewer's connection is weak), grey and
	   still otherwise. */
	.mls-page-solo .mls-net { grid-area: net; width: 9px; height: 9px; background: #a3a9b3; }
	.mls-page-solo .mls-head:has(.mls-state-live) .mls-net { background: var(--mls-ok); animation: mls-live-ring 1.8s ease-out infinite; }
	.mls-page-solo .mls-head:has(.mls-state-live) .mls-net.is-bad { background: #b7791f; }
	.mls-page-solo .mls-sub { font-size: 13px; }
}

/* Wider screens (2.4.6): the same dot as phones, moved from after the viewer
   count to right after the title, grey and still when not live, green and
   pulsing while live (amber if the viewer's connection is weak). */
@media (min-width: 641px) {
	.mls-page-solo .mls-badges .mls-net { order: -1; flex: 0 0 auto; width: 9px; height: 9px; background: #a3a9b3; }
	.mls-page-solo .mls-head:has(.mls-state-live) .mls-net { background: var(--mls-ok); animation: mls-live-ring 1.8s ease-out infinite; }
	.mls-page-solo .mls-head:has(.mls-state-live) .mls-net.is-bad { background: #b7791f; }
}

@keyframes mls-live-ring {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mls-ok) 55%, transparent); }
	70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mls-ok) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .mls-page-solo .mls-net { animation: none !important; } }